README.md

@@ -1,4 +1,4 @@
-# hugo-theme-flat
+# hugo-theme-blank
 
 This is a theme I personally use.
 

exampleSite/config.toml

@@ -3,7 +3,7 @@ theme = "hugo-theme-flat"
 themesDir = "../.."
 enableRobotsTXT = true
 hasCJKLanguage = true
-paginate = 4
+paginate = 6
 baseURL = ""
 
 # these values are hugo built in markup config

static/css/style.css

@@ -6,36 +6,32 @@
   --color-light-bg-shadow: #E0E0E0;
   --color-light-fg-font-normal: #4E403E;
   --color-light-fg-font-hover: #555555;
+  --color-light-fg-font-block: #53504D;
   --color-light-fg-font-quote: #57606A;
   --color-light-fg-tiny-line: #e0e0e0;
   --color-light-fg-marker-quote: #BFBFBF;
-  --color-light-fg-font-hyper: #4E403E;
+  --color-light-fg-hyperlink: #FF5F61;
-  --color-light-fg-font-hyper-hover: #DE629E;
+  --color-light-fg-hyperlink-hover: #FC3134;
-  --color-light-fg-hyperlink: #DE629E;
+  --color-light-bg-pager: #000000;
-  --color-light-fg-hyperlink-hover: #CB3E50;
+  --color-light-fg-pager: #000000;
-  --color-light-bg-pager-normal: #D4D4D4;
-  --color-light-bg-pager-current: #E4E4E4;
-  --color-light-bg-pager-hover: #ECECEC;
 }
 
 /* defines dark color */
 :root {
-  --color-dark-bg-page: #202124;
+  --color-dark-bg-page: #2F2F2F;
-  --color-dark-bg-content: #262628;
+  --color-dark-bg-content: #453B3B;
-  --color-dark-bg-block: #2B2B2B;
+  --color-dark-bg-block: #4E403E;
   --color-dark-bg-shadow: #505050;
-  --color-dark-fg-font-normal: #C2C2B6;
+  --color-dark-fg-font-normal: #E8E8E8;
-  --color-dark-fg-font-hover: #D2D2D3;
+  --color-dark-fg-font-hover: #CECECD;
+  --color-dark-fg-font-block: #E8E8E8;
   --color-dark-fg-font-quote: #8B8680;
-  --color-dark-fg-tiny-line: #3B3B3B;
+  --color-dark-fg-tiny-line: #585858;
   --color-dark-fg-marker-quote: #6F6B66;
-  --color-dark-fg-font-hyper: #C2C2B6;
+  --color-dark-fg-hyperlink: #FF5F61;
-  --color-dark-fg-font-hyper-hover: #DE629E;
+  --color-dark-fg-hyperlink-hover: #FC3134;
-  --color-dark-fg-hyperlink: #DE629E;
+  --color-dark-bg-pager: #000000;
-  --color-dark-fg-hyperlink-hover: #CB3E50;
+  --color-dark-fg-pager: #000000;
-  --color-dark-bg-pager-normal: #303030;
-  --color-dark-bg-pager-current: #3A3A3E;
-  --color-dark-bg-pager-hover: #444446;
 }
 
 :root {
@@ -45,16 +41,14 @@
   --color-bg-shadow:          var(--color-light-bg-shadow);
   --color-fg-font-normal:     var(--color-light-fg-font-normal);
   --color-fg-font-hover:      var(--color-light-fg-font-hover);
+  --color-fg-font-block:      var(--color-light-fg-font-block);
   --color-fg-font-quote:      var(--color-light-fg-font-quote);
   --color-fg-tiny-line:       var(--color-light-fg-tiny-line);
   --color-fg-marker-quote:    var(--color-light-fg-marker-quote);
-  --color-fg-font-hyper:            var(--color-light-fg-font-hyper);
-  --color-fg-font-hyper-hover:      var(--color-light-fg-font-hyper-hover);
   --color-fg-hyperlink:       var(--color-light-fg-hyperlink);
   --color-fg-hyperlink-hover: var(--color-light-fg-hyperlink-hover);
-  --color-bg-pager-normal:          var(--color-light-bg-pager-normal);
+  --color-bg-pager:           var(--color-light-bg-pager);
-  --color-bg-pager-current:         var(--color-light-bg-pager-current);
+  --color-fg-pager:           var(--color-light-fg-pager);
-  --color-bg-pager-hover:           var(--color-light-bg-pager-hover);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -65,16 +59,14 @@
     --color-bg-shadow:          var(--color-dark-bg-shadow);
     --color-fg-font-normal:     var(--color-dark-fg-font-normal);
     --color-fg-font-hover:      var(--color-dark-fg-font-hover);
+    --color-fg-font-block:      var(--color-dark-fg-font-block);
     --color-fg-font-quote:      var(--color-dark-fg-font-quote);
     --color-fg-tiny-line:       var(--color-dark-fg-tiny-line);
     --color-fg-marker-quote:    var(--color-dark-fg-marker-quote);
-    --color-fg-font-hyper:          var(--color-dark-fg-font-hyper);
-    --color-fg-font-hyper-hover:    var(--color-dark-fg-font-hyper-hover);
     --color-fg-hyperlink:       var(--color-dark-fg-hyperlink);
     --color-fg-hyperlink-hover: var(--color-dark-fg-hyperlink-hover);
-    --color-bg-pager-normal:        var(--color-dark-bg-pager-normal);
+    --color-bg-pager:           var(--color-dark-bg-pager);
-    --color-bg-pager-current:       var(--color-dark-bg-pager-current);
+    --color-fg-pager:           var(--color-dark-fg-pager);
-    --color-bg-pager-hover:         var(--color-dark-bg-pager-hover);
   }
 }
 
