refactor color, set paginate to 4 to show the pager

- Modify color of dark theme, so it will darker and less warm.
- Remove the color `--color-fav-x` and replace with colors those
  defined in dark or light
- set paginate to 4 to show the pager in example site.

README.md

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

exampleSite/config.toml

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

static/css/style.css

@@ -6,32 +6,36 @@
   --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-hyperlink: #FF5F61;
-  --color-light-fg-hyperlink-hover: #FC3134;
-  --color-light-bg-pager: #000000;
-  --color-light-fg-pager: #000000;
+  --color-light-fg-font-hyper: #4E403E;
+  --color-light-fg-font-hyper-hover: #DE629E;
+  --color-light-fg-hyperlink: #DE629E;
+  --color-light-fg-hyperlink-hover: #CB3E50;
+  --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: #2F2F2F;
-  --color-dark-bg-content: #453B3B;
-  --color-dark-bg-block: #4E403E;
+  --color-dark-bg-page: #202124;
+  --color-dark-bg-content: #262628;
+  --color-dark-bg-block: #2B2B2B;
   --color-dark-bg-shadow: #505050;
-  --color-dark-fg-font-normal: #E8E8E8;
-  --color-dark-fg-font-hover: #CECECD;
-  --color-dark-fg-font-block: #E8E8E8;
+  --color-dark-fg-font-normal: #C2C2B6;
+  --color-dark-fg-font-hover: #D2D2D3;
   --color-dark-fg-font-quote: #8B8680;
-  --color-dark-fg-tiny-line: #585858;
+  --color-dark-fg-tiny-line: #3B3B3B;
   --color-dark-fg-marker-quote: #6F6B66;
-  --color-dark-fg-hyperlink: #FF5F61;
-  --color-dark-fg-hyperlink-hover: #FC3134;
-  --color-dark-bg-pager: #000000;
-  --color-dark-fg-pager: #000000;
+  --color-dark-fg-font-hyper: #C2C2B6;
+  --color-dark-fg-font-hyper-hover: #DE629E;
+  --color-dark-fg-hyperlink: #DE629E;
+  --color-dark-fg-hyperlink-hover: #CB3E50;
+  --color-dark-bg-pager-normal: #303030;
+  --color-dark-bg-pager-current: #3A3A3E;
+  --color-dark-bg-pager-hover: #444446;
 }
 
 :root {
@@ -41,14 +45,16 @@
   --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:           var(--color-light-bg-pager);
-  --color-fg-pager:           var(--color-light-fg-pager);
+  --color-bg-pager-normal:          var(--color-light-bg-pager-normal);
+  --color-bg-pager-current:         var(--color-light-bg-pager-current);
+  --color-bg-pager-hover:           var(--color-light-bg-pager-hover);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -59,14 +65,16 @@
     --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:           var(--color-dark-bg-pager);
-    --color-fg-pager:           var(--color-dark-fg-pager);
+    --color-bg-pager-normal:        var(--color-dark-bg-pager-normal);
+    --color-bg-pager-current:       var(--color-dark-bg-pager-current);
+    --color-bg-pager-hover:         var(--color-dark-bg-pager-hover);
   }
 }
 
@@ -84,24 +92,6 @@
   --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;
@@ -320,14 +310,8 @@ body {
 /* beautify hyper link style */
 .footer { color: var(--color-fg-font-normal) }
 
-.footer a       { color: var(--color-fav-2); text-decoration: none; }
-.footer a:hover { color: var(--color-fav-3); }
-
-.footer img {
-    display: inline;
-    height: var(--font-size-1);
-    color: var(--color-fav-2);
-}
+.footer a       { color: var(--color-fg-hyperlink); text-decoration: none; }
+.footer a:hover { color: var(--color-fg-hyperlink-hover); }
 
 /**********************************/
 /* set up home page's list layout */
@@ -348,8 +332,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-fav-2) }
-.list-item .tips a:hover { color: var(--color-fav-3) }
+.list-item .tips a { text-decoration: none; color: var(--color-fg-hyperlink); }
+.list-item .tips a:hover { color: var(--color-fg-hyperlink-hover); }
 
 .list-item .title { margin: var(--len-2) 0 var(--len-3) 0; }
 
@@ -393,7 +377,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-fav-2); }
+.side a:hover { color: var(--color-fg-hyperlink); }
 
 /* horizontally place tags */
 .side .side-tags li { display: inline-block; margin: var(--len-1) var(--len-1); }
@@ -408,8 +392,8 @@ body {
   align-items: center;
 }
 
-.single a { text-decoration: none; color: var(--color-fav-2); }
-.single a:hover { color: var(--color-fav-3); }
+.single a { text-decoration: none; color: var(--color-fg-hyperlink); }
+.single a:hover { color: var(--color-fg-hyperlink-hover); }
 
 .single .title,
 .single .tip,
@@ -421,7 +405,7 @@ body {
 
 .single > hr {
   border: none;
-  background-color: var(--color-fav-1);
+  background-color: var(--color-fg-tiny-line);
   height: 1px;
 
   width: 90%;
@@ -559,7 +543,6 @@ body {
 }
 .content .anchor {
   visibility: hidden;
-  color: var(--color-fav-2);
 }
 .content h1:hover a,
 .content h2:hover a,
@@ -606,8 +589,8 @@ body {
 
 #archive .group .value a { text-decoration: none; }
 
-#archive .group .value a { color: var(--color-fg-font-normal); }
-#archive .group .value a:hover { color: var(--color-fav-2); }
+#archive .group .value a { color: var(--color-fg-font-hyper); }
+#archive .group .value a:hover { color: var(--color-fg-font-hyper-hover); }
 
 #archive .group .value .tags {
   display: inline-block;
@@ -684,17 +667,17 @@ body {
   text-decoration: none;
 
   color: var(--color-fg-font-normal);
-  background-color: var(--color-fg-hyperlink-hover);
+  background-color: var(--color-bg-pager-normal);
 
   transition: background-color 0.25s;
 }
 
 .pagination a:hover {
-  background-color: var(--color-fav-0);
+  background-color: var(--color-bg-pager-hover);
 }
 
 .pagination a.current {
-  background-color: var(--color-fav-1);
+  background-color: var(--color-bg-pager-current);
   pointer-events: none;
   color: var(--color-fg-font-normal);
   cursor: default;
@@ -720,7 +703,7 @@ body {
 
 .archive-hint {
   padding-left: var(--len-4);
-  color: var(--color-fav-1);
+  color: var(--color-fg-font-quote);
 }
 
 .max-wrapper {