Color Palette

.gitpod.yml

@@ -1,7 +1,7 @@
 tasks:
   - init: pnpm install
     command: pnpm dev
-      
+
 github:
   prebuilds:
     master: true

prettier.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+	plugins: [require('prettier-plugin-tailwindcss')]
+};

src/app.css

@@ -5,25 +5,40 @@
 
 @layer base {
 	:root {
-		--color-background: #f9f9f9;
-		--color-text: #27272a;
-		--color-text-highlight: #2b2a2a;
-		--color-off-background: #e1e1e1;
-		--color-accent: #8d0000;
-		--color-off-contrast: #bfbfbf;
-		--color-contrast: #2b2a2a;
-		--color-off: #ececec;
+		--accent-100: #bf0000;
+		--accent-200: #e46d6d;
+		--accent-300: #ffc1c1;
+
+		--neutral-000: #141414;
+		--neutral-100: #1d1d1d;
+		--neutral-200: #333333;
+		--neutral-300: #5b5959;
+		--neutral-400: #7a7474;
+		--neutral-500: #aaa1a1;
+		--neutral-600: #cac3c3;
+		--neutral-700: #ececec;
+		--neutral-800: #f3f2f2;
+		--neutral-900: #f9f9f9;
+
+		--color-background: var(--neutral-800);
+		--color-text: var(--neutral-200);
+		--color-text-highlight: var(--neutral-100);
+		--color-off-background: var(--neutral-900);
+		--color-accent: var(--accent-100);
+		--color-off-contrast: var(--neutral-600);
+		--color-contrast: var(--neutral-200);
+		--color-off: var(--neutral-800);
 	}
 
 	.dark {
-		--color-background: #1d1d1d;
-		--color-text: #ffffff99;
-		--color-text-highlight: #ffffffde;
-		--color-off-background: #333333;
-		--color-accent: #bf0000;
-		--color-off-contrast: #bfbfbf;
-		--color-contrast: #ececec;
-		--color-off: #ececec;
+		--color-background: var(--neutral-100);
+		--color-text: var(--neutral-500);
+		--color-text-highlight: var(--neutral-700);
+		--color-off-background: var(--neutral-200);
+		--color-accent: var(--accent-100);
+		--color-off-contrast: var(--neutral-500);
+		--color-contrast: var(--neutral-800);
+		--color-off: var(--neutral-800);
 	}
 
 	body {

src/lib/components/buttons/glowing-button.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let type: 'button' | 'anchor' = 'button';
+
+	const classMap = {
+		button: '',
+		anchor: 'block'
+	};
+</script>
+
+<div class="group relative inline-block">
+	<div
+		class="absolute -inset-0.5 rounded-lg bg-skin-accent opacity-75 blur transition-all duration-200 group-hover:opacity-100"
+	/>
+	<svelte:element
+		this={type == 'anchor' ? 'a' : 'button'}
+		class="relative rounded-lg bg-skin-background {classMap[type]}"
+		{...$$restProps}
+	>
+		<slot />
+	</svelte:element>
+</div>

src/lib/components/index/section-grid/section-grid-item.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <div
-	class="w-full max-w-md rounded-2xl bg-skin-background p-4 shadow-normal transition-all delay-[50] duration-200 hover:shadow-primary active:shadow-primary dark:bg-skin-off-background"
+	class="w-full max-w-md rounded-2xl border-2 border-skin-off-background bg-skin-off-background p-4 shadow-xl transition-all delay-[50] duration-200 hover:border-skin-accent"
 >
 	<a class="flex flex-col items-center justify-center" href={itemConfig.href}>
 		<div class="mb-2">{@html itemConfig.title}</div>

src/lib/components/layout/header.svelte

@@ -11,7 +11,7 @@
 >
 	<div class="px-4">
 		<div class="mx-auto flex h-16 items-center justify-between lg:container">
-			<a class="text-4xl no-underline dark:text-skin-text-highlight" href="/">Julian's Page 🌴</a>
+			<a class="text-4xl text-skin-text-highlight no-underline" href="/">Julian's Page 🌴</a>
 			<Navigation />
 		</div>
 	</div>

src/lib/components/layout/main-nav/mobile-nav/mobile-nav.svelte

@@ -25,7 +25,7 @@
 
 {#if $showMobileMenu}
 	<div
-		class="absolute z-10 flex max-h-screen w-screen flex-col items-center bg-[#f9f9f9] shadow-md "
+		class="absolute z-10 flex max-h-screen w-screen flex-col items-center bg-skin-background shadow-md "
 	>
 		<ul class="w-full divide-y divide-skin-off-contrast border-t border-skin-off-contrast">
 			<li class="flex items-center justify-center py-4"><Search /></li>

src/lib/components/tags/tag-detail.svelte

@@ -6,7 +6,7 @@
 
 <a
 	href="/notes/{data.href}"
-	class="flex flex-col gap-2 rounded-2xl border-skin-text-highlight p-4 hover:bg-zinc-100 dark:hover:bg-[#141414]"
+	class="flex flex-col gap-2 rounded-2xl border-skin-text-highlight p-4 hover:bg-[var(--neutral-700)] dark:hover:bg-[var(--neutral-000)]"
 >
 	<h3 class="text-skin-text-highlight">{data.title}</h3>
 	<p>{@html data.preview}</p>

src/stories/buttons/glowing-button.story.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Hst as HstType } from '@histoire/plugin-svelte';
+	export let Hst: HstType;
+	import GlowingButton from '$lib/components/buttons/glowing-button.svelte';
+</script>
+
+<div class="m-8">
+	<Hst.Story title="Glowing Button">
+		<GlowingButton>
+			<div class="py-2 px-4">Glowing Button</div>
+		</GlowingButton>
+	</Hst.Story>
+</div>