feat: add new site

2022-07-26 00:25:51 +02:00 · 2022-07-26 00:25:51 +02:00 · 532a32db68
commit 532a32db68
parent 53738961bb
27 changed files with 1198 additions and 1328 deletions
--- a/src/components/ThemeSwitcher.svelte
+++ b/src/components/ThemeSwitcher.svelte
@ -0,0 +1,135 @@
+<script lang="js">
+	// @ts-nocheck
+	import { mdiAccount } from '@mdi/js';
+	import { onMount } from 'svelte';
+	import Icon from 'mdi-svelte';
+
+	onMount(() => {
+		const ROOT = document.querySelector(':root');
+		const DARK = 'dark';
+		const LIGHT = 'light';
+		const HIGH = 'more';
+		const LOW = 'no-preference';
+		const SCHEMES = [DARK, LIGHT];
+		const CONTRASTS = [HIGH, LOW];
+		function observeContext(data) {
+			if (data.find((record) => !record.attributeName.endsWith('-is'))) {
+				setScheme();
+				setContrast();
+			}
+		}
+		const schemeMedia = matchMedia('(prefers-color-scheme: dark)');
+		const contrastMedia = matchMedia('(prefers-contrast: more)');
+		let globalScheme = schemeMedia.matches ? DARK : LIGHT;
+		let globalContrast = contrastMedia.matches ? HIGH : LOW;
+		schemeMedia.addListener((_media) => {
+			globalScheme = _media.matches ? DARK : LIGHT;
+			setScheme();
+		});
+		contrastMedia.addListener((_media) => {
+			globalContrast = _media.matches ? HIGH : LOW;
+			setContrast();
+		});
+		function setScheme() {
+			const setting = ROOT.dataset.nuScheme;
+			ROOT.dataset.nuSchemeIs =
+				(setting !== 'auto' && SCHEMES.includes(setting) && setting) || globalScheme;
+		}
+		function setContrast() {
+			const setting = ROOT.dataset.nuContrast;
+			ROOT.dataset.nuContrastIs =
+				(setting !== 'auto' && CONTRASTS.includes(setting) && setting) || globalContrast;
+		}
+		const observer = new MutationObserver((data) => observeContext(data));
+		observer.observe(ROOT, {
+			characterData: false,
+			attributes: true,
+			childList: false,
+			subtree: false
+		});
+		setScheme();
+		setContrast();
+		// Switch to dark scheme
+		// ROOT.dataset.nuContrast = 'more';
+		// Increase contrast
+		// ROOT.dataset.nuScheme = 'dark';
+	});
+
+	function toggleTheme() {
+		const root = document.querySelector(':root');
+		const theme = root.dataset['nuSchemeIs'];
+
+		if (theme === 'light') {
+			root.dataset['nuScheme'] = 'dark';
+		} else {
+			root.dataset['nuScheme'] = 'light';
+		}
+	}
+</script>
+
+<label class="switch">
+	<input type="checkbox" on:change={toggleTheme} />
+	<span class="slider round" />
+</label>
+
+<style>
+	.switch {
+		position: relative;
+		display: inline-block;
+		width: 60px;
+		height: 34px;
+	}
+
+	.switch input {
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.slider {
+		position: absolute;
+		cursor: pointer;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: lightskyblue;
+		transition: 0.4s;
+	}
+
+	.slider:before {
+		position: absolute;
+		content: '';
+		height: 26px;
+		width: 26px;
+		left: 4px;
+		bottom: 4px;
+		background-color: gold;
+		transition: 0.4s;
+	}
+
+	input:checked + .slider {
+		background-color: var(--special-mark-color);
+	}
+	input:checked + .slider:before {
+		background-color: white;
+		background: radial-gradient(circle at 19% 19%, transparent 41%, var(--outline-color) 43%);
+	}
+
+	input:focus + .slider {
+		box-shadow: 0 0 5px var(--special-shadow-color);
+	}
+
+	input:checked + .slider:before {
+		transform: translateX(26px);
+	}
+
+	/* Rounded sliders */
+	.slider.round {
+		border-radius: 34px;
+	}
+
+	.slider.round:before {
+		border-radius: 50%;
+	}
+</style>