Constrains content width across pages

4 files changed, 37 insertions, 28 deletions

diff --git a/public/main.css b/public/main.css
index 9fdcbf9..53c47aa 100644
--- a/public/main.css
+++ b/public/main.css
@@ -83,6 +83,10 @@
   padding-block: var(--spacing-block-lg) var(--spacing-block-xl);
 }
 
+:is(main, article) > :is(section, header):not(:is(section, header) :is(section, header)).section--full-width {
+  padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2));
+}
+
 :is(main, article)
   > :is(section, header):not(.section--full-width):not(:is(section, header) :is(section, header))
   > p {
diff --git a/src/components/LallansIssue.astro b/src/components/LallansIssue.astro
index 26ead54..f45dc0a 100644
--- a/src/components/LallansIssue.astro
+++ b/src/components/LallansIssue.astro
@@ -16,22 +16,24 @@ const { issue, locale } = Astro.props;
 const t = translate(locale);
 ---
 
-<div class="lallans-issue__header-block">
-  <header>
-    <h1>{t(tSite, { key: 'lallans' })} {issue.issueNumber}</h1>
-    <p class="italic">{issue.description[locale]}</p>
-  </header>
+<section class="section--full-width">
+  <div class="lallans-issue__header-block">
+    <header>
+      <h1>{t(tSite, { key: 'lallans' })} {issue.issueNumber}</h1>
+      <p class="italic">{issue.description[locale]}</p>
+    </header>
 
-  <div class="lallans-issue__header-block-end">
-    <img alt="" src={`/images/lallans/issue${issue.issueNumber}.jpg`} />
-    <PayPalButtons successPageUrl={`./${issue.issueNumber}/payment-success-confirmation`} />
+    <div class="lallans-issue__header-block-end">
+      <img alt="" src={`/images/lallans/issue${issue.issueNumber}.jpg`} />
+      <PayPalButtons successPageUrl={`./${issue.issueNumber}/payment-success-confirmation`} />
+    </div>
   </div>
-</div>
 
-{
-  'contributions' in issue ? (
-    <LallansIssueContributions contributions={issue.contributions} locale={locale} />
-  ) : (
-    'contributors' in issue && <LallansIssueContributors contributors={issue.contributors} />
-  )
-}
+  {
+    'contributions' in issue ? (
+      <LallansIssueContributions contributions={issue.contributions} locale={locale} />
+    ) : (
+      'contributors' in issue && <LallansIssueContributors contributors={issue.contributors} />
+    )
+  }
+</section>
diff --git a/src/pages/[locale]/furthsettins/index.astro b/src/pages/[locale]/furthsettins/index.astro
index 84df9c7..256111f 100644
--- a/src/pages/[locale]/furthsettins/index.astro
+++ b/src/pages/[locale]/furthsettins/index.astro
@@ -15,14 +15,16 @@ const t = translate(locale);
 ---
 
 <Page locale={locale} title={t(tFurthsettins, { key: 'title' })}>
-  <h1>Furthsettins</h1>
+  <section>
+    <h1>Furthsettins</h1>
 
-  <ul class="publications-gallery">
-    <li>
-      <a href="lallans" class="link">
-        <img src="/images/furthsettins/lallans.jpg" class="publications-gallery__image" />
-        <p class="publications-gallery__title">{t(tSite, { key: 'lallans' })}</p>
-      </a>
-    </li>
-  </ul>
+    <ul class="publications-gallery">
+      <li>
+        <a href="lallans" class="link">
+          <img src="/images/furthsettins/lallans.jpg" class="publications-gallery__image" />
+          <p class="publications-gallery__title">{t(tSite, { key: 'lallans' })}</p>
+        </a>
+      </li>
+    </ul>
+  </section>
 </Page>
diff --git a/src/pages/[locale]/furthsettins/lallans/index.astro b/src/pages/[locale]/furthsettins/lallans/index.astro
index b565497..f4cd94b 100644
--- a/src/pages/[locale]/furthsettins/lallans/index.astro
+++ b/src/pages/[locale]/furthsettins/lallans/index.astro
@@ -15,7 +15,8 @@ const t = translate(locale);
 ---
 
 <Page locale={locale} title={t(tFurthsettins, { key: 'title' })}>
-  <h1>Lallans</h1>
-
-  <LallansIssuesGallery />
+  <section class="section--full-width">
+    <h1>Lallans</h1>
+    <LallansIssuesGallery />
+  </section>
 </Page>