add CSS-only navbar

themes/hugo-sustain/layouts/partials/head.html

@@ -15,17 +15,12 @@
           {{- if .Params.heading -}} {{- .Params.heading -}} {{- else -}} {{- .Site.Title -}} {{ print " | " }} {{- .Title -}} {{- end -}}
       {{- end -}}
     </title>
-    <link rel="stylesheet" href="{{ .Site.BaseURL }}css/bootstrap-3.3.7.min.css" />
+    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/bootstrap-3.3.7.min.css" />
     <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/main.css" />
+    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/luxbar.css" />
     <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/fontawesome/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/fonts.css" />
     {{ range .Site.Params.custom_css }}
     <link rel="stylesheet" href="{{ $.Site.BaseURL}}{{ . }}?v={{ md5 hugo.BuildDate }}" />
     {{ end }}
-    {{ `<!--[if lt IE 9]>
-			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
-		<![endif]-->` | safeHTML }}
-
-    {{ template "_internal/google_analytics.html" . }}
   </head>

themes/hugo-sustain/layouts/partials/header.html

@@ -1,23 +1,18 @@
-<nav class="navbar navbar-default">
+<header id="luxbar" class="luxbar-default">
-  <div class="container">
+  <input type="checkbox" class="luxbar-checkbox" id="luxbar-checkbox"/>
-    <div class="navbar-header">
+  <div class="luxbar-menu luxbar-menu-right luxbar-menu-light">
-      <a class="navbar-brand" href="/"><i class="fa fa-home"></i></a>
+    <ul class="luxbar-navigation">
-      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
+      <li class="luxbar-header">
-        <span class="icon-bar"></span>
+        <a href="/" class="luxbar-brand"><i class="fa fa-home"></i></a>
-        <span class="icon-bar"></span>
+        <label class="luxbar-hamburger luxbar-hamburger-spin" id="luxbar-hamburger" for="luxbar-checkbox"> <span></span> </label>
-        <span class="icon-bar"></span>
+      </li>
-      </button>
-    </div>
-    <div class="navbar-collapse collapse" id="navbar">
-      <ul class="nav navbar-nav navbar-right">
       {{- $rel := .RelPermalink -}}
       {{- if .Site.Menus.main -}}
         {{- range sort .Site.Menus.main -}}
         <!-- if RelPermalink = this menu item, mark it -->
-        <li class="{{if eq $rel .URL}}active{{end}}"><a href="{{ .URL }}">{{ .Name | upper }}</a></li>
+        <li class="luxbar-item {{if eq $rel .URL}}active{{end}}"><a href="{{ .URL }}">{{ .Name | upper }}</a></li>
         {{- end -}}
       {{ end }}
     </ul>
   </div>
-  </div>
+</header>
-</nav>

themes/hugo-sustain/static/css/custom.css

@@ -53,10 +53,6 @@ div.avatar img {
   -webkit-box-shadow: none;
 }
 
-ul.nav li.active a {
-  font-weight: bold;
-}
-
 /* Site specific settings */
 section#about p {
   font-size: 18px;
