From 6d412062b6617978b187e5e54545e8c488ffa022 Mon Sep 17 00:00:00 2001
From: Paul Tolstoi <paul.tolstoi@gmail.com>
Date: Sat, 21 Apr 2018 17:35:11 +0200
Subject: [PATCH] added hamburger menu
---
layouts/_default/baseof.html | 37 ++++++++
layouts/shortcodes/officehours.html | 2 +-
static/css/main.css | 132 ++++++++++++++++++++++++++--
3 files changed, 165 insertions(+), 6 deletions(-)
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index e02dfa0..68fa269 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -41,6 +41,43 @@
</div>
</nav>
+
+ <nav class="hamburger">
+ <input type="checkbox" />
+
+ <div class="patty">
+ <i></i>
+ <i></i>
+ <i></i>
+ </div>
+
+ <ul>
+ {{ $currentPage := . }}
+ {{ range .Site.Menus.main }}
+ <li><a class="menu-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a></li>
+ {{ end }}
+ <li class="fatty"></li>
+ {{ if .Site.IsMultiLingual }}
+ {{ $lang := .Site.Language }}
+ {{ range .Site.Languages }}
+ <li>
+ {{ $translated := where $.Translations "Lang" .Lang }}
+ {{ if $translated }}
+ {{ $.Scratch.Set "url" (index $translated 0).Permalink }}
+ {{ else if eq .Lang $.Page.Lang }}
+ {{ $.Scratch.Set "url" $.Permalink }}
+ {{ else }}
+ {{ $.Scratch.Set "url" (delimit (slice "/" .) "") }}
+ {{ end }}
+ <a href="{{ $.Scratch.Get "url" }}" class="lang">
+ {{ .LanguageName }}
+ </a>
+ </li>
+ {{ end }}
+ {{ end }}
+ </ul>
+ </nav>
+
<article>
<header class="{{ .Params.Color | default "blue" }}">
<h1>{{.Title}}</h1>
diff --git a/layouts/shortcodes/officehours.html b/layouts/shortcodes/officehours.html
index f171e2e..c26489d 100644
--- a/layouts/shortcodes/officehours.html
+++ b/layouts/shortcodes/officehours.html
@@ -1,5 +1,5 @@
<ul>
{{ range getJSON "https://sprechstunden.stusta.de/appointments.json"}}
- <li>{{ dateFormat "Monday, Jan 2, 2006 15:04" (int .start) }}-{{ dateFormat "15:04" (int .end) }}</li>
+ <li>{{ dateFormat "Monday, Jan 2, 2006 15:04" (int .start) }} – {{ dateFormat "15:04" (int .end) }}</li>
{{ end }}
</ul>
diff --git a/static/css/main.css b/static/css/main.css
index 47c7f4a..7c458f9 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -44,6 +44,7 @@ body {
display: inline-block;
flex: 1 1 0;
height: 30px;
+ padding: 12px 0;
}
#top-bar .logo a {
@@ -56,6 +57,123 @@ body {
background-repeat: no-repeat;
}
+.hamburger {
+ display: none;
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 1000;
+
+ width: 400px;
+ overflow: hidden;
+
+ pointer-events: none;
+}
+
+.hamburger input {
+ z-index: 1200;
+ opacity: 0;
+ cursor: pointer;
+ margin: 0;
+ pointer-events: all;
+}
+
+.hamburger input,
+.hamburger .patty {
+ position: absolute;
+ right: 16px;
+ top: 8px;
+ width: 32px;
+ height: 32px;
+}
+
+.hamburger .patty {
+ z-index: 1100;
+ padding-top: 4px;
+ box-sizing: border-box;
+}
+
+.hamburger ul {
+ pointer-events: all;
+ background: white;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 10;
+
+ width: 300px;
+ padding: 64px 50px 32px 50px;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+
+ background: white;
+ box-shadow: 0 0 8px 0 rgba(0,0,0,0.12);
+ -webkit-font-smoothing: antialiased;
+ /* to stop flickering of text in safari */
+ box-sizing: border-box;
+
+ transform-origin: 0% 0%;
+ transform: translate(308px, 0);
+
+ transition: transform 0.5s ease;
+
+ list-style-type: none;
+}
+
+.hamburger .fatty {
+ flex: 1 1 0;
+}
+
+.patty i {
+ position: relative;
+ display: block;
+ width: 26px;
+ height: 4px;
+ background: #4B4B4B;
+ transition: 0.3s all ease;
+ transform: translate(0, 0) rotate(0) scale(1.0);
+ transform-origin: 4px 0;
+ border-radius: 4px;
+ margin: 4px 0 0 3px;
+}
+
+.hamburger input:checked ~ ul {
+ transform: translate(0, 0);
+}
+
+.patty i {
+ transform-origin: 0% 50%;
+}
+
+.hamburger input:checked ~ .patty i:nth-child(2) {
+ transform: translate(-3px, 0) rotate(0) scale(0.0);
+ opacity: 0;
+}
+
+.hamburger input:checked ~ .patty i:first-child {
+ transform: translate(0, -2px) rotate(45deg);
+}
+.hamburger input:checked ~ .patty i:last-child {
+ transform: translate(0, 0) rotate(-45deg);
+}
+
+.hamburger li {
+ padding: 10px 0;
+ font-size: 1.2rem;
+ text-align: center;
+ margin: 0;
+}
+
+.hamburger .shorthand {
+ text-transform: uppercase;
+ font-size: 14px;
+ margin-right: 5px;
+}
+
+
ul.menu {
list-style-type: none;
margin: 0;
@@ -192,6 +310,7 @@ header h1 {
margin-left: auto;
margin-right: auto;
padding: 0 20px;
+ max-width: 800px;
}
nav .container {
@@ -200,11 +319,6 @@ nav .container {
white-space: nowrap;
}
-article > *,
-header h1 {
- max-width: 800px;
-}
-
.container .lang-dropdown {
color: #1b54ac;
}
@@ -450,6 +564,14 @@ footer .lang-dropdown {
h3 {
font-size: 1.2rem;
}
+
+ .hamburger {
+ display: block;
+ }
+
+ .menu, #top-bar .lang-dropdown {
+ display: none;
+ }
header h1 {
padding: 50px 0 50px;
--
GitLab