mstar/linstrom
1
0
Fork 0
Code Issues 27 Pull requests Projects Releases Packages 1 Wiki Activity Actions

styling again

Browse source
This commit is contained in:
Melody Becker 2024-09-23 17:13:57 +02:00
parent 83b45a5e46
commit cb67b6e2fb
30 changed files with 564 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend-reactive/app/components/global/general-sidebar.hbs Normal file
View file

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

1
frontend-reactive/app/components/timeline/header.hbs Normal file
View file

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

29
frontend-reactive/app/formats.js Normal file
View file

@ -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',
},
},
};

152
frontend-reactive/app/styles/colors-precise.css Normal file
View file

@ -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%);
}
}

143
frontend-reactive/app/styles/colors.css Normal file
View file

@ -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);
}

83
frontend-reactive/app/styles/fonts.css Normal file
View file

@ -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 */
}

4
frontend-reactive/app/styles/svgs.css Normal file
View file

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

7
frontend-reactive/app/styles/timeline.css Normal file
View file

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