From b0de9413b1d1b3df65d320c9036a5899af6a701a Mon Sep 17 00:00:00 2001 From: Drew Short Date: Sun, 10 Feb 2019 18:12:51 -0600 Subject: [PATCH] Making the menu bar responsive --- run_hugo_server.sh | 6 +- themes/pure/layouts/partials/footer.html | 3 +- themes/pure/layouts/partials/header.html | 64 ++++--- themes/pure/static/assets/css/style.css | 204 +++++++++++++++++++++-- 4 files changed, 229 insertions(+), 48 deletions(-) diff --git a/run_hugo_server.sh b/run_hugo_server.sh index f458b7d..ca1bde6 100755 --- a/run_hugo_server.sh +++ b/run_hugo_server.sh @@ -1,10 +1,12 @@ #! /usr/bin/sh +HUGO_VERSION=${HUGO_VERSION:=0.54.0} + docker run -it \ -e HUGO_WATCH=true \ -e HUGO_THEME=pure \ -e HUGO_BASEURL=http://localhost:1313/ \ -e HUGO_DESTINATION=/src/public \ - -v ${PWD}:/src \ + -v ${PWD}:/src:Z \ -p 1313:1313 \ - sothr.com/hugo:0.54.0 $@ + sothr.com/hugo:$HUGO_VERSION $@ diff --git a/themes/pure/layouts/partials/footer.html b/themes/pure/layouts/partials/footer.html index 92ca081..aee5e45 100644 --- a/themes/pure/layouts/partials/footer.html +++ b/themes/pure/layouts/partials/footer.html @@ -1,5 +1,6 @@ -
+ \ No newline at end of file diff --git a/themes/pure/layouts/partials/header.html b/themes/pure/layouts/partials/header.html index 32d7155..cd000fb 100644 --- a/themes/pure/layouts/partials/header.html +++ b/themes/pure/layouts/partials/header.html @@ -1,28 +1,38 @@ - +
+
+ {{ .Site.Title }} + +
+ +
+ diff --git a/themes/pure/static/assets/css/style.css b/themes/pure/static/assets/css/style.css index d10ce1c..d305719 100644 --- a/themes/pure/static/assets/css/style.css +++ b/themes/pure/static/assets/css/style.css @@ -1,4 +1,4 @@ -nav { +/*nav { overflow: hidden; padding: 0px 0px; background: #E7732F; @@ -23,37 +23,40 @@ nav ul li a img { nav ul li a img:hover { background: #ffffff; } +*/ -#container { +/*#container { min-height: 100%; position: relative; } - -#body { +*/ +/*#body { padding: 10px; - padding-bottom: 2em; /* Height of the footer */ + padding-bottom: 2em; } - -#footer { +*/ +/*#footer { position: absolute; bottom: 0; width: 100%; - height: 2em; /* Height of the footer */ -} - -.float-left { - float: left; + height: 2em; } +*/ +/*.text-align-right { + text-align: right; +}*/ -.float-right { - float: right; +.pure-menu-item a img { + padding: .1em .2em; + max-height: 2.4em; + min-width: 2.4em; } -.text-align-right { - text-align: right; -} +/*body { + padding: 0em; +}*/ -.pure-menu-link { +/*.pure-menu-link { color: #000000; } @@ -61,4 +64,169 @@ nav ul li a img:hover { .pure-menu-link:focus, .pure-menu-link:hover { background-color:#ffffff +}*/ + +.menu-wrapper { + background-color: #E7732F; + margin-bottom: 2.5em; + white-space: nowrap; + position: relative; +} + +.menu { + display: inline-block; + width: auto; + vertical-align: middle; + -webkit-font-smoothing: antialiased; +} + +.menu .pure-menu-link, +.menu .pure-menu-heading { + color: black; +} + +.menu .pure-menu-link:hover, +.menu .pure-menu-heading:hover { + background-color: transparent; +} + +.menu-top { + position: relative; + padding-top: .5em; + padding-bottom: .5em; +} + +.menu-brand { + display: block; + text-align: center; + position: relative; + color: black; +} + +.menu-toggle { + width: 44px; + height: 44px; + display: block; + position: absolute; + top: 3px; + right: 0; + display: none; +} + +.menu-toggle .bar { + background-color: white; + display: block; + width: 20px; + height: 2px; + border-radius: 100px; + position: absolute; + top: 22px; + right: 12px; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; +} + +.menu-toggle .bar:first-child { + -webkit-transform: translateY(-6px); + -moz-transform: translateY(-6px); + -ms-transform: translateY(-6px); + transform: translateY(-6px); +} + +.menu-toggle.x .bar { + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +.menu-toggle.x .bar:first-child { + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.menu-screen { + background-color: #E7732F; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; + height: 3em; + width: 70em; + position: absolute; + top: 0; + z-index: -1; +} + +.menu-tucked .menu-screen { + -webkit-transform: translateY(-44px); + -moz-transform: translateY(-44px); + -ms-transform: translateY(-44px); + transform: translateY(-44px); +} + +@media (min-width: 63em) { + .menu-screen { + margin-top: 2.95em; + z-index: 1; + } +} + +@media (max-width: 62em) { + .menu { + display: block; + } + + .menu-toggle { + display: block; + display: none\9; + } + + .menu-bottom { + position: absolute; + width: 100%; + border-top: 1px solid #E7732F; + background-color: #808080\9; + z-index: 100; + } + + .menu-bottom .pure-menu-link { + opacity: 1; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; + } + + .menu-bottom.menu-tucked .pure-menu-link { + -webkit-transform: translateX(-140px); + -moz-transform: translateX(-140px); + -ms-transform: translateX(-140px); + transform: translateX(-140px); + opacity: 0; + opacity: 1\9; + } + + .pure-menu-horizontal.menu-tucked { + z-index: -1; + top: 45px; + position: absolute; + overflow: hidden; + } + + .menu-untucked { + height: 3.1em; + } + + .pure-menu-horizontal.pure-menu-scrollable.menu-untucked { + overflow-x: auto; + } } \ No newline at end of file