phc/website
6
4
Fork 1
Code Issues 9 Pull Requests Projects 1 Releases Wiki Activity

fix: removed scss warning about nested props

Browse Source
This commit is contained in:
aziis98
2024-11-02 00:23:38 +01:00
parent d8c7b0f562
commit 3600ae60d4
5 changed files with 60 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.scss
+4 -6
View File
@@ -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
+8 -6
View File
@@ -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;
src/styles/main.scss
+23 -21
View File
@@ -1,21 +1,23 @@
$black: #222;
$border-large: 4px solid $black;
$header-bg: #fff;
$footer-bg: #444;
$footer-fg: #fdfdfd;
$homepage-principal-bg: #ecffe3;
$homepage-whatsphc-bg: #e4c5ff;
$homepage-news-bg: #c2a8eb;
$homepage-projects-bg: #f5f2cc;
$homepage-macchinisti-bg: #888;
$project-card-bg: #a2d4f3;
$screen-desktop-min: 1024px;
:root {
--palette-black: #222;
--border-large: 4px solid var(--palette-black);
--header-bg: #fff;
--footer-bg: #444;
--footer-fg: #fdfdfd;
--homepage-principal-bg: #ecffe3;
--homepage-whatsphc-bg: #e4c5ff;
--homepage-news-bg: #c2a8eb;
--homepage-projects-bg: #f5f2cc;
--homepage-macchinisti-bg: #888;
--project-card-bg: #a2d4f3;
}
@layer common, typography, component, page;
@import './mixins.scss';
@@ -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
+21 -20
View File
@@ -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;
src/styles/typography.scss
+4 -2
View File
@@ -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;
}