fix: banner max width issue (#114)

inclusive-design · Jan 21, 2025 · e8919d2 · e8919d2
1 parent cab8835
commit e8919d2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -13,15 +13,17 @@
   <main id="main" {% if page.fileSlug == "about" %}class="sectioned"{% endif %}>
     {% if hasBanner %}
     <div class="banner bg-{{ bannerBgColor }}">
-      <div class="wrapper flow">
-        <h1>{{ bannerTitle | renderContent('md') | safe }}</h1>
-        {{ bannerBody | renderContent('md') | safe }}
+      <div class="wrapper">
+        <div class="banner__content flow">
+          <h1>{{ bannerTitle | renderContent('md') | safe }}</h1>
+          {{ bannerBody | renderContent('md') | safe }}
+        </div>
+        {% if bannerImage %}
+        <div class="banner__image">
+          <img src="{{ bannerImage }}" alt="{{ bannerImageAlt }}" />
+        </div>
+        {% endif %}
       </div>
-      {% if bannerImage %}
-      <div class="banner__image">
-        <img src="{{ bannerImage }}" alt="{{ bannerImageAlt }}" />
-      </div>
-      {% endif %}
     </div>
     {% endif %}
     {% block content %}{% endblock %}

diff --git a/src/assets/styles/base/_base.css b/src/assets/styles/base/_base.css
@@ -14,22 +14,30 @@ body {
 /* Banner */
 
 .banner {
-    align-items: center;
     border-block: 0.2rem solid var(--fl-fgColor, transparent);
+    padding-block: var(--common-block-padding);
+    padding-inline: var(--common-inline-padding);
+}
+
+.banner .wrapper {
+    align-items: center;
     display: flex;
     flex-direction: column;
-    font-size: var(--step-1);
+    margin-inline: auto;
     min-height: 16.25rem;
-    padding-block: var(--common-block-padding);
-    padding-inline: var(--common-inline-padding);
+}
+
+.banner__content {
+    font-size: var(--step-1);
 }
 
 .banner__image {
-    padding-block: var(--common-block-padding);
+    padding-block-start: var(--common-block-padding);
+    margin-block-start: unset;
 }
 
 @media (width >= 70.875rem) {
-    .banner {
+    .banner .wrapper {
         flex-direction: row;
         gap: 8.25rem;
     }