more eupdates

.gitignore

@@ -108,3 +108,4 @@ dist
 
 # Generated content
 public/
+src/functions/sprite.svg

src/App.svelte

@@ -1,7 +1,4 @@
 <script>
-	// UTILS
-	import { setContext } from "svelte";
-
 	// COMPONENTS
 	import Header from "./components/Header.svelte";
 	import Contact from "./components/Contact.svelte";

src/components/About.svelte

@@ -66,7 +66,9 @@
 		align-items: start;
 		gap: var(--gap);
 		flex-wrap: wrap;
+		transition: background-color var(--speed-transition) ease-in-out;
 	}
+
 	.bio {
 		flex: 4 4 25rem;
 	}
@@ -76,15 +78,37 @@
 
 	.work {
 		flex: 1 1 20rem;
+		align-self: stretch;
 		padding: var(--gap);
 		background: var(--color-apricot-light);
+		transition: background var(--speed-transition) ease-in-out;
 	}
 
 	.work ul {
 		list-style: none;
 		margin: 0;
 		padding: 0;
 	}
+
+	/* DARK MODE ---------- */
+	:global(.dark) .about {
+		background-color: var(--color-slate);
+		gap: calc(2 * var(--gap));
+	}
+
+	:global(.dark) .work {
+		background: rgba(0, 0, 0, 0.35);
+	}
+
+	@media screen and (prefers-color-scheme: dark) {
+		.about {
+			background-color: var(--color-slate);
+			gap: calc(2 * var(--gap));
+		}
+		.work {
+			background: rgba(0, 0, 0, 0.35);
+		}
+	}
 </style>
 
 <section aria-labelledby="about-header" class="about container">

src/components/Contact.svelte

