feat: customer theme

assets/scss/partials/article.scss

@@ -15,7 +15,7 @@
         transition: box-shadow 0.3s ease;
 
         &:hover {
-            box-shadow: var(--shadow-l2);
+            box-shadow: var(--shadow-l1);
         }
 
         .article-image {
@@ -54,7 +54,7 @@
 }
 
 .article-title {
-    font-family: var(--article-font-family);
+    font-family: var(--zh-font-family);
     font-weight: 600;
     margin: 0;
     color: var(--card-text-color-main);

assets/scss/variables.scss

@@ -11,12 +11,12 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
         --main-top-padding: 50px;
     }
 
-    --body-background: #f5f5fa;
+    --body-background: #EAE0DA;
 
-    --accent-color: #34495e;
+    --accent-color: #352F44;
-    --accent-color-darker: #2c3e50;
+    --accent-color-darker: #5C5470;
     --accent-color-text: #fff;
-    --body-text-color: #707070;
+    --body-text-color: #5C5470;
 
     --tag-border-radius: 4px;
 
@@ -41,7 +41,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 */
 :root {
     --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
-    --zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
+    --zh-font-family: "CEJK05-W05", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
 
     --base-font-family: "Lato", var(--sys-font-family), var(--zh-font-family), sans-serif;
     --code-font-family: Menlo, Monaco, Consolas, "Courier New", var(--zh-font-family), monospace;
@@ -51,15 +51,15 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 *   Card style
 */
 :root {
-    --card-background: #fff;
+    --card-background: #f7f5eb;
     --card-background-selected: #eaeaea;
 
-    --card-text-color-main: #000;
+    --card-text-color-main: #352F44;
-    --card-text-color-secondary: #747474;
+    --card-text-color-secondary: #5C5470;
-    --card-text-color-tertiary: #767676;
+    --card-text-color-tertiary: #5C5470;
     --card-separator-color: rgba(218, 218, 218, 0.5);
 
-    --card-border-radius: 10px;
+    --card-border-radius: 5px;
 
     --card-padding: 20px;
 
@@ -141,7 +141,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 *   Thanks to https://www.figma.com/community/plugin/744987207861965946/Shadow-picker
 */
 :root {
-    --shadow-l1: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
+    --shadow-l1: 0px px 2px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
     --shadow-l2: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
     --shadow-l3: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
     --shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),

layouts/_default/archives.html

@@ -8,7 +8,7 @@
         <div class="subsection-list">
             <div class="article-list--tile">
                 {{ range $terms }}
-                    {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
+                    {{ partial "article-list/tile" (dict "context" . "size" "250x50" "Type" "taxonomy") }}
                 {{ end }}
             </div>
         </div>

layouts/partials/article/components/details.html

@@ -1,14 +1,4 @@
 <div class="article-details">
-    {{ if .Params.categories }}
-    <header class="article-category">
-        {{ range (.GetTerms "categories") }}
-            <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
-                {{ .LinkTitle }}
-            </a>
-        {{ end }}
-    </header>
-    {{ end }}
-
     <div class="article-title-wrapper">
         <h2 class="article-title">
             <a href="{{ .RelPermalink }}">
@@ -38,14 +28,16 @@
             </div>
         {{ end }}
 
-        {{ if $showWordCount }}
         <div>
-            {{ partial "helper/icon" "pen" }}
+            <time class="article-time--published">
-            <time class="article-time--reading">
+            {{ if .Params.categories }}
-                {{ .WordCount }} Words
+                {{ partial "helper/icon" "tag" }}
+                {{ range (.GetTerms "categories") }}
+                    {{ .LinkTitle }}
+                {{ end }}
+            {{ end }}
             </time>
         </div> 
-        {{ end }}
 
         {{ if $showReadingTime }}
             <div>

layouts/partials/head/custom.html

@@ -0,0 +1,32 @@
+<style>
+  :root {
+    --sys-font-family: "LXGW WenKai Screen R";
+    --zh-font-family: "LXGW WenKai Screen R";
+    --base-font-family: "LXGW WenKai Screen R";
+    --code-font-family: "LXGW WenKai Screen R";
+    --article-font-family: "Noto Serif SC";
+  }
+</style>
+
+<script>
+  (function () {
+    const customFont = document.createElement("link");
+    customFont.href =
+      "https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreenr.css";
+
+    customFont.type = "text/css";
+    customFont.rel = "stylesheet";
+
+    document.head.appendChild(customFont);
+  })();
+  (function () {
+    const customFont = document.createElement("link");
+    customFont.href =
+      "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap";
+
+    customFont.type = "text/css";
+    customFont.rel = "stylesheet";
+
+    document.head.appendChild(customFont);
+  })();
+</script>

layouts/partials/sidebar/left.html

@@ -30,7 +30,6 @@
             </figure>
             {{ end }}
         {{ end }}
-        
         <div class="site-meta">
             <h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
             <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>