malte70/hugo-paper
1
0
Fork 0
Code Activity

update dark mode ui

Browse source
This commit is contained in:
nanxiaobei 2020-05-15 04:33:25 +08:00
parent 0e27bc5dd0
commit 3bfad6b23a
1 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
static/style.css
View file

@ -3,7 +3,7 @@
* A simple, clean, flexible Hugo theme * A simple, clean, flexible Hugo theme
* https://github.com/nanxiaobei/hugo-paper * https://github.com/nanxiaobei/hugo-paper
* Designed by MR.LEE (https://mrlee.me/) * Designed by MR.LEE (https://mrlee.me/)
* Updated in 2019.10.17 * Updated in 2020.5.15
*/ */
/* Theme /* Theme
@ -18,29 +18,33 @@
--radius: 8px; --radius: 8px;
--theme: #fff; --theme: #fff;
--entry: #fff;
--primary: rgba(0, 0, 0, 0.88); --primary: rgba(0, 0, 0, 0.88);
--secondary: rgba(0, 0, 0, 0.56); --secondary: rgba(0, 0, 0, 0.56);
--tertiary: rgba(0, 0, 0, 0.16); --tertiary: rgba(0, 0, 0, 0.16);
--content: rgba(0, 0, 0, 0.88);
--hljs-bg: #1c1d21; --hljs-bg: #1c1d21;
--code-bg: #f5f5f5; --code-bg: #f5f5f5;
--border: #eee; --border: #eee;
} }
.dark { .dark {
--theme: #3c3c3c; --theme: #1d1d1d;
--primary: rgba(255, 255, 255, 0.88); --entry: #333;
--primary: rgba(255, 255, 255, 0.8);
--secondary: rgba(255, 255, 255, 0.56); --secondary: rgba(255, 255, 255, 0.56);
--tertiary: rgba(255, 255, 255, 0.16); --tertiary: rgba(255, 255, 255, 0.16);
--content: rgba(255, 255, 255, 0.64);
--hljs-bg: #2a2a2a; --hljs-bg: #2a2a2a;
--code-bg: #4f4f4f; --code-bg: #333;
--border: #5f5f5f; --border: #5f5f5f;
} }
.list { .list {
background: linear-gradient(135deg, #ddd, #f5f5f5, #d5d5d5); background: linear-gradient(135deg, #ddd, #f5f5f5, #d5d5d5);
} }
.dark.list { .dark.list {
background: linear-gradient(135deg, #1c1c1c, #2a2a2a, #000); background: linear-gradient(135deg, #1b1b1b, #252525, #000);
} }
/* Reset /* Reset
-------------------------------------------------- */ -------------------------------------------------- */
@ -82,6 +86,7 @@ h5,
h6 { h6 {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
color: var(--primary);
line-height: 1.2; line-height: 1.2;
} }
p { p {
@ -238,7 +243,7 @@ img {
position: relative; position: relative;
margin-bottom: var(--gap); margin-bottom: var(--gap);
padding: var(--gap); padding: var(--gap);
background: var(--theme); background: var(--entry);
border-radius: var(--radius); border-radius: var(--radius);
transition: transform 0.1s; transition: transform 0.1s;
} }
@ -289,6 +294,9 @@ img {
color: var(--secondary); color: var(--secondary);
font-size: 14px; font-size: 14px;
} }
.post-content {
color: var(--content);
}
.post-content h1 { .post-content h1 {
margin-top: 40px; margin-top: 40px;
margin-bottom: 32px; margin-bottom: 32px;