From 52e0db710a5d785b77076d153703be906c8c08ae Mon Sep 17 00:00:00 2001 From: valentin gagarin Date: Wed, 13 Nov 2024 15:24:41 +0100 Subject: [PATCH] add a desktop stylesheet it also features a dark mode --- content/default.nix | 21 +++ content/navigation.nix | 6 + presentation/dom.nix | 6 + {assets/images => presentation}/favicon.png | Bin .../ngi-fediversity.svg | 0 presentation/style.css | 128 +++++++++++++++++- presentation/style.nix | 3 + presentation/templates.nix | 2 +- structure/page.nix | 7 +- 9 files changed, 168 insertions(+), 5 deletions(-) rename {assets/images => presentation}/favicon.png (100%) rename assets/images/ngi_fedi_full.svg => presentation/ngi-fediversity.svg (100%) diff --git a/content/default.nix b/content/default.nix index 1509840f..079fa2de 100644 --- a/content/default.nix +++ b/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; + } + ''; } diff --git a/content/navigation.nix b/content/navigation.nix index 6d124ada..34c5a663 100644 --- a/content/navigation.nix +++ b/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"; + }; + } ]; }; } diff --git a/presentation/dom.nix b/presentation/dom.nix index 81706fe2..ae9bd86d 100644 --- a/presentation/dom.nix +++ b/presentation/dom.nix @@ -327,6 +327,12 @@ let ${/* https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-http-equiv-x-ua-compatible */ ""} + + + + ${print-element' "meta" { name = "viewport"; diff --git a/assets/images/favicon.png b/presentation/favicon.png similarity index 100% rename from assets/images/favicon.png rename to presentation/favicon.png diff --git a/assets/images/ngi_fedi_full.svg b/presentation/ngi-fediversity.svg similarity index 100% rename from assets/images/ngi_fedi_full.svg rename to presentation/ngi-fediversity.svg diff --git a/presentation/style.css b/presentation/style.css index b0e81a04..c0313790 100644 --- a/presentation/style.css +++ b/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; +} diff --git a/presentation/style.nix b/presentation/style.nix index c90038dd..7d786013 100644 --- a/presentation/style.nix +++ b/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 { diff --git a/presentation/templates.nix b/presentation/templates.nix index 6a588596..ef8ace7b 100644 --- a/presentation/templates.nix +++ b/presentation/templates.nix @@ -33,7 +33,7 @@ in let render-item = item: if item ? menu then '' -
  • ${item.menu.label} +
  • ${item.menu.label} ${lib.indent " " (item.menu.outputs.html page)}
    • '' diff --git a/structure/page.nix b/structure/page.nix index 8b9cf17e..4cc64141 100644 --- a/structure/page.nix +++ b/structure/page.nix @@ -60,9 +60,14 @@ in ]; }; body.content = [ - (cfg.menus.main.outputs.html page) + '' +
    + ${lib.indent " " (cfg.menus.main.outputs.html page)} +
    + '' { section = { + attrs = { }; heading.content = page.title; content = [ (cfg.templates.html.markdown { inherit (page) name body; })