WEB-UX-001 — Keep fixed navigation from covering page content

src/components/navbar.css

@@ -1,5 +1,5 @@
 nav {
-  height: 5.5rem;
+  height: var(--site-nav-height);
   width: 100vw; /*100% of the window/browser*/
   background: var(--color-primary);
   display: grid;

src/headerClearance.test.js

@@ -0,0 +1,43 @@
+/* eslint-env jest */
+
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+const readStylesheet = (...parts) => readFileSync(join(__dirname, ...parts), 'utf8');
+
+const getRule = (stylesheet, selector) => {
+  const stylesheetWithoutComments = stylesheet.replace(/\/\*[\s\S]*?\*\//g, '');
+  const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const match = stylesheetWithoutComments.match(
+    new RegExp(`${escapedSelector}\\s*\\{([^}]*)\\}`),
+  );
+
+  return match?.[1] ?? '';
+};
+
+describe('persistent navigation clearance', () => {
+  const globalStyles = readStylesheet('index.css');
+  const navbarStyles = readStylesheet('components', 'navbar.css');
+  const homeStyles = readStylesheet('pages', 'home', 'home.css');
+
+  test('uses one shared height for the fixed navigation and main content offset', () => {
+    expect(getRule(globalStyles, ':root')).toMatch(
+      /--site-nav-height:\s*5\.5rem\s*;/,
+    );
+
+    const navigationRule = getRule(navbarStyles, 'nav');
+    expect(navigationRule).toMatch(/height:\s*var\(--site-nav-height\)\s*;/);
+    expect(navigationRule).toMatch(/position:\s*fixed\s*;/);
+    expect(navigationRule).toMatch(/top:\s*0\s*;/);
+
+    const mainRule = getRule(globalStyles, '#main-content');
+    expect(mainRule).toMatch(
+      /padding-top:\s*var\(--site-nav-height\)\s*;/,
+    );
+  });
+
+  test('does not add legacy hero offsets on top of the shared clearance', () => {
+    expect(getRule(globalStyles, '.header')).toMatch(/margin-top:\s*0\s*;/);
+    expect(getRule(homeStyles, '.main__header')).toMatch(/margin-top:\s*0\s*;/);
+  });
+});

src/index.css

@@ -51,6 +51,7 @@
 
   --container-width-lg: 80%;
   --container-width-md: 90%;
+  --site-nav-height: 5.5rem;
 
   --transition: all 500ms ease; /* make sure all transition have a constant effect*/
 }
@@ -64,6 +65,10 @@ body {
   background: var(--color-gray-600) url(./images/bg_texture.png);
 }
 
+#main-content {
+  padding-top: var(--site-nav-height);
+}
+
 .container {
   width: var(--container-width-lg);
   max-width: 1920px;
@@ -246,7 +251,7 @@ section {
 }
 
 .header {
-  margin-top: 5rem;
+  margin-top: 0;
   height: 20rem;
   overflow: hidden;
   border-bottom: 2px solid var(--color-gray-400);

src/pages/home/home.css

@@ -2,7 +2,7 @@
   width: 100vw;
   height: calc(100vh - 3.49rem);
   display: grid;
-  margin-top: 3rem;
+  margin-top: 0;
 }
 
 .main__header-container {