From f911cc63fd719d962e4f250c6eb1660e38722389 Mon Sep 17 00:00:00 2001
From: nanxiaobei <nanxiaobei@gmail.com>
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 {