cl-theme: update css to version 2.0.2

2 files changed, 56 insertions, 7 deletions

diff --git a/cl-theme/static/css/style.css b/cl-theme/static/css/style.css
index 3d823a8..b3639ff 100644
--- a/cl-theme/static/css/style.css
+++ b/cl-theme/static/css/style.css
@@ -2,7 +2,7 @@
  * bulma css framework (github.com/jgthms | bulma.io)
  * Author: jeremy thomas
  * Author: jesus e.
- * Version: 2.0.1
+ * Version: 2.0.2
  * Licensed under MIT (https://github.com/jgthms/bulma/blob/master/LICENSE)
  */
 /* basic formatting changes (mostly to cater for darker colours) */
@@ -48,6 +48,27 @@ body, input, textarea, .button {
     display: none;
 }
 
+.nav__toggle {
+    position: absolute;
+    cursor: pointer;
+    margin: 0 1rem;
+    right: 0;
+}
+
+.nav__toggle svg {
+    width: 1rem;
+    fill: white;
+}
+
+.nav__toggle .close {
+    display: none;
+}
+
+.nav__toggle .close,
+.nav__toggle .menu {
+    margin: 1rem auto;
+}
+
 label[for=navbar-toggle-cbox] {
     cursor: pointer;
 }
@@ -56,6 +77,14 @@ label[for=navbar-toggle-cbox] {
     display: block;
 }
 
+#navbar-toggle-cbox:checked ~ .navbar-brand label.nav__toggle svg.close {
+    display: block;
+}
+
+#navbar-toggle-cbox:checked ~ .navbar-brand label.nav__toggle svg.menu {
+    display: none;
+}
+
 /*- ----------- End Menu Mobile sin JS ------------- */
 /* navigation */
 .navbar {
@@ -715,6 +744,18 @@ dt:hover > a.headerlink {
     }
 }
 
+@media only screen and (min-width: 1087px) {
+    .nav__toggle {
+        display: none;
+    }
+    .nav__menu {
+        flex-direction: row;
+    }
+    .nav__menu li {
+        display: block;
+    }
+}
+
 @media screen and (max-width: 600px) {
     .main-content {
         padding: 0rem;
diff --git a/cl-theme/templates/base.html b/cl-theme/templates/base.html
index 483d35f..da7ce1d 100644
--- a/cl-theme/templates/base.html
+++ b/cl-theme/templates/base.html
@@ -45,7 +45,7 @@
             <!-- stylesheets -->
             <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/bulma.css?v=0.7.4"/>
             <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/hover.css"/>
-            <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/style.css?v=2.0.1"/>
+            <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/style.css?v=2.0.2"/>
             <!-- favicon -->
             <link rel="icon" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/cl-favicon-16x16.png" sizes="16x16"/>
             <link rel="icon" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/cl-favicon-32x32.png" sizes="32x32"/>
@@ -68,12 +68,20 @@
                         <a class="navbar-item" href="{{ SITEURL }}/" rel="home">
                             <h3 class="title is-3 has-text-white">{{ SITENAME_SINGLE }}</h3>
                         </a>
-
                         <!-- this "navbar-burger" hamburger menu is only visible on mobile -->
-                        <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
-                            <span></span>
-                            <span></span>
-                            <span></span>
+                        <label class="nav__toggle" for="navbar-toggle-cbox">
+                            <!-- Menu -->
+                            <svg class="menu" viewBox="0 0 448 512" width="100" title="bars">
+                                <path
+                                    d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
+                                />
+                            </svg>
+                            <!-- Close -->
+                            <svg class="close" viewBox="0 0 384 512" width="100" title="times">
+                                <path
+                                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                                />
+                            </svg>
                         </label>
                         <!-- end of burger -->
                     </div>