malte70/hugo-paper
1
0
Fork 0
Code Activity

Upgrade UI

Browse source
This commit is contained in:
nanxiaobei 2019-06-10 06:52:05 +08:00
parent daef16b004
commit f911cc63fd
1 changed files with 61 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
static/css/style.css
View file

@ -2,9 +2,16 @@
* Paper * Paper
* A simple, clean, flexible Hugo theme. * A simple, clean, flexible Hugo theme.
* Designed by MR.LEE (https://mrlee.me/) * Designed by MR.LEE (https://mrlee.me/)
* Updated in 2019.4.28 * Updated in 2019.6.10
*/ */
/* Variables
-------------------------------------------------- */
:root {
--primary: rgba(0, 0, 0, 0.88);
--secondary: rgba(0, 0, 0, 0.64);
--tertiary: rgba(0, 0, 0, 0.16);
}
/* Reset /* Reset
-------------------------------------------------- */ -------------------------------------------------- */
*, *,
@ -17,7 +24,7 @@ html {
} }
body { body {
margin: 0; margin: 0;
color: rgba(0, 0, 0, 0.9); color: var(--primary);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif; 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 16px; font-size: 16px;
@ -56,7 +63,7 @@ ul {
padding: 0; padding: 0;
} }
a { a {
color: rgba(0, 0, 0, 0.9); color: var(--primary);
text-decoration: none; text-decoration: none;
} }
figure { figure {
@ -94,19 +101,14 @@ img {
display: block; display: block;
max-width: 100%; max-width: 100%;
} }
/* Body
-------------------------------------------------- */
.list {
background: #f5f5f5;
}
/* Header /* Header
-------------------------------------------------- */ -------------------------------------------------- */
.header { .header {
height: 65px; height: 64px;
} }
.header .wrap { .header .wrap {
display: flex; display: flex;
max-width: 1024px; max-width: calc(1024px + 24px * 2);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
@ -119,12 +121,12 @@ img {
display: block; display: block;
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
line-height: 65px; line-height: 64px;
} }
.menu-toggle { .menu-toggle {
position: relative; position: relative;
width: 68px; width: 68px;
height: 65px; height: 64px;
margin-left: auto; margin-left: auto;
outline: 0; outline: 0;
} }
@ -152,7 +154,6 @@ img {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
background: #fff;
} }
.no-scroll .logo { .no-scroll .logo {
display: none; display: none;
@ -167,14 +168,14 @@ img {
display: flex; display: flex;
} }
.no-scroll .main { .no-scroll .main {
margin-top: 65px; margin-top: 64px;
} }
.menu { .menu {
display: none; display: none;
position: fixed; position: fixed;
z-index: 10; z-index: 10;
top: 65px; top: 64px;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
@ -189,19 +190,19 @@ img {
} }
.menu a { .menu a {
font-size: 48px; font-size: 48px;
font-weight: 700;
} }
/* Main /* Main
-------------------------------------------------- */ -------------------------------------------------- */
.main { .main {
position: relative; position: relative;
min-height: calc(100vh - 65px - 60px); min-height: calc(100vh - 64px - 60px);
max-width: 640px; max-width: calc(640px + 24px * 2);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 24px; padding: 24px;
} }
.page-header { .page-header {
margin-top: 8px;
margin-bottom: 40px; margin-bottom: 40px;
} }
.page-header h1 { .page-header h1 {
@ -215,7 +216,7 @@ img {
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
line-height: 34px; line-height: 34px;
background: rgba(0, 0, 0, 0.9); background: var(--primary);
border-radius: 34px; border-radius: 34px;
} }
.pagination .prev { .pagination .prev {
@ -259,14 +260,13 @@ img {
position: relative; position: relative;
margin-bottom: 24px; margin-bottom: 24px;
padding: 24px; padding: 24px;
background: #fff; box-shadow: 0 8px 80px rgba(0, 0, 0, 0.1);
border-radius: 8px;
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
} }
.post-entry:hover {
box-shadow: 0 10px 80px rgba(0, 0, 0, 0.15);
}
.post-entry:active { .post-entry:active {
transform: scale(0.98); transform: scale(0.96);
transition: transform 0.1s; transition: transform 0.1s;
} }
.entry-header h2 { .entry-header h2 {
@ -275,7 +275,7 @@ img {
.entry-content { .entry-content {
margin-top: 8px; margin-top: 8px;
margin-bottom: 14px; margin-bottom: 14px;
color: rgba(0, 0, 0, 0.6); color: var(--secondary);
font-size: 14px; font-size: 14px;
line-height: 1.7; line-height: 1.7;
} }
@ -293,29 +293,29 @@ img {
/* Post single /* Post single
-------------------------------------------------- */ -------------------------------------------------- */
.post-header { .post-header {
margin-top: 12px; margin-top: 16px;
margin-bottom: 36px; margin-bottom: 40px;
} }
.post-title { .post-title {
margin-bottom: 8px; margin-bottom: 10px;
font-size: 36px; font-size: 40px;
transform: translateX(-1px); transform: translateX(-1px);
} }
.post-meta { .post-meta {
color: rgba(0, 0, 0, 0.6); color: var(--secondary);
font-size: 13px; font-size: 14px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
.post-content { .post-content {
font-size: 17px; font-size: 18px;
line-height: 1.9; line-height: 1.9;
} }
.post-content h1 { .post-content h1 {
margin-top: 48px; margin-top: 48px;
margin-bottom: 36px; margin-bottom: 40px;
} }
.post-content h2 { .post-content h2 {
margin-top: 36px; margin-top: 40px;
margin-bottom: 24px; margin-bottom: 24px;
} }
.post-content h3, .post-content h3,
@ -326,30 +326,29 @@ img {
margin-bottom: 12px; margin-bottom: 12px;
} }
.post-content h1 { .post-content h1 {
font-size: 36px; font-size: 40px;
} }
.post-content h2 { .post-content h2 {
font-size: 28px; font-size: 32px;
} }
.post-content h3 { .post-content h3 {
font-size: 22px; font-size: 24px;
} }
.post-content h4 { .post-content h4 {
font-size: 18px;
}
.post-content h5 {
font-size: 16px; font-size: 16px;
} }
.post-content h6 { .post-content h5 {
font-size: 14px; font-size: 14px;
} }
.post-content h6 {
font-size: 12px;
}
.post-content a { .post-content a {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.9); box-shadow: 0 1px 0 var(--primary);
} }
.post-content del { .post-content del {
text-decoration: none; text-decoration: none;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 100%, transparent 0) 0 50% / 1px 1px background: linear-gradient(to right, var(--primary) 100%, transparent 0) 0 50% / 1px 1px repeat-x;
repeat-x;
} }
.post-content p, .post-content p,
.post-content ul, .post-content ul,
@ -419,14 +418,14 @@ img {
margin-right: 4px; margin-right: 4px;
padding: 4px; padding: 4px;
font-family: Menlo, Monaco, 'Courier New', Courier, monospace; font-family: Menlo, Monaco, 'Courier New', Courier, monospace;
font-size: 0.82em; font-size: 0.8em;
white-space: pre-wrap; white-space: pre-wrap;
background: rgba(0, 0, 0, 0.04); background: #f8f8f8;
} }
.post-content .highlight { .post-content .highlight {
margin-bottom: 32px; margin-bottom: 32px;
background: rgba(0, 0, 0, 0.04); background: #f8f8f8;
overflow-x: auto; overflow-x: auto;
} }
.post-content .highlight table, .post-content .highlight table,
@ -445,7 +444,7 @@ img {
} }
.post-content .highlight table td:first-child pre code { .post-content .highlight table td:first-child pre code {
padding-right: 16px; padding-right: 16px;
color: rgba(0, 0, 0, 0.2); color: var(--tertiary);
text-align: right; text-align: right;
} }
.post-content .highlight table td:last-child pre code { .post-content .highlight table td:last-child pre code {
@ -453,14 +452,14 @@ img {
} }
.post-content .highlight .ln { .post-content .highlight .ln {
margin-right: 16px; margin-right: 16px;
color: rgba(0, 0, 0, 0.2); color: var(--tertiary);
} }
.post-content blockquote { .post-content blockquote {
margin: 0 0 0 -24px; margin: 0 0 0 -24px;
padding: 0 0 0 21px; padding: 0 0 0 21px;
font-style: italic; font-style: italic;
border-left: 3px solid rgba(0, 0, 0, 0.9); border-left: 3px solid var(--primary);
} }
.post-content hr { .post-content hr {
height: 0; height: 0;
@ -473,16 +472,16 @@ img {
.post-content hr::before { .post-content hr::before {
content: '...'; content: '...';
display: inline-block; display: inline-block;
color: rgba(0, 0, 0, 0.9); color: var(--primary);
font-size: 32px; font-size: 32px;
letter-spacing: 20px; letter-spacing: 20px;
transform: translate(10px, -36px); transform: translate(10px, -40px);
} }
.post-content iframe { .post-content iframe {
max-width: 100%; max-width: 100%;
} }
.post-footer { .post-footer {
margin-top: 48px; margin-top: 56px;
} }
.post-tags li { .post-tags li {
display: inline-block; display: inline-block;
@ -494,41 +493,38 @@ img {
display: block; display: block;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
color: rgba(0, 0, 0, 0.6); color: var(--secondary);
font-size: 14px; font-size: 14px;
line-height: 32px; line-height: 32px;
background: #f5f5f5; background: #f8f8f8;
border-radius: 2px; border-radius: 2px;
} }
.post-tags a:hover { .post-tags a:hover {
background: #eee; background: #f2f2f2;
} }
/* Footer /* Footer
-------------------------------------------------- */ -------------------------------------------------- */
.footer { .footer {
max-width: 640px; max-width: calc(640px + 24px * 2);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: 24px; padding: calc((60px - 24px) / 2) 24px;
padding-right: 24px; color: var(--secondary);
color: rgba(0, 0, 0, 0.6);
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
line-height: 60px; line-height: 24px;
} }
.footer span { .footer span {
margin-left: 1px; margin-left: 1px;
margin-right: 1px; margin-right: 1px;
} }
.footer a { .footer a {
display: inline-flex;
align-items: center;
color: inherit; color: inherit;
} }
.footer a:hover { .footer a:hover {
color: rgba(0, 0, 0, 0.9); color: var(--primary);
border-bottom: 1px solid var(--primary);
} }
/* 404 /* 404
-------------------------------------------------- */ -------------------------------------------------- */
.not-found { .not-found {