From 79562851b49fcabdff8cd2db35071a9d8786ea43 Mon Sep 17 00:00:00 2001 From: Aiden X Date: Mon, 24 Aug 2020 23:15:13 +0800 Subject: feat(js): add dark cookie --- assets/js/less.js | 44 ++++++++++++++++++++++++++++++++++++++----- assets/scss/_heaader.scss | 2 +- assets/scss/_single.scss | 22 ++++++++++------------ assets/scss/less.scss | 2 +- layouts/_default/single.html | 20 +++++++++----------- layouts/partials/footer.html | 1 - layouts/partials/head.html | 2 +- layouts/partials/header.html | 2 +- static/images/favicon.png | Bin 3400 -> 17258 bytes static/images/logo.png | Bin 4710 -> 18447 bytes 10 files changed, 62 insertions(+), 33 deletions(-) diff --git a/assets/js/less.js b/assets/js/less.js index 44c0408..3221f4a 100644 --- a/assets/js/less.js +++ b/assets/js/less.js @@ -1,6 +1,40 @@ -console.log(99) - -$(document).on('click', '#btn-dark', function(e) { +const $btnDark = document.getElementById('btn-dark') +const $body = document.getElementsByTagName('body') +$btnDark.addEventListener('click', e => { e.preventDefault() - $('body').toggleClass('dark') -}) \ No newline at end of file + $body[0].classList.toggle('dark') + if (getCookie('dark') === "") { + setCookie('dark', 'true', 7 * 24 * 60 * 60) + } else { + removeCookie('dark') + } +}) + +if (getCookie('dark') === 'true') { + $body[0].classList.add('dark') +} + +function setCookie(key, value, second) { + let d = new Date(); + d.setTime(d.getTime() + (second * 1000)); + let expires = "expires=" + d.toGMTString(); + document.cookie = key + "=" + value + "; " + expires + "; path=/"; +} + +function removeCookie(key) { + let d = new Date(); + d.setTime(d.getTime() - 1); + let expires = "expires=" + d.toGMTString(); + document.cookie = key + "=;" + expires + "; path=/"; +} + +function getCookie(key) { + let name = key + "="; + let ca = document.cookie.split(';'); + for (let i = 0; i < ca.length; i++) { + let c = ca[i].trim(); + if (c.indexOf(name) === 0) return c.substring(name.length, c.length); + } + + return ""; +} diff --git a/assets/scss/_heaader.scss b/assets/scss/_heaader.scss index 89d9ffb..f18bbfe 100644 --- a/assets/scss/_heaader.scss +++ b/assets/scss/_heaader.scss @@ -14,7 +14,7 @@ justify-content: space-between; .icon-moon { - color: #999; + color: #e0e0e0; } } diff --git a/assets/scss/_single.scss b/assets/scss/_single.scss index b75aaa0..b577f13 100644 --- a/assets/scss/_single.scss +++ b/assets/scss/_single.scss @@ -5,6 +5,8 @@ font-size: 16px; .single-title { + line-height: 1.2; + margin-bottom: 20px; font-size: 30px; font-weight: 500; font-family: 'Monda', -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, Arial, sans-serif; @@ -21,7 +23,8 @@ border-radius: 2px; padding: 20px; overflow: auto; - + line-height: 1.4; + code { font-size: 14px; } @@ -29,6 +32,8 @@ code { font-family: "menlo", serif; + white-space: pre-wrap; + word-break: break-all; } p { @@ -36,7 +41,7 @@ } h1, h2, h3, h4, h5, h6 { - font-weight: 500; + font-weight: 600; outline: none; margin: 30px 0 30px; font-family: 'Monda', -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, Arial, sans-serif; @@ -64,16 +69,9 @@ } } -.single-meta { - color: #999; - - .single-date { - margin-right: 10px; - } - a { - color: #999; - margin-right: 10px; - } +.single-date { + margin-right: 10px; + color: #a0a0a0; } .single-toc { diff --git a/assets/scss/less.scss b/assets/scss/less.scss index f908fa5..bc44603 100644 --- a/assets/scss/less.scss +++ b/assets/scss/less.scss @@ -87,7 +87,7 @@ a { } .post-title { - //font-family: 'Monda', -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, Arial, sans-serif; + font-family: 'Monda', -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, Arial, sans-serif; } .year { diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 6b869a5..2b5b1f1 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -5,20 +5,18 @@
{{.Title}}
-
{{ .Date.Format "2006-01-02" }}
- {{ if .Params.tags }} -
- {{ range $k, $v := .Params.tags }} - - #{{ . }} - - {{ end }} -
- {{ end }} -
+ + + + + + + + +
{{.Content}}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index d9ad6cd..90a5026 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -29,7 +29,6 @@ collapseDepth: 4 }); - {{ $built := resources.Get "js/less.js" | js.Build "less.js" }} \ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index caaa5a6..5db9264 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -8,6 +8,6 @@ - + 面向自由编程 \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index bfee24f..80dd680 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,7 +1,7 @@
diff --git a/static/images/favicon.png b/static/images/favicon.png index 32c6bfc..42a5414 100644 Binary files a/static/images/favicon.png and b/static/images/favicon.png differ diff --git a/static/images/logo.png b/static/images/logo.png index d85af5c..26966b6 100644 Binary files a/static/images/logo.png and b/static/images/logo.png differ -- cgit v1.2.3