reworked homepage, prototype storia timeline

2024-08-03 03:15:50 +02:00
parent fb43eddefc
commit 1509984afb
8 changed files with 432 additions and 322 deletions
@@ -320,6 +320,143 @@
        // }
    }

+    .timeline {
+        display: grid;
+
+        --timeline-track-size: 6rem;
+        --timeline-thickness: 6px;
+        --timeline-color: #333;
+
+        grid-template-columns: 1fr var(--timeline-track-size) 1fr;
+
+        @media screen and (max-width: $screen-desktop-min) {
+            --timeline-track-size: 3rem;
+            grid-template-columns: var(--timeline-track-size) 1fr;
+        }
+
+        max-width: 120rch;
+
+        & > .timeline-item {
+            display: grid;
+
+            @media screen and (min-width: $screen-desktop-min) {
+                &:nth-child(odd) {
+                    grid-column: 1 / span 2;
+                    grid-template-columns: 1fr var(--timeline-track-size);
+
+                    // text-align: right;
+
+                    & > .content {
+                        grid-column: 1;
+                    }
+                }
+
+                &:nth-child(even) {
+                    grid-column: 2 / span 2;
+                    grid-template-columns: var(--timeline-track-size) 1fr;
+
+                    & > .content {
+                        grid-column: 2;
+                    }
+                }
+            }
+
+            @media screen and (max-width: $screen-desktop-min) {
+                grid-column: 1 / span 2;
+
+                grid-template-columns: var(--timeline-track-size) 1fr;
+
+                & > .content {
+                    grid-column: 2;
+                }
+            }
+
+            & > .content {
+                padding: 2rem 1rem;
+
+                @media screen and (max-width: $screen-desktop-min) {
+                    padding: 1rem 2rem 1rem 0;
+                }
+
+                display: grid;
+                grid-template-columns: auto;
+
+                & > .title {
+                    font-size: 20px;
+                    font-weight: 700;
+                }
+
+                & > .date {
+                    font-size: 32px;
+                    font-weight: 400;
+                    color: #555;
+                }
+            }
+
+            position: relative;
+
+            // timeline vertical line
+            &::before {
+                content: '';
+
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                width: var(--timeline-thickness);
+
+                background: var(--timeline-color);
+            }
+
+            &:first-child::before {
+                top: 50%;
+            }
+
+            &:last-child::before {
+                bottom: 50%;
+            }
+
+            // timeline circle
+            &::after {
+                content: '';
+
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 1rem;
+                height: 1rem;
+                border-radius: 50%;
+
+                background: var(--timeline-color);
+            }
+
+            &::before,
+            &::after {
+                grid-column: 1 / span 1;
+            }
+
+            @media screen and (min-width: $screen-desktop-min) {
+                &:nth-child(odd)::before {
+                    grid-column: 2 / span 1;
+                }
+
+                &:nth-child(even)::before {
+                    grid-column: 1 / span 1;
+                }
+
+                &:nth-child(odd)::after {
+                    grid-column: 2 / span 1;
+                }
+
+                &:nth-child(even)::after {
+                    grid-column: 1 / span 1;
+                }
+            }
+        }
+    }
+
    //
    // Cards
    //