Bring in Bulma utilities but override the background to set it back to white

Ref #114 #126

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

@@ -22,6 +22,14 @@
   }
 }
 
+.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;
@@ -31,7 +39,10 @@
   }
   .logo a {
     display: block;
-    width: 199px;
+    // width: 199px;
+  }
+  .logo img {
+    height: 7.5rem;
   }
   @include from($tablet) {
     width: fit-content;

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

@@ -1,50 +1,41 @@
 @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 width of the navbar. */
+// Add a gradient across only a portion of the vertical height of the navbar.
-.header,
+.header {
-.sitename {
   background: linear-gradient(
     $background,
-    $background 74px,
+    $background 5.3765rem,
-    $light-green 74px,
+    $light-green 5.3765rem,
-    $green 120px,
+    $green 8.4rem,
-    $background 120px,
+    $background 8.4rem,
     $background
   );
 }
 
 #navbar-menu .navbar-item {
-  font-size: 22px;
+  font-size: 1.357rem;
 }
 
 .slogan {
   box-shadow: 0 2px 0 0 whitesmoke;
-  margin-bottom: 2px; /* Needed to see the boxshadow when we have the featured image directly below. */
+  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. */
+  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;
 }
@@ -56,17 +47,16 @@
   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 *;
+@use "variables" as local;
-@use "../../node_modules/bulma/sass/utilities/mixins" as *;
+@use "../../node_modules/bulma/sass/utilities/mixins";
 @use "../../node_modules/bulma/sass/utilities/initial-variables" as *;
 
 // Center logo & sitename when they stack on tiny screens.
-@include until($mini) {
+@include mixins.until(local.$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 from($desktop) {
+  @include mixins.from($desktop) {
     height: 14rem;
   }
-  @include from($widescreen) {
+  @include mixins.from($widescreen) {
     height: 16rem;
   }
 }
@@ -64,30 +64,26 @@
 }
 
 // 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 {
-  /* Not all browsers support outline: auto, so set a sensible fallback outline. */
+  outline: 2px solid yellow; // Default for browsers that do not support outline: auto
-  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;
@@ -122,54 +118,64 @@
 }
 
 .hamburger {
-  width: 32px;
-  height: 32px;
-  position: relative;
-  display: block;
-  transition: transform 0.5s ease;
-  z-index: 1;
   cursor: pointer;
-  padding-top: 5px;
+  display: block;
+  position: relative;
+  margin-left: auto;
+  margin-right: 0;
+  padding: 1.5rem 2rem 1rem 1rem;
+  width: 5rem;
+  height: 5rem;
+  transition: transform 0.3s ease;
+  z-index: 1;
 }
 
 .hamburger .slice {
   display: block;
   width: 100%;
-  height: 2px;
+  height: 0.1875rem;
-  background-color: white;
+  background-color: $green;
-  transition: all 0.5s ease;
+  transition: all 0.3s ease;
 }
 
 .hamburger .slice:not(:first-child) {
-  margin-top: 10px;
+  margin-top: 0.5rem;
 }
 
 .drawer {
-  position: fixed;
+  position: absolute;
-  left: 0;
+  right: 0;
-  top: 0;
+  top: 5rem;
-  height: 100%;
+  height: fit-content;
   width: max-content;
   max-width: 100%;
-  padding: 22px;
+  padding: 1.5rem;
-  background: black;
+  background: local.$offwhite;
   transform: translateX(-100%);
-  transition: transform 0.5s ease;
+  transition: transform 0.4s ease;
+  z-index: 100;
 }
 
 .drawer .nav-list {
   padding: 0;
   list-style: none;
-  margin-top: 30px;
+  // margin-top: 30px;
-  margin-left: 20px;
+  // margin-left: 20px;
 }
 
 .drawer .nav-list .nav-list-item {
-  padding-bottom: 10px;
+  // padding-bottom: 10px;
+}
+}
+
+@include mixins.tablet {
+  .hamburger, #hamburger-toggle {
+    display: none;
+  }
 }
 
 /* Make the drawer full-width on mobile */
-@media screen and (max-width: 768px) {
+@media screen and (max-width: local.$mini) {
   .drawer {
     width: 100%;
   }

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

@@ -3,7 +3,9 @@
 @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.
-@forward "../../node_modules/bulma/sass/utilities/_index";
+@use "../../node_modules/bulma/sass/utilities" with (
+  $background: white,
+);
 @forward "fonts";
 @forward "../../node_modules/bulma/sass/base/_index";
 @forward "base";