Commit compiled CSS

Also keep columns (don't stack them) on mobile but hide most of them

web/themes/custom/geofresco/README.md

@@ -44,6 +44,10 @@ Provided by default are seven npm scripts that point to Gulp tasks. We run gulp
   ```
   npm run compile
   ```
+  or:
+  ```
+  ./css
+  ```
 
 3. Watch files and run tasks when they change.
   ```

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

@@ -3084,8 +3084,7 @@ a.tag:hover {
   padding-top: 18px; }
 
 .slogan {
-  position: relative;
+  margin-top: -36px;
-  top: -36px;
   height: 36px;
   z-index: 30;
   display: -webkit-box;
@@ -8165,8 +8164,5 @@ label.panel-block {
   background-color: #fafafa;
   padding: 3rem 1.5rem 6rem; }
 
-/*
+.secondary-menus {
-.hero-body {
+  z-index: 40; }
-  padding: 2rem 1.5rem;
-}
-*/

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

@@ -1,8 +1,6 @@
 @charset "UTF-8";
 // Extend or override Bulma's layouts ../../node_modules/bulma/sass/layout
 
-/*
+.secondary-menus {
-.hero-body {
+  z-index: 40;
-  padding: 2rem 1.5rem;
 }
-*/

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

@@ -18,14 +18,21 @@
 {% block navbar %}
 {# Add a new region #}
 {% if page.header_user or page.header_search %}
-<div class="container">
+<div class="container secondary-menus">
-  <div class="columns">
+  <div class="columns is-mobile">
-    <div class="column"></div>
+    <div class="column is-hidden-mobile"></div>
     {% if page.header_user %}
     <div class="column user-account-menu">
     {{ page.header_user }}
     </div>
     {% endif %}
+    <div class="column is-narrow is-hidden-tablet">
+      <div id="js-navbar-burger" class="navbar-burger burger" data-target="navbar-menu">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
     {% if page.header_search %}
     <div class="column search-bar is-hidden-mobile">
       {{ page.header_search }}
@@ -34,7 +41,34 @@
   </div>
 </div>
 {% endif %}
-{{ parent() }}
+{% if page.navbar_branding or page.navbar_social or page.primary_menu %}
+{# Top navbar #}
+<nav class="navbar has-shadow">
+  <div class="container">
+    <div class="navbar-brand">
+      {% block navbar_branding %}
+      {% if page.navbar_branding %}
+      {{ page.navbar_branding }}
+      {% endif %}
+      {% endblock navbar_branding %}
+    </div>
+    <div id="js-navbar-menu" class="navbar-menu">
+      {% block navbar_social %}
+      {% if page.navbar_social %}
+      <div class="navbar-start">
+      {{ page.navbar_social }}
+      </div>
+      {% endif %}
+      {% endblock navbar_social %}
+      {% block primary_menu %}
+      {% if page.primary_menu %}
+      {{ page.primary_menu }}
+      {% endif %}
+      {% endblock primary_menu %}
+    </div>
+  </div>
+</nav>
+{% endif %}
 {% endblock navbar %}
 {% block header %}
 <p class="slogan"><strong class="title">{{ site_slogan }}</strong></p>