diff --git a/web/themes/custom/geofresco/src/global/_components.scss b/web/themes/custom/geofresco/src/global/_components.scss
index 5f9c2af..ddb6348 100644
--- a/web/themes/custom/geofresco/src/global/_components.scss
+++ b/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;
diff --git a/web/themes/custom/geofresco/src/global/_elements.scss b/web/themes/custom/geofresco/src/global/_elements.scss
index 8e99088..3b240fb 100644
--- a/web/themes/custom/geofresco/src/global/_elements.scss
+++ b/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. */
-.header,
-.sitename {
+// Add a gradient across only a portion of the vertical height of the navbar.
+.header {
   background: linear-gradient(
     $background,
-    $background 74px,
-    $light-green 74px,
-    $green 120px,
-    $background 120px,
+    $background 5.3765rem,
+    $light-green 5.3765rem,
+    $green 8.4rem,
+    $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. */
-  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;
 }
@@ -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;