refactor: refactored css code

assets/scss/_darkmode.scss

@@ -0,0 +1,130 @@
+@import "_variables";
+.dark-mode {
+  color: $dark-font;
+  background-color: $dark-background;
+}
+
+.dark-mode .navbar.is-light {
+  background-color: $dark-navbar;
+  color: $dark-font;
+}
+
+.dark-mode .navbar.is-light {
+  background-color: $dark-navbar;
+  color: $dark-font;
+}
+
+.dark-mode .navbar.is-light {
+  color: $dark-font;
+}
+
+.dark-mode .navbar.is-light .navbar-brand > .navbar-item {
+  color: $dark-font;
+  background-color: $dark-navbar;
+}
+
+.dark-mode .navbar.is-light .navbar-start > .navbar-item {
+  color: $dark-font;
+}
+
+.dark-mode .navbar-menu {
+  background-color: $dark-navbar;
+  color: $dark-font;
+}
+
+.dark-mode a {
+  color: $dark-font;
+}
+
+.dark-mode .title {
+  color: $dark-font;
+}
+
+.dark-mode .icon {
+  color: $dark-font;
+}
+
+.dark-mode #searchResults li {
+  background-color: $dark-navbar;
+  border-bottom: 1px solid $dark-font;
+  border-left: 1px solid $dark-font;
+  border-right: 1px solid $dark-font;
+}
+
+.dark-mode #searchResults li:first-child {
+  border-top: 1px solid $dark-font;
+}
+
+.dark-mode #searchResults li:hover {
+  color: $dark-font;
+  background-color: $dark-background;
+}
+
+
+.dark-mode #post-container {
+  background-color: $dark-navbar;
+  color: $dark-font;
+}
+
+.dark-mode hr {
+  background-color: $dark-navbar;
+}
+
+.dark-mode .footer {
+  background-color: $dark-navbar;
+}
+
+.dark-mode .archive {
+  color: $dark-font;
+}
+
+.dark-mode .content h1, .dark-mode .content h2, .dark-mode .content h3, .dark-mode .content h4, .dark-mode .content h5, .dark-mode .content h6 {
+  color: $dark-font;
+}
+
+.dark-mode code {
+  background-color: $dark-background;
+}
+
+.dark-mode .content blockquote {
+  color: $dark-font;
+  background-color: $dark-background;
+}
+
+.dark-mode strong {
+  color: white;
+}
+
+.dark-mode .content table thead td, .dark-mode .content table thead th {
+  color: $dark-font;
+}
+
+.dark-mode .card {
+  background-color: $dark-navbar;
+}
+
+.dark-mode .button {
+  background-color: $dark-navbar;
+  color: $dark-font;
+  border-color: $dark-navbar;
+}
+
+.dark-mode .navbar.is-light .navbar-burger {
+  color: $dark-font;
+}
+
+.dark-mode .icon:hover {
+  color: $main-orange;
+}
+
+.dark-mode pre {
+  color: #f8f8f2;
+  background-color: #272822;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+}
+.dark-mode .navbar.is-light .navbar-brand>a.navbar-item:hover,.dark-mode .navbar.is-light .navbar-start > a.navbar-item:hover{
+  background-color: $dark-navbar;
+  color: $dark-font;
+}

assets/scss/_header.scss

@@ -0,0 +1,17 @@
+.navbar {
+  height: 6vmin;
+  .navbar-brand {
+    padding: 0px 15px;
+    .logo h1 {
+      font-size: 1.5rem;
+    }
+  }
+}
+.author-avatar {
+  object-fit: cover;
+  border-radius: 50%;
+  width: 10rem;
+  height: 10rem;
+  text-align: center;
+  margin: 2rem auto 0 auto;
+}

assets/scss/_variables.scss

@@ -0,0 +1,13 @@
+--main-black: #363636;
+--main-orange: #FAB005;
+--main-light: #f5f5f5;
+--main-grey: rgb(142, 139, 139);
+--dark-background: #1F1F1F;
+--dark-navbar: #2D2F31;
+--dark-font: #E3E3E3;
+--font-size-home-title: 2.5rem;
+--font-size-article-title: 2.5rem;
+--font-size-article-title-mobile: 1.8rem;
+--font-size-content: 1rem;
+--font-size-content-larger: 1.3rem;
+--font-size-archive-title: 1.9rem;

static/css/style.css → assets/scss/main.scss

@@ -540,7 +540,7 @@ a {
         padding: 0
     }
 
-    .post-toc {
+    .toc-container {
         display: none;
     }
 
@@ -801,7 +801,13 @@ a {
 main a {
     color: #6086b4;
 }
+
 /* Let the sun icon not be next to the top*/
 .theme-toggle {
     margin-top: 5px;
-}
+}
+/* Solve the problem that mobile pages generate shadows when clicking on icons or buttons */
+html{
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: transparent;
+}

assets/scss/style.scss

@@ -0,0 +1 @@
+@import "main";