From a4e88381ff9a014f4f534b36e3af4437458bc3a3 Mon Sep 17 00:00:00 2001 From: nanxiaobei Date: Mon, 1 Apr 2019 16:01:16 +0800 Subject: [PATCH] Update UI for 3.0 --- static/css/style.css | 203 ++++++++++++++++++++++++------------------- 1 file changed, 115 insertions(+), 88 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index cbfab6c..5d5be17 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -2,11 +2,11 @@ * Paper v3.0 * A simple, clean, flexible Hugo theme. * Designed by 21beats (http://21beats.com) - * Updated in 2019.3.31 + * Updated in 2019.4.1 */ /* Reset ------------------------------------------------------------- */ +-------------------------------------------------- */ *, *::before, *::after { @@ -18,8 +18,8 @@ html { body { margin: 0; color: rgba(0, 0, 0, 0.9); - font-family: 'SF Pro Display', 'Microsoft Yahei', 'Helvetica Neue', 'Helvetica', 'Arial', - sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, + 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 16px; } article, @@ -28,6 +28,7 @@ figcaption, figure, footer, header, +hgroup, main, nav, section { @@ -38,7 +39,10 @@ h2, h3, h4, h5, -h6, +h6 { + margin-top: 0; + margin-bottom: 0; +} p { margin-top: 0; margin-bottom: 0; @@ -48,7 +52,6 @@ b { font-weight: 500; } ul { - list-style: none; margin: 0; padding: 0; } @@ -91,8 +94,13 @@ img { display: block; max-width: 100%; } +/* Body +-------------------------------------------------- */ +.list { + background: #f5f5f5; +} /* Header ------------------------------------------------------------- */ +-------------------------------------------------- */ .header { height: 65px; line-height: 65px; @@ -137,58 +145,65 @@ img { transform: translate3d(-50%, 5px, 0); } +.no-scroll .header { + position: fixed; + z-index: 10; + top: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.9); +} +.no-scroll .logo a { + color: #888; +} +.no-scroll .menu-toggle::before, +.no-scroll .menu-toggle::after { + background: #888; +} .no-scroll .menu-toggle::before { transform: translate3d(-50%, -1px, 0) rotateZ(135deg); } .no-scroll .menu-toggle::after { transform: translate3d(-50%, -1px, 0) rotateZ(-135deg); } -.no-scroll .header { - position: sticky; - top: 0; - z-index: 10; - background: #fff; -} .no-scroll .menu { display: flex; } +.no-scroll .main, +.no-scroll .footer { + filter: blur(12px); +} .menu { display: none; position: fixed; z-index: 10; top: 65px; - right: 0; bottom: 0; left: 0; - background: #fff; + right: 0; justify-content: center; flex-direction: column; - text-align: center; padding-bottom: 130px; + text-align: center; + background: rgba(0, 0, 0, 0.9); } -.menu li { - width: 100%; - margin-left: 0; +.menu li + li { + margin-top: 12px; } .menu a { - font-size: 20px; -} -/* List --------------------------------------------------- */ -.list { - background: #f5f5f5; -} -.main, -.footer { - max-width: 640px; - margin-left: auto; - margin-right: auto; + color: #fff; + font-size: 48px; + letter-spacing: 1px; } /* Main -------------------------------------------------- */ .main { + position: relative; min-height: calc(100vh - 65px - 60px); + max-width: 640px; + margin-left: auto; + margin-right: auto; padding: 24px; } .page-header { @@ -204,16 +219,51 @@ img { transform-origin: left center; } .page-header h1 { - font-size: 30px; + font-size: 36px; + font-weight: 400; } -.page-footer .pagination { +.pagination { display: flex; } -.page-footer .pagination .next { +.pagination a { + height: 34px; + color: #fff; + font-size: 13px; + line-height: 33px; + background: rgba(0, 0, 0, 0.9); + border-radius: 36px; +} +.pagination .prev { + padding-left: 16px; + padding-right: 18px; +} +.pagination .next { margin-left: auto; + padding-left: 18px; + padding-right: 16px; } /* Post entry -------------------------------------------------- */ +.first-entry { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + height: 320px; + margin-bottom: 24px; + padding-bottom: 40px; +} +.first-entry .entry-header h2 { + font-size: 40px; +} +.first-entry .entry-content { + margin-top: 12px; + margin-bottom: 20px; + font-size: 16px; +} +.first-entry .entry-footer { + font-size: 14px; +} .post-entry { position: relative; margin-bottom: 24px; @@ -229,7 +279,7 @@ img { transition: transform 0.1s; } .entry-header h2 { - font-size: 22px; + font-size: 24px; } .entry-content { margin-top: 8px; @@ -240,6 +290,7 @@ img { } .entry-footer { font-size: 12px; + letter-spacing: 0.5px; } .entry-link { position: absolute; @@ -257,22 +308,16 @@ img { .post-title { margin-bottom: 8px; font-size: 36px; - transform: translateX(-2px); + transform: translateX(-1px); } .post-meta { - font-size: 13px; color: rgba(0, 0, 0, 0.6); + font-size: 13px; + letter-spacing: 0.5px; } .post-content { font-size: 17px; line-height: 1.9; - word-wrap: break-word; -} -.post-content .form-item-title .ant-input, -.post-content h1 { - font-size: 36px; - font-weight: 700; - transform: translateX(-1px); } .post-content h1 { margin-top: 48px; @@ -281,7 +326,6 @@ img { .post-content h2 { margin-top: 36px; margin-bottom: 24px; - font-size: 28px; } .post-content h3, .post-content h4, @@ -290,10 +334,11 @@ img { margin-top: 24px; margin-bottom: 12px; } -.post-content h4, -.post-content h5, -.post-content h6 { - font-weight: 500; +.post-content h1 { + font-size: 36px; +} +.post-content h2 { + font-size: 28px; } .post-content h3 { font-size: 22px; @@ -312,7 +357,7 @@ img { } .post-content del { text-decoration: none; - background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 100%, transparent 0) 0 50% / 1.2px 1.2px + background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 100%, transparent 0) 0 50% / 1px 1px repeat-x; } .post-content p, @@ -325,24 +370,10 @@ img { .post-content ol { padding-left: 20px; } -.post-content ul { - list-style: disc; -} -.post-content ul ul { - padding-left: 20px; -} -.post-content ol ol { - list-style: lower-roman; -} -.post-content ol { - list-style: decimal; -} .post-content li { - margin-bottom: 5px; + margin-top: 5px; } -.post-content li > ul, -.post-content li > ol { - margin-top: 10px; +.post-content li p { margin-bottom: 0; } .post-content dl { @@ -398,7 +429,7 @@ img { margin-left: 0; margin-right: 0; padding: 20px 22px; - line-height: 1.7; + line-height: 1.6; border-radius: 2px; } .post-content blockquote { @@ -421,7 +452,7 @@ img { color: rgba(0, 0, 0, 0.9); font-size: 32px; letter-spacing: 20px; - transform: translate(10px, -32px); + transform: translate(10px, -36px); } .post-content iframe { max-width: 100%; @@ -429,13 +460,13 @@ img { .post-footer { margin-top: 48px; } -.post-footer .post-tags li { +.post-tags li { display: inline-block; } -.post-footer .post-tags li + li { +.post-tags li + li { margin-left: 3px; } -.post-footer .post-tags a { +.post-tags a { display: block; padding-left: 12px; padding-right: 12px; @@ -445,26 +476,32 @@ img { background: #f5f5f5; border-radius: 2px; } -.post-footer .post-tags a:hover { - background: #f2f2f2; +.post-tags a:hover { + background: #eee; } /* Footer -------------------------------------------------- */ .footer { + max-width: 640px; + margin-left: auto; + margin-right: auto; padding-left: 24px; padding-right: 24px; color: rgba(0, 0, 0, 0.6); - font-size: 13px; + font-size: 12px; text-align: center; line-height: 60px; } .footer span { - margin-left: 2px; - margin-right: 2px; + margin-left: 1px; + margin-right: 1px; } .footer a { color: inherit; } +.footer a:hover { + color: rgba(0, 0, 0, 0.9); +} /* 404 -------------------------------------------------- */ .not-found { @@ -474,19 +511,9 @@ img { display: flex; align-items: center; justify-content: center; - height: 100%; -} -.not-found::before { - content: '404'; - color: transparent; - background: linear-gradient(120deg, #7492e6, #8f72c3, #9c66b3, #ba4d95, #ba4d95, #dc3c75); - -webkit-background-clip: text; - position: relative; - display: inline-block; - font-size: 200px; + height: 80%; + font-size: 180px; font-weight: 700; - letter-spacing: 10px; - transform: translate(5px, -80px); } /* InstantClick -------------------------------------------------- */