feat(style): better font, better mosaic and better scroll

2 files changed, 11 insertions, 9 deletions

diff --git a/src/pages/index.astro b/src/pages/index.astro
index b335dec..d5b992d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -20,20 +20,20 @@ import Base from "../layout/Base.astro";
     </div>
   </header>
   <main>
-    <section class="batteur">
+    <section class="batteur" data-scroll>
       <MosaicBackground height="400">
         <img src="/batteur/old2.jpg" />
         <img src="/batteur/old3.jpg" />
         <VideoAuto src="/batteur/video/bb.webm" />
         <img src="/batteur/dark_scene.jpg" />
-        <img src="/batteur/mid_rock.jpg" />
+        <VideoAuto src="/batteur/video/balance.webm" />
         <img src="/batteur/black_and_white.jpg" />
         <img src="/batteur/old.jpg" />
-        <VideoAuto src="/batteur/video/solo.webm" />
+        <img src="/batteur/mid_rock.jpg" />
         <img src="/batteur/mid_outdoor.jpg" />
-        <VideoAuto src="/batteur/video/balance.webm" />
         <img src="/batteur/mid_rock2.jpg" />
         <img src="/batteur/recent.jpg" />
+        <VideoAuto src="/batteur/video/solo.webm" />
       </MosaicBackground>
       <div class="content">
         <div class="content__header">
@@ -60,7 +60,7 @@ import Base from "../layout/Base.astro";
 </Base>
 
 <script is:inline defer>
-  const sections = document.querySelectorAll("section");
+  const sections = document.querySelectorAll("section[data-scroll]");
   document.addEventListener("scroll", () => {
     sections.forEach((section) => {
       const rect = section.getBoundingClientRect();
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 846c239..c4220af 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1,13 +1,13 @@
 @use "reset";
 
-$background: hsl(15, 10%, 5%);
+$background: hsl(15, 20%, 5%);
 $text: hsl(0, 0%, 100%);
 
 body {
   font-size: 22px;
-  font-family: sans-serif;
   background: $background;
   color: $text;
+  font-family: "Raveo", Inter, Roboto, sans-serif;
 }
 
 h1 {
@@ -75,6 +75,8 @@ header {
   background-image: url("/home.jpg");
   background-size: cover;
   background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
 }
 
 .tags {
@@ -110,8 +112,8 @@ section {
     text-align: center;
     margin-bottom: 2rem;
 
-    &:last-child {
-      margin-bottom: 0;
+    & h2 {
+      margin-bottom: 1rem;
     }
   }
 }