web/themes/custom/geofresco/src/global/_components.scss

@@ -22,14 +22,6 @@
   }
 }
 
-.site-title {
-  display: inline-block;
-  width: 4.6em;
-  word-break: keep-all; // Shouldn't be needed but Chrome needs it.
-  font-size: 37px;
-  line-height: 38px;
-}
-
 .geo-logo-name {
   display: flex !important;
   overflow: hidden;
@@ -39,10 +31,7 @@
   }
   .logo a {
     display: block;
-    // width: 199px;
-  }
-  .logo img {
-    height: 7.5rem;
+    width: 199px;
   }
   @include from($tablet) {
     width: fit-content;

web/themes/custom/geofresco/src/global/_elements.scss

@@ -1,41 +1,50 @@
 @charset "UTF-8";
-// Extend or override Bulma's elements ../../node_modules/bulma/sass/elements
+/* Extend or override Bulma's elements ../../node_modules/bulma/sass/elements */
 
 @use "../../node_modules/bulma/sass/utilities/derived-variables" as *;
 @use "variables" as *;
 
+.site-title {
+  display: inline-block;
+  width: 4.6em;
+  word-break: keep-all; /* Shouldn't be needed but Chrome needs it. */
+  font-size: 37px;
+  line-height: 38px;
+}
+
 .user-account-menu li {
   display: inline-block;
   padding: .1rem .6rem;
 }
 
-// Add a gradient across only a portion of the vertical height of the navbar.
-.header {
+/* Add a gradient across only a portion of the vertical width of the navbar. */
+.header,
+.sitename {
   background: linear-gradient(
     $background,
-    $background 5.3765rem,
-    $light-green 5.3765rem,
-    $green 8.4rem,
-    $background 8.4rem,
+    $background 74px,
+    $light-green 74px,
+    $green 120px,
+    $background 120px,
     $background
   );
 }
 
 #navbar-menu .navbar-item {
-  font-size: 1.357rem;
+  font-size: 22px;
 }
 
 .slogan {
   box-shadow: 0 2px 0 0 whitesmoke;
-  margin-bottom: 2px; // Needed to see the boxshadow when we have the featured image directly below.
-  padding-bottom: 4px; // Give just a little extra space at the bottom for the *appearance* of balance.
+  margin-bottom: 2px; /* Needed to see the boxshadow when we have the featured image directly below. */
+  padding-bottom: 4px; /* Give just a little extra space at the bottom for the *appearance* of balance. */
   .title {
     color: $green-gray;
     font-size: 1.2rem;
   }
 }
 
-// Give some space above the subtitle.
+/* Give some space above the subtitle. */
 .featured-image {
   margin-bottom: 0.5rem;
 }
@@ -47,16 +56,17 @@
   margin: 1em;
 }
 
+
 .drum {
   margin-bottom: 1.2rem;
 }
 
-// Remove empty gap from featured homepage image, to match look of content.
+/* Remove empty gap from featured homepage image, to match look of content. */
 .block--highlighted {
   margin-top: -1.5rem;
 }
 
