perf: better css styles

3 files changed, 67 insertions, 54 deletions

diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss
index 1c60a9a..997574d 100644
--- a/_sass/yat/_base.scss
+++ b/_sass/yat/_base.scss
@@ -30,6 +30,7 @@ body {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
+  transition-duration: $base-transition-duration;
 }
 
 
diff --git a/_sass/yat/_dark.scss b/_sass/yat/_dark.scss
index e9a7cb9..11bd327 100644
--- a/_sass/yat/_dark.scss
+++ b/_sass/yat/_dark.scss
@@ -1,5 +1,5 @@
-$dark-background-color:       #0e0e0e !default;
-$dark-text-color: #bbb !default;
+$dark-background-color: #0e0e0e !default;
+$dark-text-color: #b0b0b0 !default;
 
 html[data-theme="dark"]  {
   &[data-scroll-status='top'] {
@@ -89,7 +89,7 @@ html[data-theme="dark"]  {
   }
 
   .left-vsplit:before {
-    background-color: #9a9a9a;
+    background-color: #505050;
   }
 
   .page-banner {
@@ -101,10 +101,6 @@ html[data-theme="dark"]  {
   }
 
   .pagination {
-    .post-link {
-      color: $dark-text-color;
-    }
-
     .post-title {
       a:visited:after {
         background-color: $dark-background-color;
@@ -115,6 +111,14 @@ html[data-theme="dark"]  {
       }
     }
 
+    .post-link {
+      color: #bbb;
+    }
+
+    .post-excerpt {
+      color: $grey-color;
+    }
+
     .post-list {
       & > li:not(:last-child) {
         border-bottom: 1px solid #545454;
@@ -151,24 +155,29 @@ html[data-theme="dark"]  {
       img:not(.emoji):not([raw]) {
         background-color: #ffffff33;
       }
-    }
-  }
 
-  .post-related {
-    & > *:first-child {
-      color: #d7d7d7;
+      hr {
+        background-color: #555;
+      }
     }
 
-    a:visited:after {
-      background-color: $dark-background-color;
-    }
+    .post-related {
+      & > *:first-child {
+        color: #d7d7d7;
+      }
 
-    a:after {
-      color: $dark-background-color;
-    }
+      a:visited:after {
+        color: $dark-background-color;
+        background-color: $dark-background-color;
+      }
 
-    a:hover {
-      color: #aaa;
+      a:after {
+        color: $dark-background-color;
+      }
+
+      a:hover {
+        color: #aaa;
+      }
     }
   }
 
diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss
index eddb753..3931258 100644
--- a/_sass/yat/_layout.scss
+++ b/_sass/yat/_layout.scss
@@ -297,28 +297,30 @@ html {
         font-size: 10px;
         font-weight: 600;
         border-radius: 2px;
+        transition-duration: $base-transition-duration;
       }
 
       &:visited:after {
-        background-color: #fff;
+        color: $background-color;
+        background-color: $background-color;
       }
     }
   }
 
-  .post-meta {
-    font-size: $base-font-size;
-    color: $grey-color;
-    margin-bottom: $spacing-unit * 0.5;
-  }
-
   .post-link {
     @include relative-font-size(1.65);
     font-weight: $base-font-weight * 1.5;
     color: #333;
   }
 
+  .post-meta {
+    color: $grey-color;
+    font-size: $base-font-size;
+    margin-bottom: $spacing-unit * 0.5;
+  }
+
   .post-excerpt {
-    color: #777;
+    color: $grey-color;
     word-break: break-word;
     overflow-wrap: break-word;
   }
@@ -393,11 +395,12 @@ html {
     }
 
     .post-subtitle {
-      font-weight: lighter;
+      font-weight: 300;
     }
 
     .post-meta {
-      color: #808080;
+      color: $grey-color;
+      padding-bottom: 15px;
     }
   }
 
@@ -465,33 +468,32 @@ html {
 
     ul {
       margin-left: 15px;
-      .post-link {
-        @include relative-font-size(1.075);
-      }
+    }
 
-      a {
-        color: #666;
+    .post-link {
+      @include relative-font-size(1.075);
+      color: $grey-color;
 
-        &:hover {
-          color: #333;
-        }
+      &:hover {
+        color: darken($grey-color, 50%);
+      }
 
-        &:after {
-          content: 'NEW';
-          position: absolute;
-          margin-left: 8px;
-          margin-top: 3px;
-          padding: 0px 3px;
-          background-color: $brand-color;
-          color: #fff;
-          font-size: 10px;
-          font-weight: 600;
-          border-radius: 2px;
-        }
+      &:after {
+        content: 'NEW';
+        position: absolute;
+        margin-left: 8px;
+        margin-top: 3px;
+        padding: 0px 3px;
+        background-color: $brand-color;
+        color: $background-color;
+        font-size: 10px;
+        font-weight: 600;
+        border-radius: 2px;
+      }
 
-        &:visited:after {
-          background-color: #fff;
-        }
+      &:visited:after {
+        color: $background-color;
+        background-color: $background-color;
       }
     }
   }
@@ -513,8 +515,8 @@ html {
 
   a {
     @include relative-font-size(1.125);
+    color: $grey-color;
     line-height: 15px;
-    color: #666;
     max-width: 50%;
   }
 
@@ -651,6 +653,7 @@ html {
 
     .post-meta {
       color: #ffffffcc;
+      padding-bottom: 1em;
     }
 
     .left-vsplit:before {