+ {{ partial "nav.html" . }} {{ partial "header.html" . }}

diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 7a3b8f6..2d857f5 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,6 +1,7 @@ {{ partial "head.html" . }}

+ {{ partial "nav.html" . }} {{ partial "header.html" . }}

diff --git a/layouts/_default/single.html b/layouts/_default/single.html index e4623b6..8ba2a92 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,6 +1,7 @@ {{ partial "head.html" . }}

+ {{ partial "nav.html" . }} {{ partial "header.html" . }}

diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html index 3496fae..e440ee1 100644 --- a/layouts/_default/terms.html +++ b/layouts/_default/terms.html @@ -1,6 +1,7 @@ {{ partial "head.html" . }}

+ {{ partial "nav.html" . }} {{ partial "header.html" . }}

diff --git a/layouts/index.html b/layouts/index.html index fcf684c..0f93dc8 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,6 +1,7 @@ {{ partial "head.html" . }}

+ {{ partial "nav.html" . }} {{ partial "header.html" . }}

{{ partial "post.html" .}} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 11eb0e5..2bc3ce8 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,13 +1,3 @@ -

- {{ .Name }} -

diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html new file mode 100644 index 0000000..1c18a5a --- /dev/null +++ b/layouts/partials/nav.html @@ -0,0 +1,14 @@ +

+ {{ .Name }} +

+ +

