flatpak: Clean-up and provide website data

Website data heavily inspired from Andy Holmes' Valent website.

.github/workflows/flatpak.yml

@@ -31,15 +31,13 @@ jobs:
           curl -sSL -o flatpak-cargo-generator.py https://github.com/flatpak/flatpak-builder-tools/raw/master/cargo/flatpak-cargo-generator.py
           python3 ./flatpak-cargo-generator.py ./Cargo.lock -o cargo-sources.json
 
-      # See "Multiple Architectures" below
       - name: Setup QEMU
         if: ${{ matrix.arch == 'aarch64' }}
         id: qemu
         uses: docker/setup-qemu-action@v3
         with:
           platforms: arm64
 
-      # See "GPG Signing" below
       - name: Setup GPG
         id: gpg
         uses: crazy-max/ghaction-import-gpg@v6
@@ -64,7 +62,8 @@ jobs:
           upload-bundles: true
           upload-pages-artifact: ${{ matrix.arch == 'aarch64' }}
           upload-pages-includes: |
-            default.css
+            base.css
+            style.css
             index.html
 
   # See "Github Pages" below

base.css

@@ -0,0 +1,265 @@
+/* Author: Andy Holmes */
+
+/*
+ * Palette
+ */
+:root {
+  /* GNOME Palette: https://developer.gnome.org/hig/reference/palette.html */
+  --blue1: rgb(153,193,241);
+  --blue2: rgb(98,160,234);
+  --blue3: rgb(53,132,228);
+  --blue4: rgb(28,113,216);
+  --blue5: rgb(26,95,180);
+  --green1: rgb(143,240,164);
+  --green2: rgb(87,227,137);
+  --green3: rgb(51,209,122);
+  --green4: rgb(46,194,126);
+  --green5: rgb(38,162,105);
+  --yellow1: rgb(249,240,107);
+  --yellow2: rgb(248,228,92);
+  --yellow3: rgb(246,211,45);
+  --yellow4: rgb(245,194,17);
+  --yellow5: rgb(229,165,10);
+  --orange1: rgb(255,190,111);
+  --orange2: rgb(255,163,72);
+  --orange3: rgb(255,120,0);
+  --orange4: rgb(230,97,0);
+  --orange5: rgb(198,70,0);
+  --red1: rgb(246,97,81);
+  --red2: rgb(237,51,59);
+  --red3: rgb(224,27,36);
+  --red4: rgb(192,28,40);
+  --red5: rgb(165,29,45);
+  --purple1: rgb(220,138,221);
+  --purple2: rgb(192,97,203);
+  --purple3: rgb(145,65,172);
+  --purple4: rgb(129,61,156);
+  --purple5: rgb(97,53,131);
+  --brown1: rgb(205,171,143);
+  --brown2: rgb(181,131,90);
+  --brown3: rgb(152,106,68);
+  --brown4: rgb(134,94,60);
+  --brown5: rgb(99,69,44);
+  --light1: rgb(255,255,255);
+  --light2: rgb(246,245,244);
+  --light3: rgb(222,221,218);
+  --light4: rgb(192,191,188);
+  --light5: rgb(154,153,150);
+  --dark1: rgb(119,118,123);
+  --dark2: rgb(94,92,100);
+  --dark3: rgb(61,56,70);
+  --dark4: rgb(36,31,49);
+  --dark5: rgb(0,0,0);
+  --text: #f6f5f4;
+
+  /* Extra */
+  --dark-background: rgb(48,48,48);
+  --dark-foreground: rgb(255,255,255);
+  --dark-prelight: rgba(255,255,255,0.1);
+
+  --light-background: rgb(250,250,250);
+  --light-foreground: rgb(61,56,70);
+  --light-prelight: rgba(0,0,0,0.1);
+
+  --dim-label: color-mix(in srgb, currentColor 75%, transparent);
+  --dim-borders: color-mix(in srgb, currentColor 12.5%, transparent);
+
+  /* Defaults */
+  --borders: rgba(0,0,0,0.25);
+}
+
+/*
+ * Fonts
+ */
+html, body {
+  font-family: "Cantarell", -ui-sans-serif, "Helvetica", sans-serif;
+  font-size: 12pt;
+}
+
+pre, code, kbd {
+  font-family: "Source Code Pro", -ui-monospace, "Cascadia Code", monospace;
+  font-size: 10pt;
+}
+
+@media (max-width: 720px) {
+  html, body {
+    font-size: 10pt;
+  }
+  pre, code, kbd {
+    font-size: 9pt;
+  }
+}
+
+/*
+ * General
+ */
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  scroll-behavior: smooth;
+}
+
+h1 {
+  font-weight: normal;
+  font-size: 2rem;
+}
+
+h2 {
+  font-weight: normal;
+  font-size: 1.5rem;
+}
+
+h3 {
+  font-weight: normal;
+  font-size: 1.25rem;
+}
+
+h4 {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+kbd {
+  border-radius: 0.25em;
+  box-shadow: inset -0.1em -0.1em 0 var(--borders);
+  padding: 0.1em 0.5em;
+}
+
+/*
+ * Common Elements
+ */
+#copyright {
+}
+
+#logo {
+}
+
+/*
+ * Helper Classes
+ */
+.dim-label {
+  opacity: 0.75;
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.disabled:focus,
+.disabled:hover {
+  background-color: revert;
+}
+
+/* https://www.a11yproject.com/posts/how-to-hide-content/ */
+.visually-hidden:not(:focus):not(:active) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/*
+ * Pill Button
+ */
+a.pill {
+  display: inline-block;
+  transition: all 250ms ease-in-out;
+
+  font-weight: bold;
+  font-size: 1.125rem;
+  text-align: center;
+  text-decoration: none;
+
+  border-radius: 2em;
+  padding: 0.5em 1.5em;
+}
+
+a.pill:focus,
+a.pill:hover {
+  text-decoration: none;
+  filter: brightness(1.125);
+}
+
+/*
+ * Default Scheme
+ */
+.scheme1 {
+  background-color: var(--light1);
+  color: var(--dark3);
+}
+
+.scheme2 {
+  background-color: var(--light2);
+  color: var(--dark3);
+}
+
+.scheme3 {
+  background-color: var(--light3);
+  color: var(--dark3);
+}
+
+.scheme4 {
+  background-color: var(--light4);
+  color: var(--dark4);
+}
+
+.scheme5 {
+  background-color: var(--light5);
+  color: var(--dark5);
+}
+
+@media (prefers-color-scheme: light) {
+  .scheme1 {
+    background-color: var(--light1);
+    color: var(--dark3);
+  }
+  .scheme2 {
+    background-color: var(--light2);
+    color: var(--dark3);
+  }
+  .scheme3 {
+    background-color: var(--light3);
+    color: var(--dark3);
+  }
+  .scheme4 {
+    background-color: var(--light4);
+    color: var(--dark4);
+  }
+  .scheme5 {
+    background-color: var(--light5);
+    color: var(--dark5);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .scheme1 {
+    background-color: var(--dark1);
+    color: var(--light2);
+  }
+  .scheme2 {
+    background-color: var(--dark2);
+    color: var(--light2);
+  }
+  .scheme3 {
+    background-color: var(--dark3);
+    color: var(--light2);
+  }
+  .scheme4 {
+    background-color: var(--dark4);
+    color: var(--light3);
+  }
+  .scheme5 {
+    background-color: var(--dark5);
+    color: var(--light3);
+  }
+}
+