merge: coding session with fra

src/styles/components.scss

@@ -13,7 +13,11 @@
         place-content: center;
 
         font-size: 24px;
-        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+        font-variation-settings:
+            'FILL' 0,
+            'wght' 300,
+            'GRAD' 0,
+            'opsz' 24;
     }
 
     .title {
@@ -334,43 +338,12 @@
             grid-template-columns: var(--timeline-track-size) 1fr;
         }
 
-        max-width: 120rch;
+        max-width: 120ch;
 
         & > .timeline-item {
+            position: relative;
             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;
 
@@ -393,8 +366,6 @@
                 }
             }
 
-            position: relative;
-
             // timeline vertical line
             &::before {
                 content: '';
@@ -454,6 +425,67 @@
                     grid-column: 1 / span 1;
                 }
             }
+
+            .dropdown {
+                @include neo-brutalist-card;
+
+                max-width: 15rem;
+                position: absolute;
+                bottom: calc(-10rem - 1px);
+                left: 50%;
+                transform: translateX(calc(-50% - var(--timeline-track-size) / 2));
+                border-top: none;
+                border-radius: 0 0 0.5rem 0.5rem;
+
+                @media screen and (max-width: $screen-desktop-min) {
+                    @include neo-brutalist-card;
+
+                    position: static;
+                    transform: none;
+                    margin-left: auto;
+                    margin-right: auto;
+                }
+            }
+            @media screen and (min-width: $screen-desktop-min) {
+                &:nth-child(odd) {
+                    grid-column: 1 / span 2;
+                    grid-template-columns: 1fr var(--timeline-track-size);
+
+                    & > .content {
+                        grid-column: 1;
+                    }
+
+                    .dropdown {
+                        left: auto;
+                        right: 50%;
+                        transform: translateX(calc(50% - var(--timeline-track-size) / 2));
+                    }
+                }
+
+                &:nth-child(even) {
+                    grid-column: 2 / span 2;
+                    grid-template-columns: var(--timeline-track-size) 1fr;
+
+                    & > .content {
+                        grid-column: 2;
+                    }
+
+                    .dropdown {
+                        left: 50%;
+                        transform: translateX(calc(-50% + var(--timeline-track-size) / 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;
+                }
+            }
         }
     }
 

src/styles/main.scss

@@ -125,6 +125,9 @@ body {
 
     footer {
         z-index: 10;
+        padding: 1rem 0;
+        --paragraph-margin: 0.5rem;
+        --zone-color: #aaa;
 
         min-height: 6rem;
         border-top: $border-large;

src/styles/pages.scss

@@ -412,7 +412,7 @@
     }
 
     .storia {
-        --card-base: #70f0a9;
+        --card-base: #e4c5ff;
 
         main {
             justify-self: center;
@@ -427,11 +427,11 @@
             // background horizontal linear gradient that is black in the center
             background: linear-gradient(
                 to right,
-                #70f0a933 0%,
-                #70f0a933 25%,
-                #70f0a999 50%,
-                #70f0a933 75%,
-                #70f0a933 100%
+                #e0ffc511 0%,
+                #e0ffc533 25%,
+                #e0ffc599 50%,
+                #e0ffc533 75%,
+                #e0ffc511 100%
             );
         }
     }

src/styles/typography.scss

@@ -84,7 +84,7 @@
 
         p {
             line-height: 1.75;
-            margin: 1rem auto;
+            margin: var(--paragraph-margin, 1rem) auto;
         }
 
         // p + p {