switch frontend css from bootstrap to bulma

Foxnouns.Frontend/src/app.html

@@ -6,10 +6,10 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<script>
 			let theme = localStorage.getItem("pronounscc-theme");
-			if (!theme || theme === "auto")
+			if (!theme)
 				theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 
-			document.documentElement.setAttribute("data-bs-theme", theme);
+			document.documentElement.setAttribute("data-theme", theme);
 		</script>
 		%sveltekit.head%
 	</head>

Foxnouns.Frontend/src/app.scss

@@ -0,0 +1,7 @@
+@use "bulma/sass" with (
+	$family-primary: "FiraGO"
+);
+
+@import "@fontsource/firago/400.css";
+@import "@fontsource/firago/400-italic.css";
+@import "@fontsource/firago/700.css";

Foxnouns.Frontend/src/lib/nav/Dropdown.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let isOpen = false;
+</script>
+
+<div class={"navbar-item has-dropdown" + (isOpen ? " is-active" : "")}>
+	<button class="navbar-link" on:click={() => (isOpen = !isOpen)}><slot name="label" /></button>
+	<div class="navbar-dropdown">
+		<slot />
+	</div>
+</div>

Foxnouns.Frontend/src/lib/nav/DropdownItem.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let divider = false;
+	export let href: string | undefined = undefined;
+</script>
+
+{#if divider}
+	<hr class="navbar-divider" />
+{:else}
+	<a {href} class="navbar-item"><slot /></a>
+{/if}

Foxnouns.Frontend/src/lib/nav/Navbar.svelte

@@ -1,57 +1,70 @@
 <script lang="ts">
-	import {
-		Navbar,
-		NavbarBrand,
-		NavbarToggler,
-		Collapse,
-		Nav,
-		Dropdown,
-		DropdownToggle,
-		DropdownMenu,
-		DropdownItem,
-		NavItem,
-	} from "@sveltestrap/sveltestrap";
+	import { IconSun, IconMoon } from "@tabler/icons-svelte";
+	import { onMount } from "svelte";
+	import Dropdown from "./Dropdown.svelte";
+	import DropdownItem from "./DropdownItem.svelte";
 	import Logo from "./Logo.svelte";
 	import type { User } from "$lib/api/user";
+	import { themeStore } from "$lib/store";
 
 	export let user: User | undefined;
+	let navIsOpen = false;
 
-	let showMenu = true;
-	const toggleMenu = () => {
-		showMenu = !showMenu;
+	onMount(() => {
+		let theme = localStorage.getItem("pronounscc-theme");
+		if (!theme)
+			theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+		themeStore.set(theme);
+	});
+
+	const toggleTheme = () => {
+		themeStore.set($themeStore === "dark" ? "light" : "dark");
+		document.documentElement.setAttribute("data-theme", $themeStore);
+		localStorage.setItem("pronounscc-theme", $themeStore);
 	};
-	let userMenuOpen = false;
 </script>
 
-<Navbar>
-	<NavbarBrand href="/" aria-label="pronouns.cc landing page">
-		<Logo />
-	</NavbarBrand>
-	<NavbarToggler on:click={toggleMenu} aria-label="Toggle menu" />
-	<Collapse isOpen={showMenu} navbar expand="lg">
-		<Nav class="ms-auto" navbar>
+<nav class="navbar is-transparent" aria-label="Main navigation">
+	<div class="navbar-brand">
+		<a href="/" class="navbar-item">
+			<Logo />
+		</a>
+		<button
+			class={"navbar-burger" + (navIsOpen ? " is-active" : "")}
+			aria-label="menu"
+			aria-expanded="false"
+			on:click={() => (navIsOpen = !navIsOpen)}
+		>
+			<span aria-hidden="true"></span>
+			<span aria-hidden="true"></span>
+			<span aria-hidden="true"></span>
+			<span aria-hidden="true"></span>
+		</button>
+	</div>
+	<div class={"navbar-menu" + (navIsOpen ? " is-active" : "")}>
+		<div class="navbar-end">
 			{#if user}
-				<NavItem>
-					<Dropdown nav isOpen={userMenuOpen} toggle={() => (userMenuOpen = !userMenuOpen)}>
-						<DropdownToggle nav caret>@{user.username}</DropdownToggle>
-						<DropdownMenu>
-							<DropdownItem href="/@{user.username}">View profile</DropdownItem>
-							<DropdownItem href="/settings">Settings</DropdownItem>
-							<DropdownItem divider />
-							<DropdownItem href="/logout">Log out</DropdownItem>
-						</DropdownMenu>
-					</Dropdown>
-				</NavItem>
+				<Dropdown>
+					<span slot="label">@{user.username}</span>
+					<DropdownItem href="/@{user.username}">View profile</DropdownItem>
+					<DropdownItem href="/settings">Settings</DropdownItem>
+					<DropdownItem divider />
+					<DropdownItem href="/logout">Log out</DropdownItem>
+				</Dropdown>
 			{:else}
-				<NavItem>
-					<Dropdown nav isOpen={userMenuOpen} toggle={() => (userMenuOpen = !userMenuOpen)}>
-						<DropdownToggle nav caret>Not logged in</DropdownToggle>
-						<DropdownMenu>
-							<DropdownItem href="/login">Log in</DropdownItem>
-						</DropdownMenu>
-					</Dropdown>
-				</NavItem>
+				<Dropdown>
+					<span slot="label">Not logged in</span>
+					<DropdownItem href="/login">Log in</DropdownItem>
+					<DropdownItem href="/register">Sign up</DropdownItem>
+				</Dropdown>
 			{/if}
-		</Nav>
-	</Collapse>
-</Navbar>
+			<button class="navbar-item" on:click={() => toggleTheme()}>
+				{#if $themeStore === "dark"}
+					<IconSun size={20} />&nbsp;Light theme
+				{:else}
+					<IconMoon size={20} />&nbsp;Dark theme
+				{/if}
+			</button>
+		</div>
+	</div>
+</nav>

Foxnouns.Frontend/src/lib/store.ts

@@ -0,0 +1,9 @@
+import { writable } from "svelte/store";
+import { browser } from "$app/environment";
+
+const defaultThemeValue = "light";
+const initialThemeValue = browser
+	? window.localStorage.getItem("pronouns-theme") ?? defaultThemeValue
+	: defaultThemeValue;
+
+export const themeStore = writable<string>(initialThemeValue);

Foxnouns.Frontend/src/routes/+layout.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import Navbar from "$lib/nav/Navbar.svelte";
-	import "bootstrap/dist/css/bootstrap.min.css";
 	import type { LayoutData } from "./$types";
+	import "../app.scss";
+	import Navbar from "$lib/nav/Navbar.svelte";
 
 	export let data: LayoutData;
 </script>
 
 <Navbar user={data.user} />
-
 <slot />

Foxnouns.Frontend/src/routes/+page.svelte

@@ -15,5 +15,5 @@
 </p>
 
 <p>
-    stats: {data.meta.users.total} users, {data.meta.members} members
+    <strong>stats:</strong> {data.meta.users.total} users, {data.meta.members} members
 </p>