init by example.zip from c3ioc.de/about.html

LICENSES.md

@@ -0,0 +1,9 @@
+The code (HTML, JavaScript, SCSS) is licensed as [CC0](https://creativecommons.org/publicdomain/zero/1.0/legalcode)
+
+The font Ubuntu is licensed as [Ubuntu font licence](https://ubuntu.com/legal/font-licence)
+
+The font Open Dyslexic is licensed as [SIL Open Font License 1.1](https://github.com/antijingoist/opendyslexic/blob/master/OFL.txt)
+
+The font Atkinson Hyperlegible is licensed as [Atkinson Hyperlegible Font License](ttps://www.brailleinstitute.org/wp-content/uploads/2020/11/Atkinson-Hyperlegible-Font-License-2020-1104.pdf)
+
+We aren’t sure about the license of Sylexiad Sans since the author didn’t publish a license and didn’t answer our request. We git it from there: https://www.sylexiad.com

static/css/README.md

@@ -0,0 +1,2 @@
+# How to edit styles
+Do not edit css files directly. Always make your changes in the scss files and then compile them to css.

static/css/partials/_css-notice.scss

@@ -0,0 +1,10 @@
+/**
+  *
+  * DO NOT MODIFY THE CSS FILE DIRECTLY. The CSS is generated from the SCSS file. Make
+  * all changes in the SCSS files and then regenerate this CSS file. All changes made
+  * this CSS file will be lost.
+  *
+  * To regenerate the CSS file install Sass and then run:
+  * sass style.scss style.css
+  *
+  */

static/css/partials/_font-code.scss

@@ -0,0 +1,69 @@
+/* Fonts */
+.font-Ubuntu {
+  font-family: "Ubuntu Regular", sans-serif;
+  font-size: 14pt;
+  h1 {
+    font-family: "Ubuntu-Bold";
+  }
+  h2,
+  .lang {
+    font-family: "Ubuntu-Medium";
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .font-Ubuntu {
+    font-family: "Ubuntu-Medium";
+    h1 {
+      font-family: "Ubuntu-Light";
+    }
+    h2,
+    .lang {
+      font-family: "Ubuntu Regular";
+    }
+  }
+}
+
+.font-SylexiadSans {
+  font-family: SylexiadSansMedium, sans-serif;
+  font-size: 16.8pt;
+  h2,
+  .lang {
+    font-family: SylexiadSansMedium-Bold, sans-serif;
+  }
+}
+
+.font-AtkinsonHyperlegible {
+  font-family: AtkinsonHyperlegible-Regular, sans-serif;
+  font-size: 15.2pt;
+  h2,
+  .lang {
+    font-family: AtkinsonHyperlegible-Bold, sans-serif;
+  }
+}
+
+.font-OpenDyslexicThree {
+  font-family: OpenDyslexicThree-Regular, sans-serif;
+  font-size: 12.4pt;
+  h2,
+  .lang {
+    font-family: OpenDyslexicThree-Bold, sans-serif;
+  }
+}
+
+.font-serif {
+  font-family:  serif;
+  h2,
+  .lang {
+    font-family:  serif;
+    font-weight: bold;
+  }
+}
+
+.font-sans {
+  font-family:  sans-serif;
+  h2,
+  .lang {
+    font-family:  sans-serif;
+    font-weight: bold;
+  }
+}

static/css/partials/_font-faces.scss

@@ -0,0 +1,164 @@
+/* font converted using font-converter.net. thank you! */
+@font-face {
+  font-family: "SylexiadSansMedium-Bold";
+  src: url("../fonts/SylexiadSansMedium-Bold.eot"); /* IE9 Compat Modes */
+  src: url("../fonts/SylexiadSansMedium-Bold.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/SylexiadSansMedium-Bold.otf") format("opentype"),
+    /* Open Type Font */ url("../fonts/SylexiadSansMedium-Bold.svg")
+      format("svg"),
+    /* Legacy iOS */ url("../fonts/SylexiadSansMedium-Bold.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/SylexiadSansMedium-Bold.woff")
+      format("woff"),
+    /* Modern Browsers */ url("../fonts/SylexiadSansMedium-Bold.woff2")
+      format("woff2"); /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SylexiadSansMedium";
+  src: url("../fonts/SylexiadSansMedium.eot"); /* IE9 Compat Modes */
+  src: url("../fonts/SylexiadSansMedium.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/SylexiadSansMedium.otf") format("opentype"),
+    /* Open Type Font */ url("../fonts/SylexiadSansMedium.svg") format("svg"),
+    /* Legacy iOS */ url("../fonts/SylexiadSansMedium.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/SylexiadSansMedium.woff")
+      format("woff"),
+    /* Modern Browsers */ url("../fonts/SylexiadSansMedium.woff2")
+      format("woff2"); /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "AtkinsonHyperlegible-Bold";
+  src: url("../fonts/Atkinson-Hyperlegible-Bold.eot"); /* IE9 Compat Modes */
+  src: url("../fonts/Atkinson-Hyperlegible-Bold.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/Atkinson-Hyperlegible-Bold.otf")
+      format("opentype"),
+    /* Open Type Font */ url("../fonts/Atkinson-Hyperlegible-Bold.svg")
+      format("svg"),
+    /* Legacy iOS */ url("../fonts/Atkinson-Hyperlegible-Bold.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/Atkinson-Hyperlegible-Bold.woff")
+      format("woff"),
+    /* Modern Browsers */ url("../fonts/Atkinson-Hyperlegible-Bold.woff2")
+      format("woff2"); /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "AtkinsonHyperlegible-Regular";
+  src: url("../fonts/Atkinson-Hyperlegible-Regular.eot"); /* IE9 Compat Modes */
+  src: url("../fonts/Atkinson-Hyperlegible-Regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/Atkinson-Hyperlegible-Regular.otf")
+      format("opentype"),
+    /* Open Type Font */ url("../fonts/Atkinson-Hyperlegible-Regular.svg")
+      format("svg"),
+    /* Legacy iOS */ url("../fonts/Atkinson-Hyperlegible-Regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/Atkinson-Hyperlegible-Regular.woff")
+      format("woff"),
+    /* Modern Browsers */ url("../fonts/Atkinson-Hyperlegible-Regular.woff2")
+      format("woff2"); /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "OpenDyslexicThree-Bold";
+  src: url("../fonts/OpenDyslexic3-Bold.eot"); /* IE9 Compat Modes */
+  src: url("../fonts/OpenDyslexic3-Bold.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/OpenDyslexic3-Bold.otf") format("opentype"),
+    /* Open Type Font */ url("../fonts/OpenDyslexic3-Bold.svg") format("svg"),
+    /* Legacy iOS */ url("../fonts/OpenDyslexic3-Bold.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/OpenDyslexic3-Bold.woff")
+      format("woff"),
+    /* Modern Browsers */ url("../fonts/OpenDyslexic3-Bold.woff2")
+      format("woff2"); /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "OpenDyslexicThree-Regular";
+  src: url("../fonts/OpenDyslexic3-Regular.eot"); /* IE9 Compat Modes */
+  src: url("../fonts/OpenDyslexic3-Regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/OpenDyslexic3-Regular.otf") format("opentype"),
+    /* Open Type Font */ url("../fonts/OpenDyslexic3-Regular.svg") format("svg"),
+    /* Legacy iOS */ url("../fonts/OpenDyslexic3-Regular.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/OpenDyslexic3-Regular.woff")
+      format("woff"),
+    /* Modern Browsers */ url("../fonts/OpenDyslexic3-Regular.woff2")
+      format("woff2"); /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Ubuntu Regular";
+  src: url("../fonts/Ubuntu-R.eot"); /* IE9 Compat Modes */
+  src: url("../fonts/Ubuntu-R.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/Ubuntu-R.otf") format("opentype"),
+    /* Open Type Font */ url("../fonts/Ubuntu-R.svg") format("svg"),
+    /* Legacy iOS */ url("../fonts/Ubuntu-R.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/Ubuntu-R.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/Ubuntu-R.woff2") format("woff2"); /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Ubuntu-Light";
+  src: url("../fonts/Ubuntu-L.eot"); /* IE9 Compat Modes */
+  src: url("../fonts/Ubuntu-L.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/Ubuntu-L.otf") format("opentype"),
+    /* Open Type Font */ url("../fonts/Ubuntu-L.svg") format("svg"),
+    /* Legacy iOS */ url("../fonts/Ubuntu-L.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/Ubuntu-L.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/Ubuntu-L.woff2") format("woff2"); /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Ubuntu-Medium";
+  src: url("../fonts/Ubuntu-M.eot"); /* IE9 Compat Modes */
+  src: url("../fonts/Ubuntu-M.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/Ubuntu-M.otf") format("opentype"),
+    /* Open Type Font */ url("../fonts/Ubuntu-M.svg") format("svg"),
+    /* Legacy iOS */ url("../fonts/Ubuntu-M.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/Ubuntu-M.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/Ubuntu-M.woff2") format("woff2"); /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Ubuntu-Bold";
+  src: url("../fonts/Ubuntu-B.eot"); /* IE9 Compat Modes */
+  src: url("../fonts/Ubuntu-B.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/Ubuntu-B.otf") format("opentype"),
+    /* Open Type Font */ url("../fonts/Ubuntu-B.svg") format("svg"),
+    /* Legacy iOS */ url("../fonts/Ubuntu-B.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/Ubuntu-B.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/Ubuntu-B.woff2") format("woff2"); /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}

static/css/style.css

@@ -0,0 +1,463 @@
+/**
+  *
+  * DO NOT MODIFY THE CSS FILE DIRECTLY. The CSS is generated from the SCSS file. Make
+  * all changes in the SCSS files and then regenerate this CSS file. All changes made
+  * this CSS file will be lost.
+  *
+  * To regenerate the CSS file install Sass and then run:
+  * sass style.scss style.css
+  *
+  */
+/* font converted using font-converter.net. thank you! */
+@font-face {
+  font-family: "SylexiadSansMedium-Bold";
+  src: url("../fonts/SylexiadSansMedium-Bold.eot");
+  /* IE9 Compat Modes */
+  src: url("../fonts/SylexiadSansMedium-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/SylexiadSansMedium-Bold.otf") format("opentype"), url("../fonts/SylexiadSansMedium-Bold.svg") format("svg"), url("../fonts/SylexiadSansMedium-Bold.ttf") format("truetype"), url("../fonts/SylexiadSansMedium-Bold.woff") format("woff"), url("../fonts/SylexiadSansMedium-Bold.woff2") format("woff2");
+  /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SylexiadSansMedium";
+  src: url("../fonts/SylexiadSansMedium.eot");
+  /* IE9 Compat Modes */
+  src: url("../fonts/SylexiadSansMedium.eot?#iefix") format("embedded-opentype"), url("../fonts/SylexiadSansMedium.otf") format("opentype"), url("../fonts/SylexiadSansMedium.svg") format("svg"), url("../fonts/SylexiadSansMedium.ttf") format("truetype"), url("../fonts/SylexiadSansMedium.woff") format("woff"), url("../fonts/SylexiadSansMedium.woff2") format("woff2");
+  /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "AtkinsonHyperlegible-Bold";
+  src: url("../fonts/Atkinson-Hyperlegible-Bold.eot");
+  /* IE9 Compat Modes */
+  src: url("../fonts/Atkinson-Hyperlegible-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Atkinson-Hyperlegible-Bold.otf") format("opentype"), url("../fonts/Atkinson-Hyperlegible-Bold.svg") format("svg"), url("../fonts/Atkinson-Hyperlegible-Bold.ttf") format("truetype"), url("../fonts/Atkinson-Hyperlegible-Bold.woff") format("woff"), url("../fonts/Atkinson-Hyperlegible-Bold.woff2") format("woff2");
+  /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "AtkinsonHyperlegible-Regular";
+  src: url("../fonts/Atkinson-Hyperlegible-Regular.eot");
+  /* IE9 Compat Modes */
+  src: url("../fonts/Atkinson-Hyperlegible-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Atkinson-Hyperlegible-Regular.otf") format("opentype"), url("../fonts/Atkinson-Hyperlegible-Regular.svg") format("svg"), url("../fonts/Atkinson-Hyperlegible-Regular.ttf") format("truetype"), url("../fonts/Atkinson-Hyperlegible-Regular.woff") format("woff"), url("../fonts/Atkinson-Hyperlegible-Regular.woff2") format("woff2");
+  /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "OpenDyslexicThree-Bold";
+  src: url("../fonts/OpenDyslexic3-Bold.eot");
+  /* IE9 Compat Modes */
+  src: url("../fonts/OpenDyslexic3-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenDyslexic3-Bold.otf") format("opentype"), url("../fonts/OpenDyslexic3-Bold.svg") format("svg"), url("../fonts/OpenDyslexic3-Bold.ttf") format("truetype"), url("../fonts/OpenDyslexic3-Bold.woff") format("woff"), url("../fonts/OpenDyslexic3-Bold.woff2") format("woff2");
+  /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "OpenDyslexicThree-Regular";
+  src: url("../fonts/OpenDyslexic3-Regular.eot");
+  /* IE9 Compat Modes */
+  src: url("../fonts/OpenDyslexic3-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenDyslexic3-Regular.otf") format("opentype"), url("../fonts/OpenDyslexic3-Regular.svg") format("svg"), url("../fonts/OpenDyslexic3-Regular.ttf") format("truetype"), url("../fonts/OpenDyslexic3-Regular.woff") format("woff"), url("../fonts/OpenDyslexic3-Regular.woff2") format("woff2");
+  /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Ubuntu Regular";
+  src: url("../fonts/Ubuntu-R.eot");
+  /* IE9 Compat Modes */
+  src: url("../fonts/Ubuntu-R.eot?#iefix") format("embedded-opentype"), url("../fonts/Ubuntu-R.otf") format("opentype"), url("../fonts/Ubuntu-R.svg") format("svg"), url("../fonts/Ubuntu-R.ttf") format("truetype"), url("../fonts/Ubuntu-R.woff") format("woff"), url("../fonts/Ubuntu-R.woff2") format("woff2");
+  /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Ubuntu-Light";
+  src: url("../fonts/Ubuntu-L.eot");
+  /* IE9 Compat Modes */
+  src: url("../fonts/Ubuntu-L.eot?#iefix") format("embedded-opentype"), url("../fonts/Ubuntu-L.otf") format("opentype"), url("../fonts/Ubuntu-L.svg") format("svg"), url("../fonts/Ubuntu-L.ttf") format("truetype"), url("../fonts/Ubuntu-L.woff") format("woff"), url("../fonts/Ubuntu-L.woff2") format("woff2");
+  /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Ubuntu-Medium";
+  src: url("../fonts/Ubuntu-M.eot");
+  /* IE9 Compat Modes */
+  src: url("../fonts/Ubuntu-M.eot?#iefix") format("embedded-opentype"), url("../fonts/Ubuntu-M.otf") format("opentype"), url("../fonts/Ubuntu-M.svg") format("svg"), url("../fonts/Ubuntu-M.ttf") format("truetype"), url("../fonts/Ubuntu-M.woff") format("woff"), url("../fonts/Ubuntu-M.woff2") format("woff2");
+  /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Ubuntu-Bold";
+  src: url("../fonts/Ubuntu-B.eot");
+  /* IE9 Compat Modes */
+  src: url("../fonts/Ubuntu-B.eot?#iefix") format("embedded-opentype"), url("../fonts/Ubuntu-B.otf") format("opentype"), url("../fonts/Ubuntu-B.svg") format("svg"), url("../fonts/Ubuntu-B.ttf") format("truetype"), url("../fonts/Ubuntu-B.woff") format("woff"), url("../fonts/Ubuntu-B.woff2") format("woff2");
+  /* Modern Browsers */
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+/* Fonts */
+.font-Ubuntu {
+  font-family: "Ubuntu Regular", sans-serif;
+  font-size: 14pt;
+}
+.font-Ubuntu h1 {
+  font-family: "Ubuntu-Bold";
+}
+.font-Ubuntu h2,
+.font-Ubuntu .lang {
+  font-family: "Ubuntu-Medium";
+}
+
+@media (prefers-color-scheme: dark) {
+  .font-Ubuntu {
+    font-family: "Ubuntu-Medium";
+  }
+  .font-Ubuntu h1 {
+    font-family: "Ubuntu-Light";
+  }
+  .font-Ubuntu h2,
+.font-Ubuntu .lang {
+    font-family: "Ubuntu Regular";
+  }
+}
+.font-SylexiadSans {
+  font-family: SylexiadSansMedium, sans-serif;
+  font-size: 16.8pt;
+}
+.font-SylexiadSans h2,
+.font-SylexiadSans .lang {
+  font-family: SylexiadSansMedium-Bold, sans-serif;
+}
+
+.font-AtkinsonHyperlegible {
+  font-family: AtkinsonHyperlegible-Regular, sans-serif;
+  font-size: 15.2pt;
+}
+.font-AtkinsonHyperlegible h2,
+.font-AtkinsonHyperlegible .lang {
+  font-family: AtkinsonHyperlegible-Bold, sans-serif;
+}
+
+.font-OpenDyslexicThree {
+  font-family: OpenDyslexicThree-Regular, sans-serif;
+  font-size: 12.4pt;
+}
+.font-OpenDyslexicThree h2,
+.font-OpenDyslexicThree .lang {
+  font-family: OpenDyslexicThree-Bold, sans-serif;
+}
+
+.font-serif {
+  font-family: serif;
+}
+.font-serif h2,
+.font-serif .lang {
+  font-family: serif;
+  font-weight: bold;
+}
+
+.font-sans {
+  font-family: sans-serif;
+}
+.font-sans h2,
+.font-sans .lang {
+  font-family: sans-serif;
+  font-weight: bold;
+}
+
+body {
+  font-size: 13pt;
+  line-height: 1.5em;
+  margin: 0 auto;
+  background: #efefef;
+  color: #333333;
+}
+
+:root {
+  color-scheme: light dark;
+}
+
+a {
+  text-decoration: none;
+  color: #763bff;
+}
+
+a:hover,
+a:focus {
+  color: #5f0096;
+}
+
+header {
+  position: relative;
+  padding: 1.5em 1em;
+}
+
+main {
+  /* wraps the German and English version*/
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+main > * {
+  margin: 0 1em;
+  flex-basis: 25rem;
+  flex-grow: 1;
+}
+
+h1 {
+  display: inline-block;
+  background: linear-gradient(to right, #c31fba, #6600ea);
+  padding: 0.4em;
+  border-top-left-radius: 0.75em;
+  border-bottom-right-radius: 0.75em;
+  color: white;
+  line-height: 1em;
+}
+
+h2 {
+  color: #bf1eb7;
+}
+
+ul {
+  background: #e2e2e2;
+  border-width: 3px 0 0 0;
+  border-style: solid;
+  -o-border-image: linear-gradient(to right, #c31fba, #6600ea) 100% 1;
+  border-image: linear-gradient(to right, #c31fba, #6600ea) 100% 1;
+}
+
+footer {
+  background-color: #e2e2e2;
+  text-align: center;
+  padding: 1em;
+}
+
+.lang {
+  font-size: 1.2em;
+}
+
+.skiplink {
+  position: absolute;
+  bottom: -2em;
+  right: 1em;
+}
+
+/* Utility classes */
+.display-none {
+  display: none;
+}
+
+.js {
+  display: none;
+}
+
+/* Choosing fonts via JS */
+#accessibility-options button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: inherit;
+  color: #efefef;
+  background-color: #6600ea;
+  border: 0;
+  border-bottom-left-radius: 1em;
+  font-weight: bold;
+  margin: 0;
+  padding: 0.4em 0.6em;
+}
+#accessibility-options button:hover {
+  background-color: #5b00d2;
+  cursor: pointer;
+}
+#accessibility-options button:focus {
+  outline: none;
+}
+
+#font-selection {
+  color: #333333;
+  background: #efefef;
+  border-radius: 15px;
+  border: 1px solid #6600ea;
+}
+#font-selection ul {
+  -moz-columns: 3 150pt;
+  columns: 3 150pt;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: #efefef;
+}
+#font-selection li {
+  min-width: 13em;
+  list-style: none;
+  line-height: 0;
+  height: 22pt;
+  display: block;
+}
+#font-selection legend {
+  width: auto;
+  color: inherit;
+  padding: 0.2rem 0.7rem;
+  background-color: inherit;
+  border: 1px solid #6600ea;
+  border-radius: 15px;
+}
+#font-selection label:hover {
+  cursor: pointer;
+}
+#font-selection input[type=radio] {
+  margin-right: 5pt;
+}
+
+/* Choosing fonts via CSS (no-JS fallback)*/
+#toggle:checked ~ .fontchange {
+  font-family: OpenDyslexicThree-Regular;
+}
+#toggle:checked ~ .fontchange .lang {
+  font-family: OpenDyslexicThree-Bold;
+}
+#toggle:checked ~ .fontchange h2 {
+  font-family: OpenDyslexicThree-Bold;
+}
+
+/* Media queries */
+@media only screen and (min-width: 50em) {
+  body {
+    max-width: 900pt;
+  }
+
+  main > * {
+    flex-basis: 20rem;
+  }
+
+  header {
+    background-size: 100%;
+  }
+
+  .skiplink {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+    width: 0;
+    height: 0;
+    font-size: 0;
+    line-height: 0;
+  }
+
+  #accessibility-options {
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: inherit;
+    color: #efefef;
+    background-color: #6600ea;
+    border: 0;
+    border-bottom-left-radius: 1.5em;
+    font-weight: bold;
+    padding: 0 0 0 0.5em;
+  }
+
+  #font-selection {
+    margin: auto;
+    color: #efefef;
+    background-color: #6600ea;
+  }
+  #font-selection legend {
+    border: 0;
+    padding-top: 2em;
+    padding-left: 0;
+    margin-left: 0;
+  }
+  #font-selection ul {
+    -moz-columns: 1;
+    columns: 1;
+    color: #efefef;
+    background-color: #6600ea;
+    margin: 0;
+  }
+  #font-selection li:hover {
+    background-color: #5b00d2;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #040012;
+    color: #ccc;
+  }
+
+  a {
+    text-decoration: none;
+    color: #2ea0ff;
+  }
+
+  a:hover,
+a:focus {
+    color: #b162f4;
+  }
+
+  h1 {
+    color: black;
+  }
+
+  h2 {
+    color: #e20cef;
+  }
+
+  ul {
+    background: black;
+  }
+
+  #accessibility-options button {
+    color: black;
+  }
+
+  #accessibility-options button:hover {
+    background-color: #8432ee;
+  }
+
+  #font-selection {
+    color: #ccc;
+    background: #040012;
+  }
+  #font-selection ul {
+    background: #040012;
+  }
+  #font-selection legend {
+    border: 1px solid #6600ea;
+  }
+
+  footer {
+    background: black;
+  }
+}
+@media (prefers-color-scheme: dark) and (min-width: 50em) {
+  #font-selection {
+    color: black;
+    background: #6600ea;
+  }
+  #font-selection ul {
+    color: black;
+    background: #6600ea;
+  }
+  #font-selection li:hover {
+    background-color: #8432ee;
+  }
+}
+
+/*# sourceMappingURL=style.css.map */

