leafee98/hugo-theme-flat
1
1
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor color, set paginate to 4 to show the pager

Browse source 
- 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.
This commit is contained in:
leafee98 2023-05-28 22:09:18 +08:00
parent 99ca8932e1
commit 6ac660eee2
2 changed files with 67 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
exampleSite/config.toml
View file

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

136
static/css/style.css
View file

@ -6,67 +6,75 @@
--color-light-bg-shadow: #E0E0E0; --color-light-bg-shadow: #E0E0E0;
--color-light-fg-font-normal: #4E403E; --color-light-fg-font-normal: #4E403E;
--color-light-fg-font-hover: #555555; --color-light-fg-font-hover: #555555;
--color-light-fg-font-block: #53504D;
--color-light-fg-font-quote: #57606A; --color-light-fg-font-quote: #57606A;
--color-light-fg-tiny-line: #e0e0e0; --color-light-fg-tiny-line: #e0e0e0;
--color-light-fg-marker-quote: #BFBFBF; --color-light-fg-marker-quote: #BFBFBF;
--color-light-fg-hyperlink: #FF5F61; --color-light-fg-font-hyper: #4E403E;
--color-light-fg-hyperlink-hover: #FC3134; --color-light-fg-font-hyper-hover: #DE629E;
--color-light-bg-pager: #000000; --color-light-fg-hyperlink: #DE629E;
--color-light-fg-pager: #000000; --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 */ /* defines dark color */
:root { :root {
--color-dark-bg-page: #2F2F2F; --color-dark-bg-page: #202124;
--color-dark-bg-content: #453B3B; --color-dark-bg-content: #262628;
--color-dark-bg-block: #4E403E; --color-dark-bg-block: #2B2B2B;
--color-dark-bg-shadow: #505050; --color-dark-bg-shadow: #505050;
--color-dark-fg-font-normal: #E8E8E8; --color-dark-fg-font-normal: #C2C2B6;
--color-dark-fg-font-hover: #CECECD; --color-dark-fg-font-hover: #D2D2D3;
--color-dark-fg-font-block: #E8E8E8;
--color-dark-fg-font-quote: #8B8680; --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-marker-quote: #6F6B66;
--color-dark-fg-hyperlink: #FF5F61; --color-dark-fg-font-hyper: #C2C2B6;
--color-dark-fg-hyperlink-hover: #FC3134; --color-dark-fg-font-hyper-hover: #DE629E;
--color-dark-bg-pager: #000000; --color-dark-fg-hyperlink: #DE629E;
--color-dark-fg-pager: #000000; --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 { :root {
--color-bg-page: var(--color-light-bg-page); --color-bg-page: var(--color-light-bg-page);
--color-bg-content: var(--color-light-bg-content); --color-bg-content: var(--color-light-bg-content);
--color-bg-block: var(--color-light-bg-block); --color-bg-block: var(--color-light-bg-block);
--color-bg-shadow: var(--color-light-bg-shadow); --color-bg-shadow: var(--color-light-bg-shadow);
--color-fg-font-normal: var(--color-light-fg-font-normal); --color-fg-font-normal: var(--color-light-fg-font-normal);
--color-fg-font-hover: var(--color-light-fg-font-hover); --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-font-quote: var(--color-light-fg-font-quote); --color-fg-tiny-line: var(--color-light-fg-tiny-line);
--color-fg-tiny-line: var(--color-light-fg-tiny-line); --color-fg-marker-quote: var(--color-light-fg-marker-quote);
--color-fg-marker-quote: var(--color-light-fg-marker-quote); --color-fg-font-hyper: var(--color-light-fg-font-hyper);
--color-fg-hyperlink: var(--color-light-fg-hyperlink); --color-fg-font-hyper-hover: var(--color-light-fg-font-hyper-hover);
--color-fg-hyperlink-hover: var(--color-light-fg-hyperlink-hover); --color-fg-hyperlink: var(--color-light-fg-hyperlink);
--color-bg-pager: var(--color-light-bg-pager); --color-fg-hyperlink-hover: var(--color-light-fg-hyperlink-hover);
--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) { @media (prefers-color-scheme: dark) {
:root { :root {
--color-bg-page: var(--color-dark-bg-page); --color-bg-page: var(--color-dark-bg-page);
--color-bg-content: var(--color-dark-bg-content); --color-bg-content: var(--color-dark-bg-content);
--color-bg-block: var(--color-dark-bg-block); --color-bg-block: var(--color-dark-bg-block);
--color-bg-shadow: var(--color-dark-bg-shadow); --color-bg-shadow: var(--color-dark-bg-shadow);
--color-fg-font-normal: var(--color-dark-fg-font-normal); --color-fg-font-normal: var(--color-dark-fg-font-normal);
--color-fg-font-hover: var(--color-dark-fg-font-hover); --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-font-quote: var(--color-dark-fg-font-quote); --color-fg-tiny-line: var(--color-dark-fg-tiny-line);
--color-fg-tiny-line: var(--color-dark-fg-tiny-line); --color-fg-marker-quote: var(--color-dark-fg-marker-quote);
--color-fg-marker-quote: var(--color-dark-fg-marker-quote); --color-fg-font-hyper: var(--color-dark-fg-font-hyper);
--color-fg-hyperlink: var(--color-dark-fg-hyperlink); --color-fg-font-hyper-hover: var(--color-dark-fg-font-hyper-hover);
--color-fg-hyperlink-hover: var(--color-dark-fg-hyperlink-hover); --color-fg-hyperlink: var(--color-dark-fg-hyperlink);
--color-bg-pager: var(--color-dark-bg-pager); --color-fg-hyperlink-hover: var(--color-dark-fg-hyperlink-hover);
--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,11 +92,6 @@
--fonts-mono-zh: "Noto Sans Mono CJK", "WenQuanYi Zen Hei Mono", "WenQuanYi Micro Hei Mono"; --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; --fonts-mono: var(--fonts-mono-en), var(--fonts-mono-zh), monospace;
--color-fav-0: #EDD5DD;
--color-fav-1: #F0B3B2;
--color-fav-2: #DE629E;
--color-fav-3: #CB3E50;
--len-0: 0.00rem; --len-0: 0.00rem;
--len-1: 0.25rem; --len-1: 0.25rem;
--len-2: 0.50rem; --len-2: 0.50rem;
@ -307,14 +310,8 @@ body {
/* beautify hyper link style */ /* beautify hyper link style */
.footer { color: var(--color-fg-font-normal) } .footer { color: var(--color-fg-font-normal) }
.footer a { color: var(--color-fav-2); text-decoration: none; } .footer a { color: var(--color-fg-hyperlink); text-decoration: none; }
.footer a:hover { color: var(--color-fav-3); } .footer a:hover { color: var(--color-fg-hyperlink-hover); }
.footer img {
display: inline;
height: var(--font-size-1);
color: var(--color-fav-2);
}
/**********************************/ /**********************************/
/* set up home page's list layout */ /* set up home page's list layout */
@ -335,8 +332,8 @@ body {
.list-item .title a { text-decoration: none; color: var(--color-fg-font-normal); } .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 .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 { text-decoration: none; color: var(--color-fg-hyperlink); }
.list-item .tips a:hover { color: var(--color-fav-3) } .list-item .tips a:hover { color: var(--color-fg-hyperlink-hover); }
.list-item .title { margin: var(--len-2) 0 var(--len-3) 0; } .list-item .title { margin: var(--len-2) 0 var(--len-3) 0; }
@ -380,7 +377,7 @@ body {
.side > *:last-child { margin-bottom: 0; } .side > *:last-child { margin-bottom: 0; }
.side a { color: var(--color-fg-font-normal); text-decoration: none; } .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 */ /* horizontally place tags */
.side .side-tags li { display: inline-block; margin: var(--len-1) var(--len-1); } .side .side-tags li { display: inline-block; margin: var(--len-1) var(--len-1); }
@ -395,8 +392,8 @@ body {
align-items: center; align-items: center;
} }
.single a { text-decoration: none; color: var(--color-fav-2); } .single a { text-decoration: none; color: var(--color-fg-hyperlink); }
.single a:hover { color: var(--color-fav-3); } .single a:hover { color: var(--color-fg-hyperlink-hover); }
.single .title, .single .title,
.single .tip, .single .tip,
@ -408,7 +405,7 @@ body {
.single > hr { .single > hr {
border: none; border: none;
background-color: var(--color-fav-1); background-color: var(--color-fg-tiny-line);
height: 1px; height: 1px;
width: 90%; width: 90%;
@ -546,7 +543,6 @@ body {
} }
.content .anchor { .content .anchor {
visibility: hidden; visibility: hidden;
color: var(--color-fav-2);
} }
.content h1:hover a, .content h1:hover a,
.content h2:hover a, .content h2:hover a,
@ -593,8 +589,8 @@ body {
#archive .group .value a { text-decoration: none; } #archive .group .value a { text-decoration: none; }
#archive .group .value a { color: var(--color-fg-font-normal); } #archive .group .value a { color: var(--color-fg-font-hyper); }
#archive .group .value a:hover { color: var(--color-fav-2); } #archive .group .value a:hover { color: var(--color-fg-font-hyper-hover); }
#archive .group .value .tags { #archive .group .value .tags {
display: inline-block; display: inline-block;
@ -671,17 +667,17 @@ body {
text-decoration: none; text-decoration: none;
color: var(--color-fg-font-normal); 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; transition: background-color 0.25s;
} }
.pagination a:hover { .pagination a:hover {
background-color: var(--color-fav-0); background-color: var(--color-bg-pager-hover);
} }
.pagination a.current { .pagination a.current {
background-color: var(--color-fav-1); background-color: var(--color-bg-pager-current);
pointer-events: none; pointer-events: none;
color: var(--color-fg-font-normal); color: var(--color-fg-font-normal);
cursor: default; cursor: default;
@ -707,7 +703,7 @@ body {
.archive-hint { .archive-hint {
padding-left: var(--len-4); padding-left: var(--len-4);
color: var(--color-fav-1); color: var(--color-fg-font-quote);
} }
.max-wrapper { .max-wrapper {