feat: appunti and guide prototype page styling

src/styles/components.scss

@@ -8,7 +8,7 @@ $news-accent-bg: #f8e8b1;
 //
 
 .material-symbols-outlined {
-    display: grid;
+    display: inline-grid;
     place-content: center;
 
     font-size: 24px;
@@ -26,6 +26,8 @@ $news-accent-bg: #f8e8b1;
     align-items: center;
 
     cursor: pointer;
+    
+    background: #fff;
 
     &:hover,
     &:hover input[type='text'] {
@@ -94,16 +96,23 @@ $news-accent-bg: #f8e8b1;
 
         @include neo-brutalist-card;
 
+        a {
+            display: contents;
+        }
+
         & > .icon {
             grid-area: icon;
+            display: grid;
         }
 
         & > .text {
             grid-area: text;
+            display: grid;
         }
 
         & > .right {
             grid-area: right;
+            display: grid;
         }
     }
 }
@@ -171,4 +180,54 @@ $news-accent-bg: #f8e8b1;
         align-items: end;
         justify-content: end;
     }
-}
+}
+
+.appunti-scrollable {
+    display: flex;
+    overflow-x: auto;
+
+    .appunti-list {
+        padding: 2px;
+        padding-bottom: 1rem;
+    }
+}
+
+.appunti-list {
+    display: grid;
+    grid-auto-flow: column;
+
+    gap: 3rem;
+
+    overflow-x: auto;
+
+    max-width: 100%;
+}
+
+.appunti-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    color: #444;
+
+    & > .thumbnail {
+        width: 10rem;
+        aspect-ratio: 10 / 14;
+        background: #e0e0e0;
+
+        @include neo-brutalist-card($hoverable: true);
+    }
+
+    & > .thumbnail + * {
+        font-weight: 700;
+        padding-top: 0.25rem;
+    }
+
+    & > .title,
+    & > .course,
+    & > .author,
+    & > .course-year {
+        padding-left: 0.5rem;
+        font-size: 16px;
+    }
+}

src/styles/main.scss

@@ -14,6 +14,8 @@ $homepage-macchinisti-bg: #888;
 
 $project-card-bg: #a2d4f3;
 
+$screen-desktop-min: 1024px;
+
 @import './mixins.scss';
 @import './typography.scss';
 
@@ -117,9 +119,6 @@ body {
 
     main {
         width: 100%;
-        h1 {
-            font-size: 42px;
-        }
     }
 
     footer {
@@ -377,11 +376,41 @@ body {
     }
 }
 
+.appunti {
+    main {
+        background: #fdfdf0;
+
+        justify-self: center;
+
+        display: grid;
+        grid-auto-flow: row;
+
+        justify-items: center;
+
+        padding: 3rem;
+
+        gap: 3rem;
+
+        width: 100%;
+
+        .search {
+            max-width: 80ch;
+        }
+
+        .appunti-scrollable {
+            justify-self: stretch;
+
+            &.center {
+                justify-self: center;
+            }
+        }
+    }
+}
+
 .login {
     background: #ddfaff;
 
     main {
-
         justify-self: center;
 
         display: flex;
@@ -400,6 +429,39 @@ body {
     }
 }
 
+.guide {
+    background: #f0f0f0;
+
+    &.series {
+        h1 {
+            margin-bottom: 0;
+        }
+
+        .series {
+            font-size: 20px;
+            font-weight: 700;
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+    }
+
+    main {
+        margin-top: 3rem;
+        margin-bottom: 6rem;
+
+        background: #fff;
+        max-width: calc(46rem + 2rem * 2);
+        justify-self: center;
+        padding: 3rem 2rem 2rem;
+    }
+
+    @media screen and (min-width: $screen-desktop-min) {
+        main {
+            @include neo-brutalist-card($size: 3px, $offset: 9px);
+        }
+    }
+}
+
 //
 // Misc
 //

src/styles/mixins.scss

@@ -1,8 +1,17 @@
-@mixin neo-brutalist-card($size: 3px, $offset: $size + 1, $shadow: true) {
+@mixin neo-brutalist-card($size: 3px, $offset: $size + 1, $shadow: true, $hoverable: false) {
     border: $size solid #222;
     border-radius: $size * 2;
 
     @if $shadow {
         box-shadow: $offset $offset 0 0 #222;
     }
+
+    @if $hoverable {
+        transition: all 64ms linear;
+
+        &:hover {
+            transform: translate(-1px, -1px);
+            box-shadow: $offset + 1 $offset + 1 0 0 #222;
+        }
+    }
 }

src/styles/typography.scss

@@ -1,29 +1,41 @@
-.text-content {
-    $base-font-size: 22px;
+
+@function pow($number, $exponent) {
+    $value: 1;
+
+    @if $exponent > 0 {
+        @for $i from 1 through $exponent {
+            $value: $value * $number;
+        }
+    }
+
+    @return $value;
+}
+
+@mixin geometric-headings {
+    $base-font-size: 16px;
     $heading-scale: 1.33;
 
-    @function pow($number, $exponent) {
-        $value: 1;
-
-        @if $exponent > 0 {
-            @for $i from 1 through $exponent {
-                $value: $value * $number;
-            }
-        }
-
-        @return $value;
-    }
-
     @for $i from 1 through 5 {
+        $factor: pow($heading-scale, 5 - $i);
+        
         h#{$i} {
-            $factor: pow($heading-scale, 5 - $i);
             font-size: $base-font-size * $factor;
+            font-family: 'Source Sans Pro', monospace;
+            font-weight: 400;
+            margin-bottom: 0.25rem;
+        }
+
+        p + h#{$i} {
+            margin-top: 0.5rem * $factor;
         }
     }
+}
 
+@include geometric-headings;
+
+.text-content {
     & > * {
-        max-width: 100ch;
-        margin: 0 auto;
+        max-width: 46rem;
     }
 
     pre,
@@ -32,6 +44,12 @@
 
         font-family: 'Source Code Pro', monospace;
         font-weight: 400;
+        font-size: 16px;
+    }
+
+    code {
+        border-radius: 0.25rem;
+        padding: 0.125rem;
     }
 
     pre {
@@ -39,15 +57,38 @@
 
         padding: 0.5rem;
 
-        max-width: 90ch;
+        width: 100%;
+        max-width: 80ch;
+
+        line-height: 1.5;
 
         border-radius: 0.5rem;
 
         box-shadow: 0.25rem 0.25rem 0 0 #777;
+
+        code {
+            padding: 0;
+        }
     }
 
-    code {
-        border-radius: 0.25rem;
-        padding: 0 0.125rem;
+
+    p {
+        line-height: 1.65;
+        margin: 0.5rem auto;
     }
-}
+
+    @include geometric-headings;
+
+    h1 {
+        margin-bottom: 2rem;
+        text-align: center;
+    }
+
+    padding: 2rem 0 3rem;
+
+    @media screen and (max-width: 1024px) {
+        & > * {
+            margin: 0 0.75rem;
+        }
+    }
+}