lukeonline

commit aa657797eaf91938cf0e717fdbe898054ccfeb25
parent c5898e4dc4436fe55b90ea26740ee4dfc937d3e6
Author: Luke Jones <luke.jones.2567@gmail.com>
Date:   Mon, 17 Aug 2026 21:19:19 +0100

refactor: draw out shared button styling into constant

Diffstat:
M
src/components/Header.astro
 | 
6
++----
M
src/components/IconButton.astro
 | 
7
++-----
M
src/components/LargeButton.astro
 | 
6
++----
M
src/components/Webring.astro
 | 
8
+++-----
M
src/consts.ts
 | 
5
+++++

5 files changed, 14 insertions(+), 18 deletions(-)
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,11 +1,9 @@
 ---
+import { BUTTON_STYLING_SHARED } from '../consts.ts'
 const { title } = Astro.props
 
 const linkStyling =
-  'border-solid border-1 border-gray-300' +
-  ' bg-gray-50 p-1 pl-2 hover:text-blue-500 grow' +
-  ' hover:underline focus:bg-blue-50 focus:rounded hover:bg-gray-200' +
-  ' items-center gap-3'
+  BUTTON_STYLING_SHARED + ' h-8 p-1 pl-2 grow items-center gap-3'
 ---
 
 <header class="flex flex-col gap-2">
diff --git a/src/components/IconButton.astro b/src/components/IconButton.astro
@@ -1,11 +1,8 @@
 ---
+import { BUTTON_STYLING_SHARED } from '../consts.ts'
 const { image, link } = Astro.props
 
-const buttonStyling =
-  'border-solid border-1 border-gray-300' +
-  ' bg-gray-50 flex flex-row gap-1 p-2 hover:text-blue-500' +
-  ' hover:underline focus:bg-blue-50 focus:rounded hover:bg-gray-200' +
-  ' items-center gap-3'
+const buttonStyling = BUTTON_STYLING_SHARED + ' flex-row items-center gap-3'
 ---
 
 <a href={link} class={buttonStyling}>
diff --git a/src/components/LargeButton.astro b/src/components/LargeButton.astro
@@ -1,10 +1,8 @@
 ---
+import { BUTTON_STYLING_SHARED } from '../consts.ts'
 const { image, title, desc, link } = Astro.props
 
-const buttonStyling =
-  'border-solid border-1 border-gray-300' +
-  ' bg-gray-50 flex flex-col gap-1 p-2 hover:text-blue-500' +
-  ' hover:underline focus:bg-blue-50 focus:rounded hover:bg-gray-200'
+const buttonStyling = BUTTON_STYLING_SHARED + ' flex-col '
 ---
 
 <a href={link} class={buttonStyling}>
diff --git a/src/components/Webring.astro b/src/components/Webring.astro
@@ -1,9 +1,7 @@
 ---
-const buttonStyling =
-  'border-solid border-1 border-gray-300' +
-  ' bg-gray-50 flex flex-row gap-1 p-2 h-8 hover:text-blue-500' +
-  ' hover:underline focus:bg-blue-50 focus:rounded hover:bg-gray-200' +
-  ' items-center gap-2'
+import { BUTTON_STYLING_SHARED } from '../consts.ts'
+
+const buttonStyling = BUTTON_STYLING_SHARED + ' flex-row h-8 items-center gap-2'
 ---
 
 <div class="flex flex-row gap-2">
diff --git a/src/consts.ts b/src/consts.ts
@@ -1 +1,6 @@
 export const SITE_TITLE = 'lukeonline'
+
+export const BUTTON_STYLING_SHARED =
+  'border-solid border-1 border-gray-300' +
+  ' bg-gray-50 flex gap-1 p-2 hover:text-blue-500' +
+  ' hover:underline focus:bg-blue-50 focus:rounded hover:bg-gray-200'