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;