From 5d20abc8eb6c7ddd33c61ce2e47cc1ddda797ab4 Mon Sep 17 00:00:00 2001 From: Kerstin Humm Date: Thu, 20 Mar 2025 12:02:03 +0100 Subject: [PATCH 1/4] overview: use IBM Plex Sans as a font for now --- overview/default.nix | 16 ++++- overview/style.css | 142 ++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 154 insertions(+), 4 deletions(-) diff --git a/overview/default.nix b/overview/default.nix index 2580a75b2..047ccecc6 100644 --- a/overview/default.nix +++ b/overview/default.nix @@ -235,6 +235,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" { @@ -247,8 +260,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)) + '' diff --git a/overview/style.css b/overview/style.css index 9362760e0..bf64de88b 100644 --- a/overview/style.css +++ b/overview/style.css @@ -1,9 +1,145 @@ +/* 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; } From 116dca841d93c90d5fa08fa19b0018dcbd054999 Mon Sep 17 00:00:00 2001 From: Kerstin Humm Date: Thu, 20 Mar 2025 13:23:04 +0100 Subject: [PATCH 2/4] overview: render summary, center content --- overview/default.nix | 34 ++++++++++++++++++++++++++-------- overview/style.css | 15 +++++++++++++++ 2 files changed, 41 insertions(+), 8 deletions(-) diff --git a/overview/default.nix b/overview/default.nix index 047ccecc6..d4d3ea00a 100644 --- a/overview/default.nix +++ b/overview/default.nix @@ -163,15 +163,30 @@ let ''; }; + metadata = rec { + one = + metadata: + (optionalString (metadata ? summary) '' +

+ ${metadata.summary} +

+ '') + + (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)} +
+ ${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)} +
''; - # 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,8 +199,11 @@ let # The top-level overview for all projects index = pkgs.writeText "index.html" '' - ${heading 1 "NGIpkgs Overview"} - ${render.projects.many projects} +
+ # NGIpkgs Overview + + ${render.projects.many projects} +
Version: ${version}, Last Modified: ${lastModified}
diff --git a/overview/style.css b/overview/style.css index bf64de88b..f8a7d8666 100644 --- a/overview/style.css +++ b/overview/style.css @@ -143,3 +143,18 @@ body > section { details > summary > h2, details > summary > h3 { display: inline; } + +.page-width { + max-width: 55rem; + margin: auto; + padding: 1rem 0; +} + +/* Desktop */ +@media (min-width: 50em) { +} + +/* Smartphone */ +@media (max-width: 50em) { +} + From 3b90994eca6c84f37bc6ccab031e85d3a4cce838 Mon Sep 17 00:00:00 2001 From: Kerstin Humm Date: Thu, 20 Mar 2025 13:32:07 +0100 Subject: [PATCH 3/4] overview: bigger h1 for better emphasis --- overview/style.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/overview/style.css b/overview/style.css index f8a7d8666..449b25d77 100644 --- a/overview/style.css +++ b/overview/style.css @@ -144,6 +144,12 @@ details > summary > h2, details > summary > h3 { display: inline; } +h1 { + font-size: 4rem; + font-weight: 700; + font-style: italic; +} + .page-width { max-width: 55rem; margin: auto; @@ -156,5 +162,9 @@ details > summary > h2, details > summary > h3 { /* Smartphone */ @media (max-width: 50em) { + h1 { + font-size: 2rem; + text-align: center; + } } From 299d7bbdf2c9a421f046ca629ed13ada38f921c5 Mon Sep 17 00:00:00 2001 From: Kerstin Humm Date: Thu, 20 Mar 2025 13:38:41 +0100 Subject: [PATCH 4/4] overview: don't make h1 italic --- overview/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/overview/style.css b/overview/style.css index 449b25d77..7d0e32471 100644 --- a/overview/style.css +++ b/overview/style.css @@ -147,7 +147,6 @@ details > summary > h2, details > summary > h3 { h1 { font-size: 4rem; font-weight: 700; - font-style: italic; } .page-width {