Luke Jones

lukeonline - commit f207638

refactor: more layout styling changesf20763818e08ed62edf7796197c12086578d477bLuke Jones<luke.jones.2567@gmail.com>2026-08-17T22:42:27+01:00
diff --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>