static/css/style.scss

@@ -0,0 +1,286 @@
+@use 'partials/_css-notice';
+@use 'partials/_font-faces';
+@use 'partials/_font-code';
+
+$bg_light: #efefef;
+$bg_light_2: #e2e2e2;
+$color_light: #333333;
+$a_light: #763bff;
+$a_hover_light: #5f0096;
+$secondary_light: #c31fba;
+$tertiary_light: #6600ea;
+$light_h2: #bf1eb7;
+$menu_hover_light: #5b00d2;
+
+$bg_dark: #040012;
+$gb_dark_2: black;
+$color_dark: #ccc;
+$a_dark: #2ea0ff;
+$a_hover_dark: #b162f4;
+$dark_h2: #e20cef;
+$menu_hover_dark: #8432ee;
+$tertiary_dark: #6600ea;
+
+body {
+  font-size: 13pt;
+  line-height: 1.5em;
+  margin: 0 auto;
+  background: $bg_light;
+  color: $color_light;
+}
+
+:root {
+  color-scheme: light dark;
+}
+
+a {
+  text-decoration: none;
+  color: $a_light;
+}
+a:hover,
+a:focus {
+  color: $a_hover_light;
+}
+
+header {
+  position: relative;
+  padding: 1.5em 1em;
+}
+
+main { /* wraps the German and English version*/
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+main > * {
+  margin: 0 1em;
+  flex-basis: 25rem;
+  flex-grow: 1;
+}
+
+h1 {
+  display: inline-block;
+  background: linear-gradient(to right, $secondary_light, $tertiary_light);
+  padding: 0.4em;
+  border-top-left-radius: 0.75em;
+  border-bottom-right-radius: 0.75em;
+  color: white;
+  line-height: 1em;
+}
+h2 {
+  color: $light_h2;
+}
+ul {
+  background: $bg_light_2;
+  border-width: 3px 0 0 0;
+  border-style: solid;
+  -o-border-image: linear-gradient(to right, $secondary_light, $tertiary_light) 100% 1;
+  border-image: linear-gradient(to right, $secondary_light, $tertiary_light) 100% 1;
+}
+
+footer {
+  background-color: $bg_light_2;
+  text-align: center;
+  padding: 1em;
+}
+.lang {
+  font-size: 1.2em;
+}
+.skiplink {
+  position: absolute;
+  bottom: -2em;
+  right: 1em;
+}
+/* Utility classes */
+.display-none {
+  display: none;
+}
+.js {
+  display: none;
+}
+
+/* Choosing fonts via JS */
+#accessibility-options {
+  button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: inherit;
+    color: $bg_light;
+    background-color: $tertiary_light;
+    border: 0;
+    border-bottom-left-radius: 1em;
+    font-weight: bold;
+    margin: 0;
+    padding: 0.4em 0.6em;
+  }
+  button:hover {
+    background-color: $menu_hover_light;
+    cursor: pointer;
+  }
+  button:focus {
+    outline: none;
+  }
+}
+#font-selection {
+  color: $color_light;
+  background: $bg_light;
+  border-radius: 15px;
+  border: 1px solid $tertiary_light;
+  ul {
+    -moz-columns: 3 150pt;
+    columns: 3 150pt;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: $bg_light;
+  }
+  li {
+    min-width: 13em;
+    list-style: none;
+    line-height: 0;
+    height: 22pt;
+    display: block;
+  }
+  legend {
+    width: auto;
+    color: inherit;
+    padding: 0.2rem 0.7rem;
+    background-color: inherit;
+    border: 1px solid $tertiary_light;
+    border-radius: 15px;
+  }
+  label:hover {
+    cursor: pointer;
+  }
+  input[type="radio"] {
+    margin-right: 5pt;
+  }
+}
+
+/* Choosing fonts via CSS (no-JS fallback)*/
+#toggle:checked ~ .fontchange {
+  font-family: OpenDyslexicThree-Regular;
+  .lang {
+    font-family: OpenDyslexicThree-Bold;
+  }
+  h2 {
+    font-family: OpenDyslexicThree-Bold;
+  }
+}
+
+/* Media queries */
+@media only screen and (min-width: 50em) {
+  body {
+    max-width: 900pt;
+  }
+  main > * {
+    flex-basis: 20rem;
+  }
+  header {
+    background-size: 100%;
+  }
+  .skiplink {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+    width: 0;
+    height: 0;
+    font-size: 0;
+    line-height: 0;
+  }
+
+  #accessibility-options {
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: inherit;
+    color: $bg_light;
+    background-color: $tertiary_light;
+    border: 0;
+    border-bottom-left-radius: 1.5em;
+    font-weight: bold;
+    padding: 0 0 0 0.5em;
+  }
+  #font-selection {
+    margin: auto;
+    color: $bg_light;
+    background-color: $tertiary_light;
+
+    legend {
+      border: 0;
+      padding-top: 2em;
+      padding-left: 0;
+      margin-left: 0;
+    }
+    ul {
+      -moz-columns: 1;
+      columns: 1;
+      color: $bg_light;
+      background-color: $tertiary_light;
+      margin: 0;
+    }
+    li:hover {
+      background-color: $menu_hover_light;
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background: $bg_dark;
+    color: $color_dark;
+  }
+  a {
+    text-decoration: none;
+    color: $a_dark;
+  }
+  a:hover,
+  a:focus {
+    color: $a_hover_dark;
+  }
+  h1 {
+    color: $gb_dark_2;
+  }
+  h2 {
+    color: $dark_h2;
+  }
+  ul {
+    background: $gb_dark_2;
+  }
+  #accessibility-options button {
+    color: $gb_dark_2;
+  }
+  #accessibility-options button:hover {
+    background-color: $menu_hover_dark;
+  }
+  #font-selection {
+    color: $color_dark;
+    background: $bg_dark;
+
+    ul {
+      background: $bg_dark;
+    }
+    legend {
+      border: 1px solid $tertiary_dark;
+    }
+  }
+  footer {
+    background: $gb_dark_2;
+  }
+}
+
+@media (prefers-color-scheme: dark) and (min-width: 50em) {
+  #font-selection {
+    color: $gb_dark_2;
+    background: $tertiary_dark;
+    ul {
+      color: $gb_dark_2;
+      background: $tertiary_dark;
+    }
+    li:hover {
+      background-color: $menu_hover_dark;
+    }
+  }
+}

