feat: tidy style and layout

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;
-  }
 }

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;
+  }
 }

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;
 }

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;

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;
   }
 }