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

@@ -2679,55 +2679,41 @@ 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;
 }
 
-.header {
+/* Add a gradient across only a portion of the vertical width of the navbar. */
-  background-image: url(../../images/green-stripe.png);
+.header,
-  background-position-y: var(--bulma-column-gap);
+.sitename {
-  background-repeat: repeat-x;
+  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%));
-}
-
-.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: 1.357rem;
+  font-size: 22px;
 }
 
 .slogan {
   box-shadow: 0 2px 0 0 whitesmoke;
-  margin-bottom: 2px;
+  margin-bottom: 2px; /* Needed to see the boxshadow when we have the featured image directly below. */
-  padding-bottom: 4px;
+  padding-bottom: 4px; /* Give just a little extra space at the bottom for the *appearance* of balance. */
 }
 .slogan .title {
   color: #8FB489;
   font-size: 1.2rem;
 }
 
+/* Give some space above the subtitle. */
 .featured-image {
   margin-bottom: 0.5rem;
 }
@@ -2740,10 +2726,12 @@ 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;
@@ -5806,6 +5794,34 @@ 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;
 }
@@ -11366,10 +11382,12 @@ 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;
 }
@@ -11384,97 +11402,11 @@ 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: $geo-green;
+  color: $green;
 }
 
 .yellow {

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

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

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

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