Skip to content

Commit 05f1fe2

Browse files
yuhattoryuhattor
committed
update learning path visual
1 parent 5a43318 commit 05f1fe2

4 files changed

Lines changed: 538 additions & 46 deletions

File tree

‎assets/scss/_custom.scss‎

Lines changed: 338 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -412,8 +412,8 @@ button.svelte-la9dd4:disabled {
412412
padding-bottom: 56.25%; /* 16:9のアスペクト比 */
413413
height: 0;
414414
overflow: hidden;
415-
border-radius: 12px;
416-
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
415+
border-radius: 2px;
416+
margin-bottom: 2rem;
417417

418418
iframe {
419419
position: absolute;
@@ -422,7 +422,7 @@ button.svelte-la9dd4:disabled {
422422
width: 100%;
423423
height: 100%;
424424
border: 0;
425-
border-radius: inherit;
425+
border-radius: 2px;
426426
}
427427
}
428428

@@ -620,4 +620,339 @@ body {
620620
}
621621

622622
body.has-notice {
623+
}
624+
625+
// Learning Path styles
626+
.learning-path-grid {
627+
display: grid;
628+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
629+
gap: 2rem;
630+
margin: 2rem 0;
631+
}
632+
633+
.learning-path-item {
634+
display: flex;
635+
align-items: flex-start;
636+
background: #fff;
637+
padding: 1.5rem;
638+
border-radius: 8px;
639+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
640+
transition: transform 0.3s ease;
641+
642+
&:hover {
643+
transform: translateY(-5px);
644+
}
645+
646+
img {
647+
width: 100px;
648+
height: 100px;
649+
object-fit: cover;
650+
border-radius: 4px;
651+
margin-right: 1.5rem;
652+
}
653+
654+
.content {
655+
flex: 1;
656+
657+
h3 {
658+
margin: 0 0 1rem;
659+
font-size: 1.25rem;
660+
color: #333;
661+
}
662+
663+
p {
664+
margin: 0;
665+
font-size: 0.95rem;
666+
color: #666;
667+
line-height: 1.5;
668+
}
669+
}
670+
}
671+
672+
// Course List styles
673+
.course-list {
674+
.course-wrapper {
675+
margin-bottom: 1rem;
676+
background: #fff;
677+
}
678+
679+
.course-item-link {
680+
display: block;
681+
text-decoration: none;
682+
color: inherit;
683+
border: none;
684+
685+
&:hover {
686+
text-decoration: none;
687+
688+
.course-item {
689+
background: #f8f9fa;
690+
}
691+
692+
.btn-link {
693+
color: darken(#0aa8a7, 10%);
694+
695+
i {
696+
transform: translateX(3px);
697+
}
698+
}
699+
}
700+
}
701+
702+
.course-item {
703+
display: flex;
704+
padding: 1.5rem 0;
705+
border-bottom: 1px solid #e5e5e5;
706+
transition: background-color 0.2s ease;
707+
}
708+
709+
.course-image {
710+
flex: 0 0 240px;
711+
margin-right: 2rem;
712+
713+
img {
714+
width: 100%;
715+
height: 135px;
716+
object-fit: cover;
717+
border-radius: 4px;
718+
}
719+
}
720+
721+
.course-content {
722+
flex: 1;
723+
724+
h3 {
725+
margin: 0 0 0.5rem;
726+
font-size: 1.25rem;
727+
color: #1c1d1f;
728+
}
729+
730+
.course-description {
731+
margin: 0 0 1rem;
732+
color: #6a6f73;
733+
font-size: 0.95rem;
734+
line-height: 1.5;
735+
}
736+
737+
.course-meta {
738+
margin-bottom: 1rem;
739+
font-size: 0.85rem;
740+
color: #6a6f73;
741+
742+
span {
743+
display: inline-block;
744+
margin-right: 1rem;
745+
746+
&:last-child {
747+
margin-right: 0;
748+
}
749+
}
750+
}
751+
}
752+
}
753+
754+
.course-expanded-content {
755+
display: none;
756+
padding: 2rem;
757+
margin: 1rem 0;
758+
background: #fff;
759+
border-radius: 8px;
760+
width: 100%;
761+
border: 0px solid #e5e5e5;
762+
763+
&.active {
764+
display: block;
765+
animation: slideDown 0.3s ease-out;
766+
}
767+
768+
.section.section-first {
769+
padding: 0;
770+
width: 100%;
771+
772+
.container {
773+
padding: 0;
774+
max-width: none;
775+
width: 100%;
776+
}
777+
778+
&.full-width {
779+
margin: 0;
780+
width: 100%;
781+
782+
.container {
783+
margin: 0;
784+
padding: 0;
785+
max-width: none;
786+
width: 100%;
787+
}
788+
789+
.row {
790+
margin: 0;
791+
width: 100%;
792+
}
793+
794+
.col, [class*="col-"] {
795+
padding: 0;
796+
}
797+
}
798+
799+
// YouTubeの動画コンテナ
800+
.video-container {
801+
position: relative;
802+
width: 100%;
803+
padding-bottom: 56.25%;
804+
margin-bottom: 2rem;
805+
border-radius: 2px;
806+
overflow: hidden;
807+
808+
iframe {
809+
position: absolute;
810+
top: 0;
811+
left: 0;
812+
width: 100%;
813+
height: 100%;
814+
border: none;
815+
border-radius: 2px;
816+
}
817+
}
818+
}
819+
}
820+
821+
@keyframes slideDown {
822+
from {
823+
opacity: 0;
824+
transform: translateY(-10px);
825+
}
826+
to {
827+
opacity: 1;
828+
transform: translateY(0);
829+
}
830+
}
831+
832+
.course-modal {
833+
display: none;
834+
position: fixed;
835+
top: 0;
836+
left: 0;
837+
right: 0;
838+
bottom: 0;
839+
background: rgba(0,0,0,0.5);
840+
z-index: 1000;
841+
842+
&.active {
843+
display: flex;
844+
align-items: center;
845+
justify-content: center;
846+
animation: fadeIn 0.2s ease-out;
847+
}
848+
849+
.course-modal-content {
850+
position: relative;
851+
width: 95%;
852+
max-width: 1200px;
853+
height: 90vh;
854+
background: #fff;
855+
border-radius: 8px;
856+
padding: 2rem;
857+
overflow-y: auto;
858+
animation: modalSlideUp 0.3s ease-out;
859+
}
860+
861+
.modal-close {
862+
position: absolute;
863+
top: 1rem;
864+
right: 1rem;
865+
background: none;
866+
border: none;
867+
font-size: 1.5rem;
868+
cursor: pointer;
869+
padding: 0.5rem;
870+
line-height: 1;
871+
z-index: 1;
872+
873+
&:hover {
874+
color: #0aa8a7;
875+
}
876+
}
877+
878+
.modal-body {
879+
.section.section-first {
880+
padding: 0;
881+
width: 100%;
882+
883+
.container {
884+
padding: 0;
885+
max-width: none;
886+
width: 100%;
887+
}
888+
889+
&.full-width {
890+
margin: 0;
891+
width: 100%;
892+
893+
.container {
894+
margin: 0;
895+
padding: 0;
896+
max-width: none;
897+
width: 100%;
898+
}
899+
900+
.row {
901+
margin: 0;
902+
width: 100%;
903+
}
904+
905+
.col, [class*="col-"] {
906+
padding: 0;
907+
}
908+
}
909+
910+
// YouTubeの動画コンテナ
911+
.video-container {
912+
position: relative;
913+
width: 100%;
914+
padding-bottom: 56.25%;
915+
margin-bottom: 2rem;
916+
border-radius: 4px;
917+
overflow: hidden;
918+
919+
iframe {
920+
position: absolute;
921+
top: 0;
922+
left: 0;
923+
width: 100%;
924+
height: 100%;
925+
border: none;
926+
border-radius: 4px;
927+
}
928+
}
929+
}
930+
}
931+
}
932+
933+
@keyframes fadeIn {
934+
from {
935+
opacity: 0;
936+
}
937+
to {
938+
opacity: 1;
939+
}
940+
}
941+
942+
@keyframes modalSlideUp {
943+
from {
944+
opacity: 0;
945+
transform: translateY(20px);
946+
}
947+
to {
948+
opacity: 1;
949+
transform: translateY(0);
950+
}
951+
}
952+
953+
@media (max-width: 767px) {
954+
.course-expanded-content,
955+
.course-modal {
956+
display: none !important;
957+
}
623958
}

0 commit comments

Comments
 (0)