From 45ce7f53a8ea9ec7d035a78c3a0374da2db93972 Mon Sep 17 00:00:00 2001
From: John Jian <jianxq@gmail.com>
Date: Fri, 22 Nov 2024 22:13:28 +0800
Subject: [PATCH] Update styles

---
 _includes/header.html | 16 ++++++--
 _layouts/post.html    |  8 ++--
 _sass/_header.scss    | 50 ++++++++++++------------
 _sass/_post.scss      | 86 +++++++++++++++++++---------------------
 _sass/_post_code.scss | 91 ++++++++-----------------------------------
 _sass/main.scss       | 29 +++++++-------
 6 files changed, 115 insertions(+), 165 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index fff6fa5..38845d3 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,5 +1,13 @@
-<header>
-  <h5>
-    <a href="/">{{ site.title }}</a>
-  </h5>
+<header class="site-header-post">
+  {% if page.url != "/" %}
+    <button aria-checked="false" data-testid="add-button" class="menu button-clear" aria-label="收藏至音乐库" data-encore-id="buttonTertiary">
+      <a href="/">
+        <span aria-hidden="true" class="IconWrapper__Wrapper-sc-16usrgb-0 hYdsxw">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-short" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"/>
+          </svg>
+        </span>
+      </a>
+    </button>
+  {% endif %}
 </header>
diff --git a/_layouts/post.html b/_layouts/post.html
index 336af5a..f587928 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -4,11 +4,11 @@
 
 {% include header.html %}
 
-<div class="post">
-  <div class="post-head" style="background-color: {% if page.bgcolor %}{{ page.bgcolor }}{% else %}{{ site.bgcolor }}{% endif %}">
-    <h1>{{ page.title }}</h1>
+<div class="single-post">
+  <div class="single-post-head" style="background-color: {% if page.bgcolor %}{{ page.bgcolor }}{% else %}{{ site.bgcolor }}{% endif %}">
+    <h1 class="post-header">{{ page.title }}</h1>
   </div>
-  <article>
+  <article class="article-single">
     {{ content }}
   </article>
 </div>