@@ -87,10 +83,10 @@ div.contact p {
 .metadata-page {
   font-size: 18px;
   text-align: left;
-  margin: 3em 0 1em 0;
+  margin: 3em 0 2em 0;
 }
 .metadata-page .row {
-  padding-bottom: .5em;
+  padding-bottom: 0;
 }
 .blog-summary {
   padding-bottom: 1em;

themes/hugo-sustain/static/css/luxbar.css

@@ -0,0 +1,264 @@
+/*
+ * SPDX-FileCopyrightLicense: 2017 Balazs Saros
+ * SPDX-FileCopyrightLicense: 2019 Max Mehl
+ * SPDX-License-Identifier: MIT
+*/
+
+.luxbar-default {
+  width: 100%;
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.luxbar-static {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0
+}
+
+.luxbar-static .luxbar-checkbox:checked ~ .luxbar-menu {
+  position: absolute
+}
+
+.luxbar-fixed {
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
+}
+
+.luxbar-fixed-bottom {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
+}
+
+.luxbar-hamburger span,
+.luxbar-hamburger span::before,
+.luxbar-hamburger span::after {
+  display: block;
+  height: 2px;
+  width: 26px;
+  transition: 0.6s ease
+}
+
+.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span {
+  background-color: transparent
+}
+
+.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::before,
+.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::after {
+  margin-top: 0
+}
+
+.luxbar-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 58px
+}
+
+.luxbar-menu-left .luxbar-navigation,
+.luxbar-menu-left .luxbar-header {
+  justify-content: flex-start
+}
+
+.luxbar-menu-right .luxbar-hamburger {
+  margin-left: auto
+}
+
+.luxbar-brand {
+  font-size: 1.5em;
+  padding: 18px 24px 18px 24px
+}
+
+.luxbar-menu {
+  min-height: 58px;
+  transition: 0.6s ease;
+  width: auto;
+  max-width: 800px;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.luxbar-navigation {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  padding-left: 0;
+  margin: 0
+}
+
+.luxbar-menu a,
+.luxbar-item a {
+  text-decoration: none;
+  color: #6b6b6b;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.luxbar-item {
+  height: 58px
+}
+
+.luxbar-item a {
+  padding: 18px 20px 18px 20px;
+  display: block
+}
+
+.luxbar-hamburger {
+  padding: 18px 24px 18px 24px;
+  position: relative;
+  cursor: pointer
+}
+
+.luxbar-hamburger span::before,
+.luxbar-hamburger span::after {
+  content: '';
+  position: absolute
+}
+
+.luxbar-hamburger span::before {
+  margin-top: -8px
+}
+
+.luxbar-hamburger span::after {
+  margin-top: 8px
+}
+
+.luxbar-checkbox {
+  display: none
+}
+
+.luxbar-checkbox:not(:checked) ~ .luxbar-menu {
+  overflow: hidden;
+  height: 58px
+}
+
+.luxbar-checkbox:checked ~ .luxbar-menu {
+  transition: height 0.6s ease;
+  height: 50vh;
+  overflow: auto
+}
+
+.dropdown {
+  position: relative;
+  height: auto;
+  min-height: 58px
+}
+
+.dropdown:hover>ul {
+  position: relative;
+  display: block;
+  min-width: 100%
+}
+
+.dropdown>a::after {
+  position: absolute;
+  content: '';
+  right: 10px;
+  top: 25px;
+  border-width: 5px 5px 0;
+  border-color: transparent;
+  border-style: solid
+}
+
+.dropdown>ul {
+  display: block;
+  overflow-x: hidden;
+  list-style: none;
+  padding: 0
+}
+
+.dropdown>ul .luxbar-item {
+  min-width: 100%;
+  height: 29px;
+  padding: 5px 10px 5px 40px
+}
+
+.dropdown>ul .luxbar-item a {
+  min-height: 29px;
+  line-height: 29px;
+  padding: 0
+}
+
+@media screen and (min-width: 768px) {
+  .luxbar-navigation {
+      flex-flow: row;
+      justify-content: flex-end
+  }
+  .luxbar-hamburger {
+      display: none
+  }
+  .luxbar-checkbox:not(:checked) ~ .luxbar-menu {
+      overflow: visible
+  }
+  .luxbar-checkbox:checked ~ .luxbar-menu {
+      height: 58px
+  }
+  .luxbar-menu .luxbar-item {
+      border-top: 0
+  }
+  .luxbar-menu-right .luxbar-header {
+      margin-right: auto
+  }
+  .dropdown {
+      height: 58px
+  }
+  .dropdown:hover>ul {
+      position: absolute;
+      left: 0;
+      top: 58px;
+      padding: 0
+  }
+  .dropdown>ul {
+      display: none
+  }
+  .dropdown>ul .luxbar-item {
+      padding: 5px 10px
+  }
+  .dropdown>ul .luxbar-item a {
+      white-space: nowrap
+  }
+}
+
+.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-doublespin span::before {
+  transform: rotate(225deg)
+}
+
+.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-doublespin span::after {
+  transform: rotate(-225deg)
+}
+
+.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-spin span::before {
+  transform: rotate(45deg)
+}
+
+.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-spin span::after {
+  transform: rotate(-45deg)
+}
+
+.luxbar-menu-light,
+.luxbar-menu-light .dropdown ul {
+  background-color: transparent;
+  color: #212121
+}
+
+.luxbar-menu-light .active {
+  font-weight: 700;
+}
+
+.luxbar-menu-light .luxbar-hamburger span,
+.luxbar-menu-light .luxbar-hamburger span::before,
+.luxbar-menu-light .luxbar-hamburger span::after {
+  background-color: #212121
+}