From d34baa20f68ad7e6f241064faa3bf9446da79406 Mon Sep 17 00:00:00 2001 From: Georg Krause Date: Sun, 2 Jun 2019 23:20:56 +0200 Subject: [PATCH] Add responsive menu --- themes/Loopp/static/css/style.css | 76 +++++++++++++++++++++++++++++ themes/Loopp/templates/base.html | 80 ++++++++++++++++++++++++------- 2 files changed, 140 insertions(+), 16 deletions(-) diff --git a/themes/Loopp/static/css/style.css b/themes/Loopp/static/css/style.css index 82d5b2b..07f4a06 100644 --- a/themes/Loopp/static/css/style.css +++ b/themes/Loopp/static/css/style.css @@ -149,4 +149,80 @@ li.translations { .pure-u-md-3-5 img { max-width: 100%; +} + +.custom-toggle { + width: 34px; + height: 34px; + position: absolute; + top: 0; + right: 0; + display: none; +} + +.custom-toggle .bar { + background-color: #f90; + display: block; + width: 20px; + height: 2px; + border-radius: 100px; + position: absolute; + top: 27px; + right: 20px; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; +} + +.custom-toggle .bar:first-child { + -webkit-transform: translateY(-6px); + -moz-transform: translateY(-6px); + -ms-transform: translateY(-6px); + transform: translateY(-6px); +} + +.custom-toggle.x .bar { + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +.custom-toggle.x .bar:first-child { + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +@media (max-width: 47.999em) { + + .custom-toggle { + display: block; + } + + .pure-menu-item { + display: block !important; + width: 100%; + } + + .pure-menu-list { + width: 100%; + } +} + +.custom-wrapper { + margin-bottom: 1em; + -webkit-font-smoothing: antialiased; + height: 3.7em; + overflow: hidden; + -webkit-transition: height 0.5s; + -moz-transition: height 0.5s; + -ms-transition: height 0.5s; + transition: height 0.5s; +} + +.custom-wrapper.open { + height: auto; } \ No newline at end of file diff --git a/themes/Loopp/templates/base.html b/themes/Loopp/templates/base.html index 50a31bd..55fa407 100644 --- a/themes/Loopp/templates/base.html +++ b/themes/Loopp/templates/base.html @@ -33,23 +33,28 @@
-
- {{ SITENAME }} +
@@ -59,6 +64,49 @@ {{ FOOTER }}
+ + \ No newline at end of file