From 6fa5577a34aad0348e6bbcadab62681259d94d42 Mon Sep 17 00:00:00 2001 From: Marc Riera Irigoyen Date: Tue, 6 Mar 2018 23:49:21 +0100 Subject: [PATCH] Burger menu for small devices --- themes/crab/i18n/ca.toml | 64 +--------------------- themes/crab/i18n/en.toml | 64 +--------------------- themes/crab/i18n/es.toml | 11 ++++ themes/crab/layouts/partials/menu.html | 4 ++ themes/crab/static/css/crab.css | 74 +++++++++++++++++++++----- 5 files changed, 79 insertions(+), 138 deletions(-) create mode 100644 themes/crab/i18n/es.toml diff --git a/themes/crab/i18n/ca.toml b/themes/crab/i18n/ca.toml index 58bf0f5..a6f114f 100644 --- a/themes/crab/i18n/ca.toml +++ b/themes/crab/i18n/ca.toml @@ -1,71 +1,11 @@ -[home] -other = "Inici" - -[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" +[menu] +other = "Menú" [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" diff --git a/themes/crab/i18n/en.toml b/themes/crab/i18n/en.toml index 951f8bb..5b35ba9 100644 --- a/themes/crab/i18n/en.toml +++ b/themes/crab/i18n/en.toml @@ -1,71 +1,11 @@ -[home] -other = "Home" - -[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" +[menu] +other = "Menu" [readMore] other = "Read more" -[authorBy] -other = "By" - -[recentPosts] -other = "Recent posts" - -[aboutUs] -other = "About us" - [newer] other = "Newer" [older] other = "Older" - -[publishedOn] -other = "on" diff --git a/themes/crab/i18n/es.toml b/themes/crab/i18n/es.toml new file mode 100644 index 0000000..b8edb79 --- /dev/null +++ b/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" diff --git a/themes/crab/layouts/partials/menu.html b/themes/crab/layouts/partials/menu.html index 7036500..7c67cb2 100644 --- a/themes/crab/layouts/partials/menu.html +++ b/themes/crab/layouts/partials/menu.html @@ -1,4 +1,7 @@ diff --git a/themes/crab/static/css/crab.css b/themes/crab/static/css/crab.css index f9d34dc..89f8407 100644 --- a/themes/crab/static/css/crab.css +++ b/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.third { - display: none; +nav ul li a { + display: block; + font-size: 90%; } nav a:link, @@ -228,9 +227,8 @@ th, td { border: 1px solid grey; border-collapse: collapse; - margin-left:auto; - margin-right:auto; - text-align:center; + margin: auto; + 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 { - display: block; - font-size: 90%; + + .burger-button { + display: none; } - .language-selector a { - font-size: 90%; + nav ul.second, + nav ul.third { + display: none; } nav ul.first > li {