Better prose width handling

13 files changed, 46 insertions, 14 deletions

diff --git a/public/css/base/typography.css b/public/css/base/typography.css
index 3dd9075..6cd6422 100644
--- a/public/css/base/typography.css
+++ b/public/css/base/typography.css
@@ -61,3 +61,7 @@ h4 {
 p:not(:first-child) {
   margin-block-start: var(--margin-block-sm);
 }
+
+:is(p, h1, h2, h3, h4) {
+  max-width: var(--width-prose);
+}
diff --git a/public/css/layout/grid.css b/public/css/layout/grid.css
index e3c8d59..2c2a847 100644
--- a/public/css/layout/grid.css
+++ b/public/css/layout/grid.css
@@ -63,4 +63,28 @@
     var(--grid-gutter-width) * (var(--grid-column-count) - 3)
   );
   margin-inline-end: 0;
+}
+
+.grid-span-1.grid-prose-end {
+  margin-inline-start: calc(
+    var(--grid-column-width) * (var(--grid-prose-column-count) - 1) +
+    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1)
+  );
+  margin-inline-end: 0;
+}
+
+.grid-span-2.grid-prose-end {
+  margin-inline-start: calc(
+    var(--grid-column-width) * (var(--grid-prose-column-count) - 2) +
+    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 2)
+  );
+  margin-inline-end: 0;
+}
+
+.grid-span-3.grid-prose-end {
+  margin-inline-start: calc(
+    var(--grid-column-width) * (var(--grid-prose-column-count) - 3) +
+    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 3)
+  );
+  margin-inline-end: 0;
 }
\ No newline at end of file
diff --git a/public/css/modules/btn.css b/public/css/modules/btn.css
index 5bc4f35..fcfd02e 100644
--- a/public/css/modules/btn.css
+++ b/public/css/modules/btn.css
@@ -5,6 +5,7 @@
   border: solid 2px var(--text-color);
   font-weight: 500;
   text-align: center;
+  margin-block-start: var(--margin-block-sm);
   padding-inline: var(--padding-inline-md);
   padding-block: var(--padding-block-sm);
   background-color: transparent;
diff --git a/public/css/modules/committee.md.css b/public/css/modules/committee.md.css
index f0eb9ac..83ca252 100644
--- a/public/css/modules/committee.md.css
+++ b/public/css/modules/committee.md.css
@@ -12,5 +12,5 @@
 }
 
 .committee__member__text {
-  grid-column: 3 / min(9, calc(var(--grid-column-count) + 1));
+  grid-column: 3 / calc(3 + var(--grid-prose-column-count) - 2);
 }
\ No newline at end of file
diff --git a/public/css/modules/news-index.css b/public/css/modules/news-index.css
index 48c455d..078d11f 100644
--- a/public/css/modules/news-index.css
+++ b/public/css/modules/news-index.css
@@ -5,6 +5,7 @@
   transition: background 100ms;
   padding-block: var(--margin-block-md);
   padding-inline: var(--padding-inline-sm);
+  width: var(--width-prose);
 }
 
 .news-index__item:not(:first-child) {
diff --git a/public/css/variables/spacing.css b/public/css/variables/spacing.css
index 2bbb013..3ca646c 100644
--- a/public/css/variables/spacing.css
+++ b/public/css/variables/spacing.css
@@ -24,8 +24,8 @@
     var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width)
   );
   --width-prose: calc(
-    var(--grid-column-width) * min(6, var(--grid-column-count)) +
-    var(--grid-gutter-width) * min(5, (var(--grid-column-count) - 1))
+    var(--grid-column-width) * var(--grid-prose-column-count) +
+    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1)
   );
 
   --grid-column-width-relative-eighth-rem: 32;
@@ -36,4 +36,5 @@
   --grid-total-width: 30rem;
   --grid-padding-start-relative-eighth-rem: 12;
   --grid-column-count: 4;
+  --grid-prose-column-count: 4;
 }
diff --git a/public/css/variables/spacing.lg.css b/public/css/variables/spacing.lg.css
index f7a3cea..5c3f78c 100644
--- a/public/css/variables/spacing.lg.css
+++ b/public/css/variables/spacing.lg.css
@@ -2,4 +2,5 @@
   --grid-total-width: 64rem;
   --grid-padding-start-relative-eighth-rem: 20;
   --grid-column-count: 12;
+  --grid-prose-column-count: 8;
 }
\ No newline at end of file
diff --git a/public/css/variables/spacing.md.css b/public/css/variables/spacing.md.css
index 814b662..4b66743 100644
--- a/public/css/variables/spacing.md.css
+++ b/public/css/variables/spacing.md.css
@@ -2,4 +2,5 @@
   --grid-total-width: 48rem;
   --grid-padding-start-relative-eighth-rem: 16;
   --grid-column-count: 8;
+  --grid-prose-column-count: 8;
 }
\ No newline at end of file
diff --git a/public/css/variables/spacing.xl.css b/public/css/variables/spacing.xl.css
index 6fe02f2..1481962 100644
--- a/public/css/variables/spacing.xl.css
+++ b/public/css/variables/spacing.xl.css
@@ -2,6 +2,7 @@
   --grid-total-width: 80rem;
   --grid-padding-start-relative-eighth-rem: 26;
   --grid-column-count: 12;
+  --grid-prose-column-count: 8;
   --width-prose: calc(
     var(--grid-column-width) * min(8, var(--grid-column-count)) +
     var(--grid-gutter-width) * min(7, (var(--grid-column-count) - 1))
diff --git a/public/css/variables/spacing.xxl.css b/public/css/variables/spacing.xxl.css
index 24812ff..e584668 100644
--- a/public/css/variables/spacing.xxl.css
+++ b/public/css/variables/spacing.xxl.css
@@ -2,4 +2,5 @@
   --grid-total-width: 100rem;
   --grid-padding-start-relative-eighth-rem: 32;
   --grid-column-count: 12;
+  --grid-prose-column-count: 8;
 }
\ No newline at end of file
diff --git a/public/images/commattee/joe-carstairs.jpg b/public/images/commattee/joe-carstairs.jpg
new file mode 100644
index 0000000..ecd9f38
--- /dev/null
+++ b/public/images/commattee/joe-carstairs.jpg
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">