fix: button code on mobile

also change /status to /activity and also mess up linting (lol)

src/components/Computer.svelte

@@ -1,14 +1,6 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	import {
+	import { Area, Axis, Chart, Highlight, LinearGradient, Svg, Tooltip } from "layerchart";
-		Area,
-		Axis,
-		Chart,
-		Highlight,
-		LinearGradient,
-		Svg,
-		Tooltip,
-	} from "layerchart";
 	import { scaleTime } from "d3-scale";
 	import { curveCatmullRom } from "d3-shape";
 	import { computerData } from "../states.svelte";
@@ -78,19 +70,14 @@
 				ram: point.ram / 100,
 			}));
 
-			const totalClicks = chartData.reduce(
+			const totalClicks = chartData.reduce((sum, point) => sum + point.clicks, 0);
-				(sum, point) => sum + point.clicks,
-				0
-			);
 			const totalKeys = chartData.reduce((sum, point) => sum + point.keys, 0);
 
 			clicksPerMinute = totalClicks / 60; // 60 minutes (max graph data)
 			keysPerMinute = totalKeys / 60;
 
 			// Uptime
-			const diff = data.online
+			const diff = data.online ? Math.floor((Date.now() - data.uptimeStart * 1000) / 1000) : 0;
-				? Math.floor((Date.now() - data.uptimeStart * 1000) / 1000)
-				: 0;
 			const allTime = diff + data.totals.uptime;
 
 			allTimeUptime = formatTime(allTime);
@@ -111,16 +98,10 @@
 	});
 </script>
 
-<div
+<div class="relative transition-all duration-300 delay-200 starting:opacity-0 starting:translate-y-4">
-	class="relative transition-all duration-300 delay-200 starting:opacity-0 starting:translate-y-4"
->
 	<div class="flex justify-center items-center absolute -top-2 right-2 z-0">
 		<div class="w-4 h-4 rounded-full {online ? 'bg-green' : 'bg-red'}"></div>
-		<div
+		<div class="w-4 h-4 rounded-full absolute animate-duration-2s animate-delay-2s {online ? 'bg-green animate-ping' : 'bg-red'}"></div>
-			class="w-4 h-4 rounded-full absolute animate-duration-2s animate-delay-2s {online
-				? 'bg-green animate-ping'
-				: 'bg-red'}"
-		></div>
 	</div>
 
 	<section class="mb-0!">
@@ -135,10 +116,7 @@
 						<span class="text-xs font-bold text-peach">{currentCPU}%</span>
 					</div>
 					<div class="h-1.5 w-full rounded-full overflow-hidden bg-surface0/50">
-						<div
+						<div class="h-full rounded-full bg-peach transition-all duration-300" style="width: {Math.min(100, currentCPU)}%;"></div>
-							class="h-full rounded-full bg-peach transition-all duration-300"
-							style="width: {Math.min(100, currentCPU)}%;"
-						></div>
 					</div>
 				</div>
 
@@ -148,10 +126,7 @@
 						<span class="text-xs font-bold text-yellow">{currentRAM}%</span>
 					</div>
 					<div class="h-1.5 w-full rounded-full overflow-hidden bg-surface0/50">
-						<div
+						<div class="h-full rounded-full bg-yellow transition-all duration-300" style="width: {Math.min(100, currentRAM)}%;"></div>
-							class="h-full rounded-full bg-yellow transition-all duration-300"
-							style="width: {Math.min(100, currentRAM)}%;"
-						></div>
 					</div>
 				</div>
 			</div>
@@ -159,32 +134,19 @@
 			<!-- Stats Grid -->
 			<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 				<!-- Uptime Card -->
-				<div
+				<div class="bg-surface0/30 rounded-lg p-3 border border-surface0 shadow-sm">
-					class="bg-surface0/30 rounded-lg p-3 border border-surface0 shadow-sm"
-				>
 					<div class="flex mb-1">
 						<div class="relative">
