From 4685faa36176eecbeabeab698a5ba2bbd1312a22 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sun, 19 Jun 2022 16:11:53 +0100
Subject: [PATCH] Ensure sticky hero is full width

---
 static/src/scss/_hero.scss                |  7 ++-
 website/common/templates/common/hero.html | 52 ++++++++++++-----------
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/static/src/scss/_hero.scss b/static/src/scss/_hero.scss
index f638658..24775cf 100644
--- a/static/src/scss/_hero.scss
+++ b/static/src/scss/_hero.scss
@@ -8,10 +8,11 @@ section.hero {
   position: sticky;
   top: 0;
   z-index: 10;
-  margin-top: 2.5rem;
+  margin-top: 3rem;
   padding-top: 0.5rem;
   margin-bottom: 1.5rem;
   background-color: $white;
+  display: block;
 
   .hero-body {
     padding: 0;
@@ -46,4 +47,8 @@ section.hero {
   .subtitle {
     margin-bottom: 0.5rem;
   }
+
+  .column {
+    padding: unset;
+  }
 }
diff --git a/website/common/templates/common/hero.html b/website/common/templates/common/hero.html
index a4c72b6..7791b16 100644
--- a/website/common/templates/common/hero.html
+++ b/website/common/templates/common/hero.html
@@ -4,34 +4,36 @@
   <img class="hero" src="{% image_url page.hero_image page.HERO_IMAGE_SIZE %}">
 {% endif %}
 
-<section class="hero container">
-  <div class="hero-body">
-    <div class="columns">
-      <div class="column">
-        <h1 class="title is-1">{{ page.title }}</h1>
-        {% if page.subtitle %}
-          <h2 class="subtitle">{{ page.subtitle }}</h2>
-        {% endif %}
-      </div>
-      <div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
-        <div class="dropdown is-hoverable is-right">
-          <div class="dropdown-trigger">
-            <button class="button is-radiusless" aria-haspopup="true" aria-controls="dropdown-menu">
-              <span>Table of Contents</span>
-              <span class="icon is-small">
-                <i class="fas fa-angle-down" aria-hidden="true"></i>
-              </span>
-            </button>
-          </div>
-          <div class="dropdown-menu" id="dropdown-menu" role="menu">
-            <div class="dropdown-content menu">
-              <ul class="menu-list">
-                <li><a>Dashboard</a></li>
-              </ul>
+<section class="hero">
+  <div class="container">
+    <div class="hero-body">
+      <div class="columns">
+        <div class="column">
+          <h1 class="title is-1">{{ page.title }}</h1>
+          {% if page.subtitle %}
+            <h2 class="subtitle">{{ page.subtitle }}</h2>
+          {% endif %}
+        </div>
+        <div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
+          <div class="dropdown is-hoverable is-right">
+            <div class="dropdown-trigger">
+              <button class="button is-radiusless" aria-haspopup="true" aria-controls="dropdown-menu">
+                <span>Table of Contents</span>
+                <span class="icon is-small">
+                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                </span>
+              </button>
+            </div>
+            <div class="dropdown-menu" id="dropdown-menu" role="menu">
+              <div class="dropdown-content menu">
+                <ul class="menu-list">
+                  <li><a>Dashboard</a></li>
+                </ul>
+              </div>
             </div>
           </div>
+          <button class="button is-radiusless">Top</button>
         </div>
-        <button class="button is-radiusless">Top</button>
       </div>
     </div>
   </div>