diff options
| author | Joseph Hutchinson <hutch7995@gmail.com> | 2018-05-01 06:36:15 +0300 |
|---|---|---|
| committer | Joseph Hutchinson <hutch7995@gmail.com> | 2018-05-01 06:36:15 +0300 |
| commit | a41ab67dc1bfced605b68e07f3dde4d4b17a8da6 (patch) | |
| tree | bc5f7e85ac31fd615a9c241650e859a755d9b0c8 | |
| parent | a37f605d31c32ef227a6699656d4d8acf0c9d37e (diff) | |
menu overlay fade in
| -rw-r--r-- | layouts/_default/single.html | 2 | ||||
| -rw-r--r-- | layouts/partials/nav-bar.html | 5 | ||||
| -rw-r--r-- | static/css/style.css | 68 | ||||
| -rw-r--r-- | static/js/core.js | 12 |
4 files changed, 63 insertions, 24 deletions
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 8eff257..6bb8dff 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -3,7 +3,7 @@ {{ partial "head.html" . }} <body class="single-body"> {{ partial "nav-bar.html" . }} - <main class="content side-padding"> + <main class="content side-text-padding"> <article class="post"> <header class="post-header"> <h1 class="post-title">{{ .Title }}</h1> diff --git a/layouts/partials/nav-bar.html b/layouts/partials/nav-bar.html index b95004a..970897c 100644 --- a/layouts/partials/nav-bar.html +++ b/layouts/partials/nav-bar.html @@ -1,12 +1,13 @@ <nav class="nav-bar side-padding"> <h1 class="nav-header"><a href="/" class="nav-text">mdd</a></h1> <div class="hamburger-menu"> - <input type="checkbox" /> + <input type="checkbox" onclick="hamburgerMenuPressed()"/> <span></span> <span></span> <ul class="hamburger-menu-view"> + <li><a href="/">Home</a></li> {{ range $key, $value := .Site.Taxonomies.categories }} - <li><a href="{{ $.Site.BaseURL }}categories/{{ $key | urlize }}">{{ $key | humanize }}</a></li> + <li><a href="/categories/{{ $key | urlize }}">{{ $key | humanize }}</a></li> {{ end }} </ul> </div> diff --git a/static/css/style.css b/static/css/style.css index a1ff2ca..02e652c 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -9,6 +9,8 @@ body { display: flex; flex-direction: column; align-items: center; + width: 100%; + box-sizing: border-box; } p { margin: 1em 0; @@ -31,11 +33,12 @@ strong { } .nav-text { text-decoration: none; + z-index: 105; } .hamburger-menu { display: block; position: relative; - z-index: 1; + z-index: 105; -webkit-user-select: none; user-select: none; } @@ -47,7 +50,7 @@ strong { top: -9px; cursor: pointer; opacity: 0; /* hide this */ - z-index: 2; /* and place it over the hamburger */ + z-index: 500; /* and place it over the hamburger */ -webkit-touch-callout: none; } .hamburger-menu span { @@ -57,7 +60,7 @@ strong { position: relative; background: #3A3B3C; border-radius: 3px; - z-index: 1; + z-index: 105; transform-origin: center; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), @@ -68,34 +71,48 @@ strong { } .hamburger-menu input:checked ~ span { opacity: 1; + background: white; transform: rotate(45deg) translate(3.2px , 3.2px); } .hamburger-menu input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(3.2px , -3.2px); } .hamburger-menu input ~ ul { - display: none; + display: block; + position: fixed; + box-sizing: border-box; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; text-align: center; + visibility: hidden; + overflow-y: hidden; + margin: 0; padding: 3em 0 0 0; - transition: all 1s cubic-bezier(0.77,0.2,0.05,1.0); + background-color: rgb(0, 0, 0); + opacity: 0; + transition: visibility 0.3s ease-out, opacity 0.3s ease-out; +} +.hamburger-menu input:checked ~ ul { + visibility: visible; + opacity: 0.9; + overflow-y: scroll; } .hamburger-menu > ul > li > a { text-decoration: none; + text-transform: uppercase; font-size: 2em; line-height: 1.7; color: white; + transition: all 0.5s ease-out; + /* opacity: 0; */ } -.hamburger-menu input:checked ~ ul { - display: block; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - box-sizing: border-box; - margin: 0; - background-color: rgba(0, 0, 0, 0.8); -} +/* .hamburger-menu input:checked ~ ul li a { + font-size: 1.8em; + opacity: 1; +} */ .post { margin: 0 0 1em 0; line-height: 1.5; @@ -230,7 +247,7 @@ strong { } .end-nav { width: 100%; - max-width: 47rem; + max-width: 49rem; } .pagination-nav { margin: 2em 0; @@ -256,17 +273,26 @@ strong { transform: scale(1); } .side-gutter { - margin-left: 0.7rem !important; - margin-right: 0.7rem !important; + margin-left: 1rem !important; + margin-right: 1rem !important; } .side-padding { - padding-left: 0.7rem !important; - padding-right: 0.7rem !important; + padding-left: 1rem !important; + padding-right: 1rem !important; + box-sizing: border-box !important; +} +.side-text-padding { + padding-left: 1.2rem !important; + padding-right: 1.2rem !important; box-sizing: border-box !important; } .muted-text { color: #7A7B7C; } +.no-scroll { + overflow: hidden; + position: fixed; +} h1, h2, h3, h4, h5, h6 { margin: 1.5em 0 0.7em 0; } diff --git a/static/js/core.js b/static/js/core.js index efd5859..56f8e9f 100644 --- a/static/js/core.js +++ b/static/js/core.js @@ -1,8 +1,20 @@ + function cardPressed() { this.classList.add('card-hover'); } function cardReleased() { this.classList.remove('card-hover'); +} + +function hamburgerMenuPressed() { + if (document.body.classList.contains('no-scroll')) { + document.body.classList.remove('no-scroll'); + document.body.style.paddingRight = 0 + "px"; + } else { + document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + "px"; + document.body.classList.add('no-scroll'); + } + }
\ No newline at end of file |