Burger menu for small devices

themes/crab/i18n/ca.toml

@@ -1,71 +1,11 @@
-[home]
+[menu]
-other = "Inici"
+other = "Menú"
-
-[templateBy]
-other = "Plantilla creada per"
-
-[portedBy]
-other = "Adaptada a Hugo per"
-
-[contactGoTo]
-other = "Anar a la pàgina de contacte"
-
-[contactAddrTitle]
-other = "Adreça"
-
-[contactTitle]
-other = "Contacte"
-
-[contactForm]
-other = "Formulari de contacte"
-
-[contactName]
-other = "El teu nom"
-
-[contactMail]
-other = "El teu email"
-
-[contactMessage]
-other = "El teu missatge"
-
-[contactSend]
-other = "Enviar missatge"
-
-[navHome]
-other = "anar a l'inici"
-
-[navToggle]
-other = "Canviar Navigació"
-
-[categoriesTitle]
-other = "Categories"
-
-[searchTitle]
-other = "Cercar"
-
-[tagsTitle]
-other = "Paraules clau"
-
-[continueReading]
-other = "Continuar llegint"
 
 [readMore]
 other = "Llegeix més"
 
-[authorBy]
-other = "Per"
-
-[recentPosts]
-other = "Entrades recents"
-
-[aboutUs]
-other = "Sobre nosaltres"
-
 [newer]
 other = "Més recent"
 
 [older]
 other = "Més antic"
-
-[publishedOn]
-other = "el"

themes/crab/i18n/en.toml

@@ -1,71 +1,11 @@
-[home]
+[menu]
-other = "Home"
+other = "Menu"
-
-[templateBy]
-other = "Template by"
-
-[portedBy]
-other = "Ported to Hugo by"
-
-[contactGoTo]
-other = "Go to contact page"
-
-[contactAddrTitle]
-other = "Address"
-
-[contactTitle]
-other = "Contact"
-
-[contactForm]
-other = "Contact form"
-
-[contactName]
-other = "Your Name"
-
-[contactMail]
-other = "Your Email"
-
-[contactMessage]
-other = "Your Message"
-
-[contactSend]
-other = "Send Message"
-
-[navHome]
-other = "go to homepage"
-
-[navToggle]
-other = "Toggle Navigation"
-
-[categoriesTitle]
-other = "Categories"
-
-[searchTitle]
-other = "Search"
-
-[tagsTitle]
-other = "Tags"
-
-[continueReading]
-other = "Continue reading"
 
 [readMore]
 other = "Read more"
 
-[authorBy]
-other = "By"
-
-[recentPosts]
-other = "Recent posts"
-
-[aboutUs]
-other = "About us"
-
 [newer]
 other = "Newer"
 
 [older]
 other = "Older"
-
-[publishedOn]
-other = "on"

themes/crab/i18n/es.toml

@@ -0,0 +1,11 @@
+[menu]
+other = "Menú"
+
+[readMore]
+other = "Leer más"
+
+[newer]
+other = "Más reciente"
+
+[older]
+other = "Más antiguo"

themes/crab/layouts/partials/menu.html

@@ -1,4 +1,7 @@
       <nav>
+      <input type="checkbox" id="burger-toggle" class="burger-toggle" hidden>
+      <label for="burger-toggle" class="burger-button">&#9776; {{ i18n "menu" }}</label>
+      <div id="menu-entries">
 	<ul class="first">
 	 {{ $currentPage := . }}
          {{ range .Site.Menus.main }}
@@ -25,4 +28,5 @@
 	    </li>
 	  {{ end }}
 	</ul>
+      </div>
       </nav>

themes/crab/static/css/crab.css

@@ -85,13 +85,12 @@ nav ul {
 
 nav ul.first > li {
   display: block;
-  margin: .5em 0;
   text-align: left;
 }
 
-nav ul.second,
+nav ul li a {
-nav ul.third {
+  display: block;
-  display: none;
+  font-size: 90%;
 }
 
 nav a:link,
@@ -228,9 +227,8 @@ th,
 td {
   border: 1px solid grey;
   border-collapse: collapse;
-  margin-left:auto;
+  margin: auto;
-  margin-right:auto;
+  text-align: center;
-  text-align:center;
 }
 
 th {
@@ -238,8 +236,10 @@ th {
 }
 
 table img {
-  vertical-align:middle;
+  display: inline;
+  vertical-align: middle;
   padding: 2px 2px 2px 2px;
+  box-sizing: border-box;
 }
 
 #page-title-container {
@@ -296,6 +296,7 @@ table img {
   list-style-type: none;
   float: right;
   margin-right: 30px;
+  font-size: 90%;
 }
 
 .language-selector li {
@@ -362,6 +363,51 @@ form textarea {
 
 nav {
   text-align: center;
+  margin-bottom: 20px;
+}
+
+.burger-button {
+  display: block;
+  background: #3E3E3E;
+  font-size: 100%;
+  padding: 5px 20px 5px 20px;
+  margin-top: 20px;
+  cursor: pointer;
+}
+
+#menu-entries {
+  display: none;
+}
+
+.burger-toggle:checked ~ #menu-entries {
+  display: block;
+}
+
+.burger-toggle:checked ~ .burger-button {
+  color: #DDDDDD;
+  background: #208DCC;
+}
+
+nav ul.first > li a,
+nav ul.second > li a {
+  display: block;
+  padding: 5px 20px 5px 20px;
+  background: #3E3E3E;
+}
+
+nav ul.first > li a:hover,
+nav ul.second > li a:hover,
+.burger-button:hover {
+  color: #DDDDDD;
+  background: #208DCC;
+}
+
+nav ul.first {
+  margin-top: 0px;
+}
+
+nav ul.second > li a {
+  padding-left: 40px;
 }
 
 }
@@ -370,14 +416,14 @@ nav {
   #container {
     max-width: 1200px;
   }
-
+  
-  nav ul li a {
+  .burger-button {
-    display: block;
+  display: none;
-    font-size: 90%;
   }
   
-  .language-selector a {
+  nav ul.second,
-    font-size: 90%;
+  nav ul.third {
+    display: none;
   }
 
   nav ul.first > li {