static/js/main.js

@@ -0,0 +1,55 @@
+// toggle "Accessibility Options" menu
+const showAccessibilityMenu = () => {
+  const fontSelection = document.getElementById("font-selection");
+  if (fontSelection.classList.contains("display-none")) {
+    fontSelection.classList.remove("display-none");
+  } else {
+    fontSelection.classList.add("display-none");
+  }
+};
+
+// set font
+const changeFont = event => {
+  console.log("You selected: ", event.target.value);
+  const font = event.target.value;
+  const contentNode = document.getElementsByClassName("fontchange")[0];
+  contentNode.classList.remove(
+    "font-SylexiadSans",
+    "font-AtkinsonHyperlegible",
+    "font-OpenDyslexicThree",
+    "font-Ubuntu",
+    "font-serif",
+    "font-sans"
+  );
+  contentNode.classList.add(`font-${font}`);
+  window.localStorage.setItem("font", font);
+};
+
+// get font from localStorage
+window.onload = function() {
+  const previousFont = localStorage.getItem("font");
+  const contentNode = document.getElementsByClassName("fontchange")[0];
+  contentNode.classList.remove(
+    "font-SylexiadSans",
+    "font-AtkinsonHyperlegible",
+    "font-OpenDyslexicThree",
+    "font-Ubuntu",
+    "font-serif",
+    "font-sans"
+  );
+  contentNode.classList.add(`font-${previousFont}`);
+  console.log("Previously selected font: ", previousFont);
+  radiobtn = document.getElementById(`font-${previousFont}`);
+  radiobtn.checked = true;
+};
+
+document
+  .querySelector("#accessibility-options button")
+  .addEventListener("click", showAccessibilityMenu);
+document
+  .getElementById("font-selection")
+  .addEventListener("change", changeFont);
+
+// no-js handling
+for (let el of document.querySelectorAll(".no-js")) el.style.display = "none";
+for (let el of document.querySelectorAll(".js")) el.style.display = "block";

theme.toml

@@ -0,0 +1,15 @@
+# theme.toml template for a Hugo theme
+# See https://github.com/gohugoio/hugoThemes#themetoml for an example
+
+name = "C3ioc"
+license = "CC0"
+licenselink = "https://dev.sum7.eu/cloudspace/c3ioc-hugo/blob/master/LICENSES.md"
+description = "Theme based on the C3 Inclusion Operation Center"
+homepage = "https://c3ioc.de/"
+tags = []
+features = []
+min_version = "0.41.0"
+
+[author]
+  name = "genofire"
+  homepage = "https://fireorbit.de"