Better prose width handling

10 files changed, 38 insertions, 3 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