From f597d91e5556e5f13860a2b65042cee782553b89 Mon Sep 17 00:00:00 2001 From: rdhox <36813150+rdhox@users.noreply.github.com> Date: Wed, 25 Jul 2018 01:26:48 +0200 Subject: [PATCH] Mobile menu (#63) * mobile menu functional * mobile menu beta * edits mobile-menu: home link out, rtl ok, menu pop over * mobile menu - bugs correction * add horizontal separator * corrections done + add configuration of centered or rtl/ltr mobile menu * edit config of example * separator padding full --- exampleSite/config.toml | 78 ++++++++++++++++++++++++++++++++ layouts/partials/header.html | 58 ++++++++++++++---------- static/css/style.min.css | 2 +- static/less/style.less | 88 +++++++++++++++++++++++++++++++----- 4 files changed, 190 insertions(+), 36 deletions(-) diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 7c244ef..ae9bd2a 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -29,9 +29,14 @@ disqusShortname = "yourdiscussshortname" # Custom CSS custom_css = [] + # Alignment of Mobile Menu items + itemscentered = true + # RTL support rtl = false + langseparator = "|" + [[params.social]] name = "Github" weight = 1 @@ -53,3 +58,76 @@ disqusShortname = "yourdiscussshortname" name = "About" weight = 2 url = "/about/" +[[menu.main]] + name = "Projects" + weight = 3 + url = "/projects/" +[[menu.main]] + name = "Contact me" + weight = 5 + url = "/contact/" + +[languages] + [languages.en] + languagename = "English" # The language name to be displayed in the selector. + title = "John Doe" + + # You can configure the theme parameter for each language. + [languages.en.params] + author = "John Doe" + info = "Full Stack DevOps and Magician" + description = "John Doe's personal website" + keywords = "blog,developer,personal" + + [languages.en.menu] # It is possible to change the menu too. + + [[languages.en.menu.main]] + name = "About" + weight = 1.0 + url = "/about/" + + [[languages.en.menu.main]] + name = "Blog" + weight = 2.0 + url = "/posts/" + + [[languages.en.menu.main]] + name = "Projects" + weight = 3 + url = "/projects/" + [[languages.en.menu.main]] + name = "Contact me" + weight = 5 + url = "/contact/" + + + [languages.pl] + languagename = "Polski" + title = "John Doe po polsku" + + [languages.pl.params] + author = "John Doe" + description = "Strona domowa John'a Doe" + keywords = "blog,developer,strona domowa" + info = "Full Stack DevOps i Magik" + + [languages.pl.menu] + + [[languages.pl.menu.main]] + name = "O mnie" + weight = 1.0 + url = "/pl/about/" + + [[languages.pl.menu.main]] + name = "Blog" + weight = 2.0 + url = "/pl/posts/" + + [[languages.pl.menu.main]] + name = "projektowanie" + weight = 3 + url = "/projektowanie/" + [[languages.pl.menu.main]] + name = "kontakt" + weight = 5 + url = "/kontakt/" diff --git a/layouts/partials/header.html b/layouts/partials/header.html index e6bef86..c113191 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -3,32 +3,42 @@ {{ .Site.Title }} - + diff --git a/static/css/style.min.css b/static/css/style.min.css index d8bc28d..9d460be 100644 --- a/static/css/style.min.css +++ b/static/css/style.min.css @@ -1 +1 @@ -*,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{display:flex;color:#323232;background-color:#fefefe;font-family:'Fira Mono',monospace;font-size:1.6em;font-weight:400;letter-spacing:.0625em;line-height:1.8em}@media only screen and (min-device-width:320px) and (max-device-width:480px){body{font-size:1.4em;line-height:1.6em}}a{font-weight:700;color:#000;text-decoration:none}a:focus,a:hover{text-decoration:underline}p{margin:1.6rem 0 1.6rem 0}p a{font-weight:400;color:#000;text-decoration:underline;text-underline-position:under}p a:focus,p a:hover{color:#36c}h1,h2,h3,h4,h5,h6{color:#000;text-transform:uppercase;letter-spacing:.0625em;margin:3.2rem 0 1.6rem 0}h1{font-size:3.2rem;line-height:3.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h1{font-size:2.8rem;line-height:2.8rem}}h2{font-size:2.8rem;line-height:2.8rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h2{font-size:2.4rem;line-height:2.4rem}}h3{font-size:2.4rem;line-height:2.4rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h3{font-size:2rem;line-height:2rem}}h4{font-size:2.2rem;line-height:2.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h4{font-size:1.8rem;line-height:1.8rem}}h5{font-size:2rem;line-height:2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h5{font-size:1.6rem;line-height:1.6rem}}h6{font-size:1.4rem;line-height:1.4rem}pre{margin:1.6rem 0 1rem 0;padding:1.6rem;overflow-x:auto}code{display:inline-block;background-color:#000;color:#fefefe;padding:.4rem .8rem .4rem .8rem}blockquote{border-left:2px solid #dcdcdc;padding-left:1.6rem;font-style:italic}th,td{padding:1.6rem}table{border-collapse:collapse}table td,table th{border:2px solid #000}table tr:first-child th{border-top:0}table tr:last-child td{border-bottom:0}table tr td:first-child,table tr th:first-child{border-left:0}table tr td:last-child,table tr th:last-child{border-right:0}img{max-width:100%}.wrapper{display:flex;flex-direction:column;min-height:100vh;width:100%}.container{margin:0 auto;max-width:120rem;width:100%;padding-left:2rem;padding-right:2rem}.navigation{height:6rem;width:100%}.navigation a{display:inline;font-size:1.6rem;text-transform:uppercase;line-height:6rem;letter-spacing:.1rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.navigation a{font-size:1.4rem}}.navigation ul{list-style:none;margin-bottom:0;margin-top:0}.navigation ul li{float:left;margin:0;position:relative}.navigation ul li a{margin-left:1rem;margin-right:1rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){a.navigation-title{font-size:0}a.navigation-title::after{content:'~';font-size:2.4rem;text-align:center;margin-left:-1.4rem}}.content{flex:1;margin-top:1.6rem;margin-bottom:3.2rem}.content article header{margin-top:3.2rem;margin-bottom:3.2rem}.content article header h1,.content article header h2{margin:0}.content article header h2{margin-top:1rem;font-size:1.8rem;color:#323232}@media only screen and (min-device-width:320px) and (max-device-width:480px){.content article header h2{font-size:1.6rem}}.avatar img{width:20rem;height:auto;border-radius:50%}@media only screen and (max-device-width:768px){.avatar img{width:10rem}}.list ul{margin:3.2rem 0 3.2rem 0;list-style:none;padding:0}.list ul li{font-size:1.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.list ul li{font-size:1.4rem;margin:1.6rem 0 1.6rem 0}}.list ul li span{display:inline-block;text-align:right;width:20rem;margin-right:3rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.list ul li span{display:block;text-align:left}}.list ul li a{text-transform:uppercase}.pagination{margin-top:6rem;text-align:center}.pagination li{display:inline;text-align:center}.pagination li span{margin:0;text-align:center;width:3.2rem}.pagination li a span{margin:0;text-align:center;width:3.2rem}.centered{display:flex;height:100%;align-items:center;justify-content:center}.centered .about{text-align:center}.centered .about h1{margin-top:2rem;margin-bottom:.5rem}.centered .about h2{margin-top:1rem;margin-bottom:.5rem;font-size:2.4rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .about h2{font-size:2rem}}.centered .about ul{list-style:none;margin:3rem 0 1rem 0;padding:0}.centered .about ul li{display:inline-block;position:relative}.centered .about ul li a{text-transform:uppercase;margin-left:1rem;margin-right:1rem;font-size:1.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .about ul li a{font-size:1.4rem}}.centered .error{text-align:center}.centered .error h1{margin-top:2rem;margin-bottom:.5rem;font-size:4.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .error h1{font-size:3.2rem}}.centered .error h2{margin-top:2rem;margin-bottom:3.2rem;font-size:3.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .error h2{font-size:2.8rem}}.footer{width:100%;text-align:center;line-height:2rem;margin-bottom:1rem}.float-right{float:right}.float-left{float:left} +*,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{display:flex;color:#323232;background-color:#fefefe;font-family:'Fira Mono',monospace;font-size:1.6em;font-weight:400;letter-spacing:.0625em;line-height:1.8em}@media only screen and (min-device-width:320px) and (max-device-width:480px){body{font-size:1.4em;line-height:1.6em}}a{font-weight:700;color:#000;text-decoration:none}a:focus,a:hover{text-decoration:underline}p{margin:1.6rem 0 1.6rem 0}p a{font-weight:400;color:#000;text-decoration:underline;text-underline-position:under}p a:focus,p a:hover{color:#36c}h1,h2,h3,h4,h5,h6{color:#000;text-transform:uppercase;letter-spacing:.0625em;margin:3.2rem 0 1.6rem 0}h1{font-size:3.2rem;line-height:3.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h1{font-size:2.8rem;line-height:2.8rem}}h2{font-size:2.8rem;line-height:2.8rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h2{font-size:2.4rem;line-height:2.4rem}}h3{font-size:2.4rem;line-height:2.4rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h3{font-size:2rem;line-height:2rem}}h4{font-size:2.2rem;line-height:2.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h4{font-size:1.8rem;line-height:1.8rem}}h5{font-size:2rem;line-height:2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h5{font-size:1.6rem;line-height:1.6rem}}h6{font-size:1.4rem;line-height:1.4rem}pre{margin:1.6rem 0 1rem 0;padding:1.6rem;overflow-x:auto}code{display:inline-block;background-color:#000;color:#fefefe;padding:.4rem .8rem .4rem .8rem}blockquote{border-left:2px solid #dcdcdc;padding-left:1.6rem;font-style:italic}th,td{padding:1.6rem}table{border-collapse:collapse}table td,table th{border:2px solid #000}table tr:first-child th{border-top:0}table tr:last-child td{border-bottom:0}table tr td:first-child,table tr th:first-child{border-left:0}table tr td:last-child,table tr th:last-child{border-right:0}img{max-width:100%}.wrapper{display:flex;flex-direction:column;min-height:100vh;width:100%}.container{margin:0 auto;max-width:120rem;width:100%;padding-left:2rem;padding-right:2rem}.navigation{height:6rem;width:100%}.navigation a{display:inline;font-size:1.6rem;text-transform:uppercase;line-height:6rem;letter-spacing:.1rem}@media only screen and (min-device-width:320px) and (max-device-width:768px){.navigation a{font-size:1.6rem}}.navigation ul{list-style:none;margin-bottom:0;margin-top:0}.navigation ul li{float:left;margin:0;position:relative}.navigation ul li a{margin-left:1rem;margin-right:1rem}@media only screen and (min-device-width:320px) and (max-device-width:768px){.navigation ul li{float:none !important}}@media only screen and (min-device-width:320px) and (max-device-width:768px){.navigation ul{visibility:hidden;opacity:0;max-height:0;z-index:5;top:5rem;right:0;width:100%;position:absolute;background-color:rgba(254,254,254,0.98);padding:0;border-bottom:solid 2px #e2dfe1;transition:opacity .25s,max-height .15s linear}}#menu-control{display:none}.btn-mobile{display:none}@media only screen and (min-device-width:320px) and (max-device-width:768px){.btn-mobile{display:block;font-size:2rem;color:black;cursor:pointer;margin-top:1.5rem}#menu-control:checked+label .btn-mobile{color:#e2dfe1}#menu-control:checked+label ul{visibility:visible;opacity:1;max-height:100rem}.navigation-item{position:relative}.mobile-menu-lang-separator-centered{padding-left:7rem;padding-right:7rem}.mobile-menu-lang-separator-full{padding-left:1.5rem;padding-right:1.5rem}.multilingual-separator{display:none}.align-left{text-align:left;padding-left:1rem}.align-right{text-align:right;padding-right:1rem}.align-center{text-align:center}}.content{flex:1;margin-top:1.6rem;margin-bottom:3.2rem}.content article header{margin-top:3.2rem;margin-bottom:3.2rem}.content article header h1,.content article header h2{margin:0}.content article header h2{margin-top:1rem;font-size:1.8rem;color:#323232}@media only screen and (min-device-width:320px) and (max-device-width:480px){.content article header h2{font-size:1.6rem}}.avatar img{width:20rem;height:auto;border-radius:50%}@media only screen and (max-device-width:768px){.avatar img{width:10rem}}.list ul{margin:3.2rem 0 3.2rem 0;list-style:none;padding:0}.list ul li{font-size:1.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.list ul li{font-size:1.4rem;margin:1.6rem 0 1.6rem 0}}.list ul li span{display:inline-block;text-align:right;width:20rem;margin-right:3rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.list ul li span{display:block;text-align:left}}.list ul li a{text-transform:uppercase}.pagination{margin-top:6rem;text-align:center}.pagination li{display:inline;text-align:center}.pagination li span{margin:0;text-align:center;width:3.2rem}.pagination li a span{margin:0;text-align:center;width:3.2rem}.centered{display:flex;height:100%;align-items:center;justify-content:center}.centered .about{text-align:center}.centered .about h1{margin-top:2rem;margin-bottom:.5rem}.centered .about h2{margin-top:1rem;margin-bottom:.5rem;font-size:2.4rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .about h2{font-size:2rem}}.centered .about ul{list-style:none;margin:3rem 0 1rem 0;padding:0}.centered .about ul li{display:inline-block;position:relative}.centered .about ul li a{text-transform:uppercase;margin-left:1rem;margin-right:1rem;font-size:1.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .about ul li a{font-size:1.4rem}}.centered .error{text-align:center}.centered .error h1{margin-top:2rem;margin-bottom:.5rem;font-size:4.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .error h1{font-size:3.2rem}}.centered .error h2{margin-top:2rem;margin-bottom:3.2rem;font-size:3.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .error h2{font-size:2.8rem}}.footer{width:100%;text-align:center;line-height:2rem;margin-bottom:1rem}.float-right{float:right}.float-left{float:left} diff --git a/static/less/style.less b/static/less/style.less index 96b3c2d..1b40eff 100644 --- a/static/less/style.less +++ b/static/less/style.less @@ -178,8 +178,8 @@ img { text-transform: uppercase; line-height: 6.0rem; letter-spacing: 0.1rem; - @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { - font-size: 1.4rem; + @media only screen and (min-device-width : 320px) and (max-device-width : 768px) { + font-size: 1.6rem; } } ul { @@ -194,21 +194,86 @@ img { margin-left: 1.0rem; margin-right: 1.0rem; } + @media only screen and (min-device-width : 320px) and (max-device-width : 768px) { + float: none !important; + } + } + @media only screen and (min-device-width : 320px) and (max-device-width : 768px) { + visibility: hidden; + opacity: 0; + max-height: 0; + z-index: 5; + top: 5rem; + right: 0; + width: 100%; + position: absolute; + background-color: rgba(254,254,254 ,0.98); + padding: 0; + border-bottom: solid 2px #E2DFE1; + transition: opacity 0.25s, max-height 0.15s linear; } } } -@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { - a.navigation-title { - font-size: 0rem; +#menu-control { + display: none; +} - &::after { - content: '~'; - font-size: 2.4rem; - text-align: center; - margin-left: -1.4rem; - } +.btn-mobile { + display: none; +} + +@media only screen and (min-device-width : 320px) and (max-device-width : 768px) { + .btn-mobile { + display: block; + font-size: 2.0rem; + color: black; + cursor: pointer; + margin-top: 1.5rem; } + + #menu-control:checked + label .btn-mobile { + color: #E2DFE1; + } + + #menu-control:checked + label ul { + visibility: visible; + opacity: 1; + max-height: 100rem; + } + + .navigation-item { + position: relative; + } + + .mobile-menu-lang-separator-centered { + padding-left: 7rem; + padding-right: 7rem; + } + + .mobile-menu-lang-separator-full { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .multilingual-separator { + display: none; + } + + .align-left { + text-align: left; + padding-left: 1rem; + } + + .align-right { + text-align: right; + padding-right: 1rem; + } + + .align-center { + text-align: center; + } + } .content { @@ -366,3 +431,4 @@ img { .float-left { float: left; } +