|
|
|
@ -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-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 {
|
|
|
|
@ -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-current: var(--color-light-bg-pager-current);
|
|
|
|
|
--color-bg-pager-hover: var(--color-light-bg-pager-hover);
|
|
|
|
|
--color-bg-pager: var(--color-light-bg-pager);
|
|
|
|
|
--color-fg-pager: var(--color-light-fg-pager);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@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-current: var(--color-dark-bg-pager-current);
|
|
|
|
|
--color-bg-pager-hover: var(--color-dark-bg-pager-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 {
|
|
|
|
|