Fixed fonts and spacing for the intro Banner.

config/default/block.block.drevops_side_navigation.yml

@@ -18,7 +18,7 @@ plugin: 'menu_block:civictheme-primary-navigation'
 settings:
   id: 'menu_block:civictheme-primary-navigation'
   label: 'Side Navigation'
-  label_display: ''
+  label_display: '0'
   provider: menu_block
   follow: false
   follow_parent: child
@@ -36,4 +36,4 @@ visibility:
   request_path:
     id: request_path
     negate: true
-    pages: /search
+    pages: "/search\r\n/user*"

tests/behat/features/login.feature

@@ -16,3 +16,11 @@ Feature: Login
     Given I am logged in as a user with the "Administrator" role
     When I go to "admin"
     Then I save screenshot
+
+  Scenario: Login page has correct vertical spacing class
+    Given I go to "/user/login"
+    Then I should see a ".block-system-main-block.ct-vertical-spacing--both" element
+
+  Scenario: Password reset page has correct vertical spacing class
+    Given I go to "/user/password"
+    Then I should see a ".block-system-main-block.ct-vertical-spacing--both" element

web/themes/custom/drevops/components/03-organisms/banner/banner.scss

@@ -34,7 +34,7 @@
     width: $ct-banner-featured-image-width;
     display: none;
 
-    @include ct-breakpoint(m) {
+    @include ct-breakpoint($ct-grid-responsive-breakpoint) {
       display: block;
       position: absolute;
       bottom: 0;
@@ -47,7 +47,7 @@
     #{$root}__inner {
       clip-path: $ct-banner-decorative-mobile-clip-path;
 
-      @include ct-breakpoint(m) {
+      @include ct-breakpoint($ct-grid-responsive-breakpoint) {
         padding-top: ct-spacing(8);
         padding-bottom: ct-spacing(8);
         clip-path: $ct-banner-decorative-desktop-clip-path;
@@ -64,7 +64,7 @@
     }
 
     #{$root}__featured-image__wrapper {
-      @include ct-breakpoint(m) {
+      @include ct-breakpoint($ct-grid-responsive-breakpoint) {
         bottom: 0;
         top: auto;
         height: 100%;
@@ -82,18 +82,17 @@
 
   &#{$root}--with-offset {
     #{$root}__inner {
-      // Adds fixed header height offset to the initial padding-top.
-      padding-top: calc(#{ct-spacing(3)} + #{$ct-banner-offset});
+      padding-top: ct-spacing(3) + $ct-banner-offset-xxs;
 
-      @include ct-breakpoint(xxs) {
-        padding-top: calc(#{ct-spacing(3)} + #{$ct-banner-offset-xxs});
+      @include ct-breakpoint($ct-grid-responsive-breakpoint) {
+        padding-top: ct-spacing(8) + $ct-banner-offset;
       }
     }
 
     &#{$root}--decorative {
       #{$root}__inner {
-        @include ct-breakpoint(m) {
-          padding-top: calc(#{ct-spacing(8)} + #{$ct-banner-offset});
+        @include ct-breakpoint($ct-grid-responsive-breakpoint) {
+          padding-top: ct-spacing(8) + $ct-banner-offset;
         }
       }
     }
@@ -102,7 +101,7 @@
   #{$root}__breadcrumb {
     margin-bottom: ct-spacing(4);
 
-    @include ct-breakpoint(m) {
+    @include ct-breakpoint($ct-grid-responsive-breakpoint) {
       margin-bottom: ct-spacing(6);
     }
   }
@@ -114,7 +113,7 @@
   #{$root}__title {
     margin-bottom: ct-spacing(2);
 
-    @include ct-breakpoint(m) {
+    @include ct-breakpoint($ct-grid-responsive-breakpoint) {
       margin-bottom: ct-spacing(3);
     }
   }
@@ -126,7 +125,7 @@
 
     &#{$root}--decorative {
       #{$root}__featured-image__wrapper {
-        @include ct-breakpoint(m) {
+        @include ct-breakpoint($ct-grid-responsive-breakpoint) {
           @include ct-image-shadow(ct-component-var($root, $theme, featured-image, shadow-color), 'up-left');
         }
       }
@@ -139,6 +138,23 @@
       display: flex;
       align-items: center;
       text-align: center;
+      padding-top: ct-spacing(3);
+      padding-bottom: ct-spacing(3);
+
+      @include ct-breakpoint($ct-grid-responsive-breakpoint) {
+        padding-top: ct-spacing(8);
+        padding-bottom: ct-spacing(8);
+      }
+    }
+
+    &#{$root}--with-offset {
+      #{$root}__inner {
+        padding-top: ct-spacing(3) + $ct-banner-offset-xxs;
+
+        @include ct-breakpoint($ct-grid-responsive-breakpoint) {
+          padding-top: ct-spacing(8) + $ct-banner-offset;
+        }
+      }
     }
 
     .ct-banner__title {

web/themes/custom/drevops/components/variables.base.scss

@@ -119,12 +119,12 @@ $ct-fonts: (
 $ct-particle: 8px;
 
 // Base font sizes defined in CivicTheme base variables.
-$ct-font-base-size: $ct-particle * 2 !default;
-$ct-font-base-line-height: $ct-font-base-size !default;
+$ct-font-base-size: $ct-particle * 2;
+$ct-font-base-line-height: $ct-font-base-size;
 $ct-typography: (
   'display-large': (
-    'xxs': ($ct-font-base-size * 3, $ct-font-base-line-height * 3.5, 'bold', 'secondary', -0.6px),
-    'm': ($ct-font-base-size * 4, $ct-font-base-line-height * 4.75, 'bold', 'secondary', -1px)
+    'xxs': ($ct-font-base-size * 3, $ct-font-base-line-height * 3.5, 'bold', 'primary', -0.6px),
+    'm': ($ct-font-base-size * 4, $ct-font-base-line-height * 4.75, 'bold', 'primary', -1px)
   ),
   // Text.
   'text-extra-large': (

web/themes/custom/drevops/drevops.theme

@@ -7,6 +7,7 @@
 
 declare(strict_types=1);
 
+require_once __DIR__ . '/includes/system_main_block.inc';
 require_once __DIR__ . '/includes/banner.inc';
 require_once __DIR__ . '/includes/paragraphs.inc';
 require_once __DIR__ . '/includes/divider.inc';
@@ -31,6 +32,7 @@ function drevops_preprocess_civictheme_tag_list(array &$variables): void {
  * Implements hook_preprocess_HOOK().
  */
 function drevops_preprocess_block(array &$variables): void {
+  _drevops_preprocess_block__system_main_block($variables);
   _drevops_preprocess_block__civictheme_banner($variables);
 }
 

web/themes/custom/drevops/includes/system_main_block.inc

@@ -0,0 +1,27 @@
+<?php
+
+/**
+ * @file
+ * Preprocess for system_main_block block.
+ */
+
+declare(strict_types=1);
+
+/**
+ * Preprocess for system_main_block block.
+ *
+ * @SuppressWarnings(PHPMD.StaticAccess)
+ */
+function _drevops_preprocess_block__system_main_block(array &$variables): void {
+  if (!isset($variables['elements']['#base_plugin_id']) || $variables['elements']['#base_plugin_id'] != 'system_main_block') {
+    return;
+  }
+
+  $route_match = \Drupal::routeMatch();
+  $route_name = $route_match->getRouteName();
+  if ($route_name !== 'user.login' && $route_name !== 'user.pass') {
+    return;
+  }
+
+  $variables['attributes']['class'][] = 'ct-vertical-spacing--both';
+}