-							<svg
+							<svg width="20" height="20" viewBox="0 0 20 20" fill-rule="evenodd" class="absolute -bottom-0.5 fill-overlay1">
-								width="20"
+								<path d="M10 5.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M2.5 11a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0" />
-								height="20"
-								viewBox="0 0 20 20"
-								fill-rule="evenodd"
-								class="absolute -bottom-0.5 fill-overlay1"
-							>
-								<path
-									d="M10 5.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M2.5 11a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0"
-								/>
 								<path
 									d="M2.793 3.793a1 1 0 0 1 1.414 0l1.5 1.5c.91.943-.471 2.324-1.414 1.414l-1.5-1.5a1 1 0 0 1 0-1.414m11.5 2.914a1 1 0 0 0 1.414 0l1.5-1.5c.91-.943-.471-2.324-1.414-1.414l-1.5 1.5a1 1 0 0 0 0 1.414M9 4V2h2v2z"
 								/>
-								<path
+								<path d="M7.5 2a1 1 0 0 1 1-1h3a1 1 0 1 1 0 2h-3a1 1 0 0 1-1-1" />
-									d="M7.5 2a1 1 0 0 1 1-1h3a1 1 0 1 1 0 2h-3a1 1 0 0 1-1-1"
-								/>
 								<!-- Hand -->
 								<path
 									d="m 13.28,8.375 c 0.345578,0.4310223 0.276171,1.0606079 -0.155,1.406 l -2.5,2 C 9.583667,12.614333 8.333667,11.052333 9.375,10.219 l 2.5,-2 c 0.431286,-0.3453463 1.060907,-0.2754879 1.406,0.156"
-									style="transform: rotate({stopwatchDeg -
+									style="transform: rotate({stopwatchDeg - 52}deg); transform-origin: 10px 11px; transition: transform 1s linear;"
-										52}deg); transform-origin: 10px 11px; transition: transform 1s linear;"
 								/>
 							</svg>
 						</div>
@@ -195,32 +157,22 @@
 				</div>
 
 				<!-- Activity Card -->
-				<div
+				<div class="bg-surface0/30 rounded-lg p-3 border border-surface0 shadow-sm">
-					class="bg-surface0/30 rounded-lg p-3 border border-surface0 shadow-sm"
+					<div class="font-black text-xs text-overlay1 mb-2">ACTIVITY / MIN</div>
-				>
-					<div class="font-black text-xs text-overlay1 mb-2">
-						ACTIVITY / MIN
-					</div>
 					<div class="space-y-1.5">
 						<div class="flex justify-between items-center">
 							<span class="text-xs text-overlay1">Clicks</span>
-							<span class="font-bold text-teal"
+							<span class="font-bold text-teal">{clicksPerMinute.toFixed(1)}</span>
-								>{clicksPerMinute.toFixed(1)}</span
-							>
 						</div>
 						<div class="flex justify-between items-center">
 							<span class="text-xs text-overlay1">Keys</span>
-							<span class="font-bold text-green"
+							<span class="font-bold text-green">{keysPerMinute.toFixed(1)}</span>
-								>{keysPerMinute.toFixed(1)}</span
-							>
 						</div>
 					</div>
 				</div>
 
 				<!-- All Time Card -->
-				<div
+				<div class="bg-surface0/30 rounded-lg p-3 border border-surface0 shadow-sm">
-					class="bg-surface0/30 rounded-lg p-3 border border-surface0 shadow-sm"
-				>
 					<div class="font-black text-xs text-overlay1 mb-2">ALL TIME</div>
 					<div class="space-y-1.5">
 						<div class="flex justify-between items-center">
@@ -236,9 +188,7 @@
 			</div>
 		</div>
 
-		<div
+		<div class="relative h-96 rounded-md bg-mantle border border-surface0 p-2 shadow-sm">
-			class="relative h-96 rounded-md bg-mantle border border-surface0 p-2 shadow-sm"
-		>
 			<Chart
 				data={chartData}
 				x="timestamp"
