overview: render project summary, basic styling

overview/default.nix

@@ -163,15 +163,30 @@ let
         '';
     };
 
+    metadata = rec {
+      one =
+        metadata:
+        (optionalString (metadata ? summary) ''
+          <p>
+            ${metadata.summary}
+          </p>
+        '')
+        + (optionalString (metadata ? subgrants) ''
+          ${render.subgrants.many metadata.subgrants}
+        '');
+    };
+
     projects = {
       one = name: project: ''
-        ${heading 1 name}
-        ${render.subgrants.many (project.metadata.subgrants or [ ])}
-        ${render.packages.many (pick.packages project)}
-        ${render.options.many (pick.options project)}
-        ${render.examples.many (pick.examples project)}
+        <article class="page-width">
+          ${heading 1 name}
+          ${render.metadata.one project.metadata}
+          ${render.packages.many (pick.packages project)}
+          ${render.options.many (pick.options project)}
+          ${render.examples.many (pick.examples project)}
+        </article>
       '';
-      # Many projects are renderes as links to their individual project sites
+      # Many projects are rendered as links to their individual project sites
       many =
         projects:
         concatLines (
@@ -184,6 +199,7 @@ let
 
   # The top-level overview for all projects
   index = pkgs.writeText "index.html" ''
+    <article class="page-width">
     # NGIpgks
 
     NGIpkgs is collection of software applications funded by the <a href="https://www.ngi.eu/ngi-projects/ngi-zero/">Next Generation Internet</a> initiative and packaged for <a href="https://nixos.org">NixOS</a>.
@@ -206,7 +222,7 @@ let
 
     ${render.projects.many projects}
 
-    ---
+    </article>
 
     <footer>Version: ${version}, Last Modified: ${lastModified}</footer>
   '';
@@ -255,6 +271,19 @@ let
         "$out/${path}"
     '';
 
+  fonts =
+    pkgs.runCommand "fonts"
+      {
+        nativeBuildInputs = with pkgs; [ woff2 ];
+      }
+      ''
+        mkdir -vp $out
+        cp -v ${pkgs.ibm-plex}/share/fonts/opentype/IBMPlexSans-* $out/
+        for otf in $out/*.otf; do
+          woff2_compress "$otf"
+        done
+      '';
+
 in
 pkgs.runCommand "overview"
   {
@@ -267,8 +296,9 @@ pkgs.runCommand "overview"
   }
   (
     ''
-      mkdir -v $out
+      mkdir -pv $out
       cp -v ${./style.css} $out/style.css
+      ln -s ${fonts} $out/fonts
     ''
     + (concatLines (mapAttrsToList writeHtmlCommand pages))
     + ''

overview/style.css

@@ -1,9 +1,169 @@
+/* ExtraLight */
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-ExtraLight.woff2') format('woff2'),
+         url('IBMPlexSans-ExtraLight.otf') format('opentype');
+    font-weight: 200;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-ExtraLightItalic.woff2') format('woff2'),
+         url('IBMPlexSans-ExtraLightItalic.otf') format('opentype');
+    font-weight: 200;
+    font-style: italic;
+}
+
+/* Light */
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-Light.woff2') format('woff2'),
+         url('IBMPlexSans-Light.otf') format('opentype');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-LightItalic.woff2') format('woff2'),
+         url('IBMPlexSans-LightItalic.otf') format('opentype');
+    font-weight: 300;
+    font-style: italic;
+}
+
+/* Regular */
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-Regular.woff2') format('woff2'),
+         url('IBMPlexSans-Regular.otf') format('opentype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-Italic.woff2') format('woff2'),
+         url('IBMPlexSans-Italic.otf') format('opentype');
+    font-weight: 400;
+    font-style: italic;
+}
+
+/* Medium */
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-Medium.woff2') format('woff2'),
+         url('IBMPlexSans-Medium.otf') format('opentype');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-MediumItalic.woff2') format('woff2'),
+         url('IBMPlexSans-MediumItalic.otf') format('opentype');
+    font-weight: 500;
+    font-style: italic;
+}
+
+/* SemiBold */
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-SemiBold.woff2') format('woff2'),
+         url('IBMPlexSans-SemiBold.otf') format('opentype');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
+         url('IBMPlexSans-SemiBoldItalic.otf') format('opentype');
+    font-weight: 600;
+    font-style: italic;
+}
+
+/* Bold */
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-Bold.woff2') format('woff2'),
+         url('IBMPlexSans-Bold.otf') format('opentype');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-BoldItalic.woff2') format('woff2'),
+         url('IBMPlexSans-BoldItalic.otf') format('opentype');
+    font-weight: 700;
+    font-style: italic;
+}
+
+/* Thin */
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-Thin.woff2') format('woff2'),
+         url('IBMPlexSans-Thin.otf') format('opentype');
+    font-weight: 100;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-ThinItalic.woff2') format('woff2'),
+         url('IBMPlexSans-ThinItalic.otf') format('opentype');
+    font-weight: 100;
+    font-style: italic;
+}
+
+/* Text */
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-Text.woff2') format('woff2'),
+         url('IBMPlexSans-Text.otf') format('opentype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'IBMPlexSans';
+    src: url('IBMPlexSans-TextItalic.woff2') format('woff2'),
+         url('IBMPlexSans-TextItalic.otf') format('opentype');
+    font-weight: 400;
+    font-style: italic;
+}
+
 body {
-	font-family: sans-serif;
+    font-family: "IBM Plex Sans";
 }
 body > section {
-	padding: 0.5cm 0 0.5cm 0;
+    padding: 0.5cm 0 0.5cm 0;
 }
 details > summary > h2, details > summary > h3 {
-	display: inline;
+    display: inline;
+}
+
+h1 {
+  font-size: 4rem;
+  font-weight: 700;
+}
+
+.page-width {
+  max-width: 55rem;
+  margin: auto;
+  padding: 1rem 0;
+}
+
+/* Desktop */
+@media (min-width: 50em) {
+}
+
+/* Smartphone */
+@media (max-width: 50em) {
+  h1 {
+    font-size: 2rem;
+    text-align: center;
+  }
 }
+