Keep the header at full height, and make its white background span the page

themes/osi/assets/js/build/theme.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '42979785231fcdbb3f33');
+<?php return array('dependencies' => array(), 'version' => '6cdacd840462a5c6d505');

themes/osi/assets/js/src/theme/header-resize.js

@@ -2,7 +2,7 @@
 Name: Header Resize
 Author: Marktime Media
 Author URI: http://marktimemedia.com
-Version: 0.2
+Version: 0.3
 License: GPLv2
 
  This program is free software; you can redistribute it and/or modify
@@ -18,63 +18,28 @@ License: GPLv2
  http://www.gnu.org/licenses/gpl-2.0.html
 */
 
-(function( $ ){
+const header = document.querySelector( '.header-main' );
 
-	/* Scroll Header */
+const SHRINK_AT = 40; // px scrolled before the logo shrinks
 
-	var $lastScrollTop = $(window).scrollTop(); // reset variable any time it reloads
-	var $siteHeader = $('.header-main'); // your header element
-	var $content = $('#content'); // content container
-	var $contentWithHeader = $('body #content:not(.has_no_sidebar)'); // content container
-	var changeDirection = -1; // base comparitive variable
-	var shrinkClass = 'header-main-small'; // your small header class
-	var paddingTop = $siteHeader.innerHeight();
-	var paddingTopPlus = ( $siteHeader.innerHeight() + 50 );
+if ( header ) {
+	let ticking = false;
 
-	// $content.css('padding-top', paddingTop);
-	// $contentWithHeader.css('padding-top', paddingTopPlus);
+	const update = () => {
+		ticking = false;
+		const small = window.scrollY > SHRINK_AT;
 
-	$(window).on('scroll', (function(event) {
-		var $scrollPosition = $(this).scrollTop();
-
-		if($(window).width() > 784 ) { // we're mobile first so this is anything larger than our mobile breakpoint
-
-			if ($scrollPosition > 100) { // once you get far enough down, shrink the header
-
-		        $siteHeader.addClass(shrinkClass);
-
-		    } else { // bring it back up again when we get back to the top
-
-		    	$siteHeader.removeClass(shrinkClass);
-		    }
-
-		} else { // this is mobile breakpoint or smaller
-
-			if ($scrollPosition > 120 && $scrollPosition > $lastScrollTop) { // once you get far enough down, hide the header
-
-		    	changeDirection = -1; // reset changeDirection
-		        $siteHeader.addClass(shrinkClass);
-
-		    } else { // bring it back up again if we scroll up at all
-
-		    	if ( -1 == changeDirection) {
-		    		changeDirection = $scrollPosition; // only set changeDirection once
-		    	}
-
-		    	// console.log(changeDirection + ' ' + scrollPosition);
-
-		    	if ( $scrollPosition < (changeDirection - 100) ) { // only add after you've scrolled up a bit
-
-			    	$siteHeader.removeClass(shrinkClass);
-			    	changeDirection = -1; // reset changeDirection
-			    }
-
-		    }
-
-		    $lastScrollTop = $scrollPosition;
+		if ( small !== header.classList.contains( 'header-main-small' ) ) {
+			header.classList.toggle( 'header-main-small', small );
 		}
+	};
 
-	}));
-
+	window.addEventListener( 'scroll', () => {
+		if ( ! ticking ) {
+			ticking = true;
+			window.requestAnimationFrame( update );
+		}
+	}, { passive: true } );
 
-})( jQuery );
+	update(); // reloads restore scroll position before this runs
+}

themes/osi/assets/scss/_1_settings.breakpoints.scss

@@ -46,6 +46,9 @@ $maxPadding: 48px; // duplicates var(--wp--custom--spacing--max-padding)
 
 // header dimensions
 $headerInnerHeight: 125px; // .header--inner fixed height; admin-bar offsets come from core's --wp-admin--admin-bar--height
+$headerLogoWidth: 300px; // logo column width, held constant so the nav never reflows
+$headerLogoHeight: 110px;
+$headerLogoHeightSmall: 60px; // logo cap once scrolled // logo cap at rest; needs a length, not none, so the shrink can animate
 $mobileRowHeight: 34px; // mobile accordion row: the caret's 44px tap target centres its glyph on this
 $midPadding: 32px; // duplicates var(--wp--custom--spacing--mid-padding);
 $smallPadding: 16px; // duplicates var(--wp--custom--spacing--small-padding);

themes/osi/assets/scss/_6_components.header.scss

@@ -9,25 +9,24 @@
     }
 }
 