-// I know this is wrong but it seems to work flawlessly across sizes.
+/* I know this is wrong but it seems to work flawlessly across sizes. */
 .more-link {
   float: right;
   position: relative;

web/themes/custom/geofresco/src/global/_layout.scss

@@ -1,12 +1,12 @@
 @charset "UTF-8";
 // Extend or override Bulma's layouts ../../node_modules/bulma/sass/layout
 
-@use "variables" as local;
-@use "../../node_modules/bulma/sass/utilities/mixins";
+@use "variables" as *;
+@use "../../node_modules/bulma/sass/utilities/mixins" as *;
 @use "../../node_modules/bulma/sass/utilities/initial-variables" as *;
 
 // Center logo & sitename when they stack on tiny screens.
-@include mixins.until(local.$mini) {
+@include until($mini) {
   .sitename.column,
   .logo.column {
     width: 100%;
@@ -50,10 +50,10 @@
 /* On full content pages. */
 .featured-image .background-replacement-for-no-image {
   height: 12rem;
-  @include mixins.from($desktop) {
+  @include from($desktop) {
     height: 14rem;
   }
-  @include mixins.from($widescreen) {
+  @include from($widescreen) {
     height: 16rem;
   }
 }
@@ -64,26 +64,30 @@
 }
 
 // Main navigation, goes to code in page.html.twig
-@include mixins.mobile {
-// Code adapted from https://unused-css.com/blog/css-only-hamburger-menu/
 .hamburger-container {
+  width: max-content;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: white;
   transition: transform 0.5s ease;
 }
 
-// We don't need the checkbox to be visible, but we can't set it to display: none because this will break keyboard navigation. Instead set the opacity to 0 and the position to absolute so it doesn't push the rest of the content down.
+/* We don't need the checkbox to be visible, but we can't set it to display: none because this will break keyboard navigation. Instead set the opacity to 0 and the position to absolute so it doesn't push the rest of the content down */
 .hamburger-container .checkbox {
   opacity: 0;
   position: absolute;
 }
 
-// Show an outline when the hamburger is selected using the keyboard. Older browsers don't support :focus-visible, so we will just use :focus here.
+/* Show an outline when the hamburger is selected using the keyboard. Older browsers don't support :focus-visible, so we will just use :focus here. */
 .hamburger-container .checkbox:focus ~ .hamburger {
-  outline: 2px solid yellow; // Default for browsers that do not support outline: auto
+  /* Not all browsers support outline: auto, so set a sensible fallback outline. */
+  outline: 2px solid white;
   outline: auto;
   outline-offset: 4px;
 }
 
-// For newer browsers that do support :focus-visible, hide the outline when the checkbox isn't selected with the keyboard.
+/* For newer browsers that do support :focus-visible, hide the outline when the checkbox isn't selected with the keyboard. */
 @supports selector(:focus-visible) {
   .hamburger-container .checkbox:not(:focus-visible) ~ .hamburger {
     outline: none;
@@ -118,64 +122,54 @@
 }
 
 .hamburger {
-  cursor: pointer;
-  display: block;
+  width: 32px;
+  height: 32px;
   position: relative;
-  margin-left: auto;
-  margin-right: 0;
-  padding: 1.5rem 2rem 1rem 1rem;
-  width: 5rem;
-  height: 5rem;
-  transition: transform 0.3s ease;
+  display: block;
+  transition: transform 0.5s ease;
   z-index: 1;
+  cursor: pointer;
+  padding-top: 5px;
 }
 
 .hamburger .slice {
   display: block;
   width: 100%;
-  height: 0.1875rem;
-  background-color: $green;
-  transition: all 0.3s ease;
+  height: 2px;
+  background-color: white;
+  transition: all 0.5s ease;
 }
 
 .hamburger .slice:not(:first-child) {
-  margin-top: 0.5rem;
+  margin-top: 10px;
 }
 
 .drawer {
-  position: absolute;
-  right: 0;
-  top: 5rem;
-  height: fit-content;
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
   width: max-content;
   max-width: 100%;
-  padding: 1.5rem;
-  background: local.$offwhite;
+  padding: 22px;
+  background: black;
   transform: translateX(-100%);
-  transition: transform 0.4s ease;
-  z-index: 100;
+  transition: transform 0.5s ease;
 }
 
 .drawer .nav-list {
   padding: 0;
   list-style: none;
-  // margin-top: 30px;
-  // margin-left: 20px;
+  margin-top: 30px;
+  margin-left: 20px;
 }
 
 .drawer .nav-list .nav-list-item {
-  // padding-bottom: 10px;
-}
-}
-
-@include mixins.tablet {
-  .hamburger, #hamburger-toggle {
-    display: none;
-  }
+  padding-bottom: 10px;
 }
 
 /* Make the drawer full-width on mobile */
-@media screen and (max-width: local.$mini) {
+@media screen and (max-width: 768px) {
   .drawer {
     width: 100%;
   }

web/themes/custom/geofresco/src/global/global.scss

@@ -3,9 +3,7 @@
 @use "variables" as *;
 // Import each part of Bulma separately so we can layer in our styles.
 // Extend or override Bulam's base styles in this themes base.scss etc.
-@use "../../node_modules/bulma/sass/utilities" with (
-  $background: white,
-);
+@forward "../../node_modules/bulma/sass/utilities/_index";
 @forward "fonts";
 @forward "../../node_modules/bulma/sass/base/_index";
 @forward "base";