@@ -274,65 +224,35 @@
 					<!-- RAM -->
 					<LinearGradient class="from-peach/50 to-peach/1" vertical>
 						{#snippet children({ gradient })}
-							<Area
+							<Area y1={(d) => d.ram} fill={gradient} line={{ class: "stroke-2 stroke-peach" }} curve={curveCatmullRom} />
-								y1={(d) => d.ram}
-								fill={gradient}
-								line={{ class: "stroke-2 stroke-peach" }}
-								curve={curveCatmullRom}
-							/>
 						{/snippet}
 					</LinearGradient>
 
 					<!-- CPU -->
 					<LinearGradient class="from-yellow/50 to-yellow/1" vertical>
 						{#snippet children({ gradient })}
-							<Area
+							<Area y1={(d) => d.cpu} fill={gradient} line={{ class: "stroke-2 stroke-yellow" }} curve={curveCatmullRom} />
-								y1={(d) => d.cpu}
-								fill={gradient}
-								line={{ class: "stroke-2 stroke-yellow" }}
-								curve={curveCatmullRom}
-							/>
 						{/snippet}
 					</LinearGradient>
 
-					<Highlight
+					<Highlight lines={{ class: "stroke-peach [stroke-dasharray:unset]" }} />
-						lines={{ class: "stroke-peach [stroke-dasharray:unset]" }}
-					/>
 					<Highlight y={(d) => d.ram} points={{ class: "fill-peach" }} />
 					<Highlight y={(d) => d.cpu} points={{ class: "fill-yellow" }} />
 				</Svg>
 
-				<Tooltip.Root
+				<Tooltip.Root class="border border-peach bg-peach/10! text-white/85 backdrop-blur-lg!">
-					class="border border-peach bg-peach/10! text-white/85 backdrop-blur-lg!"
-				>
 					{#snippet children({ data })}
-						<Tooltip.Header
+						<Tooltip.Header value={data.timestamp} format="time" classes={{ root: "border-peach" }} />
-							value={data.timestamp}
-							format="time"
-							classes={{ root: "border-peach" }}
-						/>
 						<Tooltip.List>
-							<Tooltip.Item
+							<Tooltip.Item label="RAM (%)" value={data.ram} format="percentRound" classes={{ value: "font-mono font-black text-peach" }} />
-								label="RAM (%)"
+							<Tooltip.Item label="CPU (%)" value={data.cpu} format="percentRound" classes={{ value: "font-mono font-black text-yellow" }} />
-								value={data.ram}
-								format="percentRound"
-								classes={{ value: "font-mono font-black text-peach" }}
-							/>
-							<Tooltip.Item
-								label="CPU (%)"
-								value={data.cpu}
-								format="percentRound"
-								classes={{ value: "font-mono font-black text-yellow" }}
-							/>
 						</Tooltip.List>
 					{/snippet}
 				</Tooltip.Root>
 			</Chart>
 		</div>
 
-		<div
+		<div class="relative h-48 rounded-md bg-mantle border border-surface0 p-2 mt-2 shadow-sm">
-			class="relative h-48 rounded-md bg-mantle border border-surface0 p-2 mt-2 shadow-sm"
-		>
 			<Chart
 				data={chartData}
 				x="timestamp"
@@ -367,61 +287,38 @@
 					<!-- Keys -->
 					<LinearGradient class="from-green/50 to-green/1" vertical>
 						{#snippet children({ gradient })}
-							<Area
+							<Area y1={(d) => d.keys} fill={gradient} line={{ class: "stroke-2 stroke-green" }} curve={curveCatmullRom} />
-								y1={(d) => d.keys}
-								fill={gradient}
-								line={{ class: "stroke-2 stroke-green" }}
-								curve={curveCatmullRom}
-							/>
 						{/snippet}
 					</LinearGradient>
 
 					<!-- Clicks -->
 					<LinearGradient class="from-teal/50 to-teal/1" vertical>
 						{#snippet children({ gradient })}
-							<Area
+							<Area y1={(d) => d.clicks} fill={gradient} line={{ class: "stroke-2 stroke-teal" }} curve={curveCatmullRom} />
-								y1={(d) => d.clicks}
-								fill={gradient}
-								line={{ class: "stroke-2 stroke-teal" }}
-								curve={curveCatmullRom}
-							/>
 						{/snippet}
 					</LinearGradient>
 
-					<Highlight
+					<Highlight lines={{ class: "stroke-peach [stroke-dasharray:unset]" }} />
-						lines={{ class: "stroke-peach [stroke-dasharray:unset]" }}
-					/>
 					<Highlight y={(d) => d.keys} points={{ class: "fill-green" }} />
 					<Highlight y={(d) => d.clicks} points={{ class: "fill-teal" }} />
 				</Svg>
 
 				<Tooltip.Root
 					classes={{
-						container:
+						container: "border border-peach bg-peach/10! text-white/85 backdrop-blur-lg!",
-							"border border-peach bg-peach/10! text-white/85 backdrop-blur-lg!",
 					}}
 				>
 					{#snippet children({ data })}
-						<Tooltip.Header
+						<Tooltip.Header value={data.timestamp} format="time" classes={{ root: "border-peach" }} />
-							value={data.timestamp}
-							format="time"
-							classes={{ root: "border-peach" }}
-						/>
 						<Tooltip.List>
-							<Tooltip.Item
+							<Tooltip.Item label="Keys" value={data.keys} classes={{ value: "font-mono font-black text-green" }} />
-								label="Keys"
+							<Tooltip.Item label="Clicks" value={data.clicks} classes={{ value: "font-mono font-black text-teal" }} />
-								value={data.keys}
-								classes={{ value: "font-mono font-black text-green" }}
-							/>
-							<Tooltip.Item
-								label="Clicks"
-								value={data.clicks}
-								classes={{ value: "font-mono font-black text-teal" }}
-							/>
 						</Tooltip.List>
 					{/snippet}
 				</Tooltip.Root>
 			</Chart>
 		</div>
+
+		<p class="text-xs text-overlay1 mt-2">* Since 9 November 2025</p>
 	</section>
 </div>

src/components/Header.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	const links = [
 		{ name: "home", url: "/" },
-		{ name: "status", url: "/status/" },
+		{ name: "activity", url: "/activity/" },
 		{ name: "buttons", url: "/buttons/" },
 	];
 

src/components/Music.svelte

@@ -37,14 +37,7 @@
 
 		<a href={url} class="block relative h-24 group">
 			<div class="absolute p-2 flex gap-2 z-30 w-full">
-				<img
+				<img src={image} width="80" height="80" fetchpriority="high" alt="album cover" class="size-20 rounded-full animate-spin animate-duration-30s" />
-					src={image}
-					width="80"
-					height="80"
-					fetchpriority="high"
-					alt="album cover"
-					class="size-20 rounded-full animate-spin animate-duration-30s"
-				/>
 
 				<div class="flex flex-col w-full min-w-0">
 					<h1 class="font-medium text-lg truncate">{song}</h1>

src/layouts/Layout.astro

@@ -77,10 +77,7 @@ import ProfilePicture from "../../public/pfp.webp";
 		<Lunar aria-hidden class="absolute top-8 right-8 size-12 animate-avoid hover:animate-running not-hover:animate-pause" />
 
 		<div class="max-w-4xl w-full grid grid-cols-5 gap-4 py-8 max-[60rem]:grid-cols-1">
-			<div
+			<div class="flex flex-col max-[32rem]:flex-row lg:flex-col items-center gap-6 sm:gap-8 lg:gap-8 justify-center md:justify-start" transition:persist>
-				class="flex flex-col max-[32rem]:flex-row lg:flex-col items-center gap-6 sm:gap-8 lg:gap-8 justify-center md:justify-start"
-				transition:persist
-			>
 				<a href="/">
 					<Image
 						src={ProfilePicture}

src/pages/buttons.astro

@@ -5,18 +5,15 @@ import EightyEightyThirtyOne from "../components/88x31.svelte";
 ---
 
 <Layout>
-	<section
+	<section class="mb-0! transition-all duration-300 delay-100 starting:opacity-0 starting:translate-y-4 text-[0.938rem] [&_img]:w-[88px] [&_img]:h-[31px]">
-		class="mb-0! transition-all duration-300 delay-100 starting:opacity-0 starting:translate-y-4 text-[0.938rem] [&_img]:w-[88px] [&_img]:h-[31px]"
-	>
 		<legend>buttons</legend>
 
 		<p class="mb-1">
 			Welcome to my collection of 88x31 buttons, containing cool websites or just random buttons. Get my button below, hotlinking is perfectly fine:
 		</p>
 
-		<div class="flex">
+		<div class="flex max-md:flex-col">
-			<a href="https://trafficlunar.net/" target="_blank" class="shrink-0 mt-2 mr-2 h-min"
+			<a href="https://trafficlunar.net/" target="_blank" class="shrink-0 mt-2 mr-2 h-min"><img src="/88x31.gif" width="88" height="31" alt="trafficlunar" /></a
-				><img src="/88x31.gif" width="88" height="31" alt="trafficlunar" /></a
 			>
 
 			<div class="bg-mantle p-2.5 rounded-lg relative border border-surface0/75 shadow-sm mt-2">

src/pages/index.astro

@@ -17,21 +17,18 @@ import LocationIcon from "../assets/icons/location.svg";
 		</p>
 		<p class="mt-2">I like coding things, maintaining and setting up servers, playing video games, watching anime, and listening to music.</p>
 		<p class="mt-2">
-			This site was made using <a href="https://astro.build/" class="link">Astro</a> + <a href="https://svelte.dev/" class="link">Svelte</a> and is hosted
+			This site was made using Astro + Svelte and is hosted on both
-			on both <a href="https://pages.cloudflare.com/" class="link" data-tooltip="At trafficlunar.net!">Cloudflare Pages (?)</a> and <a
+			<a href="https://pages.cloudflare.com/" class="link" data-tooltip="At trafficlunar.net!">Cloudflare Pages (?)</a> and <a
 				href="https://nekoweb.org/"
 				class="link"
 				data-tooltip="At trafficlunar.nekoweb.org!">Nekoweb (?)</a
 			>.
 		</p>
 		<p class="mt-2">
-			I use <a href="https://archlinux.org/" class="link">Arch</a> BTW and <a href="https://hypr.land/" class="link">Hyprland</a> with <a
+			I use Arch BTW and Hyprland with the Catppuccin
-				href="https://github.com/catppuccin/catppuccin?tab=readme-ov-file#-palette"
+			<span class="text-red">F</span><span class="text-peach">r</span><span class="text-yellow">a</span><span class="text-green">p</span><span class="text-blue"
-				class="link">Catppuccin</a
+				>p</span
-			>
+			><span class="text-mauve">é</span> color scheme for everything (including this website!)
-			<span class="text-red">F</span><span class="text-peach">r</span><span class="text-yellow">a</span><span class="text-green">p</span><span
-				class="text-blue">p</span
-			><span class="text-mauve">é</span> color schemes for everything (including this website!)
 		</p>
 
 		<div class="flex gap-1 mt-4">
@@ -48,9 +45,7 @@ import LocationIcon from "../assets/icons/location.svg";
 
 	<Tools />
 
-	<div
+	<div class="flex items-center gap-4 text-subtext0 text-sm font-medium my-4 transition-all duration-300 delay-250 starting:opacity-0 starting:translate-y-4">
-		class="flex items-center gap-4 text-subtext0 text-sm font-medium my-4 transition-all duration-300 delay-250 starting:opacity-0 starting:translate-y-4"
-	>
 		<hr class="grow border-surface1" />
 		<span>projects</span>
 		<hr class="grow border-surface1" />