[CAPE] Add tagline to navbar logo

I also cleared up the outdated .site-header/.site-subheader distinction in _site-header.scss as we don’t have a subheader any more. Part of #400.
mysociety · Dec 2, 2022 · 9f42e3a · 9f42e3a
1 parent 95169da
commit 9f42e3a
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 51 deletions.
diff --git a/caps/static/caps/scss/site-header.scss b/caps/static/caps/scss/site-header.scss
@@ -1,50 +1,3 @@
-.site-header,
-.site-subheader {
-    .navbar-brand {
-        @include media-breakpoint-up('md') {
-            margin: 0 1rem;
-        }
-    }
-
-    .navbar-collapse {
-        flex-grow: 0;
-    }
-
-    .navbar-nav {
-        flex-wrap: wrap;
-        justify-content: flex-end;
-        padding-top: 1rem;
-
-        @include media-breakpoint-up('md') {
-            padding-top: 0;
-
-            .nav-link {
-                padding: 0 1rem;
-            }
-        }
-    }
-
-    .navbar-collapse {
-        margin-left: auto;
-    }
-
-    .navbar-dark .nav-link {
-        border-top: 1px solid $navbar-dark-toggler-border-color;
-
-        @include media-breakpoint-up('md') {
-            border-top: none;
-        }
-    }
-
-    .navbar-light .nav-link {
-        border-top: 1px solid $navbar-light-toggler-border-color;
-
-        @include media-breakpoint-up('md') {
-            border-top: none;
-        }
-    }
-}
-
 .site-header {
     background: $color-ceuk-red;
 
@@ -110,16 +63,63 @@
         }
     }
 
+    // Heavily customised navbar-brand to include tagline
     .navbar-brand {
         font-family: $headings-font-family;
         line-height: 1;
+        font-weight: 900;
         padding: 0;
         white-space: normal;
-        flex: 1 1 8em;
+        flex: 1 0 auto;
+        display: flex;
+        align-items: center;
 
         @include media-breakpoint-up('md') {
+            margin: 0 1rem;
             flex: 0 0 auto;
-            font-size: $h4-font-size;
+        }
+
+        @include media-breakpoint-up('xl') {
+            font-size: ( $navbar-brand-font-size + 0.5rem );
+        }
+
+        small {
+            margin-left: 1em;
+            font-size: 0.35em;
+            max-width: 12em;
+            line-height: 1.2;
+            opacity: 0.8;
+
+            @media (max-width: 399px) {
+                display: none;
+            }
+        }
+    }
+
+    .navbar-nav {
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        padding-top: 1rem;
+
+        @include media-breakpoint-up('md') {
+            padding-top: 0;
+
+            .nav-link {
+                padding: 0 1rem;
+            }
+        }
+    }
+
+    .navbar-collapse {
+        margin-left: auto;
+        flex-grow: 0;
+    }
+
+    .navbar-dark .nav-link {
+        border-top: 1px solid $navbar-dark-toggler-border-color;
+
+        @include media-breakpoint-up('md') {
+            border-top: none;
         }
     }
 }
diff --git a/caps/static/caps/scss/variables.scss b/caps/static/caps/scss/variables.scss
@@ -103,6 +103,8 @@ $mark-bg: #fffeb5;
 
 // Navbar
 
+$navbar-brand-font-size: 2rem;
+
 $navbar-dark-color: $white;
 $navbar-dark-hover-color: rgba($navbar-dark-color, 0.8);
 $navbar-dark-active-color: $navbar-dark-color;

diff --git a/caps/templates/caps/base.html b/caps/templates/caps/base.html
@@ -25,7 +25,7 @@
     <script src="{% static 'html5shiv/html5shiv.js' %}"></script>
     <![endif]-->
     {% stylesheet 'caps' %}
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@600&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&amp;family=Montserrat:wght@600;900&amp;display=swap">
     {% block extrastylesheets %}{% endblock %}
     {% if GOOGLE_ANALYTICS %}
         <!-- Global site tag (gtag.js) - Google Analytics -->

diff --git a/caps/templates/caps/includes/site-header.html b/caps/templates/caps/includes/site-header.html
@@ -1,6 +1,9 @@
 <div class="site-header">
     <nav class="navbar navbar-expand-md navbar-dark">
-        <a class="navbar-brand" href="{% url 'home' %}">CAPE</a>
+        <a class="navbar-brand" href="{% url 'home' %}">
+            CAPE
+            <small>Informing local action on climate change</small>
+        </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#primaryNav" aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>