From 97d4f72466ca26557a256380a16b6b6a6565414f Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Fri, 23 Dec 2022 17:15:56 +0000
Subject: [PATCH 1/3] refactor: color palette

---
 src/app.css                                   | 45 ++++++++++++-------
 .../main-nav/mobile-nav/mobile-nav.svelte     |  2 +-
 src/lib/components/tags/tag-detail.svelte     |  2 +-
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/app.css b/src/app.css
index 11b35a1..05d01b5 100644
--- a/src/app.css
+++ b/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;
+		--accent-100: #bf0000;
+		--accent-200: #e46d6d;
+		--accent-300: #ffc1c1;
+
+		--neutral-000: #141414;
+		--neutral-100: #1d1d1d;
+		--neutral-200: #333333;
+		--neutral-300: #645f5f;
+		--neutral-400: #7a7474;
+		--neutral-500: #aaa1a1;
+		--neutral-600: #d0c6c6;
+		--neutral-700: #e2dddd;
+		--neutral-800: #f3f2f2;
+		--neutral-900: #f9f9f9;
+
+		--color-background: var(--neutral-900);
+		--color-text: var(--neutral-200);
+		--color-text-highlight: var(--neutral-100);
+		--color-off-background: var(--neutral-800);
+		--color-accent: var(--accent-100);
 		--color-off-contrast: #bfbfbf;
-		--color-contrast: #2b2a2a;
-		--color-off: #ececec;
+		--color-contrast: var(--neutral-100);
+		--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-800);
+		--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 {
diff --git a/src/lib/components/layout/main-nav/mobile-nav/mobile-nav.svelte b/src/lib/components/layout/main-nav/mobile-nav/mobile-nav.svelte
index 99108fd..e8f4bc9 100644
--- a/src/lib/components/layout/main-nav/mobile-nav/mobile-nav.svelte
+++ b/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>
diff --git a/src/lib/components/tags/tag-detail.svelte b/src/lib/components/tags/tag-detail.svelte
index d858d9e..bbec585 100644
--- a/src/lib/components/tags/tag-detail.svelte
+++ b/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-800)] dark:hover:bg-[var(--neutral-000)]"
 >
 	<h3 class="text-skin-text-highlight">{data.title}</h3>
 	<p>{@html data.preview}</p>

From ed0e0e8bcc2b33674d3caa7a2b33ef6ab7bbdc31 Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Fri, 23 Dec 2022 18:11:25 +0000
Subject: [PATCH 2/3] fix: styling

---
 src/app.css                                      | 16 ++++++++--------
 .../index/section-grid/section-grid-item.svelte  |  2 +-
 src/lib/components/layout/header.svelte          |  2 +-
 src/lib/components/tags/tag-detail.svelte        |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app.css b/src/app.css
index 05d01b5..7cad389 100644
--- a/src/app.css
+++ b/src/app.css
@@ -12,28 +12,28 @@
 		--neutral-000: #141414;
 		--neutral-100: #1d1d1d;
 		--neutral-200: #333333;
-		--neutral-300: #645f5f;
+		--neutral-300: #5b5959;
 		--neutral-400: #7a7474;
 		--neutral-500: #aaa1a1;
-		--neutral-600: #d0c6c6;
-		--neutral-700: #e2dddd;
+		--neutral-600: #cac3c3;
+		--neutral-700: #ececec;
 		--neutral-800: #f3f2f2;
 		--neutral-900: #f9f9f9;
 
-		--color-background: var(--neutral-900);
+		--color-background: var(--neutral-800);
 		--color-text: var(--neutral-200);
 		--color-text-highlight: var(--neutral-100);
-		--color-off-background: var(--neutral-800);
+		--color-off-background: var(--neutral-900);
 		--color-accent: var(--accent-100);
-		--color-off-contrast: #bfbfbf;
-		--color-contrast: var(--neutral-100);
+		--color-off-contrast: var(--neutral-600);
+		--color-contrast: var(--neutral-200);
 		--color-off: var(--neutral-800);
 	}
 
 	.dark {
 		--color-background: var(--neutral-100);
 		--color-text: var(--neutral-500);
-		--color-text-highlight: var(--neutral-800);
+		--color-text-highlight: var(--neutral-700);
 		--color-off-background: var(--neutral-200);
 		--color-accent: var(--accent-100);
 		--color-off-contrast: var(--neutral-500);
diff --git a/src/lib/components/index/section-grid/section-grid-item.svelte b/src/lib/components/index/section-grid/section-grid-item.svelte
index d483b20..5706cef 100644
--- a/src/lib/components/index/section-grid/section-grid-item.svelte
+++ b/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>
diff --git a/src/lib/components/layout/header.svelte b/src/lib/components/layout/header.svelte
index 0daf3a4..60a8759 100644
--- a/src/lib/components/layout/header.svelte
+++ b/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>
diff --git a/src/lib/components/tags/tag-detail.svelte b/src/lib/components/tags/tag-detail.svelte
index bbec585..5573da5 100644
--- a/src/lib/components/tags/tag-detail.svelte
+++ b/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-[var(--neutral-800)] dark:hover:bg-[var(--neutral-000)]"
+	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>

From 617327857bbfb0655e7f508cc7fc74fe69624b3e Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Sat, 24 Dec 2022 13:41:34 +0000
Subject: [PATCH 3/3] feat: glowing button

---
 .gitpod.yml                                   |  2 +-
 prettier.config.cjs                           |  3 +++
 .../components/buttons/glowing-button.svelte  | 21 +++++++++++++++++++
 .../buttons/glowing-button.story.svelte       | 13 ++++++++++++
 src/stories/{ => tags}/tag.story.svelte       |  0
 5 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 prettier.config.cjs
 create mode 100644 src/lib/components/buttons/glowing-button.svelte
 create mode 100644 src/stories/buttons/glowing-button.story.svelte
 rename src/stories/{ => tags}/tag.story.svelte (100%)

diff --git a/.gitpod.yml b/.gitpod.yml
index 011542e..0923ccb 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -1,7 +1,7 @@
 tasks:
   - init: pnpm install
     command: pnpm dev
-      
+
 github:
   prebuilds:
     master: true
diff --git a/prettier.config.cjs b/prettier.config.cjs
new file mode 100644
index 0000000..b25b1b8
--- /dev/null
+++ b/prettier.config.cjs
@@ -0,0 +1,3 @@
+module.exports = {
+	plugins: [require('prettier-plugin-tailwindcss')]
+};
diff --git a/src/lib/components/buttons/glowing-button.svelte b/src/lib/components/buttons/glowing-button.svelte
new file mode 100644
index 0000000..3566cfd
--- /dev/null
+++ b/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>
diff --git a/src/stories/buttons/glowing-button.story.svelte b/src/stories/buttons/glowing-button.story.svelte
new file mode 100644
index 0000000..52079dd
--- /dev/null
+++ b/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>
diff --git a/src/stories/tag.story.svelte b/src/stories/tags/tag.story.svelte
similarity index 100%
rename from src/stories/tag.story.svelte
rename to src/stories/tags/tag.story.svelte