feat: new header block

scripts/scripts.js

@@ -126,6 +126,19 @@ function decorateButtons(main) {
   }
 }
 
+/**
+ * Sets target and rel on links whose hostname differs from the current page.
+ * @param {Element} container - The element to search for links within
+ */
+export function decorateExternalLinks(container) {
+  container.querySelectorAll('a[href]').forEach((link) => {
+    if (new URL(link.href).hostname !== window.location.hostname) {
+      link.target = '_blank';
+      link.rel = 'noopener noreferrer';
+    }
+  });
+}
+
 /**
  * Decorates the main element.
  * @param {Element} main The main element
@@ -187,16 +200,17 @@ async function loadLazy(doc) {
  * Loads everything that happens a lot later,
  * without impacting the user experience.
  */
-function loadDelayed() {
+function loadDelayed(doc) {
   // eslint-disable-next-line import/no-cycle
   window.setTimeout(() => import('./delayed.js'), 3000);
   // load anything that can be postponed to the latest here
+  decorateExternalLinks(doc.querySelector('main'));
 }
 
 async function loadPage() {
   await loadEager(document);
   await loadLazy(document);
-  loadDelayed();
+  loadDelayed(document);
 }
 
 loadPage();

styles/styles.css

@@ -36,8 +36,11 @@
   --color-brand: var(--color-yellow);
   --color-brand-dark: var(--color-yellow-dark);
 
+  /* shadows */
+  --shadow-s: 0 1px 4px 0 rgb(0 0 0 / 20%);
+
   /* fonts */
-  --body-font-family: roboto, roboto-fallback, sans-serif;
+  --text-font-family: roboto, roboto-fallback, sans-serif;
   --heading-font-family: roboto-condensed, roboto-condensed-fallback, sans-serif;
 
   /* heading sizes */
@@ -73,7 +76,7 @@
   --space-xl: var(--space-800);
 
   /* layout */
-  --nav-height: 64px;
+  --nav-height: 180px;
   --site-width: 1200px;
 
   /* border radii */
@@ -82,6 +85,12 @@
   --radius-l: 16px;
 }
 
+@media (width >= 1200px) {
+  :root {
+    --nav-height: 128px;
+  }
+}
+
 /* fallback fonts */
 @font-face {
   font-family: roboto-condensed-fallback;
@@ -109,7 +118,7 @@ body {
   margin: 0;
   background-color: var(--color-bg);
   color: var(--color-text);
-  font-family: var(--body-font-family);
+  font-family: var(--text-font-family);
   font-size: var(--text-m);
   line-height: var(--lh-m);
 }
@@ -118,6 +127,10 @@ body.appear {
   display: block;
 }
 
+body[data-scroll='disabled'] {
+  overflow: hidden;
+}
+
 header {
   height: var(--nav-height);
 }
@@ -241,6 +254,26 @@ img {
   width: 100%;
 }
 
+.icon.icon-chevron img,
+.icon.icon-chevron svg {
+  transition: transform 0.2s;
+}
+
+.icon.arrow-left img,
+.icon.arrow-left svg {
+  transform: rotate(180deg);
+}
+
+.icon.chevron-left img,
+.icon.chevron-left svg {
+  transform: rotate(90deg);
+}
+
+.icon.chevron-right img,
+.icon.chevron-right svg {
+  transform: rotate(-90deg);
+}
+
 /* LINKS */
 
 a:any-link {
@@ -260,6 +293,7 @@ input,
 textarea,
 select,
 button {
+  border: 0;
   font: inherit;
 }