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

Compare commits

base: leafee98:6ac660eee21e85f7fe26efcf1dcc50788477ca35
Branches Tags
leafee98:main
leafee98:asciidoc
leafee98:gh-page
..
compare: leafee98:37de87ec4141b82d003216d9ab1ad9a1e51baac0
Branches Tags
leafee98:main
leafee98:asciidoc
leafee98:gh-page

No commits in common. "6ac660eee21e85f7fe26efcf1dcc50788477ca35" and "37de87ec4141b82d003216d9ab1ad9a1e51baac0" have entirely different histories.
6ac660eee2 ... 37de87ec41

3 changed files with 85 additions and 68 deletions
Show stats Expand all files Collapse all files

2
README.md
View file

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

2
exampleSite/config.toml
View file

@ -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

149
static/css/style.css
View file

@ -6,75 +6,67 @@
--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-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;
--color-light-fg-hyperlink: #FF5F61;
--color-light-fg-hyperlink-hover: #FC3134;
--color-light-bg-pager: #000000;
--color-light-fg-pager: #000000;
}
/* defines dark color */
:root {
--color-dark-bg-page: #202124;
--color-dark-bg-content: #262628;
--color-dark-bg-block: #2B2B2B;
--color-dark-bg-page: #2F2F2F;
--color-dark-bg-content: #453B3B;
--color-dark-bg-block: #4E403E;
--color-dark-bg-shadow: #505050;
--color-dark-fg-font-normal: #C2C2B6;
--color-dark-fg-font-hover: #D2D2D3;
--color-dark-fg-font-normal: #E8E8E8;
--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-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;
--color-dark-fg-hyperlink: #FF5F61;
--color-dark-fg-hyperlink-hover: #FC3134;
--color-dark-bg-pager: #000000;
--color-dark-fg-pager: #000000;
}
:root {
--color-bg-page: var(--color-light-bg-page);
--color-bg-content: var(--color-light-bg-content);
--color-bg-block: var(--color-light-bg-block);
--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-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-current: var(--color-light-bg-pager-current);
--color-bg-pager-hover: var(--color-light-bg-pager-hover);
--color-bg-page: var(--color-light-bg-page);
--color-bg-content: var(--color-light-bg-content);
--color-bg-block: var(--color-light-bg-block);
--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-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);
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg-page: var(--color-dark-bg-page);
--color-bg-content: var(--color-dark-bg-content);
--color-bg-block: var(--color-dark-bg-block);
--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-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-current: var(--color-dark-bg-pager-current);
--color-bg-pager-hover: var(--color-dark-bg-pager-hover);
--color-bg-page: var(--color-dark-bg-page);
--color-bg-content: var(--color-dark-bg-content);
--color-bg-block: var(--color-dark-bg-block);
--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-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);
}
}
@ -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:hover { color: var(--color-fg-hyperlink-hover); }
.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);
}
/**********************************/
/* 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:hover { color: var(--color-fg-hyperlink-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 .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:hover { color: var(--color-fg-hyperlink-hover); }
.single a { text-decoration: none; color: var(--color-fav-2); }
.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:hover { color: var(--color-fg-font-hyper-hover); }
#archive .group .value a { color: var(--color-fg-font-normal); }
#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 {