From 66c886967102c1219a430aa7252c5a866f837dd7 Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Fri, 18 Oct 2024 14:11:37 +0200
Subject: [PATCH] fix: some wrong widths

---
 src/styles/components.scss | 12 ++++++++++++
 src/styles/main.scss       | 10 ++++++----
 src/styles/pages.scss      | 10 +++++++++-
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/styles/components.scss b/src/styles/components.scss
index 0ac64b6..05277a0 100644
--- a/src/styles/components.scss
+++ b/src/styles/components.scss
@@ -586,6 +586,18 @@
                 text-decoration: underline solid 3px;
             }
         }
+
+        @media screen and (max-width: $screen-desktop-min) {
+            padding: 0.8rem;
+
+            &.large {
+                padding: 1.25rem;
+
+                & > .title {
+                    font-size: 32px;
+                }
+            }
+        }
     }
 
     //
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 3450dd8..ea87e54 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -44,10 +44,10 @@ $screen-desktop-min: 1024px;
         color: #222;
     }
 
-    html {
-        scroll-snap-type: y mandatory;
-        scroll-padding-top: 4rem;
-    }
+    // html {
+    //     scroll-snap-type: y mandatory;
+    //     scroll-padding-top: 4rem;
+    // }
 
     img {
         display: block;
@@ -221,6 +221,8 @@ body {
         font-family: 'Source Sans Pro', sans-serif;
         font-size: 20px;
 
+        scroll-snap-align: end;
+
         @media screen and (max-width: $screen-desktop-min) {
             min-height: 5rem;
             font-size: 18px;
diff --git a/src/styles/pages.scss b/src/styles/pages.scss
index cf656a5..d2f8ca3 100644
--- a/src/styles/pages.scss
+++ b/src/styles/pages.scss
@@ -176,7 +176,7 @@
 
             .project-list {
                 width: calc(20rem * 3 + 1.5rem * 2 + 6rem * 2);
-                max-width: 100vw;
+                max-width: calc(100vw - 2rem); // HACK: capire come si propagano le width per bene
 
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
@@ -211,6 +211,10 @@
 
                     .title {
                         font-size: 32px;
+
+                        @media screen and (max-width: $screen-desktop-min) {
+                            font-size: 24px;
+                        }
                     }
 
                     .image {
@@ -261,6 +265,10 @@
                     padding: 0 1rem;
 
                     grid-template-columns: 1fr;
+
+                    .project {
+                        padding: 0.8rem;
+                    }
                 }
             }
         }