redesign some things

Author: TGlide

package.json

@@ -69,5 +69,10 @@
 		]
 	},
 	"type": "module",
-	"packageManager": "[email protected]"
+	"packageManager": "[email protected]",
+	"dependencies": {
+		"@fontsource-variable/inter-tight": "^5.1.1",
+		"@fontsource-variable/playfair-display": "^5.1.1",
+		"@fontsource/iosevka": "^5.1.0"
+	}
 }

pnpm-lock.yaml

@@ -8,6 +8,10 @@
 	--breakpoint-xs: 475px;
 	--breakpoint-2xl: 1400px;
 
+	--font-display: "GT Super Display", serif;
+	--font-sans: "Inter Tight Variable", sans-serif;
+	--font-mono: "Iosevka", monospace;
+
 	--color-background: hsl(var(--background));
 	--color-foreground: hsl(var(--foreground));
 
@@ -119,7 +123,7 @@
 		--radius: 0.5rem;
 	}
 	.dark {
-		--background: 20 14.3% 4.1%;
+		--background: 276 10.64% 9.22%;
 		--foreground: 60 9.1% 97.8%;
 		--card: 20 14.3% 4.1%;
 		--card-foreground: 60 9.1% 97.8%;

src/app.css

@@ -6,6 +6,8 @@
 			rel="icon"
 			href="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg"
 		/>
+
+		<link rel="stylesheet" href="/fonts/gt-super.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

src/app.html

@@ -31,7 +31,8 @@
 <svelte:element
 	this={inline ? "span" : "div"}
 	class={cn(
-		"prose dark:prose-invert prose-a:[overflow-wrap:_anywhere] prose-a:text-primary prose-a:no-underline prose-a:underline-offset-4 prose-a:hover:underline prose-code:[overflow-wrap:_anywhere] prose-li:my-1",
+		"prose-code:[overflow-wrap:_anywhere]p prose dark:prose-invert prose-a:[overflow-wrap:_anywhere] prose-a:text-primary prose-a:no-underline prose-a:underline-offset-4 prose-a:hover:underline",
+		"prose-code:rounded-md  prose-code:bg-neutral-800 prose-code:px-[4px] prose-code:py-[3px] prose-li:my-1",
 		"prose-pre:text-wrap", // remove with TODO
 		inline && "*:inline",
 		className

src/lib/components/MarkdownRenderer.svelte

@@ -12,7 +12,7 @@
 <TabsPrimitive.List
 	bind:ref
 	class={cn(
-		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
+		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-xl p-1",
 		className
 	)}
 	{...restProps}

src/lib/components/ui/tabs/tabs-list.svelte

@@ -12,7 +12,7 @@
 <TabsPrimitive.Trigger
 	bind:ref
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+		"ring-offset-background focus-visible:ring-ring  data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
 		className
 	)}
 	{...restProps}

src/lib/components/ui/tabs/tabs-trigger.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
 	import "../app.css";
+	import "@fontsource-variable/playfair-display";
+	import "@fontsource-variable/inter-tight";
+	import "@fontsource/iosevka/400.css";
+	import "@fontsource/iosevka/500.css";
+	import "@fontsource/iosevka/600.css";
+
 	import { onMount, type SvelteComponent } from "svelte";
 	import type { SvelteHTMLElements } from "svelte/elements";
 	import { fade } from "svelte/transition";
@@ -134,7 +140,7 @@
 <ModeWatcher />
 <Toaster />
 <header
-	class="sticky top-0 z-40 w-full bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/60"
+	class="top-0 z-40 hidden w-full bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/60"
 >
 	<div
 		class={[

src/routes/+layout.svelte

@@ -265,7 +265,7 @@
 />
 
 <div class="container py-8">
-	<h2 class="text-3xl font-bold">
+	<h2 class="font-display text-[52px] font-medium">
 		<span class="text-primary">{data.repos[currentTab].name}</span>
 		Releases
 	</h2>