commit 4884d44755b61107ca2fecdb74b3ba683b2975aa
parent 4c7d9156f2a96707a931a89c2f57bc0b011f8ad0
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Mon, 26 Aug 2024 15:34:57 +0000
Add `/settings` with color mode toggle
Diffstat:
6 files changed, 154 insertions(+), 0 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -48,3 +48,5 @@ notes*.txt
justfile
dist
static/assets/sql-wasm.wasm
+static/phosphor-icons
+static/webfonts
diff --git a/src/app.css b/src/app.css
@@ -22,4 +22,85 @@
p {
@apply select-none cursor-none;
}
+
+ @font-face {
+ font-family: 'SFProDisplay';
+ src: url('/webfonts/sf-pro-display/SFProDisplay-BlackItalic.woff2') format('woff2'),
+ url('/webfonts/sf-pro-display/SFProDisplay-BlackItalic.woff') format('woff');
+ font-weight: 900;
+ font-style: italic;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: 'SFProDisplay';
+ src: url('/webfonts/sf-pro-display/SFProDisplay-Black.woff2') format('woff2'),
+ url('/webfonts/sf-pro-display/SFProDisplay-Black.woff') format('woff');
+ font-weight: 900;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: 'SFProDisplay';
+ src: url('/webfonts/sf-pro-display/SFProDisplay-Bold.woff2') format('woff2'),
+ url('/webfonts/sf-pro-display/SFProDisplay-Bold.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: 'SFProDisplay';
+ src: url('/webfonts/sf-pro-display/SFProDisplay-BoldItalic.woff2') format('woff2'),
+ url('/webfonts/sf-pro-display/SFProDisplay-BoldItalic.woff') format('woff');
+ font-weight: bold;
+ font-style: italic;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: 'SFProDisplay';
+ src: url('/webfonts/sf-pro-display/SFProDisplay-Heavy.woff2') format('woff2'),
+ url('/webfonts/sf-pro-display/SFProDisplay-Heavy.woff') format('woff');
+ font-weight: 900;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: 'SFProDisplay';
+ src: url('/webfonts/sf-pro-display/SFProDisplay-HeavyItalic.woff2') format('woff2'),
+ url('/webfonts/sf-pro-display/SFProDisplay-HeavyItalic.woff') format('woff');
+ font-weight: 900;
+ font-style: italic;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: 'SFProDisplay';
+ src: url('/webfonts/sf-pro-display/SFProDisplay-Light.woff2') format('woff2'),
+ url('/webfonts/sf-pro-display/SFProDisplay-Light.woff') format('woff');
+ font-weight: 300;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: 'SFProDisplay';
+ src: url('/webfonts/sf-pro-display/SFProDisplay-LightItalic.woff2') format('woff2'),
+ url('/webfonts/sf-pro-display/SFProDisplay-LightItalic.woff') format('woff');
+ font-weight: 300;
+ font-style: italic;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: 'SFProDisplay';
+ src: url('/webfonts/sf-pro-display/SFProDisplay-Medium.woff2') format('woff2'),
+ url('/webfonts/sf-pro-display/SFProDisplay-Medium.woff') format('woff');
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+ }
}
\ No newline at end of file
diff --git a/src/app.html b/src/app.html
@@ -4,6 +4,11 @@
<head>
<meta charset="utf-8" />
+ <link rel="stylesheet" type="text/css" href="/phosphor-icons/bold.css" />
+ <link rel="stylesheet" type="text/css" href="/phosphor-icons/fill.css" />
+ <link rel="stylesheet" type="text/css" href="/phosphor-icons/light.css" />
+ <link rel="stylesheet" type="text/css" href="/phosphor-icons/regular.css" />
+
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no viewport-fit=cover" />
%sveltekit.head%
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
@@ -1,4 +1,5 @@
<script lang="ts">
+ import { goto } from "$app/navigation";
import { cl } from "$lib/client";
import { _cf } from "$lib/conf";
import { t } from "@radroots/svelte-lib";
@@ -55,4 +56,12 @@
>
{"test #3"}
</button>
+ <button
+ class={`button-simple`}
+ onclick={async () => {
+ await goto(`/settings`);
+ }}
+ >
+ {"settings"}
+ </button>
</div>
diff --git a/src/routes/(app)/settings/+page.svelte b/src/routes/(app)/settings/+page.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+ import { goto } from "$app/navigation";
+ import { app_thc } from "$lib/stores";
+ import { toggle_color_mode, trellis } from "@radroots/svelte-lib";
+</script>
+
+<div class={`flex flex-col w-full p-6 justify-center items-center`}>
+ <svelte:component
+ this={trellis}
+ basis={{
+ args: {
+ layer: 1,
+ title: {
+ value: `Appearance`,
+ },
+ list: [
+ {
+ offset: {
+ mod: {
+ key: `caret-left`,
+ },
+ },
+ touch: {
+ label: {
+ left: [
+ {
+ value: "Back",
+ },
+ ],
+ },
+ callback: async () => {
+ await goto(`/`);
+ },
+ },
+ },
+ {
+ hide_active: true,
+ touch: {
+ label: {
+ left: [
+ {
+ value: `Toggle Color Mode (${toggle_color_mode($app_thc)})`,
+ classes: `capitalize`,
+ },
+ ],
+ },
+ callback: async () => {
+ app_thc.set(toggle_color_mode($app_thc));
+ },
+ },
+ },
+ ],
+ },
+ }}
+ />
+</div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -29,6 +29,7 @@ const config: Config = {
},
fontSize: {
line: ["1.05rem", { lineHeight: "1.33rem", fontWeight: 300 }],
+ trellisTitle: ["0.8rem", { lineHeight: "1rem", fontWeight: 200 }],
},
height: {
...heights,
