Rename entrypoint to main.ts. Tweak text contrast

res/static/style/layout.css

@@ -500,7 +500,7 @@ input[type="color"]:active {
 /* Selected buttons get the accent colour on a shade of it. The outline shows
    hover and keyboard focus, so it would be confusing to use it for this too */
 .button_highlight {
-	color: var(--accent_color) !important;
+	color: var(--link_color) !important;
 	background: var(--accent_shade) !important;
 }
 

res/template/wrap.html

@@ -36,7 +36,7 @@
 			{{with .Node}}window.initial_node = {{.}};{{end}}
 		</script>
 
-		<script src="/res/svelte/wrap.js" type="module"></script>
+		<script src="/res/svelte/main.js" type="module"></script>
 	</head>
 	<body></body>
 </html>

svelte/src/filesystem/Filesystem.svelte

@@ -42,10 +42,10 @@ onMount(() => {
 			return
 		}
 
-		// Custom CSS rules for the whole viewer. The MainMenu applies its
+		// Custom CSS rules for the whole viewer. App.svelte applies its styles
-		// styles to the <html> element. So we apply to the <body> element, our
+		// to the <html> element. So we apply to the <body> element, our styles
-		// styles take precedence since they're lower level, and we can clean it
+		// take precedence since they're lower level, and we can clean it up
-		// up afterwards without overwriting global style
+		// afterwards without overwriting global style
 		document.body.style = css_from_path(nav.path)
 		update_favicon()
 	})

svelte/src/filesystem/edit_window/Branding.ts

@@ -239,9 +239,9 @@ const generate_link_color = (link_color: string, body_color: string) => {
 	// If the body and link colours are both dark we lighten the link, and the
 	// other way around too
 	if (body[2] < 50 && link[2] < 50) {
-		link[2] = link[2] + 40 // Dark color, add lightness
+		link[2] = link[2] + 30 // Dark color, add lightness
 	} else if (body[2] > 50 && link[2] > 50) {
-		link[2] = link[2] - 40 // Light color, remove lightness
+		link[2] = link[2] - 30 // Light color, remove lightness
 	}
 	return rgb2hex(hsl2rgb(link)) // Convert back to hex
 }

svelte/src/filesystem/viewers/Audio.svelte

@@ -144,7 +144,7 @@ onMount(() => {
 		<h2>Tracklist</h2>
 		{#each siblings as sibling (sibling.id)}
 			{#if !sibling.is_hidden()}
-				<a href={"/d"+fs_encode_path(sibling.path)} class="node" class:playing={sibling.path === $nav.base.path}>
+				<a href={"/d"+fs_encode_path(sibling.path)} class="node" class:button_highlight={sibling.path === $nav.base.path}>
 					{#if sibling.path === $nav.base.path}
 						<i class="play_arrow icon">play_arrow</i>
 					{:else}
@@ -185,7 +185,4 @@ onMount(() => {
 .play_arrow {
 	margin: 4px;
 }
-.playing {
-	color: var(--accent_color);
-}
 </style>

svelte/src/layout/ToggleButton.svelte

@@ -54,7 +54,7 @@ const click = (e: MouseEvent) => {
 	flex: 0 0 content;
 }
 .on {
-	color: var(--accent_color);
+	color: var(--link_color);
 }
 .off {
 	color: var(--red_color);

svelte/src/layout/checkout/PickAmount.svelte

@@ -280,7 +280,7 @@ const submit = async (e: SubmitEvent) => {
 
 <style>
 .date {
-	color: var(--accent_color);
+	color: var(--link_color);
 }
 /* layout.css collapses the table borders, which makes the browser ignore any
    padding on the table itself. The cells line the table up with the rest of

svelte/src/main.ts

@@ -0,0 +1,4 @@
+import App from "wrap/App.svelte";
+import { mount } from "svelte";
+
+mount(App, { target: document.body });

svelte/src/util/Euro.svelte

@@ -18,6 +18,6 @@ let { symbol = "€", amount = 0, precision = 2 }: {
 	color: var(--red_color);
 }
 .positive {
-	color: var(--accent_color);
+	color: var(--link_color);
 }
 </style>

svelte/src/wrap.js

@@ -1,9 +0,0 @@
-import App from './wrap/MainMenu.svelte';
-import { mount } from "svelte";
-
-const app = mount(App, {
-	target: document.body,
-	props: {}
-});
-
-export default app;

svelte/vite.config.ts

@@ -20,10 +20,10 @@ export default defineConfig({
 		// Compile newer syntax down to what browsers from September 2021 support
 		target: ["chrome94", "edge94", "firefox91", "safari15"],
 		rollupOptions: {
-			input: "src/wrap.js",
+			input: "src/main.ts",
 			// The entrypoint keeps its name so the HTML template can find it,
 			// the chunks it imports get a hash in their names
-			output: { entryFileNames: "wrap.js" },
+			output: { entryFileNames: "main.js" },
 		},
 	},
 	plugins: [

webcontroller/web_controller.go

@@ -62,7 +62,7 @@ func New(r *httprouter.Router, conf Config) (wc *WebController) {
 	var resourceHandler = func(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
 		// Cache resources for a year. Except the Svelte entrypoint, it keeps its
 		// name when it changes. The chunks it imports have a hash in their name
-		if p.ByName("filepath") == "/svelte/wrap.js" {
+		if p.ByName("filepath") == "/svelte/main.js" {
 			w.Header().Set("Cache-Control", "no-cache")
 		} else {
 			w.Header().Set("Cache-Control", "public, max-age=31536000")