From 3600ae60d4009a62c50228a19e4c916cb4d46269 Mon Sep 17 00:00:00 2001 From: Antonio De Lucreziis Date: Sat, 2 Nov 2024 00:23:38 +0100 Subject: [PATCH] fix: removed scss warning about nested props --- src/styles/components.scss | 10 ++++------ src/styles/controls.scss | 14 +++++++------ src/styles/main.scss | 36 +++++++++++++++++---------------- src/styles/pages.scss | 41 +++++++++++++++++++------------------- src/styles/typography.scss | 6 ++++-- 5 files changed, 56 insertions(+), 51 deletions(-) diff --git a/src/styles/components.scss b/src/styles/components.scss index a251d5f..91ef3a2 100644 --- a/src/styles/components.scss +++ b/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; diff --git a/src/styles/controls.scss b/src/styles/controls.scss index b8a3b10..b195cdf 100644 --- a/src/styles/controls.scss +++ b/src/styles/controls.scss @@ -29,15 +29,17 @@ box-shadow: 2px 2px 0 0 #222; } - padding: 0.25rem 1.5rem; + & { + padding: 0.25rem 1.5rem; - text-decoration: none; - color: #222; + text-decoration: none; + color: #222; - font-family: 'Source Sans Pro', sans-serif; - font-weight: 600; + font-family: 'Source Sans Pro', sans-serif; + font-weight: 600; - cursor: pointer; + cursor: pointer; + } &.primary { background: #1e6733; diff --git a/src/styles/main.scss b/src/styles/main.scss index ea87e54..cf45e44 100644 --- a/src/styles/main.scss +++ b/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; diff --git a/src/styles/pages.scss b/src/styles/pages.scss index c14dcfe..115de11 100644 --- a/src/styles/pages.scss +++ b/src/styles/pages.scss @@ -31,15 +31,16 @@ // display: flex; // flex-direction: column; // align-items: center; + & { + display: grid; + grid-auto-flow: row; + justify-items: center; + align-content: start; - display: grid; - grid-auto-flow: row; - justify-items: center; - align-content: start; - - gap: 2rem; + gap: 2rem; - scroll-snap-align: start; + 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; diff --git a/src/styles/typography.scss b/src/styles/typography.scss index 9fcc5cb..d6c2235 100644 --- a/src/styles/typography.scss +++ b/src/styles/typography.scss @@ -41,7 +41,9 @@ text-align: center; } - line-height: 1.5; + & { + 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; }