perf: better css styles

6 files changed, 86 insertions, 68 deletions

diff --git a/_sass/misc/article-menu.scss b/_sass/misc/article-menu.scss
index bc168f5..418b4f3 100644
--- a/_sass/misc/article-menu.scss
+++ b/_sass/misc/article-menu.scss
@@ -11,7 +11,6 @@
     font-size: $base-font-size * 1.5;
     margin-bottom: 14px;
     font-weight: 600;
-    color: #222;
   }
 
   .post-menu-content {
@@ -39,7 +38,7 @@
 
         &:hover {
           text-decoration: none;
-          color: lighten($text-color, 20%)!important;
+          color: lighten($text-color, 30%)!important;
         }
       }
 
diff --git a/_sass/misc/theme-toggle.scss b/_sass/misc/theme-toggle.scss
index 0041677..4b79078 100644
--- a/_sass/misc/theme-toggle.scss
+++ b/_sass/misc/theme-toggle.scss
@@ -36,14 +36,19 @@
     user-select: none;
   }
 
-  .dark {
+  .names p {
+    margin-bottom: 0;
+    line-height: 24px;
     opacity: .5;
   }
 
-  p {
-    color: #acacac;
-    margin-bottom: 0;
-    line-height: 24px;
+  label .light {
+    color: #868686;
+    margin-left: -0.2em;
+  }
+
+  label .dark {
+    color: #b9b9b9;
   }
 
   [type="checkbox"] {
@@ -56,12 +61,12 @@
     background-color: #34323D;
   }
 
-  [type="checkbox"]:checked ~ label .dark{
-    opacity: 1;
+  [type="checkbox"]:checked ~ label .dark {
+    color: #ddd;
   }
 
-  [type="checkbox"]:checked ~ label .light{
-    opacity: .5;
+  [type="checkbox"]:checked ~ label .light {
+    color: #ccc;
   }
 
   @include media-query(1024px) {
diff --git a/_sass/yat.scss b/_sass/yat.scss
index eda2d97..3bbc212 100644
--- a/_sass/yat.scss
+++ b/_sass/yat.scss
@@ -2,18 +2,19 @@
 
 // Define defaults for each variable.
 
-$base-font-family: Helvetica, Arial, Oswald, sans-serif, !default;
+$base-font-family: Helvetica Neue, Helvetica, Arial, sans-serif, !default;
 $base-font-size: 14px !default;
 $base-font-weight: 400 !default;
 $small-font-size:  $base-font-size * 0.875 !default;
 $base-line-height: 1.6 !default;
+$base-transition-duration: 0.3s !default;
 
 $spacing-unit:     30px !default;
 
-$text-color:       #454545 !default;
+$text-color:       #1d1d1f !default;
 $background-color: #fff !default;
 
-$grey-color:       #828282 !default;
+$grey-color:       #777 !default;
 $grey-color-light: lighten($grey-color, 40%) !default;
 $grey-color-dark:  darken($grey-color, 25%) !default;
 
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 {