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
src/routes/+layout.svelte
+41 -96
View File
@@ -3,14 +3,18 @@
data: {};
children: any;
}
let { data, children }: Props = $props();
// $inspect("l",data);
let theme = $state("green");
const THEMES = ["blue", "yellow", "orange", "brown", "green"];
let { children }: Props = $props();
function change_theme() {
let index = THEMES.findIndex((color) => theme == color);
theme = THEMES[(index + 1) % THEMES.length];
let TOLERANCE = 20;
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>
@@ -19,13 +23,12 @@
<meta name="description" content="Sludge's internet facing spot" />
</svelte:head>
<div id="buddy" class={theme}>
<div id="buddy">
<nav>
<a href="/">Sludge</a>
<button onclick={change_theme}>Cycle Color</button>
<button onclick={change_theme}>&#127752;</button>
<a href="/fest">Fest</a>
<a href="/pork">Pork</a>
<!-- <a href="/blag">Blag</a> -->
</nav>
<main>
@@ -35,95 +38,23 @@
<style lang="scss">
:root {
--blue: 324;
--yellow: 77;
--orange: 188;
--brown: 42;
--green: 142;
--green-42: oklch(0.42 0.042 142);
--br: 0.375rem;
--primary: var(--green);
.blue {
--primary: var(--blue);
--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));
}
.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));
}
--primary: 0;
--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 {
min-height: 100vh;
@@ -204,8 +135,8 @@
}
nav {
padding: 1rem 20%;
display: flex;
padding: 1rem;
gap: 1rem;
justify-content: flex-end;
text-shadow: 3px 3px 3px var(--primary-9);
@@ -213,6 +144,7 @@
font-weight: 700;
line-height: 2rem;
font-size: 1.5rem;
line-height: 1.5rem;
text-decoration: none;
&:first-child {
margin-right: auto;
@@ -225,10 +157,13 @@
background: var(--primary-8);
border-radius: var(--br);
border: none;
width: fit-content;
height: fit-content;
padding: 0.375rem 0.5rem;
margin: auto 0;
font-family: "Baskerville";
font-size: 1.5rem;
line-height: 1.5rem;
font-weight: 900;
color: var(--primary-1);
&:hover {
@@ -240,8 +175,18 @@
main {
display: flex;
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-family: "Baskerville";
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">
let { data, form } = $props<{ html: string }>();
// let { data, form } = $props<{ html: string }>();
</script>
<section>
src/routes/fest/+page.svelte
+11
View File
@@ -156,6 +156,9 @@
height: 0.25rem;
margin: 2rem 0;
}
img {
width: 100%;
}
div {
display: flex;
gap: 1rem;
@@ -183,4 +186,12 @@
}
}
}
@media screen and (min-width: 600px) {
section {
img {
width: unset;
}
}
}
</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() {
console.log('click')
let { people, tents, cars, year } = await get_fest_counts()
console.log({ people, tents, cars, year })
// console.log({ people, tents, cars, year })
return {
people,
tents,
@@ -12,13 +12,13 @@ export async function load() {
}
}
export const actions = {
default: async ({ cookies, fetch, getClientAddress, locals, params, platform, request, route, setHeaders, url, isDataRequest }) => {
default: async ({ request }) => {
const data = await request.formData()
console.log("save", data)
const people = parseInt(data.get("people"))
const tents = parseInt(data.get("tents"))
const cars = parseInt(data.get("cars"))
// console.log("save", data)
const people = parseInt(String(data.get("people")))
const tents = parseInt(String(data.get("tents")))
const cars = parseInt(String(data.get("cars")))
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">
import type { MouseEventHandler } from "svelte/elements";
let { data } = $props<{ html: string }>();
let people = $state(data.people);
let tents = $state(data.tents);
let cars = $state(data.cars);
function add(type) {
if (type == "people") people += 1;
if (type == "tents") tents += 1;
if (type == "cars") cars += 1;
}
function subtract(type) {
if (type == "people") people -= 1;
if (type == "tents") tents -= 1;
if (type == "cars") cars -= 1;
}
const add: MouseEventHandler<HTMLButtonElement> = ({
currentTarget: {
dataset: { id },
},
}) => {
if (id == "people") people += 1;
if (id == "tents") tents += 1;
if (id == "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>
<section>
@@ -21,24 +31,24 @@
<div>
<div>
<h3>~{people} people</h3>
<button onclick={() => add("people")}>+</button>
<button onclick={() => subtract("people")}>-</button>
<button data-id="people" onclick={add}>+</button>
<button data-id="people" onclick={subtract}>-</button>
</div>
<div>
<h3>~{tents} tents</h3>
<button onclick={() => add("tents")}>+</button>
<button onclick={() => subtract("tents")}>-</button>
<button data-id="tents" onclick={add}>+</button>
<button data-id="tents" onclick={subtract}>-</button>
</div>
<div>
<h3>~{cars} cars</h3>
<button onclick={() => add("cars")}>+</button>
<button onclick={() => subtract("cars")}>-</button>
<button data-id="cars" onclick={add}>+</button>
<button data-id="cars" onclick={subtract}>-</button>
</div>
</div>
<form method="POST">
<input hidden name="people" value={people} />
<input hidden name="cars" value={cars} />
<input hidden name="tents" value={tents} />
<input hidden type="number" name="people" value={people} />
<input hidden type="number" name="cars" value={cars} />
<input hidden type="number" name="tents" value={tents} />
<button>Save</button>
</form>
</section>
src/routes/pork/+page.svelte
+4 -6
View File
@@ -1,5 +1,4 @@
<script lang="ts">
import { RAW_COST, PROCESSED_COST } from "$lib/index";
import type { MouseEventHandler } from "svelte/elements";
let { data } = $props<{ data: { pork: Pork[] } }>();
interface Pork {
@@ -17,10 +16,12 @@
let selected = $state("Chop");
const PRICE_PER_LB = 6;
function change_photo({ target: { id } }) {
const change_photo: MouseEventHandler<HTMLLIElement> = ({
currentTarget: { id },
}) => {
console.log(id);
selected = id;
}
};
</script>
<svelte:head>
@@ -106,9 +107,6 @@
flex-basis: 50%;
text-align: center;
text-shadow: 3px 3px 3px var(--primary-7);
&.small {
flex-basis: 25%;
}
&:first-child {
text-align: left;
}