will/sludge-link
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updating the theme selector and made things look better on mobile

Browse Source
This commit is contained in:
Will Stensvold
2026-03-05 01:24:20 -06:00
parent f8b9dcce8e
commit afb38aaba6
9 changed files with 109 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sludge-link.servce → sludge-link.service
+4
View File
@@ -7,6 +7,10 @@ StartLimitIntervalSec=10
Type=simple Type=simple
User=root User=root
WorkingDirectory=/root/build WorkingDirectory=/root/build
Environment="ORIGIN=https://sludge.link"
Environment="NODE_ENV=production"
ExecStart=/root/.bun/bin/bun run index.js ExecStart=/root/.bun/bin/bun run index.js
Restart=always Restart=always
StartLimitBurst=3 StartLimitBurst=3
src/routes/+layout.svelte
+41 -96
View File
@@ -3,14 +3,18 @@
data: {}; data: {};
children: any; children: any;
} }
let { data, children }: Props = $props(); let { children }: Props = $props();
// $inspect("l",data);
let theme = $state("green");
const THEMES = ["blue", "yellow", "orange", "brown", "green"];
function change_theme() { function change_theme() {
let index = THEMES.findIndex((color) => theme == color); let TOLERANCE = 20;
theme = THEMES[(index + 1) % THEMES.length]; let hue = parseFloat(
document.documentElement.style.getPropertyValue("--primary") || "0",
);
let random = hue;
while (Math.abs(random - hue) <= TOLERANCE) {
random = Math.floor(Math.random() * 360);
}
document.documentElement.style.setProperty("--primary", String(random));
} }
</script> </script>
@@ -19,13 +23,12 @@
<meta name="description" content="Sludge's internet facing spot" /> <meta name="description" content="Sludge's internet facing spot" />
</svelte:head> </svelte:head>
<div id="buddy" class={theme}> <div id="buddy">
<nav> <nav>
<a href="/">Sludge</a> <a href="/">Sludge</a>
<button onclick={change_theme}>Cycle Color</button> <button onclick={change_theme}>&#127752;</button>
<a href="/fest">Fest</a> <a href="/fest">Fest</a>
<a href="/pork">Pork</a> <a href="/pork">Pork</a>
<!-- <a href="/blag">Blag</a> -->
</nav> </nav>
<main> <main>
@@ -35,95 +38,23 @@
<style lang="scss"> <style lang="scss">
:root { :root {
--blue: 324;
--yellow: 77;
--orange: 188;
--brown: 42;
--green: 142;
--green-42: oklch(0.42 0.042 142); --green-42: oklch(0.42 0.042 142);
--br: 0.375rem; --br: 0.375rem;
--primary: var(--green);
.blue { --primary: 0;
--primary: var(--blue); --primary-1: oklch(0.91 0.046 var(--primary));
--primary-1: oklch(0.91 0.046 var(--primary)); --primary-2: oklch(0.843 0.083 var(--primary));
--primary-2: oklch(0.843 0.083 var(--primary)); --primary-3: oklch(0.777 0.122 var(--primary));
--primary-3: oklch(0.777 0.122 var(--primary)); --primary-4: oklch(0.71 0.163 var(--primary));
--primary-4: oklch(0.71 0.163 var(--primary)); --primary-5: oklch(0.643 0.179 var(--primary));
--primary-5: oklch(0.643 0.179 var(--primary)); --primary-6: oklch(0.577 0.161 var(--primary));
--primary-6: oklch(0.577 0.161 var(--primary)); --primary-7: oklch(0.51 0.142 var(--primary));
--primary-7: oklch(0.51 0.142 var(--primary)); --primary-8: oklch(0.443 0.124 var(--primary));
--primary-8: oklch(0.443 0.124 var(--primary)); --primary-9: oklch(0.377 0.105 var(--primary));
--primary-9: oklch(0.377 0.105 var(--primary)); --primary-10: oklch(0.31 0.086 var(--primary));
--primary-10: oklch(0.31 0.086 var(--primary)); --primary-11: oklch(0.243 0.068 var(--primary));
--primary-11: oklch(0.243 0.068 var(--primary)); --primary-12: oklch(0.177 0.049 var(--primary));
--primary-12: oklch(0.177 0.049 var(--primary)); --primary-13: oklch(0.11 0.031 var(--primary));
--primary-13: oklch(0.11 0.031 var(--primary));
}
.yellow {
--primary: var(--yellow);
--primary-1: oklch(0.91 0.046 var(--primary));
--primary-2: oklch(0.843 0.083 var(--primary));
--primary-3: oklch(0.777 0.122 var(--primary));
--primary-4: oklch(0.71 0.163 var(--primary));
--primary-5: oklch(0.643 0.179 var(--primary));
--primary-6: oklch(0.577 0.161 var(--primary));
--primary-7: oklch(0.51 0.142 var(--primary));
--primary-8: oklch(0.443 0.124 var(--primary));
--primary-9: oklch(0.377 0.105 var(--primary));
--primary-10: oklch(0.31 0.086 var(--primary));
--primary-11: oklch(0.243 0.068 var(--primary));
--primary-12: oklch(0.177 0.049 var(--primary));
--primary-13: oklch(0.11 0.031 var(--primary));
}
.orange {
--primary: var(--brown);
--primary-1: oklch(0.91 0.046 var(--primary));
--primary-2: oklch(0.843 0.083 var(--primary));
--primary-3: oklch(0.777 0.122 var(--primary));
--primary-4: oklch(0.71 0.163 var(--primary));
--primary-5: oklch(0.643 0.179 var(--primary));
--primary-6: oklch(0.577 0.161 var(--primary));
--primary-7: oklch(0.51 0.142 var(--primary));
--primary-8: oklch(0.443 0.124 var(--primary));
--primary-9: oklch(0.377 0.105 var(--primary));
--primary-10: oklch(0.31 0.086 var(--primary));
--primary-11: oklch(0.243 0.068 var(--primary));
--primary-12: oklch(0.177 0.049 var(--primary));
--primary-13: oklch(0.11 0.031 var(--primary));
}
.brown {
--primary: var(--brown);
--primary-1: oklch(0.91 0.046 var(--primary));
--primary-2: oklch(0.843 0.083 var(--primary));
--primary-3: oklch(0.777 0.122 var(--primary));
--primary-4: oklch(0.71 0.163 var(--primary));
--primary-5: oklch(0.643 0.179 var(--primary));
--primary-6: oklch(0.577 0.161 var(--primary));
--primary-7: oklch(0.51 0.142 var(--primary));
--primary-8: oklch(0.443 0.124 var(--primary));
--primary-9: oklch(0.377 0.105 var(--primary));
--primary-10: oklch(0.31 0.086 var(--primary));
--primary-11: oklch(0.243 0.068 var(--primary));
--primary-12: oklch(0.177 0.049 var(--primary));
--primary-13: oklch(0.11 0.031 var(--primary));
}
.green {
--primary: var(--green);
--primary-1: oklch(0.91 0.046 var(--primary));
--primary-2: oklch(0.843 0.083 var(--primary));
--primary-3: oklch(0.777 0.122 var(--primary));
--primary-4: oklch(0.71 0.163 var(--primary));
--primary-5: oklch(0.643 0.179 var(--primary));
--primary-6: oklch(0.577 0.161 var(--primary));
--primary-7: oklch(0.51 0.142 var(--primary));
--primary-8: oklch(0.443 0.124 var(--primary));
--primary-9: oklch(0.377 0.105 var(--primary));
--primary-10: oklch(0.31 0.086 var(--primary));
--primary-11: oklch(0.243 0.068 var(--primary));
--primary-12: oklch(0.177 0.049 var(--primary));
--primary-13: oklch(0.11 0.031 var(--primary));
}
} }
#buddy { #buddy {
min-height: 100vh; min-height: 100vh;
@@ -204,8 +135,8 @@
} }
nav { nav {
padding: 1rem 20%;
display: flex; display: flex;
padding: 1rem;
gap: 1rem; gap: 1rem;
justify-content: flex-end; justify-content: flex-end;
text-shadow: 3px 3px 3px var(--primary-9); text-shadow: 3px 3px 3px var(--primary-9);
@@ -213,6 +144,7 @@
font-weight: 700; font-weight: 700;
line-height: 2rem; line-height: 2rem;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.5rem;
text-decoration: none; text-decoration: none;
&:first-child { &:first-child {
margin-right: auto; margin-right: auto;
@@ -225,10 +157,13 @@
background: var(--primary-8); background: var(--primary-8);
border-radius: var(--br); border-radius: var(--br);
border: none; border: none;
width: fit-content;
height: fit-content; height: fit-content;
padding: 0.375rem 0.5rem; padding: 0.375rem 0.5rem;
margin: auto 0; margin: auto 0;
font-family: "Baskerville"; font-family: "Baskerville";
font-size: 1.5rem;
line-height: 1.5rem;
font-weight: 900; font-weight: 900;
color: var(--primary-1); color: var(--primary-1);
&:hover { &:hover {
@@ -240,8 +175,18 @@
main { main {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 1rem;
} }
@media screen and (min-width: 600px) {
nav {
padding: 1rem 20%;
flex-direction: row;
button {
margin: 0 auto 0 0;
}
}
}
@font-face { @font-face {
font-family: "Baskerville"; font-family: "Baskerville";
font-display: swap; font-display: swap;
src/routes/+page.server.ts
-13
View File
@@ -1,13 +0,0 @@
import { create_user } from '$lib/db';
import { fail, type Actions } from '@sveltejs/kit';
import { marked } from 'marked';
export async function load() {
return {};
}
export const actions: Actions = {
default: async ({ request }: { request: Request }) => {
}
};
src/routes/+page.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
let { data, form } = $props<{ html: string }>(); // let { data, form } = $props<{ html: string }>();
</script> </script>
<section> <section>
src/routes/fest/+page.svelte
+11
View File
@@ -156,6 +156,9 @@
height: 0.25rem; height: 0.25rem;
margin: 2rem 0; margin: 2rem 0;
} }
img {
width: 100%;
}
div { div {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
@@ -183,4 +186,12 @@
} }
} }
} }
@media screen and (min-width: 600px) {
section {
img {
width: unset;
}
}
}
</style> </style>
src/routes/fest/clicker/+page.server.ts
+7 -7
View File
@@ -3,7 +3,7 @@ import { get_fest_counts, add_fest_counts } from '$lib/db'
export async function load() { export async function load() {
console.log('click') console.log('click')
let { people, tents, cars, year } = await get_fest_counts() let { people, tents, cars, year } = await get_fest_counts()
console.log({ people, tents, cars, year }) // console.log({ people, tents, cars, year })
return { return {
people, people,
tents, tents,
@@ -12,13 +12,13 @@ export async function load() {
} }
} }
export const actions = { export const actions = {
default: async ({ cookies, fetch, getClientAddress, locals, params, platform, request, route, setHeaders, url, isDataRequest }) => { default: async ({ request }) => {
const data = await request.formData() const data = await request.formData()
console.log("save", data) // console.log("save", data)
const people = parseInt(data.get("people")) const people = parseInt(String(data.get("people")))
const tents = parseInt(data.get("tents")) const tents = parseInt(String(data.get("tents")))
const cars = parseInt(data.get("cars")) const cars = parseInt(String(data.get("cars")))
const reply = add_fest_counts(people, tents, cars, 25) const reply = add_fest_counts(people, tents, cars, 25)
console.log("reply", reply) console.log("clicked", reply)
} }
} }
src/routes/fest/clicker/+page.svelte
+29 -19
View File
@@ -1,19 +1,29 @@
<script lang="ts"> <script lang="ts">
import type { MouseEventHandler } from "svelte/elements";
let { data } = $props<{ html: string }>(); let { data } = $props<{ html: string }>();
let people = $state(data.people); let people = $state(data.people);
let tents = $state(data.tents); let tents = $state(data.tents);
let cars = $state(data.cars); let cars = $state(data.cars);
function add(type) { const add: MouseEventHandler<HTMLButtonElement> = ({
if (type == "people") people += 1; currentTarget: {
if (type == "tents") tents += 1; dataset: { id },
if (type == "cars") cars += 1; },
} }) => {
function subtract(type) { if (id == "people") people += 1;
if (type == "people") people -= 1; if (id == "tents") tents += 1;
if (type == "tents") tents -= 1; if (id == "cars") cars += 1;
if (type == "cars") cars -= 1; };
} const subtract: MouseEventHandler<HTMLButtonElement> = ({
currentTarget: {
dataset: { id },
},
}) => {
if (id == "people") people -= 1;
if (id == "tents") tents -= 1;
if (id == "cars") cars -= 1;
};
</script> </script>
<section> <section>
@@ -21,24 +31,24 @@
<div> <div>
<div> <div>
<h3>~{people} people</h3> <h3>~{people} people</h3>
<button onclick={() => add("people")}>+</button> <button data-id="people" onclick={add}>+</button>
<button onclick={() => subtract("people")}>-</button> <button data-id="people" onclick={subtract}>-</button>
</div> </div>
<div> <div>
<h3>~{tents} tents</h3> <h3>~{tents} tents</h3>
<button onclick={() => add("tents")}>+</button> <button data-id="tents" onclick={add}>+</button>
<button onclick={() => subtract("tents")}>-</button> <button data-id="tents" onclick={subtract}>-</button>
</div> </div>
<div> <div>
<h3>~{cars} cars</h3> <h3>~{cars} cars</h3>
<button onclick={() => add("cars")}>+</button> <button data-id="cars" onclick={add}>+</button>
<button onclick={() => subtract("cars")}>-</button> <button data-id="cars" onclick={subtract}>-</button>
</div> </div>
</div> </div>
<form method="POST"> <form method="POST">
<input hidden name="people" value={people} /> <input hidden type="number" name="people" value={people} />
<input hidden name="cars" value={cars} /> <input hidden type="number" name="cars" value={cars} />
<input hidden name="tents" value={tents} /> <input hidden type="number" name="tents" value={tents} />
<button>Save</button> <button>Save</button>
</form> </form>
</section> </section>
src/routes/pork/+page.svelte
+4 -6
View File
@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { RAW_COST, PROCESSED_COST } from "$lib/index";
import type { MouseEventHandler } from "svelte/elements"; import type { MouseEventHandler } from "svelte/elements";
let { data } = $props<{ data: { pork: Pork[] } }>(); let { data } = $props<{ data: { pork: Pork[] } }>();
interface Pork { interface Pork {
@@ -17,10 +16,12 @@
let selected = $state("Chop"); let selected = $state("Chop");
const PRICE_PER_LB = 6; const PRICE_PER_LB = 6;
function change_photo({ target: { id } }) { const change_photo: MouseEventHandler<HTMLLIElement> = ({
currentTarget: { id },
}) => {
console.log(id); console.log(id);
selected = id; selected = id;
} };
</script> </script>
<svelte:head> <svelte:head>
@@ -106,9 +107,6 @@
flex-basis: 50%; flex-basis: 50%;
text-align: center; text-align: center;
text-shadow: 3px 3px 3px var(--primary-7); text-shadow: 3px 3px 3px var(--primary-7);
&.small {
flex-basis: 25%;
}
&:first-child { &:first-child {
text-align: left; text-align: left;
} }
svelte.config.js
+12 -9
View File
@@ -3,16 +3,19 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
// Consult https://svelte.dev/docs/kit/integrations // Consult https://svelte.dev/docs/kit/integrations
// for more information about preprocessors // for more information about preprocessors
preprocess: vitePreprocess(), preprocess: vitePreprocess(),
kit: { kit: {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter. // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://svelte.dev/docs/kit/adapters for more information about adapters. // See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter() adapter: adapter(),
} csrf: {
checkOrigin: true
}
}
}; };
export default config; export default config;