From 72e7ec90fac8b124f2d6090ddbd52bf072e7e7ed Mon Sep 17 00:00:00 2001
From: Nick Yamane <nick@diegoyam.com>
Date: Tue, 28 May 2024 09:42:14 -0400
Subject: [PATCH] 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 <nickdiego@igalia.com>

* Fix smaller screen sizes

---------

Signed-off-by: Nick Diego Yamane <nickdiego@igalia.com>
Co-authored-by: Manuel Rego Casasnovas <rego@igalia.com>
---
 _assets/css/style.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/_assets/css/style.css b/_assets/css/style.css
index aceb674..0a29d57 100644
--- 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;
   }