From 16c8a6dd7abf9ec12e99402f5e2309c439e34c99 Mon Sep 17 00:00:00 2001 From: Antonio De Lucreziis Date: Sat, 2 Mar 2024 02:08:52 +0100 Subject: [PATCH] chore: added some scss mixins --- src/pages/index.astro | 10 +++++----- src/styles/components.scss | 22 +++++++++++++++++----- src/styles/controls.scss | 13 +++++-------- src/styles/main.scss | 28 +++++++++++++++------------- src/styles/mixins.scss | 18 ++++++++++++++++++ 5 files changed, 60 insertions(+), 31 deletions(-) create mode 100644 src/styles/mixins.scss diff --git a/src/pages/index.astro b/src/pages/index.astro index 9fe1ec7..9efa684 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -142,7 +142,7 @@ import PageLayout from '../layouts/PageLayout.astro'
Progetti
- +
@@ -154,7 +154,7 @@ import PageLayout from '../layouts/PageLayout.astro'
- +
@@ -165,7 +165,7 @@ import PageLayout from '../layouts/PageLayout.astro'
- +
@@ -177,7 +177,7 @@ import PageLayout from '../layouts/PageLayout.astro'
- +
@@ -189,7 +189,7 @@ import PageLayout from '../layouts/PageLayout.astro'
- +
diff --git a/src/styles/components.scss b/src/styles/components.scss index ebc71e9..ec665cf 100644 --- a/src/styles/components.scss +++ b/src/styles/components.scss @@ -1,3 +1,5 @@ +@import './mixins.scss'; + // // Components - for complex parts of the UI like search bars or compound buttons // @@ -11,9 +13,10 @@ } .search { - @extend .input-text; + width: 100%; + height: 2.5rem; - padding: 0; + @include neo-brutalist-card; display: grid; grid-template-columns: 1fr auto; @@ -53,6 +56,17 @@ gap: 1rem; } +// just to know for reference +.fake-masonry { + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + grid-auto-flow: dense; + + & > * { + grid-row: span var(--masonry-height); + } +} + .search-results { width: 100%; @@ -75,9 +89,7 @@ background: #fff; - border: 3px solid #222; - border-radius: 6px; - box-shadow: 4px 4px 0 0 #222; + @include neo-brutalist-card; & > .icon { grid-area: icon; diff --git a/src/styles/controls.scss b/src/styles/controls.scss index b9043bd..ceed790 100644 --- a/src/styles/controls.scss +++ b/src/styles/controls.scss @@ -1,3 +1,5 @@ +@import './mixins.scss'; + // // Controls - for things like buttons, input, select // @@ -9,9 +11,7 @@ button, background: #fff; - border: 3px solid #222; - border-radius: 6px; - box-shadow: 4px 4px 0 0 #222; + @include neo-brutalist-card; transition: all 64ms linear; @@ -51,18 +51,15 @@ button, } } -.input-text, input[type='text'] { width: 100%; height: 2.5rem; - border: 3px solid #222; - border-radius: 6px; - box-shadow: 4px 4px 0 0 #222; + @include neo-brutalist-card; padding: 0 0.25rem; &:hover { - background: #f8f8f8; + background: #fdfdfd; } } diff --git a/src/styles/main.scss b/src/styles/main.scss index f640695..0f846d4 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,4 @@ +@import './mixins.scss'; @import './typography.scss'; *, @@ -212,9 +213,7 @@ body { .whats-phc { background: #e4c5ff; - border: 4px solid #222; - border-radius: 8px; - box-shadow: 6px 6px 0 0 #222; + @include neo-brutalist-card($size: 4px, $offset: 8px); padding: 2rem; @@ -258,9 +257,7 @@ body { .news { background: #fffbeb; - border: 3px solid #222; - border-radius: 9px; - box-shadow: 9px 9px 0 0 #222; + @include neo-brutalist-card($size: 3px, $offset: 9px); display: flex; flex-direction: column; @@ -347,21 +344,25 @@ body { .project-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); - gap: 3rem; + grid-auto-flow: dense; - padding: 0 6rem; + & > * { + grid-row: span var(--masonry-height); + } + + gap: 1.5rem; - align-items: start; + padding: 0 6rem; .project { + height: 100%; + // background: #fcddff; // background: #ffa89c; background: var(--card-bg, #a2d4f3); color: #000e; - border: 3px solid #222; - border-radius: 9px; - box-shadow: 9px 9px 0 0 #222; + @include neo-brutalist-card($size: 3px, $offset: 9px); padding: 1rem; @@ -397,7 +398,8 @@ body { transition: all 128ms ease-out; &:hover { - transform: translate(0, -8px); + transform: translate(0, -4px); + box-shadow: 9px 13px 0 0 #222; } } } diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss new file mode 100644 index 0000000..bfb16e2 --- /dev/null +++ b/src/styles/mixins.scss @@ -0,0 +1,18 @@ +@mixin neo-brutalist-card($size: 3px, $offset: $size + 1, $shadow: true) { + border: $size solid #222; + border-radius: $size * 2; + + @if $shadow { + box-shadow: $offset $offset 0 0 #222; + } +} + +// homepage / project +// border: 3px solid #222; +// border-radius: 9px; +// box-shadow: 9px 9px 0 0 #222; + +// homepage / whats phc +// border: 4px solid #222; +// border-radius: 8px; +// box-shadow: 6px 6px 0 0 #222;