From c151d65c12bb2879c0b66e7e1b9ece5bea35ea7a Mon Sep 17 00:00:00 2001
From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>
Date: Wed, 23 Aug 2023 19:11:31 +0100
Subject: Better prose width handling

---
 src/components/Button.astro    |  2 +-
 src/pages/[locale]/index.astro | 17 +++++++----------
 2 files changed, 8 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/components/Button.astro b/src/components/Button.astro
index 757eac2..9cc3885 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -1,7 +1,7 @@
 ---
 import type Digit from '$types/Digit';
 
-type LayoutClasses = `grid-span-${Digit}` | `grid-span-${Digit} grid-end`;
+type LayoutClasses = `grid-span-${Digit}${'' | ' grid-end' | ' grid-prose-end'}`;
 
 interface Props {
   href: string;
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index 4c4c82a..5ef1e1c 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -8,6 +8,7 @@ import { getMostRecentNewsItem } from '$lib/newsUtils';
 import contactDetails from '$data/contactDetails';
 import NewsIndex from '$components/NewsIndex/NewsIndex.astro';
 import committee from '$data/committee';
+import Button from '$components/Button.astro';
 
 export async function getStaticPaths() {
   return localeStaticPaths;
@@ -24,11 +25,9 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
     <NewsIndex newsItems={mostRecentNewsItem ? [mostRecentNewsItem] : []} headingLevel="h3" />
     {
       mostRecentNewsItem && (
-        <div class="grid-span-3 grid-end margin-block-start-sm">
-          <a href={`/${locale}/news`} class="btn">
-            {t(tPage, { key: 'aw-news' })} ▶
-          </a>
-        </div>
+        <Button layoutClasses="grid-span-3 grid-prose-end" href={`/${locale}/news`}>
+          {t(tPage, { key: 'aw-news' })} ▶
+        </Button>
       )
     }
   </section>
@@ -63,11 +62,9 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
   <section>
     <h2 set:html={t(tPage, { key: 'furthsettins' })} />
     <p set:html={t(tPage, { key: 'furthsettins-para' })} />
-    <div class="grid-span-3 grid-end margin-block-start-sm">
-      <a href={`/${locale}/furthsettins`} class="btn">
-        {t(tPage, { key: 'aw-furthsettins' })} ▶
-      </a>
-    </div>
+    <Button layoutClasses="grid-span-3 grid-prose-end" href={`/${locale}/furthsettins`}>
+      {t(tPage, { key: 'aw-furthsettins' })} ▶
+    </Button>
   </section>
 
   <section id="jyne">
-- 
cgit v1.2.3