styling again

frontend-reactive/TODOS.md

@@ -0,0 +1,5 @@
+- [ ] Bionic reading support
+  - [ ] [https://github.com/Gumball12/text-vide] for (theoretically) all strings
+  - [ ] [https://github.com/Born2Root/Fast-Font] as font
+- [ ] Internationalisation with [https://ember-intl.github.io/ember-intl/docs/quickstart]
+- [ ] Fix font sizing

frontend-reactive/app/components/global/general-sidebar.hbs

@@ -0,0 +1,5 @@
+<div class="global-sidebar-general">
+  <div class="global-sidebar-general-feed">
+
+  </div>
+</div>

frontend-reactive/app/components/timeline/header.hbs

@@ -0,0 +1 @@
+{{yield}}

frontend-reactive/app/formats.js

@@ -0,0 +1,29 @@
+export default {
+  time: {
+    hhmmss: {
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+    },
+  },
+  date: {
+    hhmmss: {
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+    },
+  },
+  number: {
+    compact: {
+      notation: 'compact',
+    },
+    EUR: {
+      style: 'currency',
+      currency: 'EUR',
+    },
+    USD: {
+      style: 'currency',
+      currency: 'USD',
+    },
+  },
+};

frontend-reactive/app/styles/colors-precise.css

@@ -0,0 +1,152 @@
+@media (prefers-color-scheme: light) {
+  :root {
+    --text: hsl(273deg 35% 6%);
+    --background: hsl(267deg 36% 95%);
+    --primary: hsl(273deg 37% 27%);
+    --secondary: hsl(307deg 37% 68%);
+    --accent: hsl(318deg 37% 42%);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: hsl(273deg 35% 94%);
+    --background: hsl(267deg 36% 5%);
+    --primary: hsl(273deg 37% 73%);
+    --secondary: hsl(307deg 37% 32%);
+    --accent: hsl(318deg 37% 58%);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --text-5: hsl(273deg 36% 95%);
+    --text-10: hsl(272deg 33% 90%);
+    --text-15: hsl(272deg 33% 85%);
+    --text-20: hsl(273deg 35% 80%);
+    --text-25: hsl(273deg 35% 75%);
+    --text-30: hsl(273deg 35% 70%);
+    --text-35: hsl(273deg 35% 65%);
+    --text-40: hsl(273deg 35% 60%);
+    --text-45: hsl(273deg 35% 55%);
+    --text-50: hsl(273deg 35% 50%);
+    --text-55: hsl(273deg 35% 45%);
+    --text-60: hsl(273deg 35% 40%);
+    --text-65: hsl(273deg 35% 35%);
+    --text-70: hsl(273deg 35% 30%);
+    --text-75: hsl(273deg 35% 25%);
+    --text-80: hsl(273deg 35% 20%);
+    --text-85: hsl(273deg 35% 20%);
+    --text-90: hsl(272deg 33% 10%);
+    --text-95: hsl(273deg 36% 5%);
+    --background-5: hsl(267deg 36% 95%);
+    --background-10: hsl(268deg 37% 90%);
+    --background-15: hsl(267deg 36% 85%);
+    --background-20: hsl(267deg 35% 80%);
+    --background-25: hsl(267deg 35% 75%);
+    --background-30: hsl(267deg 36% 70%);
+    --background-35: hst(267, 36%, 65%);
+    --background-40: hsl(267deg 36% 60%);
+    --background-45: hsl(267deg 36% 55%);
+    --background-50: hsl(267deg 36% 50%);
+    --background-60: hsl(267deg 36% 40%);
+    --background-70: hsl(267deg 36% 30%);
+    --background-80: hsl(267deg 35% 20%);
+    --background-85: hsl(267deg 36% 15%);
+    --background-90: hsl(268deg 37% 10%);
+    --background-95: hsl(267deg 36% 5%);
+    --primary-5: hsl(273deg 36% 95%);
+    --primary-10: hsl(272deg 37% 90%);
+    --primary-20: hsl(273deg 37% 80%);
+    --primary-30: hsl(273deg 37% 70%);
+    --primary-40: hsl(273deg 37% 60%);
+    --primary-50: hsl(273deg 37% 50%);
+    --primary-60: hsl(273deg 37% 40%);
+    --primary-70: hsl(273deg 37% 30%);
+    --primary-80: hsl(273deg 37% 20%);
+    --primary-90: hsl(272deg 37% 10%);
+    --primary-95: hsl(273deg 36% 5%);
+    --secondary-5: hsl(307deg 36% 95%);
+    --secondary-10: hsl(306deg 37% 90%);
+    --secondary-20: hsl(308deg 37% 80%);
+    --secondary-30: hsl(307deg 37% 70%);
+    --secondary-40: hsl(307deg 37% 60%);
+    --secondary-50: hsl(307deg 37% 50%);
+    --secondary-60: hsl(307deg 37% 40%);
+    --secondary-70: hsl(307deg 37% 30%);
+    --secondary-80: hsl(308deg 37% 20%);
+    --secondary-90: hsl(306deg 37% 10%);
+    --secondary-95: hsl(307deg 36% 5%);
+    --accent-5: hsl(320deg 36% 95%);
+    --accent-10: hsl(319deg 37% 90%);
+    --accent-20: hsl(317deg 37% 80%);
+    --accent-30: hsl(318deg 37% 70%);
+    --accent-40: hsl(318deg 37% 60%);
+    --accent-50: hsl(318deg 37% 50%);
+    --accent-60: hsl(318deg 37% 40%);
+    --accent-70: hsl(318deg 37% 30%);
+    --accent-80: hsl(317deg 37% 20%);
+    --accent-90: hsl(319deg 37% 10%);
+    --accent-95: hsl(313deg 36% 5%);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-50: hsl(273deg 36% 5%);
+    --text-100: hsl(272deg 33% 10%);
+    --text-200: hsl(273deg 35% 20%);
+    --text-300: hsl(273deg 35% 30%);
+    --text-400: hsl(273deg 35% 40%);
+    --text-500: hsl(273deg 35% 50%);
+    --text-600: hsl(273deg 35% 60%);
+    --text-700: hsl(273deg 35% 70%);
+    --text-800: hsl(273deg 35% 80%);
+    --text-900: hsl(272deg 33% 90%);
+    --text-950: hsl(273deg 36% 95%);
+    --background-50: hsl(267deg 36% 5%);
+    --background-100: hsl(268deg 37% 10%);
+    --background-200: hsl(267deg 35% 20%);
+    --background-300: hsl(267deg 36% 30%);
+    --background-400: hsl(267deg 36% 40%);
+    --background-500: hsl(267deg 36% 50%);
+    --background-600: hsl(267deg 36% 60%);
+    --background-700: hsl(267deg 36% 70%);
+    --background-800: hsl(267deg 35% 80%);
+    --background-900: hsl(268deg 37% 90%);
+    --background-950: hsl(267deg 36% 95%);
+    --primary-50: hsl(273deg 36% 5%);
+    --primary-100: hsl(272deg 37% 10%);
+    --primary-200: hsl(273deg 37% 20%);
+    --primary-300: hsl(273deg 37% 30%);
+    --primary-400: hsl(273deg 37% 40%);
+    --primary-500: hsl(273deg 37% 50%);
+    --primary-600: hsl(273deg 37% 60%);
+    --primary-700: hsl(273deg 37% 70%);
+    --primary-800: hsl(273deg 37% 80%);
+    --primary-900: hsl(272deg 37% 90%);
+    --primary-950: hsl(273deg 36% 95%);
+    --secondary-50: hsl(307deg 36% 5%);
+    --secondary-100: hsl(306deg 37% 10%);
+    --secondary-200: hsl(308deg 37% 20%);
+    --secondary-300: hsl(307deg 37% 30%);
+    --secondary-400: hsl(307deg 37% 40%);
+    --secondary-500: hsl(307deg 37% 50%);
+    --secondary-600: hsl(307deg 37% 60%);
+    --secondary-700: hsl(307deg 37% 70%);
+    --secondary-800: hsl(308deg 37% 80%);
+    --secondary-900: hsl(306deg 37% 90%);
+    --secondary-950: hsl(307deg 36% 95%);
+    --accent-50: hsl(313deg 36% 5%);
+    --accent-100: hsl(319deg 37% 10%);
+    --accent-200: hsl(317deg 37% 20%);
+    --accent-300: hsl(318deg 37% 30%);
+    --accent-400: hsl(318deg 37% 40%);
+    --accent-500: hsl(318deg 37% 50%);
+    --accent-600: hsl(318deg 37% 60%);
+    --accent-700: hsl(318deg 37% 70%);
+    --accent-800: hsl(317deg 37% 80%);
+    --accent-900: hsl(319deg 37% 90%);
+    --accent-950: hsl(320deg 36% 95%);
+  }
+}

frontend-reactive/app/styles/colors.css

@@ -0,0 +1,143 @@
+@media (prefers-color-scheme: light) {
+  :root {
+    --text: hsl(273deg 35% 6%);
+    --background: hsl(267deg 36% 95%);
+    --primary: hsl(273deg 37% 27%);
+    --secondary: hsl(307deg 37% 68%);
+    --accent: hsl(318deg 37% 42%);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: hsl(273deg 35% 94%);
+    --background: hsl(267deg 36% 5%);
+    --primary: hsl(273deg 37% 73%);
+    --secondary: hsl(307deg 37% 32%);
+    --accent: hsl(318deg 37% 58%);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --text-50: hsl(273deg 36% 95%);
+    --text-100: hsl(272deg 33% 90%);
+    --text-200: hsl(273deg 35% 80%);
+    --text-300: hsl(273deg 35% 70%);
+    --text-400: hsl(273deg 35% 60%);
+    --text-500: hsl(273deg 35% 50%);
+    --text-600: hsl(273deg 35% 40%);
+    --text-700: hsl(273deg 35% 30%);
+    --text-800: hsl(273deg 35% 20%);
+    --text-900: hsl(272deg 33% 10%);
+    --text-950: hsl(273deg 36% 5%);
+    --background-50: hsl(267deg 36% 95%);
+    --background-100: hsl(268deg 37% 90%);
+    --background-200: hsl(267deg 35% 80%);
+    --background-300: hsl(267deg 36% 70%);
+    --background-400: hsl(267deg 36% 60%);
+    --background-500: hsl(267deg 36% 50%);
+    --background-600: hsl(267deg 36% 40%);
+    --background-700: hsl(267deg 36% 30%);
+    --background-800: hsl(267deg 35% 20%);
+    --background-900: hsl(268deg 37% 10%);
+    --background-950: hsl(267deg 36% 5%);
+    --primary-50: hsl(273deg 36% 95%);
+    --primary-100: hsl(272deg 37% 90%);
+    --primary-200: hsl(273deg 37% 80%);
+    --primary-300: hsl(273deg 37% 70%);
+    --primary-400: hsl(273deg 37% 60%);
+    --primary-500: hsl(273deg 37% 50%);
+    --primary-600: hsl(273deg 37% 40%);
+    --primary-700: hsl(273deg 37% 30%);
+    --primary-800: hsl(273deg 37% 20%);
+    --primary-900: hsl(272deg 37% 10%);
+    --primary-950: hsl(273deg 36% 5%);
+    --secondary-50: hsl(307deg 36% 95%);
+    --secondary-100: hsl(306deg 37% 90%);
+    --secondary-200: hsl(308deg 37% 80%);
+    --secondary-300: hsl(307deg 37% 70%);
+    --secondary-400: hsl(307deg 37% 60%);
+    --secondary-500: hsl(307deg 37% 50%);
+    --secondary-600: hsl(307deg 37% 40%);
+    --secondary-700: hsl(307deg 37% 30%);
+    --secondary-800: hsl(308deg 37% 20%);
+    --secondary-900: hsl(306deg 37% 10%);
+    --secondary-950: hsl(307deg 36% 5%);
+    --accent-50: hsl(320deg 36% 95%);
+    --accent-100: hsl(319deg 37% 90%);
+    --accent-200: hsl(317deg 37% 80%);
+    --accent-300: hsl(318deg 37% 70%);
+    --accent-400: hsl(318deg 37% 60%);
+    --accent-500: hsl(318deg 37% 50%);
+    --accent-600: hsl(318deg 37% 40%);
+    --accent-700: hsl(318deg 37% 30%);
+    --accent-800: hsl(317deg 37% 20%);
+    --accent-900: hsl(319deg 37% 10%);
+    --accent-950: hsl(313deg 36% 5%);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-50: hsl(273deg 36% 5%);
+    --text-100: hsl(272deg 33% 10%);
+    --text-200: hsl(273deg 35% 20%);
+    --text-300: hsl(273deg 35% 30%);
+    --text-400: hsl(273deg 35% 40%);
+    --text-500: hsl(273deg 35% 50%);
+    --text-600: hsl(273deg 35% 60%);
+    --text-700: hsl(273deg 35% 70%);
+    --text-800: hsl(273deg 35% 80%);
+    --text-900: hsl(272deg 33% 90%);
+    --text-950: hsl(273deg 36% 95%);
+    --background-50: hsl(267deg 36% 5%);
+    --background-100: hsl(268deg 37% 10%);
+    --background-200: hsl(267deg 35% 20%);
+    --background-300: hsl(267deg 36% 30%);
+    --background-400: hsl(267deg 36% 40%);
+    --background-500: hsl(267deg 36% 50%);
+    --background-600: hsl(267deg 36% 60%);
+    --background-700: hsl(267deg 36% 70%);
+    --background-800: hsl(267deg 35% 80%);
+    --background-900: hsl(268deg 37% 90%);
+    --background-950: hsl(267deg 36% 95%);
+    --primary-50: hsl(273deg 36% 5%);
+    --primary-100: hsl(272deg 37% 10%);
+    --primary-200: hsl(273deg 37% 20%);
+    --primary-300: hsl(273deg 37% 30%);
+    --primary-400: hsl(273deg 37% 40%);
+    --primary-500: hsl(273deg 37% 50%);
+    --primary-600: hsl(273deg 37% 60%);
+    --primary-700: hsl(273deg 37% 70%);
+    --primary-800: hsl(273deg 37% 80%);
+    --primary-900: hsl(272deg 37% 90%);
+    --primary-950: hsl(273deg 36% 95%);
+    --secondary-50: hsl(307deg 36% 5%);
+    --secondary-100: hsl(306deg 37% 10%);
+    --secondary-200: hsl(308deg 37% 20%);
+    --secondary-300: hsl(307deg 37% 30%);
+    --secondary-400: hsl(307deg 37% 40%);
+    --secondary-500: hsl(307deg 37% 50%);
+    --secondary-600: hsl(307deg 37% 60%);
+    --secondary-700: hsl(307deg 37% 70%);
+    --secondary-800: hsl(308deg 37% 80%);
+    --secondary-900: hsl(306deg 37% 90%);
+    --secondary-950: hsl(307deg 36% 95%);
+    --accent-50: hsl(313deg 36% 5%);
+    --accent-100: hsl(319deg 37% 10%);
+    --accent-200: hsl(317deg 37% 20%);
+    --accent-300: hsl(318deg 37% 30%);
+    --accent-400: hsl(318deg 37% 40%);
+    --accent-500: hsl(318deg 37% 50%);
+    --accent-600: hsl(318deg 37% 60%);
+    --accent-700: hsl(318deg 37% 70%);
+    --accent-800: hsl(317deg 37% 80%);
+    --accent-900: hsl(319deg 37% 90%);
+    --accent-950: hsl(320deg 36% 95%);
+  }
+}
+
+:root {
+  background-color: var(--background);
+}

frontend-reactive/app/styles/fonts.css

@@ -0,0 +1,83 @@
+/* Copied from: https://github.com/Vjecni/OpenDyslexic-Font/blob/main/opendyslexic.css */
+@font-face {
+  font-family: OpenDyslexic;
+  src: url("/assets/fonts/OpenDyslexic-Regular.eot");
+  src:
+    url("/assets/fonts/OpenDyslexic-Regular.eot?#iefix")
+      format("embedded-opentype"),
+    url("/assets/fonts/OpenDyslexic-Regular.woff2") format("woff2"),
+    url("/assets/fonts/OpenDyslexic-Regular.woff") format("woff"),
+    url("/assets/fonts/OpenDyslexic-Regular.otf") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+  font-size: 0.8em;
+}
+
+@font-face {
+  font-family: OpenDyslexic;
+  src: url("/assets/fonts/OpenDyslexic-Bold.eot");
+  src:
+    url("/assets/fonts/OpenDyslexic-Bold.eot?#iefix")
+      format("embedded-opentype"),
+    url("/assets/fonts/OpenDyslexic-Bold.woff2") format("woff2"),
+    url("/assets/fonts/OpenDyslexic-Bold.woff") format("woff"),
+    url("/assets/fonts/OpenDyslexic-Bold.otf") format("opentype");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: OpenDyslexic;
+  src: url("/assets/fonts/OpenDyslexic-Italic.eot");
+  src:
+    url("/assets/fonts/OpenDyslexic-Italic.eot?#iefix")
+      format("embedded-opentype"),
+    url("/assets/fonts/OpenDyslexic-Italic.woff2") format("woff2"),
+    url("/assets/fonts/OpenDyslexic-Italic.woff") format("woff"),
+    url("/assets/fonts/OpenDyslexic-Italic.otf") format("opentype");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: OpenDyslexic;
+  src: url("/assets/fonts/OpenDyslexic-BoldItalic.eot");
+  src:
+    url("/assets/fonts/OpenDyslexic-BoldItalic.eot?#iefix")
+      format("embedded-opentype"),
+    url("/assets/fonts/OpenDyslexic-BoldItalic.woff2") format("woff2"),
+    url("/assets/fonts/OpenDyslexic-BoldItalic.woff") format("woff"),
+    url("/assets/fonts/OpenDyslexic-BoldItalic.otf") format("opentype");
+  font-weight: bold;
+  font-style: italic;
+}
+
+body {
+  font-family: OpenDyslexic, sans-serif;
+}
+
+/* Apply OpenDyslexic Bold font to h1, h2, and h3 */
+h1,
+h2,
+h3 {
+  font-family: OpenDyslexic, sans-serif;
+  font-weight: bold;
+}
+
+/* Apply OpenDyslexic Normal weight to p, span, a, label, and li */
+p,
+span,
+a,
+label,
+li {
+  font-family: OpenDyslexic, sans-serif;
+  font-weight: normal;
+}
+
+/* Apply OpenDyslexic Light weight to input, textarea, and button */
+input,
+textarea,
+button {
+  font-family: OpenDyslexic, sans-serif;
+  font-weight: 300; /* Light weight */
+}

frontend-reactive/app/styles/svgs.css

@@ -0,0 +1,4 @@
+.svg-black-white {
+  fill: var(--text);
+  stroke: var(--text);
+}

frontend-reactive/app/styles/timeline.css

@@ -0,0 +1,7 @@
+.timeline {
+  max-width: 50%;
+  width: fit-content;
+  height: 100%;
+  scroll-behavior: smooth;
+  overflow-y: scroll;
+}

frontend-reactive/config/ember-intl.js

@@ -0,0 +1,93 @@
+module.exports = function (/* environment */) {
+  return {
+    /**
+     * Cause a build error if missing translations are detected.
+     *
+     * See https://ember-intl.github.io/ember-intl/docs/guide/missing-translations#throwing-a-build-error-on-missing-when-required-translations
+     *
+     * @property errorOnMissingTranslations
+     * @type {Boolean}
+     * @default "false"
+     */
+    errorOnMissingTranslations: false,
+
+    /**
+     * Cause a build error if ICU argument mismatches are detected between translations
+     * with the same key across all locales.
+     *
+     * @property errorOnNamedArgumentMismatch
+     * @type {Boolean}
+     * @default "false"
+     */
+    errorOnNamedArgumentMismatch: false,
+
+    /**
+     * Merges the fallback locale's translations into all other locales as a
+     * build-time fallback strategy.
+     *
+     * This will **not** prevent missing translation warnings or errors from occurring.
+     * It's meant as safety net when warnings are enabled.
+     * When enabled along with `errorOnMissingTranslations` any fallback attempts will result in an error.
+     *
+     * @property fallbackLocale
+     * @type {String?}
+     * @default "null"
+     */
+    fallbackLocale: null,
+
+    /**
+     * Path where translations are stored.  This is relative to the project root.
+     * For example, if your translations are an npm dependency, set this to:
+     *`'./node_modules/path/to/translations'`
+     *
+     * @property inputPath
+     * @type {String}
+     * @default "'translations'"
+     */
+    inputPath: 'translations',
+
+    /**
+     * Prevents the translations from being bundled with the application code.
+     * This enables asynchronously loading the translations for the active locale
+     * by fetching them from the asset folder of the build.
+     *
+     * See: https://ember-intl.github.io/ember-intl/docs/guide/asynchronously-loading-translations
+     *
+     * @property publicOnly
+     * @type {Boolean}
+     * @default "false"
+     */
+    publicOnly: false,
+
+    /**
+     * A function that is called whenever any translation key, from any locale, is missing at build time.
+     *
+     * See https://ember-intl.github.io/ember-intl/docs/guide/missing-translations#requiring-translations
+     *
+     * @property requiresTranslation
+     * @type {Function}
+     * @default "function(key,locale) { return true }"
+     */
+    requiresTranslation(/* key, locale */) {
+      return true;
+    },
+
+    /**
+     * Removes empty translations from the build output.
+     *
+     * @property stripEmptyTranslations
+     * @type {Boolean}
+     * @default "false"
+     */
+    stripEmptyTranslations: false,
+
+    /**
+     * Add the subdirectories of the translations as a namespace for all keys.
+     *
+     * @property wrapTranslationsWithNamespace
+     * @type {Boolean}
+     * @default "false"
+     */
+    wrapTranslationsWithNamespace: true,
+  };
+};

frontend-reactive/tests/integration/components/global/general-sidebar-test.ts

@@ -0,0 +1,18 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "frontend-reactive/tests/helpers";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+
+module("Integration | Component | global/general-sidebar", function (hooks) {
+	setupRenderingTest(hooks);
+
+	test("it renders", async function (assert) {
+		// Set any properties with this.set('myProperty', 'value');
+		// Handle any actions with this.set('myAction', function(val) { ... });
+
+		await render(hbs`<Global::GeneralSidebar />`);
+
+		assert.dom().hasText("");
+		// TODO: Add tests once design exists
+	});
+});

frontend-reactive/tests/integration/components/timeline/header-test.ts

@@ -0,0 +1,18 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "frontend-reactive/tests/helpers";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+
+module("Integration | Component | timeline/header", function (hooks) {
+	setupRenderingTest(hooks);
+
+	test("it renders", async function (assert) {
+		// Set any properties with this.set('myProperty', 'value');
+		// Handle any actions with this.set('myAction', function(val) { ... });
+
+		await render(hbs`<Timeline::Header />`);
+
+		assert.dom().hasText("");
+		// TODO: Add tests
+	});
+});

frontend-reactive/translations/de-de.yaml

@@ -0,0 +1,3 @@
+note:
+  collapse: "Einklappen"
+  expand: "Ausklappen"

frontend-reactive/translations/en-us.yaml

@@ -0,0 +1,3 @@
+note:
+  expand: "Expand"
+  collapse: "Collapse"