@@ -102,7 +102,7 @@
 	<ul class="contact__social">
 		{#each networks as { label, icon, url, rel = null, target = null }}
 			<li class="contact__link contact__link--{label}">
-				<a href={url} {target} {rel}>
+				<a href={url} {target} {rel} tabindex="0">
 					<span class="visually-hidden">Visit me on {label}</span>
 					<svg class="icon">
 						<title>{label} icon</title>

src/components/Header.svelte

@@ -1,4 +1,28 @@
-<script></script>
+<script>
+	import { onMount } from "svelte";
+	import Switcher from "./Switcher.svelte";
+
+	let displayModeSwitcher = false;
+	let darkMode = false;
+	$: modeLabel = `Dark mode ${darkMode ? "is" : "is not"} active. Press to toggle it ${
+		darkMode ? "off" : "on."
+	}`;
+
+	onMount(() => {
+		// Initially set our darkmode state based on user preference.
+		// This will default to light mode, which is _my_ preference.
+		darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+		// On load, switch to dark if needed.
+		if (darkMode) document.body.classList.add("dark");
+
+		// We are using JS and should display the toggle
+		displayModeSwitcher = true;
+	});
+	function handleModeSwitch(e) {
+		document.body.classList.toggle("dark");
+	}
+</script>
 
 <style>
 	.header {
@@ -119,6 +143,7 @@
 	<picture>
 		<source srcset="/img/header-background--desktop.jpg" media="(min-width: 768px)" />
 		<img
+			fetchpriority="high"
 			class="header__image"
 			src="/img/header-background--thumb.jpg"
 			alt="An overhead view of Ryan Marx, smiling while he works, sitting at his desk. The walls of his cubicle are covered in small posters and family photos. Ryan is wearing one of his favofite fleece zip-up jackets." />
@@ -139,4 +164,12 @@
 			target="_blank"
 			rel="noopener noreferrer">John J. Kim</a>
 	</p>
+	<Switcher
+		visible={displayModeSwitcher}
+		bind:checked={darkMode}
+		on:input={handleModeSwitch}
+		id="mode"
+		label={modeLabel}
+		labelLeft="Light"
+		labelRight="Dark" />
 </header>

src/components/Portfolio.svelte

@@ -63,20 +63,6 @@
 		padding: 0;
 		margin: 0;
 	}
-
-	:global(.tag) {
-		padding: 0.25rem 0.5rem;
-		border-radius: 0.25rem;
-		/* background-color: var(--color-purple); */
-		/* color: var(--color-gray-light); */
-		font: bold var(--font-size-very-small) / var(--line-height) var(--sans-serif-fonts);
-		text-transform: uppercase;
-
-		border: 1px solid var(--color-purple);
-		color: var(--color-purple);
-		background-color: transparent;
-		transition: background-color var(--speed-transition) ease-in-out;
-	}
 </style>
 
 <section id="portfolio" class="container" aria-labelledby="portfolio-header">

src/components/PortfolioItem.svelte

@@ -32,13 +32,14 @@
 
 	.project__date {
 		font: bold var(--font-size-very-small) / var(--line-height) var(--sans-serif-fonts);
-		color: var(--color-purple);
+		color: var(--color-font-muted);
 		margin-top: calc(-1 * var(--gap));
 	}
 	.links {
 		list-style: none;
 		margin: 0;
 		padding: 0;
+		color: var(--color-font);
 	}
 
 	.links li {

src/components/Switcher.svelte

@@ -0,0 +1,195 @@
+<script>
+	import { fade } from "svelte/transition";
+	export let id;
+	export let label;
+	export let labelLeft, labelRight;
+	export let checked = false;
+	export let visible = false;
+</script>
+
+<style>
+	.switcher {
+		--switcher-height-default: 2rem;
+		--switcher-bar-height-default: 6px;
+		--switcher-width-default: 2.8rem;
+		--switcher-color-background-default: #eeb6a2;
+		--switcher-color-accent-default: var(--color-apricot-light);
+		--switcher-color-accent-text-default: #000;
+
+		position: absolute;
+		top: var(--gap);
+		right: var(--gap);
+		list-style: none;
+		margin: 0;
+		padding: 0.5rem;
+		background: rgba(0, 0, 0, 0.35);
+
+		opacity: 0.7;
+		transition: opacity var(--speed-transition) ease-in-out;
+	}
+
+	.switcher:hover,
+	.switcher:focus {
+		opacity: 1;
+	}
+
+	.visually-hidden {
+		appearance: none;
+		display: none;
+	}
+
+	.switcher__wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		cursor: pointer;
+	}
+	.switcher__label {
+		font: bold var(--font-size-very-small) / 1em var(--sans-serif-fonts);
+		color: var(--color-gray);
+		text-transform: uppercase;
+		margin: 0;
+		padding: 0 0 0.15rem 0;
+		color: white;
+		transform: color var(--speed-transition) ease-in-out;
+		position: relative;
+	}
+
+	.switcher__label::after {
+		content: "";
+		display: block;
+		position: absolute;
+		left: 0;
+		top: 100%;
+		background-color: currentColor;
+		width: 100%;
+		height: 2px;
+		transition: transform var(--speed-transition) ease-in-out;
+	}
+
+	.switcher__label--muted {
+		color: var(--color-gray);
+		border-color: transparent;
+	}
+	.switcher__label--muted::after {
+		transform: scaleX(0);
+	}
+
+	.switcher__toggle {
+		display: block;
+		height: var(--switcher-height, var(--switcher-height-default));
+		height: var(--switcher-bar-height, var(--switcher-bar-height-default));
+		width: var(--switcher-width, var(--switcher-width-default));
+		background-color: var(
+			--switcher-color-background,
+			var(--switcher-color-background-default)
+		);
+		border-radius: 3rem;
+		position: relative;
+		transition: background-color var(--speed-transition) ease-in-out;
+	}
+
+	.switcher__toggle__dot {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		background-color: var(
+			--switcher-color-accent,
+			var(--switcher-color-accent-default)
+		);
+		border: 2px solid
+			var(--switcher-color-accent-text, var(--switcher-color-accent-text-default));
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: var(--switcher-height, var(--switcher-height-default));
+		width: var(--switcher-height, var(--switcher-height-default));
+		border-radius: 50%;
+		transform: translate(0, -50%);
+
+		transition: transform var(--speed-transition) ease-in-out,
+			left var(--speed-transition) ease-in-out,
+			background-color var(--speed-transition) ease-in-out,
+			border-color var(--speed-transition) ease-in-out;
+	}
+	.switcher__toggle__icon {
+		width: 75%;
+		height: 75%;
+		fill: var(--switcher-color-accent-text, var(--switcher-color-accent-text-default));
+		transition: transform var(--speed-transition) ease-in-out,
+			fill var(--speed-transition) ease-in-out,
+			opacity var(--speed-transition) ease-in-out;
+
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+	.switcher__toggle__icon--dark {
+		width: 50%;
+		height: 50%;
+	}
+
+	.switcher__toggle__icon[hidden] {
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0);
+	}
+	input:checked + .switcher__wrapper .switcher__toggle__dot {
+		left: 100%;
+		transform: translate(-100%, -50%) rotate(180deg);
+	}
+	input:checked + .switcher__wrapper {
+		--switcher-color-background-default: lightblue;
+		--switcher-color-accent-default: navy;
+		--switcher-color-accent-text-default: white;
+	}
+	/* input:checked + .switcher__wrapper .switcher__toggle__icon--light {
+		display: none;
+	}
+	input:checked + .switcher__wrapper .switcher__toggle__icon--dark {
+		display: block;
+	} */
+</style>
+
+{#if visible}
+	<div class="switcher" transition:fade>
+		<input
+			on:input
+			id="{id}-switcher"
+			type="checkbox"
+			name="{id}-switcher"
+			bind:checked
+			class="visually-hidden" />
+		<label class="switcher__wrapper" for="{id}-switcher" aria-label={label}>
+			{#if labelLeft}
+				<span
+					class="switcher__label switcher__label--left"
+					class:switcher__label--muted={checked}>{labelLeft}</span>
+			{/if}
+			<span class="switcher__toggle">
+				<span class="switcher__toggle__dot">
+					<svg
+						class="switcher__toggle__icon switcher__toggle__icon--dark"
+						hidden={checked ? null : true}
+						role="img"
+						viewbox="0 0 1200 1200">
+						<use href="#moon" />
+					</svg>
+					<svg
+						class="switcher__toggle__icon switcher__toggle__icon--light"
+						hidden={checked ? true : null}
+						role="img"
+						viewbox="0 0 1200 1200">
+						<use href="#sun" />
+					</svg>
+				</span>
+			</span>
+			{#if labelRight}
+				<span
+					class="switcher__label switcher__label--right"
+					class:switcher__label--muted={!checked}>{labelRight}</span>
+			{/if}
+		</label>
+	</div>
+{/if}