chore: added some scss mixins

src/pages/index.astro

@@ -142,7 +142,7 @@ import PageLayout from '../layouts/PageLayout.astro'
         <div class="title">Progetti</div>
 
         <div class="project-list">
-            <a target="_blank" href="https://git.phc.dm.unipi.it/">
+            <a target="_blank" href="https://git.phc.dm.unipi.it/" style="--masonry-height: 3;">
                 <div class="project" style="--card-bg: #272;">
                     <div class="image">
                         <div class="box"></div>
@@ -154,7 +154,7 @@ import PageLayout from '../layouts/PageLayout.astro'
                     </div>
                 </div>
             </a>
-            <a href="#">
+            <a href="#" style="--masonry-height: 2;">
                 <div class="project">
                     <div class="image">
                         <div class="box"></div>
@@ -165,7 +165,7 @@ import PageLayout from '../layouts/PageLayout.astro'
                     </div>
                 </div>
             </a>
-            <a target="_blank" href="https://lab.phc.dm.unipi.it/orario/">
+            <a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 3;">
                 <div class="project" style="--card-bg: #75ca75;">
                     <div class="image">
                         <div class="box"></div>
@@ -177,7 +177,7 @@ import PageLayout from '../layouts/PageLayout.astro'
                     </div>
                 </div>
             </a>
-            <a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/">
+            <a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/" style="--masonry-height: 2;">
                 <div class="project" style="--card-bg: #8d5fac;">
                     <div class="image">
                         <div class="box"></div>
@@ -189,7 +189,7 @@ import PageLayout from '../layouts/PageLayout.astro'
                     </div>
                 </div>
             </a>
-            <a href="#">
+            <a href="#" style="--masonry-height: 3;">
                 <div class="project">
                     <div class="image">
                         <div class="box"></div>

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;
+        @include neo-brutalist-card;
-        border-radius: 6px;
-        box-shadow: 4px 4px 0 0 #222;
 
         & > .icon {
             grid-area: icon;

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;
+    @include neo-brutalist-card;
-    border-radius: 6px;
-    box-shadow: 4px 4px 0 0 #222;
 
     transition: all 64ms linear;
 
@@ -51,18 +51,15 @@ button,
     }
 }
 
-.input-text,
 input[type='text'] {
     width: 100%;
     height: 2.5rem;
 
-    border: 3px solid #222;
+    @include neo-brutalist-card;
-    border-radius: 6px;
-    box-shadow: 4px 4px 0 0 #222;
 
     padding: 0 0.25rem;
 
     &:hover {
-        background: #f8f8f8;
+        background: #fdfdfd;
     }
 }

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;
+            @include neo-brutalist-card($size: 4px, $offset: 8px);
-            border-radius: 8px;
-            box-shadow: 6px 6px 0 0 #222;
 
             padding: 2rem;
 
@@ -258,9 +257,7 @@ body {
             .news {
                 background: #fffbeb;
 
-                border: 3px solid #222;
+                @include neo-brutalist-card($size: 3px, $offset: 9px);
-                border-radius: 9px;
-                box-shadow: 9px 9px 0 0 #222;
 
                 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;
+
+            & > * {
+                grid-row: span var(--masonry-height);
+            }
+
+            gap: 1.5rem;
 
             padding: 0 6rem;
 
-            align-items: start;
-
             .project {
+                height: 100%;
+
                 // background: #fcddff;
                 // background: #ffa89c;
                 background: var(--card-bg, #a2d4f3);
                 color: #000e;
 
-                border: 3px solid #222;
+                @include neo-brutalist-card($size: 3px, $offset: 9px);
-                border-radius: 9px;
-                box-shadow: 9px 9px 0 0 #222;
 
                 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;
                 }
             }
         }

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;