added hamburger menu

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>

layouts/shortcodes/officehours.html

 <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>

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;