From c55f60a8b93198f7de1f1be1b3b6467cc9f15bb2 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Mon, 15 Aug 2022 10:22:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor(theme):=20=E8=B0=83=E6=95=B4=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E9=A3=8E=E6=A0=BC=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../theme/src/client/components/Archive.vue    |  2 +-
 .../src/client/components/NavbarDropdown.vue   | 15 +++++++++------
 .../theme/src/client/components/PostItem.vue   |  8 ++++----
 .../theme/src/client/components/PostList.vue   | 13 ++++++-------
 .../theme/src/client/components/PostMeta.vue   | 18 ++++++++++++++----
 .../theme/src/client/components/Sidebar.vue    |  2 +-
 packages/theme/src/client/styles/code.scss     |  2 +-
 .../theme/src/client/styles/vars-dark.scss     |  1 +
 packages/theme/src/client/styles/vars.scss     |  1 +
 9 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/packages/theme/src/client/components/Archive.vue b/packages/theme/src/client/components/Archive.vue
index f46b9b83..77b9dd61 100644
--- a/packages/theme/src/client/components/Archive.vue
+++ b/packages/theme/src/client/components/Archive.vue
@@ -112,7 +112,7 @@ const headers = computed(() => {
       position: relative;
       margin-left: 4rem;
       border-left: solid 4px var(--c-border);
-      padding: 1.25rem;
+      padding: 0.75rem 1.25rem;
 
       &::before {
         content: '';
diff --git a/packages/theme/src/client/components/NavbarDropdown.vue b/packages/theme/src/client/components/NavbarDropdown.vue
index a957b948..8d0dfea1 100644
--- a/packages/theme/src/client/components/NavbarDropdown.vue
+++ b/packages/theme/src/client/components/NavbarDropdown.vue
@@ -146,7 +146,7 @@ const onGrandChildFocusout = (grandchild, child): void => {
 
   .navbar-dropdown-title {
     display: block;
-    font-size: 0.9rem;
+    font-size: 1rem;
     font-family: inherit;
     cursor: inherit;
     padding: inherit;
@@ -183,12 +183,14 @@ const onGrandChildFocusout = (grandchild, child): void => {
     .navbar-dropdown-item {
       color: inherit;
       line-height: 1.7rem;
+      cursor: default;
 
       .navbar-dropdown-subtitle {
         margin: 0.45rem 0 0;
         border-top: 1px solid var(--c-border);
         padding: 1rem 0 0.45rem 0;
-        font-size: 0.9rem;
+        font-size: 1rem;
+        color: var(--c-text-light);
 
         & > span {
           padding: 0 1.5rem;
@@ -210,7 +212,7 @@ const onGrandChildFocusout = (grandchild, child): void => {
         list-style: none;
 
         .navbar-dropdown-subitem {
-          font-size: 0.9em;
+          font-size: 1em;
         }
       }
 
@@ -280,12 +282,12 @@ const onGrandChildFocusout = (grandchild, child): void => {
 
         .navbar-dropdown-subtitle,
         & > a {
-          font-size: 15px;
+          font-size: 1rem;
           line-height: 2rem;
         }
 
         .navbar-dropdown-subitem {
-          font-size: 14px;
+          font-size: 1rem;
           padding-left: 1rem;
         }
       }
@@ -314,13 +316,14 @@ const onGrandChildFocusout = (grandchild, child): void => {
       right: 0;
       box-sizing: border-box;
       background-color: var(--c-bg-container);
-      padding: 0.6rem 0;
+      padding: 1.5rem 0.75rem;
       border: 1px solid var(--c-border);
       border-bottom-color: var(--c-border-dark);
       text-align: left;
       border-radius: 0.25rem;
       white-space: nowrap;
       margin: 0;
+      box-shadow: var(--shadow);
     }
   }
 }
diff --git a/packages/theme/src/client/components/PostItem.vue b/packages/theme/src/client/components/PostItem.vue
index 574d04e3..33e9a540 100644
--- a/packages/theme/src/client/components/PostItem.vue
+++ b/packages/theme/src/client/components/PostItem.vue
@@ -27,9 +27,9 @@ const handlePost = (path: string): void => {
 <template>
   <DropdownTransition :delay="index * 0.04">
     <section :key="post.path" class="post-list-item">
-      <div>
+      <div :class="{ sticky: post.sticky }">
         <TopIcon v-if="post.sticky" />
-        <div
+        <!-- <div
           v-if="post.banner"
           class="post-banner"
           @click="handlePost(post.path)"
@@ -39,11 +39,11 @@ const handlePost = (path: string): void => {
               'background-image': `url(${post.banner})`,
             }"
           ></div>
-        </div>
+        </div> -->
         <h3>
           <AutoLink :item="{ text: post.title, link: post.path }" />
         </h3>
-        <PostMeta :post="post" />
+        <PostMeta :post="post" :show-author="false" />
         <!--eslint-disable vue/no-v-html-->
         <div
           v-if="post.excerpt"
diff --git a/packages/theme/src/client/components/PostList.vue b/packages/theme/src/client/components/PostList.vue
index 3df2351d..3f2ad721 100644
--- a/packages/theme/src/client/components/PostList.vue
+++ b/packages/theme/src/client/components/PostList.vue
@@ -84,29 +84,28 @@ const togglePage = (currentPage: number): void => {
 @import '../styles/_variables';
 .post-list-wrapper {
   flex: 1;
-  padding-top: 4rem;
+  padding-top: 2rem;
 
   .post-list-item {
     > div {
       position: relative;
       padding: 1.25rem 1.5rem;
-      padding-bottom: 3rem;
       background-color: var(--c-bg-container);
       border-radius: var(--p-around);
-      margin-bottom: 1.25rem;
+      margin-bottom: 2.25rem;
       // box-shadow: var(--shadow);
       transition: box-shadow var(--t-color);
       overflow: hidden;
 
+      &.sticky {
+        background-color: var(--c-bg-sticky);
+      }
+
       // &:hover {
       //   box-shadow: var(--shadow-lg);
       // }
     }
 
-    &:last-child > div {
-      padding-bottom: 1.5rem;
-    }
-
     .top-icon {
       position: absolute;
       top: 0;
diff --git a/packages/theme/src/client/components/PostMeta.vue b/packages/theme/src/client/components/PostMeta.vue
index cc3f5ecd..3ded6321 100644
--- a/packages/theme/src/client/components/PostMeta.vue
+++ b/packages/theme/src/client/components/PostMeta.vue
@@ -17,6 +17,10 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  showAuthor: {
+    type: Boolean,
+    default: true,
+  },
 })
 const route = useRoute()
 const router = useRouter()
@@ -26,6 +30,12 @@ const tags = computed(() => {
   return (props.post.tags || []).filter((_, i) => i < 4)
 })
 
+const category = computed(() => {
+  return (props.post.category || []).filter((cate) =>
+    Boolean(cate.name?.trim())
+  )
+})
+
 const handleTag = (tag: string): void => {
   const tagConfig = themeLocale.value.tag
   if (!tagConfig) return
@@ -38,15 +48,15 @@ const handleTag = (tag: string): void => {
 </script>
 <template>
   <div class="post-meta" :class="{ border: post.excerpt || border }">
-    <div v-if="post.author" class="post-meta-author">
+    <div v-if="post.author && showAuthor" class="post-meta-author">
       <UserIcon />
       <span>{{ post.author }}</span>
     </div>
-    <div v-if="post.category.length > 0" class="post-meta-category">
+    <div v-if="category.length > 0" class="post-meta-category">
       <FolderIcon />
-      <template v-for="(cate, i) in post.category" :key="cate.type">
+      <template v-for="(cate, i) in category" :key="cate.type">
         <span>{{ cate.name }}</span>
-        <span v-if="i < post.category.length - 1"> / </span>
+        <span v-if="i < category.length - 1"> / </span>
       </template>
     </div>
     <div v-if="tags.length > 0">
diff --git a/packages/theme/src/client/components/Sidebar.vue b/packages/theme/src/client/components/Sidebar.vue
index 58ff4b25..e6b55e2a 100644
--- a/packages/theme/src/client/components/Sidebar.vue
+++ b/packages/theme/src/client/components/Sidebar.vue
@@ -64,7 +64,7 @@ onMounted(() => {
 
   &::-webkit-scrollbar-thumb {
     border-radius: 3.5px;
-    background-color: var(--c-brand);
+    background-color: rgba(34, 34, 34, 0.75);
   }
 
   > .aside-navbar {
diff --git a/packages/theme/src/client/styles/code.scss b/packages/theme/src/client/styles/code.scss
index e787d81a..3478ccf9 100644
--- a/packages/theme/src/client/styles/code.scss
+++ b/packages/theme/src/client/styles/code.scss
@@ -142,7 +142,7 @@ pre[class*='language-'] {
     }
 
     &::-webkit-scrollbar-thumb {
-      background-color: var(--c-brand);
+      background-color: rgba(220, 220, 220, 0.35);
       border-radius: 3px;
     }
 
diff --git a/packages/theme/src/client/styles/vars-dark.scss b/packages/theme/src/client/styles/vars-dark.scss
index e483b9a9..33104026 100644
--- a/packages/theme/src/client/styles/vars-dark.scss
+++ b/packages/theme/src/client/styles/vars-dark.scss
@@ -7,6 +7,7 @@ html.dark {
   --c-bg-lighter: #262c34;
   --c-bg-container: #22272e;
   --c-bg-navbar: rgba(34, 39, 46, 0.75);
+  --c-bg-sticky: var(--c-bg-light);
 
   --c-text: #adbac7;
   --c-text-light: #96a7b7;
diff --git a/packages/theme/src/client/styles/vars.scss b/packages/theme/src/client/styles/vars.scss
index 7db73329..ebc33cae 100644
--- a/packages/theme/src/client/styles/vars.scss
+++ b/packages/theme/src/client/styles/vars.scss
@@ -11,6 +11,7 @@
   --c-bg-navbar: rgba(255, 255, 255, 0.7);
   --c-bg-sidebar: var(--c-bg-container);
   --c-bg-arrow: #ccc;
+  --c-bg-sticky: #f1f2f3;
 
   // text color-scheme
   --c-text: #2c3e50;