lukeonline - commit f207638
refactor: more layout styling changesf20763818e08ed62edf7796197c12086578d477bLuke Jones<luke.jones.2567@gmail.com>2026-08-17T22:42:27+01:00diff --git a/src/components/Webring.astro b/src/components/Webring.astro
index 1a8f2ed..424af8f 100644
--- a/src/components/Webring.astro
+++ b/src/components/Webring.astro
@@ -4,8 +4,13 @@ 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">
- <a class={buttonStyling} href="https://aberwebr.ing/lukep/left">◀</a>
- <a class={buttonStyling} href="https://aberwebr.ing/">aberWebRing</a>
- <a class={buttonStyling} href="https://aberwebr.ing/lukep/right">▶</a>
-</div>
+<>
+ <hr class="border-gray-400" />
+ <div class="flex flex-row gap-2">
+ <a class={buttonStyling} href="https://aberwebr.ing/lukep/left">◀</a>
+ <a class={buttonStyling + ' grow'} href="https://aberwebr.ing/"
+ >aberWebRing</a
+ >
+ <a class={buttonStyling} href="https://aberwebr.ing/lukep/right">▶</a>
+ </div>
+</>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 4978efd..1933676 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -14,7 +14,7 @@ const { ...props } = Astro.props
<html>
<Head title={`${SITE_TITLE} - ${props.title}`} />
<body
- class="flex w-full flex-col gap-3 p-2 text-base md:m-auto md:w-3xl md:p-8"
+ class="flex w-full flex-col gap-3 p-4 text-base md:m-auto md:w-3xl md:p-8"
>
<span class="text-3xl font-bold">Luke Jones</span>
<div class={`${BASE_LAYOUT_STYLING}`}>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7ca00b1..d644136 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,5 @@
---
import Base from '../layouts/Base.astro'
-import Heading from '../components/Heading.astro'
import LargeButtonRow from '../components/LargeButtonRow.astro'
import IconButtonRow from '../components/IconButtonRow.astro'
import Webring from '../components/Webring.astro'
@@ -50,7 +49,7 @@ const iconButtonRow = [
</p>
<div class="flex flex-col gap-2">
<LargeButtonRow entries={mainButtonRow} />
- <div class="flex flex-row justify-between">
+ <div class="flex flex-col justify-between gap-2 sm:flex-row">
<IconButtonRow entries={iconButtonRow} />
<Webring />
</div>