Tweak style

* New design for links
* Items in posts list now have a bottom border
* Cache social icons generation to improve performance

assets/scss/_predefined.scss

@@ -1,6 +1,6 @@
 // Colors
 //
-$theme: rgba(26, 188, 156, .5);
+$theme: #018574;
 $text: #c6cddb;
 $light-grey: #494f5c;
 $dark-grey: #3B3E48;
@@ -10,7 +10,7 @@ $midnightblue: #2c3e50;
 // Fonts
 //
 $fonts: "Trebuchet MS", Verdana, "Verdana Ref", "Segoe UI", Candara, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
-$code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, "YaHei Consolas Hybrid", monospace, 'Segoe UI Emoji', 'DengXian';
+$code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", "Microsoft YaHei";
 
 // Mixins
 //
@@ -20,10 +20,10 @@ $code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida C
 
 @mixin aTag {
   a {
-    border-bottom: 2px solid $theme;
-    padding: 1px 2px;
-    transition-property: background-color, color;
     word-break: break-all;
+    border: none;
+    box-shadow: inset 0 -4px 0 $theme;
+    transition-property: background-color;
 
     &:hover {
       background-color: $theme;

assets/scss/style.scss

@@ -89,14 +89,13 @@ blockquote {
 a {
   color: $text;
   text-decoration: none;
-  border-bottom: 1px solid $text;
-  transition-property: color, border-color;
-  transition-duration: .5s;
+  border: none;
+  transition-property: color;
+  transition-duration: .4s;
   transition-timing-function: ease-out;
 
   &:hover {
     color: #fff;
-    border-bottom: 1px solid #fff;
   }
 }
 
@@ -139,11 +138,6 @@ table {
   margin: auto;
 }
 
-.social-icons a {
-  border: none;
-  margin: 0 .2em;
-}
-
 .feather {
   display: inline-block;
   vertical-align: -.125em;
@@ -205,10 +199,6 @@ table {
   padding: .5em 0;
   font-size: 1.2rem;
 
-  a {
-    border: none;
-  }
-
   .site-branding {
     display: inline-block;
     margin-right: .8em;
@@ -231,7 +221,7 @@ table {
   font-size: 1.2em;
 
   a {
-    margin-left: .3em;
+    margin-left: .4em;
   }
 }
 
@@ -258,10 +248,6 @@ table {
   box-shadow: -1px -2px 3px 0px rgba(0, 0, 0, 0.45);
   background-color: $dark-grey;
 
-  a {
-    border: none;
-  }
-
   ul {
     list-style: none;
     margin: 0;
@@ -280,10 +266,6 @@ table {
   p {
     margin: 0;
   }
-
-  a {
-    border: none;
-  }
 }
 
 // Spotlight
@@ -365,11 +347,14 @@ p.catguard {
 #home-social {
   font-size: 1.4em;
   text-align: center;
+
+  a {
+    margin: 0 .2em;
+  }
 }
 
 #home-nav a {
   display: block;
-  border: none;
   text-align: center;
   margin-top: .5em;
 }
@@ -382,10 +367,6 @@ p.catguard {
   p {
     margin-top: 0;
   }
-
-  a {
-    border: none;
-  }
 }
 
 // list.html
@@ -411,6 +392,7 @@ p.catguard {
     margin-bottom: 10px;
     padding: 2px 4px;
     border-radius: 3px;
+    border-bottom: 1px $highlight-grey dashed;
     transition-property: background-color;
     transition-duration: .5s;
     transition-timing-function: ease-out;
@@ -419,7 +401,6 @@ p.catguard {
       display: flex;
       justify-content: space-between;
       align-items: baseline;
-      border: none;
     }
 
     &:hover {
@@ -456,7 +437,7 @@ p.catguard {
 }
 
 #show-img-btn {
-  margin-right: .5em;
+  margin-right: .3em;
 }
 
 .post-header {
@@ -527,7 +508,8 @@ figure.right {
 
 .footnote-ref a,
 a.footnote-return {
-  border: none;
+  box-shadow: none;
+  text-decoration: underline;
 
   &:hover {
     background: transparent;
@@ -539,12 +521,16 @@ a.footnote-return {
   line-height: normal;
   @include dimmed;
 
-  svg {
-    margin-right: .8em;
+  p {
+    margin: .8em 0;
   }
 
   a {
-    border: transparent;
+    text-decoration: underline;
+  }
+
+  svg {
+    margin-right: .8em;
   }
 
   .tag {
@@ -565,7 +551,6 @@ a.footnote-return {
   a {
     flex-basis: 50%;
     flex-grow: 1;
-    border-bottom: transparent;
   }
 
   .next-post {text-align: left; padding-right: 5px;}
@@ -619,12 +604,11 @@ a.footnote-return {
     opacity: .5;
   }
 
-  .vat {
+  .vat:hover {
     color: $theme;
   }
 
   .vh {
-
     border-bottom: transparent;
 
     .vquote {

layouts/index.html

@@ -3,10 +3,8 @@
 		<div id="home-center">
 			<h1 id="home-title">Track3's Blog</h1>
 			{{- with .Site.Params.social }}
-			<div id="home-social" class="social-icons">
-				{{ range . -}}
-				<a href="{{ .url }}" target="_blank" rel="noopener"><span class="screen-reader-text">{{ .name }}</span>{{ partial "social-svg.html" . }}</a>
-				{{- end }}
+			<div id="home-social">
+				{{ partialCached "social-icons.html" . }}
 			</div>
 			{{- end }}
 			<nav id="home-nav" class="site-nav">

layouts/partials/header.html

@@ -15,9 +15,11 @@
 					{{- with .Params.featuredImg }}
 					<button id="show-img-btn" class="hdr-btn" onclick="showFeaturedImg()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
 					{{- end }}
-					{{- range .Site.Params.social -}}
-					<a class="hide-in-mobile" href="{{ .url }}" target="_blank" rel="noopener"><span class="screen-reader-text">{{ .name }}</span>{{ partial "social-svg.html" . }}</a>
-					{{- end -}}
+					{{- with .Site.Params.social }}
+					<span class="hide-in-mobile">
+						{{- partialCached "social-icons.html" . -}}
+					</span>
+					{{- end }}
 					<!-- <button id="search-btn" class="hdr-btn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></button> -->
 					<!-- <button id="toc-btn" class="hdr-btn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg></button> -->
 					<button id="menu-btn" class="hdr-btn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>

layouts/partials/social-icons.html

@@ -0,0 +1,3 @@
+{{ range . -}}
+<a href="{{ .url }}" target="_blank" rel="noopener"><span class="screen-reader-text">{{ .name }}</span>{{ partial "social-svg.html" . }}</a>
+{{- end }}