Conclusion of endless round of changes to make menu sort of usable

The dropdowns do not drop down on touch devices,
before fixing that need to check in on if the noble
battle to keep the menu visible for as many devices
as possible (and not hide behind the hamburger)
should in fact be given up.

Ref #114

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

@@ -18,6 +18,47 @@
   }
 }
 
+.geo-logo-name {
+  display: flex !important;
+  overflow: hidden;
+  width: 100%;
+  .logo, .sitename {
+    display: table-cell;
+  }
+  .logo a {
+    display: block;
+    width: 199px;
+  }
+  @include from($tablet) {
+    width: fit-content;
+  }
+  @include until($mini) {
+    justify-content: flex-end;
+  }
+}
+
+@include until($desktop) {
+  .search-bar {
+    display: none !important;
+  }
+}
+
+// Mostly to reduce the impact of the ridiculous (mostly on Chrome) ghost mobile horizontal scroll.
+.search-icon {
+  padding-right: 1rem;
+}
+
+#navbar-menu {
+  display: flex;
+  // More modern Bulma has is-flex-wrap-wrap as a class for this.
+  flex-wrap: wrap;
+  @include until($tablet) {
+    width: 100%;
+    justify-content: space-around;
+  }
+}
+
+
 /* Featured images on article pages */
 .featured-image figure.image {
   width: 100vw;

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

@@ -1,7 +1,6 @@
 @charset "UTF-8";
 // Extend or override Bulma's layouts ../../node_modules/bulma/sass/layout
 
-
 // Center logo & sitename when they stack on tiny screens.
 @include until($mini) {
   .sitename.column,
@@ -15,6 +14,7 @@
   display: inline-block;
 }
 
+
 // Allow the primary page content to be flush with the bottom of the slogan.
 .main-section {
   padding-top: 0;
@@ -38,9 +38,6 @@
 }
 
 // Prevent a slight horizontal scroll.
-.page-title .container {
-  overflow-x: hidden;
-}
 
 /* On content listing pages (e.g. card view mode). */
 .background-replacement-for-no-image {

web/themes/custom/geofresco/src/templates/block/block--system-branding-block.html.twig

@@ -14,18 +14,18 @@
  * @ingroup themeable
  */
 #}
+<div class="column is-narrow geo-logo-name is-paddingless">
 {% if site_logo %}
-<div class="logo column is-narrow is-paddingless has-text-centered">
+<div class="logo">
-  <figure class="image no-upscale">
+  <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
-    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
+    <img src="{{ site_logo }}" alt="GEO's logo, a gently winding path through green to a large bright sun on the horizon." />
-      <img src="{{ site_logo }}" alt="{{ site_name }} Home" />
+  </a>
-    </a>
-  </figure>
 </div>
 {% endif %}
-<div class="sitename column is-narrow is-paddingless has-text-centered">
+<div class="sitename">
   <a class="site-title title is-3" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
     <span class="green">Grassroots
       Economic</span>
     <span class="yellow">Organizing</span></a>
 </div>
+</div>

web/themes/custom/geofresco/src/templates/elements/menu--nav-bulma.html.twig

@@ -58,7 +58,7 @@
           %}
         {% endif %}
         {% if item.url|render == '/search' %}
-          {% set item_classes = item_classes|merge(['is-hidden-tablet']) %}
+          {% set item_classes = item_classes|merge(['is-hidden-desktop search-icon']) %}
         {% endif %}
       {% endif %}
       {{ link(

web/themes/custom/geofresco/src/templates/layout/page.html.twig

@@ -16,17 +16,17 @@
   %}
 {% endif %}
 {% block navbar %}
-{# We put everything in Bulma columns so must do navbar in header block #}
+{# We put everything in Bulma columns so must do navbar in header block, not here #}
 {% endblock navbar %}
 {% block header %}
-<div class="header columns is-mobile is-multiline is-marginless">
+<div class="header columns is-marginless">
   {% block navbar_branding %}
   {{ page.navbar_branding }}
   {% endblock navbar_branding %}
   <nav class="navigation column">
     <div class="columns">
       {% if page.header_search %}
-      <div class="search-bar column has-text-right is-hidden-mobile">
+      <div class="search-bar column has-text-right">
         {{ page.header_search }}
       </div>
       {% endif %}
@@ -39,7 +39,7 @@
       {% endblock navbar_social %}
       {% block primary_menu %}
       {% if page.primary_menu %}
-      <div class="column is-narrow">
+      <div class="column">
         {{ page.primary_menu }}
       </div>
       {% endif %}
@@ -47,11 +47,13 @@
     </div>
   </nav>
 </div>
+{% if is_front %}
 <div class="columns">
   <div class="column has-text-centered">
     <p class="slogan"><strong class="title">{{ site_slogan }}</strong></p>
   </div>
 </div>
+{% endif %}
 {{ page.highlighted }}
 {{ page.help }}
 {% block tabs %}