diff --git a/_sass/_header.scss b/_sass/_header.scss
index 089eb64..490e990 100644
--- a/_sass/_header.scss
+++ b/_sass/_header.scss
@@ -1,30 +1,32 @@
-header {
+.menu {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  text-align: center;
-
-  h5 {
-    padding-top: 2vmin;
-    font-size: 12px;
-    font-weight: 800;
-    // text-align: center;
-    // text-transform: uppercase;
-    // letter-spacing: 0.1em;
-    margin: 0;
-  }
+  top: 2.7vmin;
+  left: 2.8vmin;
+  z-index: 2024;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  width: 43px;
+  padding: 10px;
+  cursor: pointer;
+}
 
-  a {
-    text-decoration: none;
-    color: rgba(var(--black), 0.5);
+.button-clear {
+  border: none;
+  background-color: transparent;
+}
 
-    &:active {
-      color: inherit;
-    }
+.bi-arrow-left-short {
+  fill: currentColor;
+  width: 40px;
+  height: 40px;
+  padding: 4px;
+  border-radius: 50%;
+  color: #666;
+  background-color: rgba(220, 220, 220, 0.2);
 
-    &:hover {
-      color: rgba(var(--black), 0.75)
-    }
+  &:hover {
+    transform: scale(1.04);
+    color: #333;
+    background-color: rgba(220, 220, 220, 0.4);
   }
 }
diff --git a/_sass/_post.scss b/_sass/_post.scss
index a22cc58..34fe91a 100644
--- a/_sass/_post.scss
+++ b/_sass/_post.scss
@@ -1,71 +1,65 @@
-.post {
-  color: rgba(0, 0, 0, 0.75)
+.site-header-post {
+  position: absolute;
+  width: 100%;
 }
 
-.post-head {
-  padding: calc(15px + 15vmin) var(--gutter-x);
-  margin-left: auto;
-  margin-right: auto;
+.single-post {
+  clear: both;
+  position: relative;
+  color: #333;
+  font-size: 18px;
+  line-height: 1.8em;
+  overflow: hidden;
+}
+
+.single-post-head {
   text-align: center;
-  background-color: #f8f8f0;
+  padding: 21vh 20px 21vh;
+  position: relative;
+}
 
-  h1 {
-    max-width: 1200px;
-    margin: 0 auto;
-    font-size: calc(16px + 3vw);
-    font-weight: 600;
-    line-height: 1.3em;
-  }
+.post-header {
+  position: relative;
+  font-size: 74px;
+  font-weight: 800;
+  line-height: 1.3em;
+  max-width: 980px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-@media (min-width: 1200px) {
-  .post-head h1 {
-    font-size: 3em;
+@media (max-width: 1200px) {
+  .post-header {
+    font-size: calc(12px + 5vw);
   }
 }
 
 article {
-  font-size: var(--post-font-size);
-  line-height: 1.9em;
-  overflow-wrap: break-word;
-
   > h1,
   > h2,
   > h3 {
     position: relative;
-    max-width: var(--post-max-width);
-    padding: 0 var(--gutter-x);
-    margin: 3em auto 1.2em;
-    font-size: 1.5em;
-    font-weight: 400;
+    margin: 3em auto 1em;
+    font-size: 1.7em;
     line-height: 1.3em;
+    font-weight: 400;
+    max-width: 700px;
+    padding-left: 20px;
+    padding-right: 20px;
     scroll-margin-top: 1em;
-
-    &:first-child {
-      margin-top: 0;
-    }
+    text-wrap: balance;
   }
 
   > p {
-    max-width: var(--post-max-width);
-    padding: 0 var(--gutter-x);
     margin: 0 auto 2em;
-
-    &:first-child {
-      margin-top: calc(2em + 2vh);
-    }
+    max-width: 700px;
+    padding-left: 20px;
+    padding-right: 20px;
   }
+}
 
-  > ul,
-  > ol {
-    max-width: var(--post-max-width);
-    padding: 0 var(--gutter-x);
-    margin: 0 auto 2em;
-
-    li {
-      margin-bottom: 0.5em;
-    }
-  }
+.article-single {
+  margin-top: 60px;
 }
 
 p img {
diff --git a/_sass/_post_code.scss b/_sass/_post_code.scss
index 7271669..b1fb5e1 100644
--- a/_sass/_post_code.scss
+++ b/_sass/_post_code.scss
@@ -1,93 +1,36 @@
 div.highlight {
-  max-width: calc(var(--post-max-width) + 80px);
-  margin: 0 auto 2em;
-  padding: 2em 0;
-  border-radius: 1em;
-  line-height: 1.3em;
   background-color: #f4f4f6;
-  color: rgb(var(--darkgray));
-  overflow: auto;
+  border-radius: var(--rounded);
+  padding: 2.4em 1em 2.6em;
+  width: 100%;
+  max-width: 820px;
+  overflow-x: auto;
+  margin-right: auto;
+  margin-bottom: 2em;
+  margin-left: auto;
+  line-height: 1.3em;
+  box-sizing: border-box;
+  position: relative;
+  font-family: var(--mono-font);
 
   > pre {
-    max-width: var(--post-max-width);
-    padding: 0 var(--gutter-x);
-    margin: 0 auto;
+    max-width: 700px;
     font-size: 14px;
-    background-color: inherit;
-  }
-
-  .c,
-  .c1 {
-    color: gray;
+    margin: 0 auto;
   }
 }
 
 code {
-  font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;;
+  font-family: var(--mono-font)
 }
 
-div.language-shell .nv {
+div.language-console .gp {
   -webkit-user-select: none;
   user-select: none;
 }
 
-code.highlighter-rouge {
-  font-size: 14px;
-  padding: 0.3em 0.5em;
-  border-radius: 7px;
-  background-color: #eee;
-}
-
-@media (max-width: 1000px) {
-  div.highlight {
-    max-width: var(--post-max-width);;
-  }
-}
-
 @media (max-width: 780px) {
   div.highlight {
-    max-width: 100%;
-    border-radius: 0;
+    position: unset;
   }
 }
-
-// .language-shell div.highlight::before {
-//   content: "Shell"
-// }
-
-// .language-css div.highlight::before {
-//   content: "CSS"
-// }
-
-// .language-html div.highlight::before {
-//   content: "HTML"
-// }
-
-// .language-javascript div.highlight::before {
-//   content: "JavaScript"
-// }
-
-// div.highlight {
-//   position: relative;
-// }
-
-// div.highlight::before {
-//   z-index: 100;
-//   position: absolute;
-//   content: "";
-//   top: 10px;
-//   right: 10px;
-//   font-size: 13px;
-//   font-weight: 400;
-//   background-color: #ccc;
-//   padding: 4px 10px;
-//   border-radius: 9px;
-//   letter-spacing: 0.04em;
-//   color: #fff;
-//   opacity: 0;
-//   transition: opacity 0.2s ease-out;
-// }
-
-// div.highlight:hover::before {
-//   opacity: 1;
-// }
diff --git a/_sass/main.scss b/_sass/main.scss
index 6b36a7b..e2dcd9e 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -1,18 +1,18 @@
 :root {
   --black: 0, 0, 0;
-  --darkgray: 50, 50, 50;
-  --lightgray: 200, 200, 200;
   --teal-color: 0, 128, 128;
   --gutter-x: 20px;
   --post-max-width: 740px;
   --post-font-size: 18px;
+  --rounded: 18px;
+  --mono-font: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
+// *,
+// *::before,
+// *::after {
+//   box-sizing: border-box;
+// }
 
 html,
 div,
@@ -72,10 +72,6 @@ footer {
 
   a {
     text-decoration: none;
-
-    // &:hover {
-    //   color: #eb6534;
-    // }
   }
 
   div {
@@ -90,8 +86,6 @@ footer {
 
 a {
   color: inherit;
-  text-decoration: underline;
-  text-underline-offset: 0.3em;
 
   &
   :active,
@@ -124,6 +118,15 @@ a.underline {
   }
 }
 
+h1 {
+  font-style: normal;
+  font-size: 45px;
+  font-weight: normal;
+  vertical-align: baseline;
+  margin: 0;
+  padding: 0;
+}
+
 .not-found {
   flex: 1;
   display: flex;