diff --git a/website/content/default.nix b/website/content/default.nix
index 1509840f..079fa2de 100644
--- a/website/content/default.nix
+++ b/website/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/website/content/navigation.nix b/website/content/navigation.nix
index 6d124ada..34c5a663 100644
--- a/website/content/navigation.nix
+++ b/website/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/website/presentation/dom.nix b/website/presentation/dom.nix
index 81706fe2..ae9bd86d 100644
--- a/website/presentation/dom.nix
+++ b/website/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/website/assets/images/favicon.png b/website/presentation/favicon.png
similarity index 100%
rename from website/assets/images/favicon.png
rename to website/presentation/favicon.png
diff --git a/website/assets/images/ngi_fedi_full.svg b/website/presentation/ngi-fediversity.svg
similarity index 100%
rename from website/assets/images/ngi_fedi_full.svg
rename to website/presentation/ngi-fediversity.svg
diff --git a/website/presentation/style.css b/website/presentation/style.css
index b0e81a04..c0313790 100644
--- a/website/presentation/style.css
+++ b/website/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/website/presentation/style.nix b/website/presentation/style.nix
index c90038dd..7d786013 100644
--- a/website/presentation/style.nix
+++ b/website/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/website/presentation/templates.nix b/website/presentation/templates.nix
index 6a588596..ef8ace7b 100644
--- a/website/presentation/templates.nix
+++ b/website/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/website/structure/page.nix b/website/structure/page.nix
index 8b9cf17e..4cc64141 100644
--- a/website/structure/page.nix
+++ b/website/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; })