-.admin-bar {
-    .header-main.header-main-small {
-        top: 32px;
-        @media only screen and (max-width: 782px) {
-            top: 46px;
-        }
+// offset in both states, or the header drops 32px out from behind the admin bar the
+// moment it goes small. Core stops pinning the bar below 601px, where an offset would
+// leave a gap once it scrolls away.
+.admin-bar .header-main {
+    @media only screen and (min-width: 601px) {
+        top: var(--wp-admin--admin-bar--height, 32px);
     }
 }
 
 .header-main {
     .header--inner {
         position: static;
         opacity: 1;
-        transition: all .3s;
         z-index: 999;
         height: $headerInnerHeight;
         display: flex;
         align-items: center;
-        @media only screen and ( max-width: 1200px) {
+        @media only screen and (max-width: #{$break-nav - 0.06}) {
             background: #fff;
             padding: 16px;
         }
@@ -37,7 +36,7 @@
         .header--blog-name {
             box-sizing: border-box;
             max-width: calc(100% - 130px);
-            max-height: 110px;
+            max-height: $headerLogoHeight;
             height: 100%;
             display: flex;
             align-items: center;
@@ -55,11 +54,12 @@
             }
             img {
                 // all logos
-                max-width: 300px;
+                max-width: $headerLogoWidth;
+                max-height: $headerLogoHeight;
                 height: auto;
                 width: auto;
                 transform: translateZ(0); // chrome blurry fix
-                transition: all .3s;
+                transition: max-height .3s;
                 @media only screen and (max-width: #{$break-small}) {
                     max-width: 180px;
                 }
@@ -74,13 +74,10 @@
     }
     &.header-main-small {
         .header--inner {
-            padding-top: 16px;
-            padding-bottom: 16px;
-            max-height: 100px;
             .header--blog-name {
                 a {
                     img {
-                        max-height: 60px;
+                        max-height: $headerLogoHeightSmall;
                     }
                 }
             }
@@ -113,38 +110,27 @@
         overflow: hidden;
         transition: all .3s;
     }
-    .header--inner {
-        // opacity: 0;
-        overflow: hidden;
-        transition: all .3s;
-    }
-    .header--blog-name {}
     .header--extra-text {
         display: none;
     }
 }
 
-@media only screen and (max-width: #{$break-nav}) {
-    .header-main-small {
-        .header--blog-name img {
-            max-height: 67.19px;
-        }
-    }
-}
-
 @media only screen and (min-width: #{$break-nav}) {
     .header--inner,
     .header--quicklinks-inner {
         // @include clearfix();
         padding-left: $maxPadding;
         padding-right: $maxPadding;
-        padding-top: 1em;
     }
     .header--inner {
         border: 0;
         position: relative;
     }
     .header--blog-name {
+        // hold the column at full-logo width: letting it shrink with the logo hands the
+        // nav that width and the menu reflows from two rows to one
+        flex-shrink: 0;
+        width: $headerLogoWidth;
         .hide-mobile {
             display: inline-block;
         }
@@ -158,17 +144,24 @@
         clear: right;
         padding: 0;
     }
-    // open-panel layers: full-bleed white veil (::after escapes the wrapper inset) and
-    // page dim; z-index -1 keeps both under content, tree order paints veil over dim
-    @mixin nav-open-layers {
+    // full-bleed white: ::after escapes the wrapper inset so the background spans the
+    // page, which the design asks for whenever the header is white
+    @mixin header-white-veil( $border: false ) {
         &::after {
             background-color: $Nwhite;
-            border-bottom: 1px solid $Nlight;
+            @if $border {
+                border-bottom: 1px solid $Nlight;
+            }
             content: '';
             inset: 0 (-$wrapperPad);
             position: absolute;
             z-index: -1;
         }
+    }
+    // open-panel layers: the white veil plus a page dim; z-index -1 keeps both under
+    // content, tree order paints veil over dim
+    @mixin nav-open-layers {
+        @include header-white-veil( true );
         &::before {
             background: rgba(0, 0, 0, .35);
             content: '';
@@ -186,19 +179,10 @@
     .header-main:has(.menu-item.megamenu:hover:not(.is-dismissed)) {
         @include nav-open-layers;
     }
+    // one class on purpose: raising this above .header-main.is-nav-open would win the
+    // source-order tie and drop the open panel's bottom border
     .header-main-small {
-        background-color: $Nwhite;
-        .nav-main {
-            height: auto;
-            top: 0;
-            // transition: all .2s;
-            margin-top: 0;
-            .nav-main--menu>.menu-item>a {
-                padding-top: 0.6em;
-                padding-bottom: 0.5em;
-                transition: all .3s;
-            }
-        }
+        @include header-white-veil;
     }
 }
 

themes/osi/assets/scss/_8_overrides.templates.scss

@@ -528,6 +528,12 @@ footer.ai-footer {
     }
     .ai-header {
         border-top: 10px solid #3Ea638;
+        // the veil starts inside the trim, so pull it over and repeat the trim on it,
+        // otherwise the green stops short of the full-bleed white behind it
+        &::after {
+            border-top: 10px solid #3Ea638;
+            top: -10px;
+        }
         .site-branding {
             img {
                 width: 200px;