Compile CSS

The whole override thing, like i need to override their green every time i bring in their initial variables or something?  That's a drag.

web/themes/custom/geofresco/dist/css/global.css

@@ -2679,41 +2679,55 @@ button.tag:active,
   font-size: 0.75rem;
 }
 
-/* Extend or override Bulma's elements ../../node_modules/bulma/sass/elements */
-.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: 0.1rem 0.6rem;
 }
 
-/* Add a gradient across only a portion of the vertical width of the navbar. */
-.header,
-.sitename {
-  background: linear-gradient(hsl(221, 14%, 96%), hsl(221, 14%, 96%) 74px, #65AB1F 74px, #478D00 120px, hsl(221, 14%, 96%) 120px, hsl(221, 14%, 96%));
+.header {
+  background-image: url(../../images/green-stripe.png);
+  background-position-y: var(--bulma-column-gap);
+  background-repeat: repeat-x;
+}
+
+.site-title {
+  display: inline-block;
+  width: 4.6em;
+  word-break: keep-all;
+  font-size: 2.3125rem;
+  line-height: 2.375rem;
+}
+
+.geo-logo-name {
+  display: flex !important;
+  overflow: hidden;
+  width: 100%;
+}
+.geo-logo-name .logo, .geo-logo-name .sitename {
+  display: table-cell;
+}
+.geo-logo-name .logo a {
+  display: block;
+}
+.geo-logo-name .logo img {
+  height: 7.5rem;
+  width: 12.4375rem;
 }
 
 #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. */
-  padding-bottom: 4px; /* Give just a little extra space at the bottom for the *appearance* of balance. */
+  margin-bottom: 2px;
+  padding-bottom: 4px;
 }
 .slogan .title {
   color: #8FB489;
   font-size: 1.2rem;
 }
 
-/* Give some space above the subtitle. */
 .featured-image {
   margin-bottom: 0.5rem;
 }
@@ -2726,12 +2740,10 @@ button.tag:active,
   margin-bottom: 1.2rem;
 }
 
-/* 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. */
 .more-link {
   float: right;
   position: relative;
@@ -5794,34 +5806,6 @@ label.panel-block:hover {
   }
 }
 
-.geo-logo-name {
-  display: flex !important;
-  overflow: hidden;
-  width: 100%;
-}
-.geo-logo-name .logo, .geo-logo-name .sitename {
-  display: table-cell;
-}
-.geo-logo-name .logo a {
-  display: block;
-  width: 199px;
-}
-@media screen and (min-width: 769px) {
-  .geo-logo-name {
-    width: fit-content;
-  }
-}
-@media screen and (max-width: 362px) {
-  .geo-logo-name {
-    justify-content: flex-end;
-  }
-}
-
-@media screen and (max-width: 1023px) {
-  .search-bar {
-    display: none !important;
-  }
-}
 .search-icon {
   padding-right: 1rem;
 }
@@ -11382,12 +11366,10 @@ label.panel-block:hover {
   z-index: 10;
 }
 
-/* On content listing pages (e.g. card view mode). */
 .background-replacement-for-no-image {
   height: 10rem;
 }
 
-/* On full content pages. */
 .featured-image .background-replacement-for-no-image {
   height: 12rem;
 }
@@ -11402,11 +11384,97 @@ label.panel-block:hover {
   }
 }
 
-/* Yes i know i should just give author bios their own class */
 .node--type-people.node--view-mode-teaser {
   margin-bottom: 1rem;
 }
 
+@media screen and (max-width: 1023px) {
+  .hamburger-container {
+    transition: transform 0.5s ease;
+  }
+  .hamburger-container .checkbox {
+    opacity: 0;
+    position: absolute;
+  }
+  .hamburger-container .checkbox:focus ~ .hamburger {
+    outline: 2px solid yellow;
+    outline: auto;
+    outline-offset: 4px;
+  }
+  @supports selector(:focus-visible) {
+    .hamburger-container .checkbox:not(:focus-visible) ~ .hamburger {
+      outline: none;
+    }
+  }
+  .hamburger-container .drawer {
+    visibility: hidden;
+    transition: visibility 0.5s linear;
+  }
+  .hamburger-container .checkbox:checked ~ .drawer {
+    visibility: visible;
+  }
+  .hamburger-container .checkbox:checked ~ .drawer {
+    transform: translateX(0%);
+  }
+  .hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(1) {
+    transform: translateY(0.6875rem) rotate(45deg);
+  }
+  .hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(2) {
+    opacity: 0;
+  }
+  .hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(3) {
+    transform: translateY(-0.6875rem) rotate(-45deg);
+  }
+  .hamburger {
+    cursor: pointer;
+    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: 0.1875rem;
+    background-color: hsl(153, 53%, 53%);
+    transition: all 0.3s ease;
+  }
+  .hamburger .slice:not(:first-child) {
+    margin-top: 0.5rem;
+  }
+  .drawer {
+    position: absolute;
+    right: 0;
+    top: 5rem;
+    height: fit-content;
+    width: max-content;
+    max-width: 100%;
+    padding: 1.5rem;
+    background: #F8F8F8;
+    transform: translateX(-100%);
+    transition: transform 0.4s ease;
+    z-index: 100;
+  }
+  .drawer .nav-list {
+    padding: 0;
+    list-style: none;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .hamburger, #hamburger-toggle {
+    display: none;
+  }
+}
+@media screen and (max-width: 768px) {
+  .drawer {
+    width: 100%;
+  }
+}
 /* Bulma Themes */
 :root {
   --bulma-scheme-h: 221;

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

@@ -24,7 +24,7 @@
 
 // Give us some color classes
 .green {
-  color: $green;
+  color: $geo-green;
 }
 
 .yellow {

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

@@ -3,7 +3,7 @@
 $blue: #4391E0;
 $red: #a70c20;
 $light-green: #65AB1F;
-$green: #478D00;
+$geo-green: #478D00;
 $green-gray: #8FB489;
 $offwhite: #F8F8F8;
 
@@ -14,13 +14,13 @@ $brown: #AD7442;
 $yellow: #ffdd57;
 
 // A color for each content type
-$article: $green;
+$article: $geo-green;
 $blog: $blue;
 $collection: $brown;
 $gleaning: $yellow;
 
 // Update Bulma's global variables.
-$primary: $green;
+$primary: $geo-green;
 
 $mini: 363px;
 

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

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