Alle aufgeführen Farb-Kombinationen entsprechen der AAA-WCAG-Richtlinie.
Auf #0A1137:
#F5F7F3 als Textfarbe.
#ACA6BB als Textfarbe.
Auf #F5F7F3:
#0A1137 als Textfarbe.
#1B1820 als Textfarbe.
#A61127 als Textfarbe.
Auf #ACA6BB:
#0A1137 als Textfarbe.
#1B1820 als Textfarbe.
Auf #1B1820:
#F5F7F3 als Textfarbe.
#ACA6BB als Textfarbe.
Auf #A61127:
#F5F7F3 als Textfarbe.
Icons kommen von remixicon.com.
Für Überschriften nutzen wir Cormorant Garamond, für Fließtext Nunito.
%% müssen nach dem Kopieren entfernt werden und dienen hier nur, damit das Kopieren einwandfrei klappt.
document.addEventListener("DOMContentLoaded", function() {
const darkModeButton = document.getElementById('dark-mode-button');
darkModeButton.addEventListener('click', function() {
// console.log('Dark-Mode-Button is clicked.');
document.body.classList.toggle('dark-mode');
// Toggle button text depending on the mode
darkModeButton.innerHTML = document.body.classList.contains('dark-mode') ? `<%%svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="14"><%%path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"><%%/path><%%/svg>` : `<%%svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="14"><%%path d="M9.8216 2.23796C9.29417 3.38265 9 4.65697 9 6C9 10.9706 13.0294 15 18 15C19.343 15 20.6174 14.7058 21.762 14.1784C20.7678 18.6537 16.7747 22 12 22C6.47715 22 2 17.5228 2 12C2 7.22532 5.3463 3.23221 9.8216 2.23796ZM18.1642 2.29104L19 2.5V3.5L18.1642 3.70896C17.4476 3.8881 16.8881 4.4476 16.709 5.16417L16.5 6H15.5L15.291 5.16417C15.1119 4.4476 14.5524 3.8881 13.8358 3.70896L13 3.5V2.5L13.8358 2.29104C14.5524 2.1119 15.1119 1.5524 15.291 0.835829L15.5 0H16.5L16.709 0.835829C16.8881 1.5524 17.4476 2.1119 18.1642 2.29104ZM23.1642 7.29104L24 7.5V8.5L23.1642 8.70896C22.4476 8.8881 21.8881 9.4476 21.709 10.1642L21.5 11H20.5L20.291 10.1642C20.1119 9.4476 19.5524 8.8881 18.8358 8.70896L18 8.5V7.5L18.8358 7.29104C19.5524 7.1119 20.1119 6.5524 20.291 5.83583L20.5 5H21.5L21.709 5.83583C21.8881 6.5524 22.4476 7.1119 23.1642 7.29104Z"><%%/path><%%/svg>`;
});
// Check and toggle dark mode based on user preference
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (prefersDarkScheme) {
document.body.classList.toggle('dark-mode', true);
// console.log('Dark-mode preference is checked.');
darkModeButton.innerHTML = `<%%svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="14"><%%path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"><%%/path><%%/svg>`; // Set initial button text for dark mode
}
});
// add a html button with id dark-mode-button
// css: body .dark-mode {background-color: var(--dark); color: var(--white);}
/* Loader Styles, if Loader is needed */
.loader-small, .loader-big {
border-radius: 50%;
animation: spin 1s linear infinite;
position: relative;
margin: auto;
}
.loader-small {
border: 3px solid var(--white);
border-top: 3px solid var(--darkblue);
width: 20px;
height: 20px;
margin-right: 5px;
}
.loader-big {
border: 8px solid var(--white);
border-top: 8px solid var(--darkblue);
width: 60px;
height: 60px;
margin-top: 40px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Nunito Regular */
@font-face {
font-family: 'Nunito';
src: url('https://joram.eu/fonts/Nunito-VariableFont_wght.ttf') format('truetype');
font-style: normal;
font-weight: 100 900;
font-display: swap;
}
/* Cormorant Garamond Regular */
@font-face {
font-family: 'CormorantGaramond';
src: url('https://joram.eu/fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
font-style: normal;
font-weight: 100 900;
font-display: swap;
}
/* Cormorant Garamond Italic */
@font-face {
font-family: 'CormorantGaramond';
src: url('https://joram.eu/fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
font-style: italic;
font-weight: 100 900;
font-display: swap;
}
/* Nunito Italic */
@font-face {
font-family: 'Nunito';
src: url('https://joram.eu/fonts/Nunito-Italic-VariableFont_wght.ttf') format('truetype');
font-style: italic;
font-weight: 100 900;
font-display: swap;
}
:root, * {
color-scheme: light dark;
--darkblue: #0a1137;
--blue: var(--darkblue);
--white: #f5f7f3;
--darkred: #A6112F;
--red: var(--darkred);
--lightblue: #aca6bb;
--lightgrey: var(--lightblue);
--lightgray: var(--lightgrey);
--bordercolor: var(--lightgrey);
--gray: var(--lightgrey);
--grey: var(--lightgrey);
--dark: #1b1820;
--lightdark: var(--dark);
--font-family--nunito: 'Nunito','NunitoSans',sans-serif;
--font-family--cormorant-garamond: 'CormorantGaramond', serif;
font-size: 1.2rem;
line-height: 1.4;
font-weight: 300
}
body {
background-color: var(--white);
color: var(--darkblue);
font-family: var(--font-family--nunito);
}
body.dark-mode {
background-color: var(--dark);
color: var(--white);
}
.dark-mode svg {
fill: var(--white);
}
svg {
fill: var(--darkblue);
}
strong, b {
font-weight: 600;
}
h1,h2,h3,h4,h5,h6 {
font-family: var(--font-family--cormorant-garamond);
font-weight: 800;
}
<%%link rel="icon" type="image/png" href="../img/favicon-96x96.png" sizes="96x96" />
<%%link rel="icon" type="image/svg+xml" href="../img/favicon.svg" />
<%%link rel="shortcut icon" href="../img/favicon.ico" />
<%%link rel="apple-touch-icon" sizes="180x180" href="../img/apple-touch-icon.png" />
<%%meta name="apple-mobile-web-app-title" content="Joram" />
<%%link rel="manifest" href="../img/site.webmanifest" />
a, a:visited, a:focus, a:hover, a:active {
color: inherit;
}
a:visited.link {
text-decoration: underline dashed;
text-decoration-thickness: 50%;
}
a:focus.link, a:hover.link, a:active.link {
text-decoration: underline wavy;
text-underline-offset: 2px;
}
.link {
text-decoration: underline dotted;
text-underline-offset: 4px;
text-decoration-thickness: 2.75px;
}
.button {
margin-left: 10px;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
background-color: var(--white);
color: var(--darkblue);
border: 1px solid var(--bordercolor);
transition: background-color 0.3s, color 0.3s;
align-self: stretch;
font-size: 0.7rem;
}
.button:hover {
background-color: var(--darkblue);
color: var(--white);
}
.button:hover svg {
fill: var(--white);
}
.button svg {
fill: var(--darkblue);
padding-top: 4px;
}
.dark-mode .button:hover svg {
fill: var(--darkblue);
}
.dark-mode .button svg {
fill: var(--white);
}
.dark-mode .button {
background-color: var(--lightdark);
color: var(--white);
}
.dark-mode .button:hover {
background-color: var(--white);
color: var(--darkblue);
}
<%%div id="menuButtonContainer"><%%/div>
<%%script src="../floatingMenuButton/app.js"><%%/script>
<%%script>
fetch('../floatingMenuButton/menu.html')
.then(response => response.text())
.then(html => {
document.getElementById('menuButtonContainer').innerHTML = html;
if (typeof initMenuButton === 'function') {
initMenuButton();
}
});
<%%/script>
Diese Aktion soll Erfahrung durch die dunklen Töne und des serif-Headings vermitteln, da dies als Arbeitnehmer meine wichtigstes Gut ist.