add a desktop stylesheet

it also features a dark mode

content/default.nix

@@ -125,4 +125,25 @@ in
     });
   };
 
+  assets."index.css".path = with lib; builtins.toFile
+    "index.css"
+    ''
+      section h1, section h2, section h3
+      {
+        text-align: center;
+      }
+      section h1 {
+        font-size: 3em;
+      }
+      section h2 {
+        font-size: 2.5em;
+      }
+      section h3 {
+        font-size: 1.5em;
+      }
+      section.collection h1 {
+        font-size: 2em;
+        text-align: left;
+      }
+    '';
 }

content/navigation.nix

@@ -21,6 +21,12 @@ in
       { page = pages.grants; }
       { page = pages.news; }
       { page = pages.events; }
+      {
+        link = {
+          label = "Contact";
+          url = "mailto:mail@fediversity.eu";
+        };
+      }
     ];
   };
 }

presentation/dom.nix

@@ -327,6 +327,12 @@ let
 
           ${/* https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-http-equiv-x-ua-compatible */
           ""}<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+          <!--
+          TODO: make proper icon and preload types
+          -->
+          <link rel="icon" type="image/png" href="/favicon.png">
+          <link rel="preload" as="image" type="image/svg" href="/ngi-fediversity.svg">
+          <link rel="preload" as="style" type="text/css" href="/style.css">
 
           ${print-element' "meta" {
             name = "viewport";

presentation/style.css

@@ -1,12 +1,134 @@
+:root {
+  /* XXX: maybe use light-dark() once it's more widely supported */
+  color-scheme: light dark;
+  --highlight: rgb(255, 110, 0);
+  --background: white;
+  --text-color: black;
+  --shadow: rgba(0,0,0,0.1);
+  scrollbar-gutter: stable;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: black;
+    --text-color: #f0f0f0;
+    --shadow: rgba(255,255,255,0.2);
+  }
+}
+
 body {
   font-family: Heebo, sans-serif;
-  padding: 1em;
+  color: var(--text-color);
+  background-color: var(--background);
+  padding: 0 1em;
+}
+
+section {
   max-width: 50em;
   margin: auto;
 }
 
-h1, h2, h3, h4, h5, h6
-{
+h1, h2, h3, h4, h5, h6 {
   font-family: Signika, sans-serif;
 }
 
+h1 {
+  font-size: 2em;
+}
+
+header > nav {
+  margin: 1em;
+  font-family: Signika, sans-serif;
+}
+
+a:visited,
+a
+{
+  color: var(--highlight);
+  text-decoration: none;
+}
+
+header a:visited,
+header a
+{
+  color: var(--text-color);
+}
+
+header a {
+  text-decoration: none;
+}
+
+header a:hover,
+header span:hover
+{
+  color: var(--highlight);
+}
+
+header nav ul {
+  padding: 0;
+}
+
+header > nav ul li {
+  list-style-type: none;
+}
+
+header > nav > ul {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 60em;
+  margin: auto;
+}
+
+header > nav > ul > li:first-child a {
+  content: url('ngi-fediversity.svg');
+  display: inline-block;
+  height: 2em;
+  margin-right: 4em;
+}
+
+header > nav > ul > li:last-child > a {
+  border: 1pt solid var(--text-color);
+  padding: 0.5em 1em 0.5em 1em;
+  border-radius: 3pt;
+  margin-left: 4em;
+}
+
+header > nav > ul > li:last-child:hover > a {
+  color: var(--background);
+  background-color: var(--highlight);
+  border-color: var(--background);
+}
+
+header > nav > ul > li > span {
+  position: relative;
+  cursor: pointer;
+  /* same as nav margin to bridge the gap for hovering */
+  padding: 1em 0;
+}
+
+header > nav > ul > li > nav {
+  display: none;
+  position: absolute;
+  margin-top: 1em;
+  background: var(--background);
+  min-width: max-content;
+  padding: 0.5em;
+  box-shadow: 0 0 1em var(--shadow);
+  z-index: 1;
+}
+
+header > nav > ul > li > span:hover + nav,
+header > nav > ul > li > nav:hover {
+  display: block;
+}
+
+/* Optional: Style the dropdown items */
+header > nav > ul > li > nav ul li {
+  padding: 0.25em 0.5em;
+}
+
+/* Position the parent li relatively for absolute positioning context */
+header > nav > ul > li {
+  position: relative;
+}

presentation/style.nix

@@ -1,5 +1,8 @@
 { config, lib, pkgs, ... }: {
   config.assets."style.css".path = ./style.css;
+  config.assets."ngi-fediversity.svg".path = ./ngi-fediversity.svg;
+  # TODO: auto-generate a bunch from SVG
+  config.assets."favicon.png".path = ./favicon.png;
   config.assets."fonts.css".path = with lib; builtins.toFile "fonts.css" (join "\n" (map
     (font: ''
       @font-face {

presentation/templates.nix

@@ -33,7 +33,7 @@ in
       let
         render-item = item:
           if item ? menu then ''
-            <li>${item.menu.label}
+            <li><span>${item.menu.label}</span>
               ${lib.indent "  " (item.menu.outputs.html page)}
             </li>
           ''

structure/page.nix

@@ -60,9 +60,14 @@ in
         ];
       };
       body.content = [
-        (cfg.menus.main.outputs.html page)
+        ''
+          <header>
+            ${lib.indent "  " (cfg.menus.main.outputs.html page)}
+          </header>
+        ''
         {
           section = {
+            attrs = { };
             heading.content = page.title;
             content = [
               (cfg.templates.html.markdown { inherit (page) name body; })