fix: removed scss warning about nested props

src/styles/components.scss

@@ -204,7 +204,7 @@
             display: grid;
             grid-template-rows: auto auto auto;
 
-            background: var(--card-bg, $project-card-bg);
+            background: var(--card-bg, var(--project-card-bg));
             color: #000e;
 
             @include neo-brutalist-card($size: 3px, $offset: 9px);
@@ -343,6 +343,7 @@
         --timeline-thickness: 6px;
         --timeline-color: #333;
 
+        max-width: 120ch;
         grid-template-columns: 1fr var(--timeline-track-size) 1fr;
 
         @media screen and (max-width: $screen-desktop-min) {
@@ -350,22 +351,19 @@
             grid-template-columns: var(--timeline-track-size) 1fr;
         }
 
-        max-width: 120ch;
-
         & > .timeline-item {
             position: relative;
             display: grid;
 
             & > .content {
+                display: grid;
+                grid-template-columns: auto;
                 padding: 2rem 1rem;
 
                 @media screen and (max-width: $screen-desktop-min) {
                     padding: 1rem 1rem 1rem 0;
                 }
 
-                display: grid;
-                grid-template-columns: auto;
-
                 & > .title {
                     font-size: 20px;
                     font-weight: 700;

src/styles/controls.scss

@@ -29,6 +29,7 @@
             box-shadow: 2px 2px 0 0 #222;
         }
 
+        & {
             padding: 0.25rem 1.5rem;
 
             text-decoration: none;
@@ -38,6 +39,7 @@
             font-weight: 600;
 
             cursor: pointer;
+        }
 
         &.primary {
             background: #1e6733;

src/styles/main.scss

@@ -1,20 +1,22 @@
-$black: #222;
-$border-large: 4px solid $black;
+$screen-desktop-min: 1024px;
 
-$header-bg: #fff;
+:root {
+    --palette-black: #222;
+    --border-large: 4px solid var(--palette-black);
 
-$footer-bg: #444;
-$footer-fg: #fdfdfd;
+    --header-bg: #fff;
 
-$homepage-principal-bg: #ecffe3;
-$homepage-whatsphc-bg: #e4c5ff;
-$homepage-news-bg: #c2a8eb;
-$homepage-projects-bg: #f5f2cc;
-$homepage-macchinisti-bg: #888;
+    --footer-bg: #444;
+    --footer-fg: #fdfdfd;
 
-$project-card-bg: #a2d4f3;
+    --homepage-principal-bg: #ecffe3;
+    --homepage-whatsphc-bg: #e4c5ff;
+    --homepage-news-bg: #c2a8eb;
+    --homepage-projects-bg: #f5f2cc;
+    --homepage-macchinisti-bg: #888;
 
-$screen-desktop-min: 1024px;
+    --project-card-bg: #a2d4f3;
+}
 
 @layer common, typography, component, page;
 
@@ -81,8 +83,8 @@ body {
         z-index: 10;
 
         height: 6rem;
-        border-bottom: $border-large;
-        background: $header-bg;
+        border-bottom: var(--border-large);
+        background: var(--header-bg);
 
         grid-column: 1 / -1;
 
@@ -211,9 +213,9 @@ body {
         --zone-color: #aaa;
 
         min-height: 6rem;
-        border-top: $border-large;
-        background: $footer-bg;
-        color: $footer-fg;
+        border-top: var(--border-large);
+        background: var(--footer-bg);
+        color: var(--footer-fg);
 
         display: grid;
         place-content: center;

src/styles/pages.scss

@@ -31,7 +31,7 @@
             // display: flex;
             // flex-direction: column;
             // align-items: center;
-
+            & {
                 display: grid;
                 grid-auto-flow: row;
                 justify-items: center;
@@ -40,6 +40,7 @@
                 gap: 2rem;
 
                 scroll-snap-align: start;
+            }
 
             & > .title {
                 font-size: 48px;
@@ -80,7 +81,7 @@
 
             padding: 3rem 0 6rem;
 
-            background: $homepage-principal-bg;
+            background: var(--homepage-principal-bg);
 
             position: relative;
 
@@ -109,8 +110,9 @@
 
                 img {
                     width: 100%;
-                    filter: drop-shadow(6px 6px 0 $black) drop-shadow(4px 0 0 $black)
-                        drop-shadow(0 4px 0 $black) drop-shadow(-4px 0 0 $black) drop-shadow(0 -4px 0 $black);
+                    filter: drop-shadow(6px 6px 0 var(--palette-black))
+                        drop-shadow(4px 0 0 var(--palette-black)) drop-shadow(0 4px 0 var(--palette-black))
+                        drop-shadow(-4px 0 0 var(--palette-black)) drop-shadow(0 -4px 0 var(--palette-black));
                 }
             }
 
@@ -140,7 +142,7 @@
             --card-base: color-mix(in lab, var(--news-base), #fff 25%);
             --zone-color: color-mix(in lab, var(--news-base), #000 50%);
 
-            background: $homepage-news-bg;
+            background: var(--homepage-news-bg);
 
             gap: 3rem;
 
@@ -170,7 +172,7 @@
         }
 
         section.projects {
-            background: $homepage-projects-bg;
+            background: var(--homepage-projects-bg);
 
             padding-bottom: 6rem;
 
@@ -182,21 +184,20 @@
                 grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
                 grid-auto-flow: dense;
 
+                gap: 1.5rem;
+                padding: 0 6rem;
+
                 & > * {
                     grid-row: span var(--masonry-height);
                 }
 
-                gap: 1.5rem;
-
-                padding: 0 6rem;
-
                 .project {
                     width: 100%;
                     height: 100%;
 
                     // background: #fcddff;
                     // background: #ffa89c;
-                    background: var(--card-bg, $project-card-bg);
+                    background: var(--card-bg, var(--project-card-bg));
                     color: #000e;
 
                     @include neo-brutalist-card($size: 3px, $offset: 9px);
@@ -209,6 +210,8 @@
 
                     gap: 0.25rem 1rem;
 
+                    transition: all 128ms ease-out;
+
                     .title {
                         font-size: 32px;
 
@@ -253,8 +256,6 @@
                         @extend .text;
                     }
 
-                    transition: all 128ms ease-out;
-
                     &:hover {
                         transform: translate(0, -4px);
                         box-shadow: 9px 13px 0 0 #222;
@@ -274,7 +275,7 @@
         }
 
         section.wanna-be-macchinista {
-            background: $homepage-macchinisti-bg;
+            background: var(--homepage-macchinisti-bg);
             color: #fdfdfd;
 
             padding-bottom: 6rem;

src/styles/typography.scss

@@ -41,7 +41,9 @@
             text-align: center;
         }
 
+        & {
             line-height: 1.5;
+        }
 
         & > * {
             max-width: 46rem;
@@ -165,7 +167,7 @@
             }
         }
 
-        @media screen and (max-width: 1024px) {
+        @media screen and (max-width: $screen-desktop-min) {
             & > * {
                 margin: 0 0.75rem;
             }