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

fix: removed scss warning about nested props

Browse Source
main
Antonio De Lucreziis 3 weeks ago
parent d8c7b0f562
commit 3600ae60d4
5 changed files with 56 additions and 51 deletions
Show Stats Download Patch File Download Diff File

10
src/styles/components.scss
Unescape Escape View File

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

2
src/styles/controls.scss
Unescape Escape View File

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

36
src/styles/main.scss
Unescape Escape View File

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

29
src/styles/pages.scss
Unescape Escape View File

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

4
src/styles/typography.scss
Unescape Escape View File

@ -41,7 +41,9 @@
text-align: center; text-align: center;
} }
& {
line-height: 1.5; line-height: 1.5;
}
& > * { & > * {
max-width: 46rem; 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; margin: 0 0.75rem;
} }

Write Preview
Loading…
Cancel
Save