From 68beb762d099510d5d61667f4f82aa15e9bd334f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?William=20Herg=C3=A8s?= <william@herges.fr>
Date: Sun, 10 Aug 2025 15:03:59 +0200
Subject: feat(content): better responsiveness

---
 src/pages/index.astro |  2 +-
 src/scss/style.scss   | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7d5ef28..308f9e2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -170,7 +170,7 @@ import Base from "../layout/Base.astro";
         const rect = section.getBoundingClientRect();
         if (
           section.top + window.scrollY > window.scrollY ||
-          (rect.bottom + +window.scrollY) * 2 < window.scrollY
+          rect.bottom + +window.scrollY < window.scrollY
         )
           return;
         const content = section.querySelector(".content");
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 0ae776d..c4ea8d8 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -133,6 +133,18 @@ section[data-scroll] .content {
   max-width: 800px;
   margin: auto;
   padding: 2rem;
+  @media only screen and (max-width: $bp-mid) {
+    left: 10%;
+    right: 10%;
+    transform: translateY(-50%);
+  }
+  @media only screen and (max-width: $bp-small) {
+    width: 100%;
+    box-sizing: border-box;
+    left: 0;
+    right: 0;
+    transform: translate(0, 0);
+  }
 
   & p {
     margin-bottom: 0;
@@ -198,6 +210,9 @@ section[data-scroll] .content {
     @media only screen and (max-width: $bp-large) {
       grid-template-columns: 1fr;
     }
+    @media only screen and (max-width: $bp-tiny) {
+      padding: 2rem;
+    }
   }
   & .text {
     display: flex;
-- 
cgit v1.2.3