feat(js): add dark cookie

4 files changed, 51 insertions, 19 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 {