style: add a dotted background, tweaks and fixes

Author: WarningImHack3r

package.json

@@ -3,7 +3,7 @@
 	"version": "1.0.0",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

src/app.css

@@ -150,6 +150,13 @@
 
 	body {
 		@apply flex min-h-screen flex-col bg-background text-foreground;
+		background-image:
+			radial-gradient(var(--color-border) 0.5px, transparent 0.5px),
+			radial-gradient(var(--color-border) 0.5px, var(--color-background) 0.5px);
+		background-size: 20px 20px;
+		background-position:
+			0 0,
+			10px 10px;
 	}
 
 	/* I like pointer cursors on buttons */

src/routes/+layout.svelte

@@ -105,9 +105,10 @@
 
 <header
 	class={[
-		"sticky top-0 z-40 w-full bg-background/95 backdrop-blur transition-shadow duration-500 supports-backdrop-filter:bg-background/60",
+		"sticky top-0 z-40 w-full transition-shadow duration-500",
 		{
-			"shadow-sm": newsToDisplay || (scrollY.current ?? 0) >= 25
+			"bg-background/95 shadow-sm backdrop-blur supports-backdrop-filter:bg-background/60":
+				newsToDisplay || (scrollY.current ?? 0) >= 25
 		}
 	]}
 >

src/routes/[pid=pid]/[org]/[repo]/[id=number]/BottomCollapsible.svelte

@@ -22,7 +22,7 @@
 	let id = $props.id();
 </script>
 
-<div class="rounded-md border px-4">
+<div class="rounded-md border bg-background px-4">
 	<Accordion.Root type="single" value={openByDefault ? id : undefined}>
 		<Accordion.Item value={id} class="border-b-0">
 			<Accordion.Trigger

src/routes/[pid=pid]/[org]/[repo]/[id=number]/PageRenderer.svelte

@@ -362,7 +362,7 @@
 	<!-- Info -->
 	<div class="mb-8 flex w-full flex-col justify-center gap-8 *:h-fit md:flex-row">
 		<!-- Left part - body -->
-		<div class="flex-1 rounded-md border bg-muted/30">
+		<div class="flex-1 rounded-md border bg-background">
 			<!-- Author -->
 			<div
 				class="inline-flex w-full flex-col gap-1 border-b bg-muted/60 px-4 py-2 xs:flex-row xs:items-center xs:gap-0"
@@ -389,7 +389,7 @@
 				</span>
 			</div>
 			<!-- Body -->
-			<div class="p-4">
+			<div class="bg-muted/30 p-4">
 				<MarkdownRenderer
 					markdown={info.body || "_No description provided_"}
 					parseRawHtml
@@ -427,7 +427,7 @@
 		</div>
 		<!-- Right part - info -->
 		<div class="flex flex-col gap-4 md:w-2/5 md:max-w-xs md:min-w-72">
-			<div class="rounded-md border px-4 pb-3">
+			<div class="rounded-md border bg-background px-4 pb-3">
 				<h4 class="-mx-4 mb-4 border-b bg-muted/40 px-4 pt-2 pb-1 text-xl font-semibold">Info</h4>
 				{#each rightPartInfo as { title, value }, i (title)}
 					{#if i > 0}
@@ -442,22 +442,24 @@
 			{#await mergedTagName then mergedTag}
 				{#if mergedTag}
 					{@const [tagName, tagVersion] = mergedTag}
-					<Alert.Root class="rounded-md border-green-500 bg-green-400/10">
-						<Tag class="size-4" />
-						<Alert.Description class="inline text-foreground">
-							This pull request was released in
-							<Button
-								variant="link"
-								href={resolve("/package/[...package]", {
-									package: tagName
-								}) + `#${tagVersion}`}
-								class="h-auto p-0 text-green-500"
-							>
-								{tagName}
-								{tagVersion}
-							</Button>
-						</Alert.Description>
-					</Alert.Root>
+					<div class="bg-background">
+						<Alert.Root class="rounded-md border-green-500 bg-green-400/10">
+							<Tag class="size-4" />
+							<Alert.Description class="inline text-foreground">
+								This pull request was released in
+								<Button
+									variant="link"
+									href={resolve("/package/[...package]", {
+										package: tagName
+									}) + `#${tagVersion}`}
+									class="h-auto p-0 text-green-500"
+								>
+									{tagName}
+									{tagVersion}
+								</Button>
+							</Alert.Description>
+						</Alert.Root>
+					</div>
 				{/if}
 			{/await}
 		</div>

src/routes/package/[...package]/ReleaseCard.svelte

@@ -223,7 +223,7 @@
 	id={release.cleanVersion}
 	value={`${release.id}`}
 	class={[
-		"scroll-mt-20 rounded-md border-b-0 shadow-lg outline outline-transparent transition-colors duration-300 data-[state=open]:outline-muted-foreground/20 [&>[data-accordion-content]]:rounded-md [&>[data-accordion-content]]:bg-accent/30",
+		"scroll-mt-20 rounded-md border-b-0 bg-background shadow-lg outline outline-transparent transition-colors duration-300 data-[state=open]:outline-muted-foreground/20 [&>[data-accordion-content]]:rounded-b-md [&>[data-accordion-content]]:bg-accent/30",
 		{ "border border-primary": isMajorRelease && index < 3 },
 		{ "ring ring-primary": page.url.hash && page.url.hash === `#${release.cleanVersion}` }
 	]}