Update UI for 3.0

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',
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-    sans-serif;
+    '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 {
+.menu li + li {
-  width: 100%;
+  margin-top: 12px;
-  margin-left: 0;
 }
 .menu a {
-  font-size: 20px;
+  color: #fff;
-}
+  font-size: 48px;
-/* List
+  letter-spacing: 1px;
--------------------------------------------------- */
-.list {
-  background: #f5f5f5;
-}
-.main,
-.footer {
-  max-width: 640px;
-  margin-left: auto;
-  margin-right: auto;
 }
 /* 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 h1 {
-.post-content h5,
+  font-size: 36px;
-.post-content h6 {
+}
-  font-weight: 500;
+.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 p {
-.post-content li > ol {
-  margin-top: 10px;
   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 {
+.post-tags a:hover {
-  background: #f2f2f2;
+  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-left: 1px;
-  margin-right: 2px;
+  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%;
+  height: 80%;
-}
+  font-size: 180px;
-.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;
   font-weight: 700;
-  letter-spacing: 10px;
-  transform: translate(5px, -80px);
 }
 /* InstantClick
 -------------------------------------------------- */