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