Optimize typography

- Set the table width to 100% on small screens
- Optimize list style
- Optimize image style
- Make checkbox color lighter (light mode)
- Reduce the space for inline code

assets/css/_addon/fonts.scss

@@ -1,7 +0,0 @@
-/*
- * The field 'font-display' is added for Google-fonts.
- *
- * See: <https://fonts.google.com/>
- */
-
-@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Condensed:wght@400;700&family=Source+Sans+Pro:wght@400;600;700;900&display=swap');

assets/css/_addon/main.scss

@@ -6,12 +6,13 @@
 * MIT Licensed
 */
 
-@import "_addon/fonts";
 @import "_addon/module";
 @import "_addon/variables";
 @import "_colors/light-typography";
 @import "_colors/dark-typography";
 
+@import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap');
+
 
 @mixin mode-toggle($dark-mode: false) {
   @if $dark-mode {
@@ -362,6 +363,7 @@ $sidebar-display: "sidebar-display";
   border-radius: 0;
   padding: 0.18rem 0.3rem;
   color: var(--text-color);
+  font-size: 95%;
 }
 
 #search-input {
@@ -677,16 +679,17 @@ sup {
   }
 }
 
-.footnotes ol {
+.footnotes > ol {
+  padding-left: 2rem;
   margin-top: 0.5rem;
   > li {
-    padding-top: 0.2rem;
+    + li {
-    margin-top: -0.2rem;
+      margin-top: 0.3rem;
-    > p {
-      padding-left: 0.2em;
     }
-    &:not(:last-child) {
+    > p {
-      margin-bottom: -.8rem;
+      margin-left: 0.25em;
+      margin-top: 0;
+      margin-bottom: 0;
     }
     &:target > p {
       background-color: var(--footnote-target-bg);
@@ -771,7 +774,7 @@ div.post-content .table-wrapper {
   overflow-x: auto;
 
   > table {
-    min-width: 60%;
+    min-width: 100%;
     overflow-x: auto;
     border-spacing: 0;
     margin-bottom: 1.5rem;
@@ -830,17 +833,28 @@ div.post-content .table-wrapper {
   overflow-wrap: break-word;
   word-wrap: break-word;
 
-  @mixin img($caption: false) {
+  img[data-src] {
-    > img[data-src] {
     margin: 0.5rem 0;
+  }
 
-      &:not(.normal):not(.left):not(.right) {
+  @mixin img-caption {
-        @include align-center;
+    + em {
+      display: block;
+      text-align: center;
+      font-style: normal;
+      font-size: 80%;
+      padding: 0;
+      color: #6d6c6c;
+    }
+  }
+
+  @mixin img($caption: false) {
+
+    > img[data-src] {
 
       @if $caption {
         @include img-caption;
       }
-      }
 
       &.left {
         float: left;
@@ -855,17 +869,6 @@ div.post-content .table-wrapper {
     }
   }
 
-  @mixin img-caption {
-    + em {
-      display: block;
-      text-align: center;
-      font-style: normal;
-      font-size: 80%;
-      padding: 0;
-      color: #6d6c6c;
-    }
-  }
-
   a {
     &:not(.img-hyperlink) {
       @extend %link-color;
@@ -880,16 +883,18 @@ div.post-content .table-wrapper {
     }
   }
 
+  > p {
+    > img[data-src]:not(.normal):not(.left):not(.right) {
+      @include align-center;
+    }
+  }
+
   p {
     font-size: 1.08rem;
     @include img(true);
-  }// p
-
-  ul {
-    &.task-list, &:not([class]) {
-      padding-left: 2rem;
   }
 
+  ul {
     // attribute 'hide-bullet' was added by liquid
     .task-list-item[hide-bullet] {
       list-style-type: none;
@@ -912,6 +917,32 @@ div.post-content .table-wrapper {
 
   } // ul
 
+  > ol, > ul {
+    padding-left: 2rem;
+
+    li {
+      + li {
+        margin-top: 0.3rem;
+      }
+
+      ol, ul { // sub list
+        padding-left: 2rem;
+        margin-top: 0.3rem;
+      }
+    }
+
+  }
+
+  > ol {
+    li {
+      padding-left: 0.25em;
+    }
+  }
+
+  dl > dd {
+    margin-left: 1rem;
+  }
+
 } // .post-content
 
 .tag:hover {
@@ -1178,7 +1209,7 @@ div.post-content .table-wrapper {
 
   .footnotes ol > li {
     padding-top: 3.5rem;
-    margin-top: -4.3rem;
+    margin-top: -3.2rem !important;
     &:first-child {
       margin-top: -3.5rem;
     }
@@ -1214,6 +1245,10 @@ div.post-content .table-wrapper {
     min-width: 150px;
   }
 
+  div.post-content .table-wrapper > table {
+    min-width: 70%;
+  }
+
   /* button 'back-to-Top' position */
   #back-to-top {
     bottom: 5.5rem;

assets/css/_addon/module.scss

@@ -96,7 +96,6 @@
   color: $color;
   font-size: $font-size;
   font-weight: $font-weight;
-  font-family: 'Roboto Condensed', 'Microsoft Yahei', sans-serif;
 }
 
 @mixin panel-label {

assets/css/_addon/syntax.scss

@@ -56,6 +56,7 @@ div > pre {
   @extend %code-snippet-radius;
 
   color: var(--highlighter-rouge-color);
+  margin-top: 0.5rem;
   margin-bottom: 1.2em; /* Override BS Inline-code style */
 }
 
@@ -111,7 +112,6 @@ code {
   &.highlighter-rouge {
     font-size: $code-font-size;
     padding: 3px 5px;
-    margin: 0 0.15rem;
     border-radius: 4px;
     background-color: var(--inline-code-bg);
   }

assets/css/_colors/light-typography.scss

@@ -25,7 +25,7 @@
   --btn-backtotop-color: #686868;
   --btn-backtotop-border-color: #f1f1f1;
   --btn-box-shadow: #eaeaea;
-  --checkbox-color: darkgrey;
+  --checkbox-color: #c5c5c5;
   --checkbox-checked-color: #07a8f7;
 
   /* Sidebar */
@@ -59,7 +59,7 @@
   --btn-share-hover-color: var(--link-color);
   --card-border-color: #f1f1f1;
   --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
-  --label-color: #808080;
+  --label-color: #616161;
   --relate-post-date: rgba(30, 55, 70, 0.4);
   --tag-bg: rgba(0, 0, 0, 0.075);
   --tag-border: #dee2e6;

assets/css/archives.scss

@@ -19,10 +19,6 @@
   background-color: var(--timeline-color);
 }
 
-%date-font {
-  font-family: 'Roboto Condensed', sans-serif;
-}
-
 #archives {
   letter-spacing: 0.03rem;
   li {
@@ -42,7 +38,6 @@
 
   span.lead {
     font-size: 1.5rem;
-    @extend %date-font;
     position: relative;
     left: 8px;
 
@@ -54,8 +49,7 @@
       }
     }
 
-    &::after {
+    &::after { /* Year dot */
-      /* Year dot */
       content: "";
       display: block;
       position: relative;
@@ -80,8 +74,8 @@
     &.month {
       width: 1.4rem;
       text-align: center;
-      @extend %date-font;
+
-      ~a::before {
+      ~ a::before {
         /* A dot for Month and Day */
         content: "";
         display: inline-block;

assets/css/post.scss

@@ -49,21 +49,6 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 }
 
 .post-content {
-  > ol, > ul, > dl {
-    padding-left: 2rem;
-    li + li {
-      margin-top: 0.3rem;
-    }
-  }
-  li {
-    > ol, > ul, > dl { // sub list
-      padding-left: 2rem;
-      margin-top: 0.3rem;
-    }
-    > p {
-      margin: 1rem 0 0.8rem;
-    }
-  }
   .preview-img {
     margin-top: 0;
     margin-bottom: 2.5rem;
@@ -182,7 +167,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     @include label(1.1rem, 600);
   }
   .card {
-    border: 1px solid var(--card-border-color);
+    border-color: var(--card-border-color);
     background-color: var(--card-bg);
     box-shadow: 0 0 5px 0 var(--card-box-shadow);
     -webkit-transition: all 0.3s ease-in-out;
@@ -194,7 +179,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     &:hover {
       -webkit-transform: translate3d(0, -3px, 0);
       transform: translate3d(0, -3px, 0);
-      box-shadow: 0 20px 35px -4px rgba(0, 0, 0, 0.15);
+      box-shadow: 0 10px 15px -4px rgba(0,0,0,0.15);
     }
   }