css: set the hamburger glyph in top navbar from CSS.

Instead of hardcoding it from the markup. This way when the CSS is not
present at all (broken site), the user is not present with confusing
hamburgers on the top.

Important: unless you are using the builtin Pelican theme, you need to
update your markup to remove the hamburger glyph, otherwise you'll have
two of them there.

diff --git a/css/m-components.css b/css/m-components.css
index 84425ce45a043225bd45d0f182ad4cb76e749d3d..401b77d9984dc3473efc3d2acd2918f92a24cd82 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -174,6 +174,9 @@ body > header > nav a#m-navbar-brand, body > header > nav a#m-navbar-show, body
   font-size: 1.125rem;
   line-height: 3rem;
 }
+body > header > nav a#m-navbar-show:before, body > header > nav a#m-navbar-hide:before {
+  content:'\2630';
+}
 body > header > nav #m-navbar-collapse {
   padding-bottom: 1rem;
 }

diff --git a/doc/css/page-layout.rst b/doc/css/page-layout.rst
index 00da439acd3d98e4a121c13b8e68e6a952f5ff3c..2a62034a816307d198de83e0d7a6b1ab101e3df3 100644 (file)
--- a/doc/css/page-layout.rst
+++ b/doc/css/page-layout.rst
@@ -119,8 +119,8 @@ items is shown below.
       <div class="m-container">
         <div class="m-row">
           <a href="#" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">Your Brand</a>
-          <a id="m-navbar-show" href="#navigation" title="Show navigation" class="m-col-t-3 m-hide-m m-text-right">&#9776;</a>
-          <a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right">&#9776;</a>
+          <a id="m-navbar-show" href="#navigation" title="Show navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
+          <a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
           <div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
             <ol>
               <li><a href="#">Features</a></li>
@@ -164,8 +164,8 @@ contents into two (or more) columns using standard m.css
       <div class="m-container">
         <div class="m-row">
           <a href="#" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">Your Brand</a>
-          <a id="m-navbar-show" href="#navigation" title="Show navigation" class="m-col-t-3 m-hide-m m-text-right">&#9776;</a>
-          <a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right">&#9776;</a>
+          <a id="m-navbar-show" href="#navigation" title="Show navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
+          <a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
           <div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
             <div class="m-row">
               <ol class="m-col-t-6 m-col-m-none">
@@ -198,8 +198,8 @@ appear as an indented sub-list.
       <div class="m-container">
         <div class="m-row">
           <a href="#" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">Your Brand</a>
-          <a id="m-navbar-show" href="#navigation" title="Show navigation" class="m-col-t-3 m-hide-m m-text-right">&#9776;</a>
-          <a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right">&#9776;</a>
+          <a id="m-navbar-show" href="#navigation" title="Show navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
+          <a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
           <div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
             <div class="m-row">
               <ol class="m-col-t-6 m-col-m-none">

diff --git a/pelican-theme/templates/base.html b/pelican-theme/templates/base.html
index 3c8fcb31911a68a612a2b209393d3071a34826ec..67dcb315946187e15db5b8e4cf0a9628a2fe60e9 100644 (file)
--- a/pelican-theme/templates/base.html
+++ b/pelican-theme/templates/base.html
@@ -27,8 +27,8 @@
         {%- if M_SITE_LOGO %}<img src="{{ M_SITE_LOGO }}" />{% endif -%}
         {{- M_SITE_LOGO_TEXT -}}
       </a>
-      <a id="m-navbar-show" href="#navigation" title="Show navigation" class="m-col-t-3 m-hide-m m-text-right">&#9776;</a>
-      <a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right">&#9776;</a>
+      <a id="m-navbar-show" href="#navigation" title="Show navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
+      <a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
       <div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
         <div class="m-row">
           <ol class="m-col-t-6 m-col-m-none">