feat: tidy style and layout

2019-08-24 19:32:41 +08:00
parent c8bb0770e9
commit 5cc4fdbe46
98 changed files with 751 additions and 500 deletions
--- a/assets/css/_core/_base.scss
+++ b/assets/css/_core/_base.scss
@@ -11,11 +11,11 @@ html {

  &::-webkit-scrollbar-thumb {
    height: 40px;
-    background-color: #eee;
+    background-color: #87878D;
    border-radius: 16px;

    &:hover {
-      background-color: #C2C2C2;
+      background-color: #A9A9B3;
    }
  }
 }
@@ -73,11 +73,3 @@ a {
    }
  }
 }
-
-.navbar {
-  background-color: $navbar-background-color;
-
-  .dark-theme & {
-    background-color: $navbar-background-color-dark;
-  }
-}
--- a/assets/css/_core/_layout.scss
+++ b/assets/css/_core/_layout.scss
@@ -1,5 +1,4 @@
-  /** Layout **/
-
+/** Layout **/
 .wrapper {
  display: flex;
  flex-direction: column;
@@ -7,24 +6,6 @@
  width: 100%;
 }

-.navbar {
-  display: block !important;
-  position: fixed;
-  width: 100%;
-  z-index: 100;
-  height: 4rem;
-  line-height: 4rem;
-
-  .container {
-    width: auto;
-    max-width: 1200px;
-    text-align: center;
-    margin: 0 auto;
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
 .main {
  flex: 1 0 auto;
 }
--- a/assets/css/_core/_media.scss
+++ b/assets/css/_core/_media.scss
@@ -1,192 +1,49 @@
-@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
-  .navbar {
-    display: none !important;
-  }
-
-  .post-toc {
-    display: none !important;
-  }
-
-  .navbar-mobile {
-    display: block !important;
-    position: fixed !important;
-    width: 100% !important;
-    z-index: 100 !important;
-    transition: all 0.3s ease 0s !important;
-
-    .container {
-      padding: 0 !important;
-      margin: 0 !important;
-      height: 4.5em !important;
-      line-height: 4.5em !important;
-      background: $global-background-color !important;
-
-      .navbar-header {
-        display: flex !important;
-        justify-content: space-between !important;
-        align-items: center !important;
-        width: 100% !important;
-        font-size: 18px !important;
-        padding-right: 1em !important;
-        padding-left: 1em !important;
-        box-sizing: border-box !important;
-
-        .menu-toggle {
-          cursor: pointer !important;
-          line-height: 4.5em !important;
-
-          span {
-            display: block !important;
-            background: #000 !important;
-            width: 36px !important;
-            height: 2px !important;
-            -webkit-border-radius: 3px !important;
-            -moz-border-radius: 3px !important;
-            border-radius: 3px !important;
-            -webkit-transition: .2s margin .2s, .2s transform !important;
-            -moz-transition: .2s margin .2s, .2s transform !important;
-            transition: .2s margin .2s, .2s transform !important;
-
-            .dark-theme & {
-              background: $global-font-color-dark !important;
-            }
-          }
-
-          span:nth-child(1) {
-            margin-bottom: 8px !important;
-          }
-
-          span:nth-child(3) {
-            margin-top: 8px !important;
-          }
-
-          &.active {
-            span {
-              -webkit-transition: .2s margin, .2s transform .2s !important;
-              -moz-transition: .2s margin, .2s transform .2s !important;
-              transition: .2s margin, .2s transform .2s !important;
-            }
-
-            span:nth-child(1) {
-              -moz-transform: rotate(45deg) translate(4px, 6px) !important;
-              -ms-transform: rotate(45deg) translate(4px, 6px) !important;
-              -webkit-transform: rotate(45deg) translate(4px, 6px) !important;
-              transform: rotate(45deg) translate(4px, 6px) !important;
-            }
-
-            span:nth-child(2) {
-              opacity: 0
-            }
-
-            span:nth-child(3) {
-              -moz-transform: rotate(-45deg) translate(8px, -10px) !important;
-              -ms-transform: rotate(-45deg) translate(8px, -10px) !important;
-              -webkit-transform: rotate(-45deg) translate(8px, -10px) !important;
-              transform: rotate(-45deg) translate(8px, -10px) !important;
-            }
-          }
-        }
-      }
-
-      .menu {
-        text-align: center !important;
-        background: $global-background-color !important;
-        border-top: 2px solid $global-font-color !important;
-        display: none !important;
-        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1) !important;
-
-        a {
-          display: block !important;
-          line-height: 2.5em !important;
-        }
-
-        &.active {
-          display: block !important;
-        }
-
-        .dark-theme & {
-          background: $global-background-color-dark !important;
-          border-top: 2px solid $global-font-color-dark !important;
-        }
-      }
-
-      .dark-theme & {
-        background: $global-background-color-dark !important;
-      }
-    }
-  }
-
-  #dynamic-to-top {
-    display: none !important;
-  }
-
+/* iPads (landscape) ----------- */
+@media only screen and (max-width: 1300px) {
  .post-warp {
-    .categories-card {
-      .card-item {
-        width: 95% !important;
-      }
+    max-width: 560px;
+
+    .post-toc {
+      margin-left: 580px;
    }
  }
 }

 /* iPads (portrait) ----------- */
-
-@media only screen and (min-width: 768px) {
+@media only screen and (max-width: 1080px) {
  .post-warp {
-    max-width: 600px !important;
-  }
+    max-width: 80%;

-  .navbar-mobile {
-    display: none !important;
-  }
+    .post-toc {
+      display: none;
+    }

-  .post-toc {
-    display: none !important;
-  }
-
-  .post-toc-mobile {
-    display: block !important;
+    .post-toc-mobile {
+      display: block;
+    }
  }
 }

-/* iPads (landscape) ----------- */
-
-@media only screen and (min-width: 1080px) {
-  .post-warp {
-    max-width: 560px !important;
-  }
-
-  .post-toc {
-    display: block !important;
-    margin-left: 580px !important;
+@media only screen and (max-width: 400px) {
+  .navbar {
+    display: none;
  }

  .navbar-mobile {
-    display: none !important;
+    display: block;
  }

-  .post-toc-mobile {
-    display: none !important;
-  }
-}
-
-/* Desktops and laptops ----------- */
-
-@media only screen and (min-width: 1300px) {
  .post-warp {
-    max-width: 780px !important;
+    max-width: 100%;
+
+    .categories-card {
+      .card-item {
+        width: 95%;
+      }
+    }
  }

-  .post-toc {
-    display: block !important;
-    margin-left: 800px !important;
-  }
-
-  .navbar-mobile {
-    display: none !important;
-  }
-
-  .post-toc-mobile {
+  .dynamic-to-top {
    display: none !important;
  }
 }
--- a/assets/css/_custom.scss
+++ b/assets/css/_custom.scss
@@ -2,10 +2,3 @@
 // Custom style
 // ==============================
 // You can override the variables in _variables.scss to customize the style
-
-.since {
-  padding: 30px;
-  text-align:center;
-  font-size: 30px;
-  line-height: 50px;
-}
--- a/assets/css/_page/_home.scss
+++ b/assets/css/_page/_home.scss
@@ -1,13 +1,13 @@
 /** Home **/
-.intro {
+.home-intro {
  transform: translateY(25vh);
  text-align: center;

-  .avatar {
-    padding: 10px;
+  .home-avatar {
+    padding: 0.6rem;

    img {
-      width: 128px;
+      width: 8rem;
      height: auto;
      display: inline-block;
      -webkit-border-radius: 100%;
@@ -23,35 +23,35 @@

      &:hover {
        position: relative;
-        -webkit-transform: translateY(-0.75em);
-        -moz-transform: translateY(-0.75em);
-        -ms-transform: translateY(-0.75em);
-        -o-transform: translateY(-0.75em);
-        transform: translateY(-0.75em);
+        -webkit-transform: translateY(-0.75rem);
+        -moz-transform: translateY(-0.75rem);
+        -ms-transform: translateY(-0.75rem);
+        -o-transform: translateY(-0.75rem);
+        transform: translateY(-0.75rem);
        cursor: pointer;
      }
    }
  }
-}

-h2.description {
-  font-size: 1em;
-  font-weight: normal;
-  padding: 5px;
-}
+  .home-description {
+    font-size: 1rem;
+    font-weight: normal;
+    padding: .4rem;
+  }

-.social-links {
-  a {
+  .home-social-links {
+    padding-top: .6rem;

-    padding: 0 5px;
+    a {
+      padding: 0 .4rem;

-    &:hover {
+      &:hover {
+        background-color: transparent;
+      }
+    }

-      background-color: transparent;
+    i {
+      font-size: 1.4rem;
    }
  }
-
-  i {
-    font-size: 1.4em;
-  }
 }
--- a/assets/css/_page/_index.scss
+++ b/assets/css/_page/_index.scss
@@ -14,9 +14,16 @@
 .archive {
  .post-title {
    text-align: right;
-    padding-bottom: 2em;
+    padding-bottom: 2rem;
  }

  @import "_terms";
  @import "_tags";
+}
+
+.single {
+  .post-title {
+    text-align: right;
+    padding-bottom: 2rem;
+  }
 }
--- a/assets/css/_page/_post.scss
+++ b/assets/css/_page/_post.scss
@@ -1,10 +1,8 @@
 /** Post **/
-.post-header {
-  .post-title {
-    margin: 0 !important;
-    font-size: 2rem;
-    line-height: 3rem;
-  }
+.post-title {
+  margin: 0 !important;
+  font-size: 2rem;
+  line-height: 3rem;
 }

 .post-meta {
@@ -42,9 +40,18 @@

 .post-featured-image {
  padding-top: .6rem;
+
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+    overflow: hidden;
+  }
 }

 .post-toc {
+  display: block;
  position: absolute;
  width: 240px;
  max-width: 300px;
@@ -90,6 +97,7 @@
 }

 .post-toc-mobile {
+  display: none;
  padding-top: .8rem;

  details {
@@ -147,14 +155,6 @@
  }
 }

-.featured_image {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  margin: 0 auto;
-  overflow: hidden;
-}
-
 .post-content {
  a.post-title-target:target {
    display: block;
@@ -192,6 +192,12 @@
    }
  }

+  p {
+    font-size: 1em;
+    margin: .5em 0 .5em 0;
+    text-align: justify;
+  }
+
  a {
    color: $post-link-color;

@@ -343,6 +349,8 @@
  }

  .echarts {
+    width: 100%;
+    height: 30rem;
    margin: 3% auto;
    text-align: center;
  }
@@ -443,12 +451,26 @@
      }
    }
  }
-}

-p {
-  font-size: 1em;
-  margin: .5em 0 .5em 0;
-  text-align: justify;
+  .align-left {
+    text-align: left;
+  }
+
+  .align-center {
+    text-align: center;
+  }
+
+  .align-right {
+    text-align: right;
+  }
+
+  .float-left {
+    float: left;
+  }
+
+  .float-right {
+    float: right;
+  }
 }

 .post-footer {
@@ -547,24 +569,4 @@ p {

 .post-comment {
  padding: 3em 0;
-}
-
-.align-left {
-  text-align: left;
-}
-
-.align-center {
-  text-align: center;
-}
-
-.align-right {
-  text-align: right;
-}
-
-.float-left {
-  float: left;
-}
-
-.float-right {
-  float: right;
 }
--- a/assets/css/_page/_posts.scss
+++ b/assets/css/_page/_posts.scss
@@ -1,19 +1,18 @@
-.intro {
+.home-intro {
  transform: translateY(0);
-  padding: 2em 0 2em 0;
+  padding: 2rem 0 2rem 0;

-  .avatar {
+  .home-avatar {
    img {
-      width: 96px;
+      width: 6rem;
    }
  }
 }

 .post {
-  padding-top: 0.8em;
-  padding-bottom: 0.8em;
+  padding-top: 1rem;
+  padding-bottom: .8rem;
  color: $global-font-color;
-  border-top: 1px dashed $global-border-color;
  border-bottom: 1px dashed $global-border-color;

  .dark-theme & {
@@ -25,7 +24,7 @@
    width: 100%;
    padding: 30% 0 0;
    position: relative;
-    margin-bottom: 1em;
+    margin-bottom: 1rem;

    img {
      position: absolute;
@@ -36,11 +35,11 @@
  }

  .post-list-title {
-    font-size: 1.6em;
+    font-size: 1.6rem;
  }

  .post-meta {
-    font-size: 14px !important;
+    font-size: .875rem !important;
    a {
      color: $global-font-secondary-color !important;

@@ -59,10 +58,10 @@
  }

  .post-content {
-    padding-top: .2em;
-    font-size: 0.9em;
+    padding-top: .2rem;
+    font-size: .9rem;
    width: 100%;
-    max-height: 108px;
+    max-height: 6.8rem;
    overflow: hidden;

    h2,
@@ -70,25 +69,25 @@
    h4,
    h5,
    h6 {
-      font-size: 1em;
-      line-height: 1em;
-      padding-top: .3em;
-      padding-bottom: .3em;
+      font-size: 1rem;
+      line-height: 1rem;
+      padding-top: .3rem;
+      padding-bottom: .3rem;
    }

    p {
    margin: 0;
-    padding-top: .3em;
-    padding-bottom: .3em;
+    padding-top: .3rem;
+    padding-bottom: .3rem;
    }
  }

  .post-footer {
-    margin-top: 0.5em;
+    margin-top: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
-    font-size: 14px !important;
+    font-size: .875rem !important;

    a {
      color: $post-link-color !important;
--- a/assets/css/_page/_terms.scss
+++ b/assets/css/_page/_terms.scss
@@ -4,23 +4,23 @@

 .categories-card {
  margin: 0 auto;
-  margin-top: 3em;
+  margin-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
-  padding: 0 2.5em;
-  line-height: 1.6em;
+  padding: 0 2.5rem;
+  line-height: 1.6rem;

  .card-item {
-    font-size: 14px;
+    font-size: .875rem;
    text-align: left;
    width: 45%;
    display: flex;
    align-items: flex-start;
-    margin-top: 2em;
-    min-height: 10em;
+    margin-top: 2rem;
+    min-height: 10rem;
    padding: 0 2%;
    position: relative;

@@ -78,6 +78,6 @@

  span {
    float: right;
-    padding-right: 1em;
+    padding-right: 1rem;
  }
 }
--- a/assets/css/_partial/_footer.scss
+++ b/assets/css/_partial/_footer.scss
@@ -1,26 +1,25 @@
 /**Footer**/
-
 .copyright {
-  font-size: 14px;
+  font-size: .875rem;
 }

-#dynamic-to-top {
+.dynamic-to-top {
  display: none;
  overflow: hidden;
  width: auto;
  z-index: 90;
  position: fixed;
-  bottom: 2em;
-  right: 2em;
+  bottom: 2rem;
+  right: 2rem;
  top: auto;
  left: auto;
  font-family: sans-serif;
-  font-size: 1em;
+  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 0 #333;
  font-weight: bold;
-  padding: 17px 16px;
+  padding: 1rem 1rem;
  border: 1px solid $global-border-color;
  background: #222;
  &:hover {
@@ -38,8 +37,8 @@
  span {
    display: block;
    overflow: hidden;
-    width: 14px;
-    height: 12px;
+    width: .875rem;
+    height: .75rem;
    background: url('data:image/png;base64,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') no-repeat center center;
  }

--- a/assets/css/_partial/_navbar.scss
+++ b/assets/css/_partial/_navbar.scss
@@ -1,27 +1,152 @@
-.header-logo a {
-  padding: 0;
-
-  i {
-    line-height: 2em;
-  }
-}
-
-.navbar .menu a {
-
-  padding: 0 8px;
-}
-
-.navbar .menu .active {
-  font-weight: 900;
-  color: $navbar-active-color;
+.navbar {
+  display: block;
+  position: fixed;
+  width: 100%;
+  z-index: 100;
+  height: 4rem;
+  line-height: 4rem;
+  background-color: $navbar-background-color;

  .dark-theme & {
-    color: $navbar-active-color-dark;
+    background-color: $navbar-background-color-dark;
+  }
+
+  .navbar-container {
+    width: auto;
+    max-width: 1200px;
+    text-align: center;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+
+    .navbar-header a {
+      padding: 0 8px;
+
+      i {
+        line-height: 2em;
+      }
+    }
+
+    .navbar-menu a {
+      padding: 0 8px;
+
+      &.active {
+        font-weight: 900;
+        color: $navbar-active-color;
+
+        .dark-theme & {
+          color: $navbar-active-color-dark;
+        }
+      }
+    }
  }
 }

-.navbar-header a:hover,
-.navbar .menu a:hover {
+.navbar-mobile {
+  display: none;
+  position: fixed;
+  width: 100%;
+  z-index: 100;
+  transition: all 0.3s ease 0s;

-  background-color: transparent;
+  .navbar-container {
+    padding: 0;
+    margin: 0;
+    height: 4.5em;
+    line-height: 4.5em;
+    background: $global-background-color;
+
+    .navbar-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      font-size: 18px;
+      padding-right: 1em;
+      padding-left: 1em;
+      box-sizing: border-box;
+
+      .menu-toggle {
+        cursor: pointer;
+        line-height: 4.5em;
+
+        span {
+          display: block;
+          background: #000;
+          width: 36px;
+          height: 2px;
+          -webkit-border-radius: 3px;
+          -moz-border-radius: 3px;
+          border-radius: 3px;
+          -webkit-transition: .2s margin .2s, .2s transform;
+          -moz-transition: .2s margin .2s, .2s transform;
+          transition: .2s margin .2s, .2s transform;
+
+          .dark-theme & {
+            background: $global-font-color-dark;
+          }
+        }
+
+        span:nth-child(1) {
+          margin-bottom: 8px;
+        }
+
+        span:nth-child(3) {
+          margin-top: 8px;
+        }
+
+        &.active {
+          span {
+            -webkit-transition: .2s margin, .2s transform .2s;
+            -moz-transition: .2s margin, .2s transform .2s;
+            transition: .2s margin, .2s transform .2s;
+          }
+
+          span:nth-child(1) {
+            -moz-transform: rotate(45deg) translate(4px, 6px);
+            -ms-transform: rotate(45deg) translate(4px, 6px);
+            -webkit-transform: rotate(45deg) translate(4px, 6px);
+            transform: rotate(45deg) translate(4px, 6px);
+          }
+
+          span:nth-child(2) {
+            opacity: 0
+          }
+
+          span:nth-child(3) {
+            -moz-transform: rotate(-45deg) translate(8px, -10px);
+            -ms-transform: rotate(-45deg) translate(8px, -10px);
+            -webkit-transform: rotate(-45deg) translate(8px, -10px);
+            transform: rotate(-45deg) translate(8px, -10px);
+          }
+        }
+      }
+    }
+
+    .navbar-menu {
+      text-align: center;
+      background: $global-background-color;
+      border-top: 2px solid $global-font-color;
+      display: none;
+      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
+
+      a {
+        display: block;
+        line-height: 2.5em;
+      }
+
+      &.active {
+        display: block;
+      }
+
+      .dark-theme & {
+        background: $global-background-color-dark;
+        border-top: 2px solid $global-font-color-dark;
+      }
+    }
+
+    .dark-theme & {
+      background: $global-background-color-dark;
+    }
+  }
 }
--- a/assets/css/_partial/_pagination.scss
+++ b/assets/css/_partial/_pagination.scss
@@ -1,5 +1,4 @@
  /** pagination **/
-
 .pagination {
  display: flex;
  flex-direction: row;
@@ -7,13 +6,13 @@
  list-style: none;
  white-space: nowrap;
  width: 100%;
-  padding-top: 1em;
+  padding-top: 1rem;

  a {
    -webkit-font-smoothing: antialiased;
-    font-size: 0.8em;
+    font-size: .8rem;
    color: #bfbfbf;
-    letter-spacing: 0.1em;
+    letter-spacing: .1rem;
    font-weight: 700;
    padding: 5px 5px;
    text-decoration: none;
--- a/assets/css/lib/VERSION
+++ b/assets/css/lib/VERSION
@@ -1,4 +1,5 @@
 fontawesome-free@5.10.1
 gittalk@1.5.0
 katex@0.11.0
-aplayer@1.10.1
+aplayer@1.10.1
+animate.css@3.7.2
--- a/assets/css/lib/animate/animate.min.css
+++ b/assets/css/lib/animate/animate.min.css