@@ -92,6 +84,24 @@
   --fonts-mono-zh: "Noto Sans Mono CJK", "WenQuanYi Zen Hei Mono", "WenQuanYi Micro Hei Mono";
   --fonts-mono: var(--fonts-mono-en), var(--fonts-mono-zh), monospace;
 
+  --color-light-1: #e0e0e0;
+  --color-light-2: #e8e8e8;
+  --color-light-3: #f0f0f0;
+  --color-light-4: #f4f4f4;
+  --color-light-5: #fefefe;
+
+  --color-black-0: #909090;
+  --color-black-1: #686868;
+  --color-black-2: #404040;
+  --color-black-3: #282828;
+  --color-black-4: #101010;
+  --color-black-5: #020202;
+
+  --color-fav-0: #EDD5DD;
+  --color-fav-1: #F0B3B2;
+  --color-fav-2: #DE629E;
+  --color-fav-3: #CB3E50;
+
   --len-0: 0.00rem;
   --len-1: 0.25rem;
   --len-2: 0.50rem;
@@ -310,8 +320,14 @@ body {
 /* beautify hyper link style */
 .footer { color: var(--color-fg-font-normal) }
 
-.footer a       { color: var(--color-fg-hyperlink); text-decoration: none; }
+.footer a       { color: var(--color-fav-2); text-decoration: none; }
-.footer a:hover { color: var(--color-fg-hyperlink-hover); }
+.footer a:hover { color: var(--color-fav-3); }
+
+.footer img {
+    display: inline;
+    height: var(--font-size-1);
+    color: var(--color-fav-2);
+}
 
 /**********************************/
 /* set up home page's list layout */
@@ -332,8 +348,8 @@ body {
 
 .list-item .title a { text-decoration: none; color: var(--color-fg-font-normal); }
 .list-item .title a:hover { color: var(--color-fg-font-hover); }
-.list-item .tips a { text-decoration: none; color: var(--color-fg-hyperlink); }
+.list-item .tips a { text-decoration: none; color: var(--color-fav-2) }
-.list-item .tips a:hover { color: var(--color-fg-hyperlink-hover); }
+.list-item .tips a:hover { color: var(--color-fav-3) }
 
 .list-item .title { margin: var(--len-2) 0 var(--len-3) 0; }
 
@@ -377,7 +393,7 @@ body {
 .side > *:last-child { margin-bottom: 0; }
 
 .side a       { color: var(--color-fg-font-normal); text-decoration: none; }
-.side a:hover { color: var(--color-fg-hyperlink); }
+.side a:hover { color: var(--color-fav-2); }
 
 /* horizontally place tags */
 .side .side-tags li { display: inline-block; margin: var(--len-1) var(--len-1); }
@@ -392,8 +408,8 @@ body {
   align-items: center;
 }
 
-.single a { text-decoration: none; color: var(--color-fg-hyperlink); }
+.single a { text-decoration: none; color: var(--color-fav-2); }
-.single a:hover { color: var(--color-fg-hyperlink-hover); }
+.single a:hover { color: var(--color-fav-3); }
 
 .single .title,
 .single .tip,
@@ -405,7 +421,7 @@ body {
 
 .single > hr {
   border: none;
-  background-color: var(--color-fg-tiny-line);
+  background-color: var(--color-fav-1);
   height: 1px;
 
   width: 90%;
@@ -543,6 +559,7 @@ body {
 }
 .content .anchor {
   visibility: hidden;
+  color: var(--color-fav-2);
 }
 .content h1:hover a,
 .content h2:hover a,
@@ -589,8 +606,8 @@ body {
 
 #archive .group .value a { text-decoration: none; }
 
-#archive .group .value a { color: var(--color-fg-font-hyper); }
+#archive .group .value a { color: var(--color-fg-font-normal); }
-#archive .group .value a:hover { color: var(--color-fg-font-hyper-hover); }
+#archive .group .value a:hover { color: var(--color-fav-2); }
 
 #archive .group .value .tags {
   display: inline-block;
@@ -667,17 +684,17 @@ body {
   text-decoration: none;
 
   color: var(--color-fg-font-normal);
-  background-color: var(--color-bg-pager-normal);
+  background-color: var(--color-fg-hyperlink-hover);
 
   transition: background-color 0.25s;
 }
 
 .pagination a:hover {
-  background-color: var(--color-bg-pager-hover);
+  background-color: var(--color-fav-0);
 }
 
 .pagination a.current {
-  background-color: var(--color-bg-pager-current);
+  background-color: var(--color-fav-1);
   pointer-events: none;
   color: var(--color-fg-font-normal);
   cursor: default;
@@ -703,7 +720,7 @@ body {
 
 .archive-hint {
   padding-left: var(--len-4);
-  color: var(--color-fg-font-quote);
+  color: var(--color-fav-1);
 }
 
 .max-wrapper {