Begin add MonParcours + Update css work

2023-10-10 22:59:08 +02:00 · 2023-10-10 22:59:08 +02:00 · f4dba8213d
commit f4dba8213d
parent 1e27d18cb3
21 changed files with 1499 additions and 36 deletions
--- a/style/timeline.css
+++ b/style/timeline.css
@ -0,0 +1,102 @@
+@layer components {
+    .timeline {
+        @apply w-full px-5;
+
+        & > ul {
+            @apply list-none py-5 px-0 relative w-full max-w-5xl mx-auto;
+
+            /* Draw center line */
+
+            &:before {
+                @apply top-0 bottom-0 left-0 md:left-1/2 absolute content-[""] w-2;
+                @apply bg-primary/10 dark:bg-dark_primary/10;
+                @apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
+            }
+        }
+    }
+
+    .timeline-element {
+        @apply relative flex flex-col md:flex-row justify-between;
+
+        /* Place point in center line */
+
+        &:before {
+            @apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:left-1/2 -ml-2 z-50;
+            @apply bg-primary/10 dark:bg-dark_primary/10;
+            @apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
+        }
+
+        &:nth-child(even) {
+            @apply md:flex-row-reverse;
+
+            .timeline-element__category {
+                @apply md:flex-row-reverse;
+            }
+        }
+
+        .timeline-element__info, .timeline-element__category {
+            @apply relative w-4/5 md:w-2/5 left-[10%] md:left-0;
+            @apply text-on_surface dark:text-dark_on_surface;
+        }
+
+        .timeline-element__category {
+            @apply top-5 flex md:justify-end mb-12;
+        }
+
+        .timeline-element__info {
+            & > details {
+                @apply mb-12 rounded-xl overflow-hidden relative;
+                @apply bg-primary/10 dark:bg-dark_primary/10;
+                @apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
+
+                & > summary, & > div {
+                    @apply p-5;
+                }
+
+                & > summary {
+                    @apply relative block select-none cursor-pointer outline-none p-5 pr-10 font-semibold;
+
+                    &:hover {
+                        @apply bg-primary/20 dark:bg-dark_primary/20;
+                    }
+
+                    i {
+                        @apply absolute right-5 h-full top-0 flex items-center;
+
+                        & > svg {
+                            @apply scale-125;
+                            transition: transform 300ms ease;
+                        }
+                    }
+                }
+
+                &[open] {
+                    & > summary {
+                        & > i > svg {
+                            @apply -rotate-180;
+                        }
+
+                        & ~ * {
+                            animation: toggle 0.4s ease-in-out;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @keyframes toggle {
+        0% {
+            font-size: 0;
+            opacity: 0;
+        }
+        90% {
+            font-size: 1rem;
+            opacity: 0;
+        }
+        100% {
+            font-size: 1rem;
+            opacity: 1;
+        }
+    }
+}