Fix section vertical aligment (#37)

* Fix section vertical aligment This fixes the sections' vertical scroll offset when navigating through menu anchor links. Screencast of the observed issue: https://drive.google.com/file/d/12rB1Pjm_UO2l23cSB1aGOlrpil_CWTvP/view Signed-off-by: Nick Diego Yamane <[email protected]> * Fix smaller screen sizes --------- Signed-off-by: Nick Diego Yamane <[email protected]> Co-authored-by: Manuel Rego Casasnovas <[email protected]>
Igalia · May 28, 2024 · 72e7ec9 · 72e7ec9
1 parent 2af93b9
commit 72e7ec9
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/_assets/css/style.css b/_assets/css/style.css
@@ -10,6 +10,10 @@
   --orange-background: #ff9900cc;
 }
 
+html {
+  scroll-padding-top: 5rem;
+}
+
 html, body {
   margin: 0;
   padding: 0;
@@ -55,6 +59,7 @@ nav {
   position: sticky;
   top: 0;
   z-index: 1;
+  height: 5rem;
 }
 
 nav > ul {
@@ -366,6 +371,14 @@ footer a:hover, a:focus, a:active {
 }
 
 @media (max-width: 1024px) {
+  html {
+    scroll-padding-top: 3rem;
+  }
+
+  nav {
+    height: 3rem;
+  }
+
   nav > ul {
     margin-inline: 1rem;
   }
@@ -414,6 +427,14 @@ footer a:hover, a:focus, a:active {
 }
 
 @media (max-width: 512px) {
+  html {
+    scroll-padding-top: 5.5rem;
+  }
+
+  nav {
+    height: 5.5rem;
+  }
+
   nav > ul {
     margin-inline: 0;
   }