chore: update docs and style (#269)

pogor-dev · Apr 27, 2020 · 6805d69 · 6805d69
1 parent b46c810
commit 6805d69
Show file tree

Hide file tree

Showing 69 changed files with 540 additions and 454 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 # Hugo default output directory
 public/
 /exampleSite/resources/
+/resources/_gen/assets/scss/temp
 
 node_modules/
 build/

diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ English README | [简体中文说明](https://github.com/dillonzq/LoveIt/blob/ma
 
 > **LoveIt** is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/).
 
-It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) and [KeepIt Theme](https://github.com/liuzc/LeaveIt/).
+It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt) and [KeepIt Theme](https://github.com/liuzc/LeaveIt).
 
 Since the three themes have a similar look, if you have questions about their differences,
 read [Why choose LoveIt](#why-choose-loveit) so that you can choose the one that works best for you.

diff --git a/README.zh-cn.md b/README.zh-cn.md
@@ -9,7 +9,7 @@
 
 > [LoveIt](https://github.com/dillonzq/LoveIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
 
-它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt/) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt/)。
+它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt)。
 
 由于三个主题外观的相似性，如果你对于它们的不同之处有疑问，请阅读 [为什么选择 LoveIt](#为什么选择-LoveIt)，以便你能选择最适合你的一个。
 

diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
@@ -24,7 +24,7 @@ html {
 ::selection {
   background-color: $selection-color;
 
-  .dark & {
+  [theme=dark] & {
     background-color: $selection-color-dark;
   }
 }
@@ -35,7 +35,7 @@ body {
   overflow-wrap: break-word;
   scrollbar-color: auto;
 
-  &.dark {
+  &[theme=dark] {
     color: $global-font-color-dark;
     background-color: $global-background-color-dark;
   }

diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss
@@ -2,14 +2,6 @@
   .page {
     width: 56%;
   }
-
-  #header-desktop .header-wrapper {
-    padding: 0 8vw;
-  }
-
-  .search-dropdown.desktop {
-    right: 8vw;
-  }
 }
 
 @media only screen and (max-width: 1200px) {
@@ -18,11 +10,11 @@
   }
 
   #header-desktop .header-wrapper {
-    padding: 0 4vw;
+    padding-right: 1rem;
   }
 
   .search-dropdown.desktop {
-    right: 4vw;
+    right: 1rem;
   }
 }
 
@@ -38,6 +30,10 @@
   .page {
     width: 80%;
   }
+
+  #header-desktop .header-wrapper {
+    padding-left: 1rem;
+  }
 }
 
 @media only screen and (max-width: 680px) {

diff --git a/assets/css/_mixin/_details.scss b/assets/css/_mixin/_details.scss
@@ -0,0 +1,7 @@
+@mixin details-transition-open {
+  @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+}
+
+@mixin details-transition-close {
+  @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+}
diff --git a/assets/css/_mixin/_index.scss b/assets/css/_mixin/_index.scss
@@ -2,3 +2,4 @@
 @import "_link";
 @import "_blur";
 @import "_summary";
+@import "_details";
diff --git a/assets/css/_mixin/_link.scss b/assets/css/_mixin/_link.scss
@@ -2,15 +2,15 @@
   a {
     color: if($light, $global-link-color, $single-link-color);
 
-    .dark & {
+    [theme=dark] & {
       color: if($dark, $global-link-color-dark, $single-link-color-dark);
     }
 
     &:active,
     &:hover {
       color: if($light, $global-link-hover-color, $single-link-hover-color);
 
-      .dark & {
+      [theme=dark] & {
         color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
       }
     }

diff --git a/assets/css/_mixin/_summary.scss b/assets/css/_mixin/_summary.scss
@@ -5,7 +5,7 @@
     color: $global-font-color;
     border-bottom: 1px dashed $global-border-color;
 
-    .dark & {
+    [theme=dark] & {
       color: $global-font-color-dark;
       border-bottom: 1px dashed $global-border-color-dark;
     }
@@ -47,7 +47,7 @@
       overflow-wrap: break-word;
       color: $global-font-secondary-color;
 
-      .dark & {
+      [theme=dark] & {
         color: $global-font-secondary-color-dark;
       }
 
@@ -78,7 +78,7 @@
           margin-right: .3125rem;
           color: $global-link-color;
 
-          .dark & {
+          [theme=dark] & {
             color: $global-link-color-dark;
           }
         }
@@ -95,7 +95,7 @@
       @include link(true, true);
 
       b, strong {
-        .dark & {
+        [theme=dark] & {
           color: $global-font-secondary-color-dark;
         }
       }

diff --git a/assets/css/_page/_home.scss b/assets/css/_page/_home.scss
@@ -56,7 +56,7 @@
           padding: .4rem;
           color: $global-font-secondary-color;
 
-          .dark & {
+          [theme=dark] & {
             color: $global-font-secondary-color-dark;
           }
         }

diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
@@ -24,7 +24,7 @@
       display: inline-block;
     }
 
-    .dark & {
+    [theme=dark] & {
       color: $global-font-secondary-color-dark;
     }
 
@@ -88,7 +88,7 @@
       font-weight: bold;
       margin: 1.2rem 0;
 
-      .dark & {
+      [theme=dark] & {
         font-weight: bolder;
       }
     }
@@ -103,7 +103,7 @@
         margin-right: .3125rem;
         color: $single-link-color;
 
-        .dark & {
+        [theme=dark] & {
           color: $single-link-color-dark;
         }
       }
@@ -120,7 +120,7 @@
     b, strong {
       font-weight: bold;
 
-      .dark & {
+      [theme=dark] & {
         color: #ddd;
       }
     }
@@ -131,18 +131,21 @@
       word-break: break-all;
       word-break: break-word;
 
-      .dark & b, .dark & strong {
+      [theme=dark] & b, [theme=dark] & strong {
         color: $single-link-color-dark;
       }
     }
 
-    .dark a:hover b, .dark a:hover strong {
+    [theme=dark] a:hover b, [theme=dark] a:hover strong {
       color: $single-link-hover-color-dark;
     }
 
-    ul {
+    ul, ol {
       margin: .5rem 0;
-      padding-left: 2rem;
+      padding-left: 2.5rem;
+    }
+
+    ul {
       list-style-type: disc;
     }
 
@@ -153,7 +156,7 @@
         color: $global-font-secondary-color;
       }
 
-      .dark & {
+      [theme=dark] & {
         background: $code-background-color-dark;
 
         rt {
@@ -168,7 +171,7 @@
       &::-webkit-scrollbar {
         background-color: $table-background-color;
 
-        .dark & {
+        [theme=dark] & {
           background-color: $table-background-color-dark;
         }
       }
@@ -181,14 +184,14 @@
         background: $table-background-color;
         border-collapse: collapse;
 
-        .dark & {
+        [theme=dark] & {
           background: $table-background-color-dark;
         }
 
         thead {
           background: $table-thead-color;
 
-          .dark & {
+          [theme=dark] & {
             background-color: $table-thead-color-dark;
           }
         }
@@ -197,7 +200,7 @@
           padding: .3rem 1rem;
           border: 1px solid darken($table-thead-color, 2%);
 
-          .dark & {
+          [theme=dark] & {
             border-color: darken($table-thead-color-dark, 2%);
           }
         }
@@ -241,7 +244,7 @@
       padding: .25rem .75rem;
       margin: 1rem 0;
 
-      .dark & {
+      [theme=dark] & {
         border-left-color: $blockquote-color-dark;
         background-color: rgba($blockquote-color-dark, .2);
       }
@@ -250,7 +253,7 @@
     .footnotes {
       color: $global-font-secondary-color;
 
-      .dark & {
+      [theme=dark] & {
         color: $global-font-secondary-color-dark;
       }
 
@@ -273,7 +276,7 @@
       border-top: 1px dashed $global-border-color;
       border-bottom: none;
 
-      .dark & {
+      [theme=dark] & {
         border-top: 1px dashed $global-border-color-dark;
       }
     }
@@ -290,7 +293,7 @@
       font-family: $code-font-family;
       color: $code-color;
 
-      .dark & {
+      [theme=dark] & {
         background-color: $global-background-color-dark;
         border: 1px solid $global-border-color-dark;
         border-bottom-color: $global-border-color-dark;
@@ -311,6 +314,7 @@
 
     .version {
       height: 1.25em;
+      vertical-align: text-bottom;
     }
   }
 

diff --git a/assets/css/_partial/_archive/_tags.scss b/assets/css/_partial/_archive/_tags.scss
@@ -19,7 +19,7 @@
     sup {
       color: $global-font-secondary-color;
 
-      .dark & {
+      [theme=dark] & {
         color: $global-font-secondary-color-dark;
       }
     }

diff --git a/assets/css/_partial/_archive/_terms.scss b/assets/css/_partial/_archive/_terms.scss
@@ -58,7 +58,7 @@
     background-color: transparent;
   }
 
-  .dark & {
+  [theme=dark] & {
     color: $global-link-color-dark;
 
     &:hover {
@@ -72,7 +72,7 @@
   text-align: right;
   color: $global-font-secondary-color;
 
-  .dark & {
+  [theme=dark] & {
     color: $global-font-secondary-color-dark;
   }
 }

diff --git a/assets/css/_partial/_details.scss b/assets/css/_partial/_details.scss
@@ -9,25 +9,25 @@
     color: $global-font-secondary-color;
     @include transition(transform 0.2s ease);
 
-    .dark & {
+    [theme=dark] & {
       color: $global-font-secondary-color-dark;
     }
   }
 
   .details-content {
     max-height: 0;
     overflow-y: hidden;
-    @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+    @include details-transition-open;
   }
 
   &.open {
     i.details-icon {
-      @include transform(rotate(180deg));
+      @include transform(rotate(90deg));
     }
 
     .details-content {
       max-height: $MAX_LENGTH;
-      @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+      @include details-transition-close;
     }
   }
 }
diff --git a/assets/css/_partial/_fixed-button.scss b/assets/css/_partial/_fixed-button.scss
@@ -25,7 +25,7 @@
     outline: none;
   }
 
-  .dark & {
+  [theme=dark] & {
     color: $global-font-secondary-color-dark;
     background: $header-background-color-dark;