diff --git a/static/css/zozo.css b/static/css/zozo.css index 801d9be..f301410 100644 --- a/static/css/zozo.css +++ b/static/css/zozo.css @@ -7,7 +7,7 @@ html { body { color: #333333; - font-family: "source-han-sans-simplified-c", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; + font-family: 'source-han-sans-simplified-c', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; font-size: 16px; width: 100%; background-color: #f7f7f7; @@ -66,12 +66,48 @@ h6 { } .nav_container { - width: 720px; + width: 740px; height: 3rem; margin: 0 auto; padding: 20px 0; } +.nav_container .menu_icon { + padding: 10px; + float: right; +} + +.nav_container .menu_icon a { + cursor: pointer; +} + +.nav_container .site_nav { + float: right; +} + +.nav_container .site_nav ul { + list-style: none; + margin: 0; + padding: 0; + float: right; +} + +.nav_container .site_nav li, +.nav_container .site_nav a { + position: relative; +} + +.nav_container .site_nav li { + float: left; +} + +.nav_container .site_nav a { + display: block; + white-space: nowrap; + padding: 10px; + font-size: 0.9rem; +} + .header { width: 720px; padding: 50px 0 140px 0; @@ -307,45 +343,6 @@ h6 { letter-spacing: 1px; } -.site_nav { - list-style: none; - margin: 0; - padding: 0; - float: right; -} - -.site_nav ul { - width: 12em; -} - -.site_nav li, -.site_nav a { - position: relative; -} - -.site_nav li { - float: left; -} - -.site_nav li span.menu_icon { - margin-top: 2px; -} - -.site_nav li span.menu_icon i { - font-size: 16px; -} - -.site_nav ul li { - float: none; -} - -.site_nav a, .site_nav span.menu_icon { - display: block; - white-space: nowrap; - padding: 10px; - font-size: 0.9rem; -} - /*for archive*/ .list_with_title { font-size: 14px; @@ -456,7 +453,7 @@ h6 { .markdown pre, .markdown code { - font-family: "Roboto Mono", Menlo, Monaco, courier, monospace; + font-family: 'Roboto Mono', Menlo, Monaco, courier, monospace; font-size: 0.9em; background: #f8f8f8; border: none; @@ -524,7 +521,7 @@ h6 { } .markdown blockquote:before { - content: "“"; + content: '“'; display: block; font-family: times, sans-serif; font-style: normal; @@ -585,7 +582,32 @@ a.back_to_top:hover span { color: #555555; } -@media print, screen and (max-width: 580px) { +@media print, screen and (max-width: 680px) { + .nav_container { + position: relative; + z-index: 999; + } + .nav_container .site_nav { + position: fixed; + right: 0; + top: 60px; + padding: 10px 0; + width: 100%; + background-color: #ffffff; + -webkit-box-shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86); + box-shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86); + } + .nav_container .site_nav ul { + float: none; + text-align: center; + } + .nav_container .site_nav li { + float: none; + } + .nav_container .menu_icon { + position: fixed; + right: 0; + } .back_to_top { display: none !important; } @@ -595,7 +617,9 @@ a.back_to_top:hover span { .main { width: 1000px; } - .nav_container, + .nav_container { + width: 840px; + } .header, .content { width: 820px; @@ -607,7 +631,9 @@ a.back_to_top:hover span { width: 95%; margin-top: 20px; } - .nav_container, + .nav_container { + width: 95%; + } .header, .content { width: 90%; diff --git a/static/css/zozo.scss b/static/css/zozo.scss index 6a3ab51..4d18019 100644 --- a/static/css/zozo.scss +++ b/static/css/zozo.scss @@ -9,7 +9,8 @@ html { body { color: #333333; - font-family: "source-han-sans-simplified-c", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; + font-family: 'source-han-sans-simplified-c', 'Source Sans Pro', + 'Helvetica Neue', Arial, sans-serif; font-size: 16px; width: 100%; background-color: #f7f7f7; @@ -72,10 +73,46 @@ h6 { } .nav_container { - width: 720px; + width: 740px; height: 3rem; margin: 0 auto; padding: 20px 0; + + .menu_icon { + padding: 10px; + float: right; + + a { + cursor: pointer; + } + } + + .site_nav { + float: right; + + ul { + list-style: none; + margin: 0; + padding: 0; + float: right; + } + + li, + a { + position: relative; + } + + li { + float: left; + } + + a { + display: block; + white-space: nowrap; + padding: 10px; + font-size: 0.9rem; + } + } } .header { @@ -212,7 +249,6 @@ h6 { color: #8e0000; } } - } .post_footer { @@ -315,46 +351,6 @@ h6 { } } -.site_nav { - list-style: none; - margin: 0; - padding: 0; - float: right; - - ul { - width: 12em; - } - - li, - a { - position: relative; - } - - li { - float: left; - - span.menu_icon { - margin-top: 2px; - - i { - font-size: 16px; - } - } - } - - ul li { - float: none; - } - - a, span.menu_icon { - display: block; - white-space: nowrap; - padding: 10px; - font-size: 0.9rem; - } - -} - /*for archive*/ .list_with_title { @@ -465,7 +461,7 @@ h6 { pre, code { - font-family: "Roboto Mono", Menlo, Monaco, courier, monospace; + font-family: 'Roboto Mono', Menlo, Monaco, courier, monospace; font-size: 0.9em; background: #f8f8f8; border: none; @@ -535,7 +531,7 @@ h6 { } blockquote:before { - content: "“"; + content: '“'; display: block; font-family: times, sans-serif; font-style: normal; @@ -595,7 +591,36 @@ a.back_to_top { } } -@media print, screen and (max-width: 580px) { +@media print, screen and (max-width: 680px) { + .nav_container { + position: relative; + z-index: 999; + + .site_nav { + position: fixed; + right: 0; + top: 60px; + padding: 10px 0; + width: 100%; + background-color: #ffffff; + box-shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86); + + ul { + float: none; + text-align: center; + } + + li { + float: none; + } + } + + .menu_icon { + position: fixed; + right: 0; + } + } + .back_to_top { display: none !important; } @@ -605,7 +630,10 @@ a.back_to_top { .main { width: 1000px; } - .nav_container, + .nav_container { + width: 840px; + } + .header, .content { width: 820px; @@ -617,7 +645,10 @@ a.back_to_top { width: 95%; margin-top: 20px; } - .nav_container, + .nav_container { + width: 95%; + } + .header, .content { width: 90%; diff --git a/static/js/zozo.js b/static/js/zozo.js index 2781442..9aaa550 100644 --- a/static/js/zozo.js +++ b/static/js/zozo.js @@ -25,6 +25,21 @@ $(document).ready((function (_this) { } })(this)) +// nav-toggle +$(document).ready((function (_this) { + return function () { + let nav,icon + icon = $('#menu_icon') + nav = $('#site_nav') + if ($(document).width() < 768) { + nav.css('display', 'none') + } + icon.click(function () { + nav.slideToggle(250) + }) + } +})(this)) + // fancybox $(document).ready((function (_this) { return function() { -- cgit v1.2.3