Make everything good (enough) #114 #126

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

@@ -4,18 +4,16 @@
  * ../../node_modules/bulma/sass/components
  */
 
-@use "variables" as *;
+@use "variables" as local;
 @use "../../node_modules/bulma/sass/utilities/mixins" as *;
 @use "../../node_modules/bulma/sass/utilities/initial-variables" as *;
 
-/**
+// Make menu items slightly less far apart so we never entirely lose 'Community'
- * Make menu items slightly less far apart so we never entirely lose
+// on mid-size screens.  See https://gitlab.com/drutopia/octavia/issues/52
- * 'Community' on mid-size screens.
- * See https://gitlab.com/drutopia/octavia/issues/52
- */
 .navbar-item, .navbar-link {
   padding-left: .75rem;
   padding-right: .75rem;
+  padding-top: 1.5rem;
   @include from($widescreen) {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -28,21 +26,33 @@
 }
 
 #navbar-menu {
+  a:hover {
+    background-color: local.$yellow !important;
+  }
   display: flex;
   // More modern Bulma has is-flex-wrap-wrap as a class for this.
   flex-wrap: wrap;
-  @include until($tablet) {
+  @include until($desktop) {
-    width: 100%;
+    display: table;
-    justify-content: space-around;
+    // width: 100%;
+    // justify-content: space-around;
+    // Do not show the down arrow when it is already expanded.
+    .navbar-link::after {
+      display: none !important;
+    }
   }
   @include from($desktop) {
     flex-wrap: nowrap;
     margin-right: -1rem;
+    // Stay open as long as we are hovering; Bulma should be handling this but :shrug:
+    .navbar-dropdown:hover {
+      display: block;
+    }
   }
 }
 
 
-/* Featured images on article pages */
+// Featured images on article pages.
 .featured-image figure.image {
   width: 100vw;
   position: relative;
@@ -131,7 +141,7 @@
  */
 .footer .views-field {
   .field-content {
-    background-color: rgba($offwhite, 0.9);
+    background-color: rgba(local.$offwhite, 0.9);
     padding: 0.2em;
     border-radius: 0.3em;
   }
@@ -147,14 +157,14 @@
 }
 
 .page-title .title > span {
-  background-color: rgba($offwhite, 0.66);
+  background-color: rgba(local.$offwhite, 0.66);
   padding: 0.4em 0.3em 0.3em 0.3em;
   border-radius: 0.4em;
   line-height: 1.8;
 }
 
 .block--footer_menus {
-  background-color: rgba($offwhite, 0.9);
+  background-color: rgba(local.$offwhite, 0.9);
   padding: 0.2em;
   border-radius: 0.3em;
 }

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

@@ -1,7 +1,4 @@
-/**
+// Styles for contributor-added content on the site, such as embedded media.
- * Styles related to contributor-added content on the site, such as embedded
- * media.
- */
 
 iframe {
   width: 100%;
@@ -10,3 +7,8 @@ iframe {
     height: revert-layer;
   }
 }
+
+// Header tabs section is only shown to content editors for the Edit etc tabs.
+.header-tabs {
+  padding: 0;
+}

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

@@ -26,11 +26,15 @@
 
 .geo-logo-name {
   display: flex !important;
+  padding-bottom: 0 !important; // Or else .column's padding takes precedence.
   overflow: hidden;
   width: 100%;
   .logo, .sitename {
     display: table-cell;
   }
+  .sitename {
+    padding-top: 0.125rem; // 2px, better vertically-center "Organizing" in green stripe
+  }
   .logo a {
     display: block;
   }
@@ -52,6 +56,7 @@
 
 .slogan {
   box-shadow: 0 2px 0 0 whitesmoke;
+  margin-top: -1rem;
   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 {

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

@@ -5,12 +5,12 @@
 @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.
+// Allow sitename to slide over the logo on tiny screens.
 @include mixins.until(local.$mini) {
   .geo-logo-name .sitename {
     position: absolute;
     left: calc(100vw - 14rem);
-    top: 0.5rem;
+    top: 0;
   }
   // .logo.column {
   //   width: 100%;
@@ -18,10 +18,14 @@
   .navigation.column .hamburger {
     position: absolute;
     right: 0;
-    top: 0.5rem;
+    top: 0;
   }
 }
 
+.search-bar {
+  padding-top: 1.75rem;
+}
+
 .search-bar > .block,
 .logo > .image {
   display: inline-block;

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

@@ -63,3 +63,14 @@
 .page--content-item--gleaning .page-title {
   background-color: $gleaning;
 }
+
+:root {
+  --bulma-body-color: $geo-green;
+  --bulma-navbar-dropdown-background-color: white;
+  --bulma-navbar-dropdown-z: 999;
+}
+// Not figuring out the damn -l -h -s to make our primary color.
+.button.is-primary {
+  background-color: $geo-green;
+  color: white;
+}

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

@@ -6,6 +6,8 @@
 
 @forward "../../node_modules/bulma/sass/utilities" with (
   $background: white,
+  $green: $geo-green,
+  $blue: $blue,
 );
 @forward "fonts";
 @forward "../../node_modules/bulma/sass/base/_index";
@@ -15,18 +17,26 @@
 @forward "../../node_modules/bulma/sass/form/_index";
 @forward "form";
 // $navbar-breakpoint: calc($mini/2);
-@forward "../../node_modules/bulma/sass/components/_index";
+@forward "../../node_modules/bulma/sass/components/_index" with (
+  $navbar-dropdown-background-color: white,
+);
 @forward "components";
 @forward "../../node_modules/bulma/sass/grid/_index";
 @forward "grid";
 @forward "../../node_modules/bulma/sass/layout/_index";
 @forward "layout";
 
-// Import the themes so that all CSS variables have a value
-@forward "../../node_modules/bulma/sass/themes";
-
 // Stylesheets below will have access to all Bulma variables and mixins.
 @forward "content";
 @forward "paint";
 
+// Import the themes so that all CSS variables have a value (not) but avoid dark mode.
+@use "../../node_modules/bulma/sass/themes/light";
+@use "../../node_modules/bulma/sass/themes/setup";
+
+:root {
+  @include light.light-theme;
+  @include setup.setup-theme;
+}
+
 // @forward '../../node_modules/bulma-extensions/bulma-timeline/dist/bulma-timeline';