Optimize the typography.

avirlrma · Feb 29, 2020 · 556f85a · 556f85a
1 parent 7e69afd
commit 556f85a
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 41 deletions.
diff --git a/_includes/panel.html b/_includes/panel.html
@@ -23,7 +23,7 @@
   {% endfor %}
 
   {% if lastmod_list.size > 0 %}
-    <div id="access-lastmod" class="post mb-4">
+    <div id="access-lastmod" class="post">
       <h3 data-toc-skip>
         {{- site.data.label.panel.lastmod -}}
       </h3>
@@ -57,7 +57,7 @@ <h3 data-toc-skip>
 
   {% if page.layout == 'post' and site.toc and page.toc %}
   <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-    <h3 data-toc-skip class="pl-3 pt-2">
+    <h3 data-toc-skip class="pl-3 pt-2 mb-3">
       {{- site.data.label.panel.toc -}}
     </h3>
     <nav id="toc" data-toggle="toc"></nav>

diff --git a/assets/css/_addon/module.scss b/assets/css/_addon/module.scss
@@ -29,18 +29,27 @@
   color: var(--link-color);
 }
 
+%link-underline {
+  border-bottom: 1px solid var(--link-underline-color);
+}
+
 %no-bottom-border {
   border-bottom: none;
 }
 
 %section {
-  line-height: 1.2;
-  margin-bottom: 1rem;
+  #post-wrapper & {
+    line-height: 1.2;
+    margin-bottom: 1rem;
+  }
 }
 
 %anchor {
-  padding-top: 3.5rem;
-  margin-top: -2.5rem;
+  #post-wrapper &,
+  #page & {
+    padding-top: 3.5rem;
+    margin-top: -2.5rem;
+  }
 }
 
 %footer-content {

diff --git a/assets/css/_colors/dark-typography.scss b/assets/css/_colors/dark-typography.scss
@@ -21,7 +21,7 @@
   --text-color: rgb(175, 176, 177);
   --text-muted-color: rgb(107, 116, 124);
   --link-color: rgb(138, 180, 248);
-  --link-underline-color: rgb(99, 131, 182);
+  --link-underline-color: rgb(82, 108, 150);
   --main-border-color: rgb(44, 45, 45);
   --button-bg: rgb(39, 40, 33);
   --blockquote-border-color: rgb(66, 66, 66);

diff --git a/assets/css/_colors/light-typography.scss b/assets/css/_colors/light-typography.scss
@@ -26,7 +26,7 @@
 
   --link-color: #2a408e;
 
-  --link-underline-color: #c2c6cc;
+  --link-underline-color: #dee2e6;
 
   --text-muted-color: gray;
 

diff --git a/assets/css/category-tag.scss b/assets/css/category-tag.scss
@@ -7,6 +7,7 @@
   © 2019 Cotes Chung
   MIT License
 */
+@import "_addon/module";
 
 #page-category, #page-tag {
   ul>li {
@@ -25,6 +26,7 @@
     }
     >a { /* post's title */
       font-size: 1.1rem;
+      @extend %no-bottom-border;
     }
     >span:last-child {
       white-space: nowrap;

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -387,6 +387,7 @@ $tab-count: {{ site.data.tabs | size }};
     margin: 0 1rem 1rem 0;
     &::before {
       content: "#";
+      color: var(--text-muted-color);
       padding-right: .2rem;
     }
   }
@@ -538,7 +539,7 @@ footer {
   transition: top 0.2s ease-in-out;
   margin-right: 1.5rem;
   margin-top: 3rem;
-  margin-bottom: 6rem;
+  margin-bottom: 4rem;
   color: #6c757d;
   &:only-child {
     position: -webkit-sticky; /* Safari */
@@ -550,8 +551,8 @@ footer {
   >div {
     padding-left: 1rem;
     border-left: 1px solid var(--main-border-color);
-    &:not(:first-child) {
-      margin-top: 4rem;
+    &:not(:last-child) {
+      margin-bottom: 4rem;
     }
   }
   h3 {
@@ -648,7 +649,6 @@ h2 {
   @extend %section;
   @extend %anchor;
   font-size: 1.35rem;
-  font-weight: 400;
 }
 
 h3 {
@@ -744,31 +744,17 @@ a {
       @extend %link-hover;
     }
   }
-  #page .categories & {
-    @extend %link-color;
-    @extend %no-bottom-border;
-  }
-  #tags & {
-    @extend %link-color;
-  }
-  #page-category & {
-    @extend %link-color;
-    @extend %no-bottom-border;
-  }
-  #page-tag & {
-    @extend %link-color;
-    @extend %no-bottom-border;
-  }
+  .categories &,
+  #page-category &,
+  #tags &,
   #archives & {
-    @extend %link-color;
-    @extend %no-bottom-border;
+    &:not(:hover) {
+      @extend %no-bottom-border;
+    }
   }
   .license-wrapper .license-text &:hover {
     @extend %link-hover;
   }
-  #page .post-content &:hover {
-    @extend %link-hover;
-  }
 
 } // a
 
@@ -834,8 +820,8 @@ table {
   font-size: 0.85rem;
   word-spacing: 1px;
   a {
-    color: var(--link-color);
-    border-bottom: 1px dotted var(--link-underline-color);
+    @extend %link-color;
+    @extend %link-underline;
     &:not(:last-child) {
       margin-right: 2px;
     }
@@ -847,17 +833,19 @@ table {
 
 .post-content {
   line-height: 1.8;
-  font-size: 1rem;
   margin-top: 2rem;
   overflow-wrap: break-word;
   word-wrap: break-word;
   a {
     @extend %link-color;
-    border-bottom: 1px dotted var(--link-underline-color);
+    @extend %link-underline;
     &:hover {
       @extend %link-hover;
     }
   }
+  p {
+    font-size: 1.08rem;
+  }
 }
 
 .tag:hover {
@@ -889,6 +877,10 @@ table {
   border: 1px solid !important;
   padding: 0 3px 1px 3px;
   border-radius: 3px;
+  color: var(--link-color);
+  &:focus {
+    box-shadow: none;
+  }
 }
 
 /* --- Effects classes --- */
@@ -984,10 +976,6 @@ table {
     @include ml-mr(1.8rem);
   }
 
-  .post-content {
-    font-size: 1.08rem;
-  }
-
   /* table text in small screens */
   div>table, p~table {
     width: 100%;
@@ -1287,6 +1275,10 @@ table {
     }
   }
 
+  .post-content p {
+    font-size: 1.03rem;
+  }
+
   footer>div.d-felx {
     width: 85%;
   }

diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
@@ -107,7 +107,13 @@ code {
     padding: 2px 4px;
     margin: 0 .3rem;
     border-radius: 4px;
-    border: 1px solid var(--code-highlighter-rouge); //var(--highlight-pre-bg, #e9ecef);
+    border: 1px solid var(--code-highlighter-rouge);
+  }
+  @at-root a>&.highlighter-rouge {
+    padding-bottom: 0; // show link's underlinke
+  }
+  @at-root a:hover>&.highlighter-rouge {
+    border-bottom: none;
   }
 }