fix(theme): improve theme style

Theo-Messi · Sep 25, 2024 · 4833b7a · 4833b7a
1 parent a074067
commit 4833b7a
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 31 deletions.
diff --git a/packages/Solis/components/Page.vue b/packages/Solis/components/Page.vue
@@ -24,11 +24,23 @@
       <p class="describe" v-html="article.frontMatter.description"></p>
     </a>
     <div class="post-info">
+      <i
+        class="fa-solid fa-calendar-week"
+        style="margin-right: 0.25rem; color: var(--vp-c-brand-1)"
+      ></i>
       {{ article.frontMatter.date }}
-      <span v-for="item in article.frontMatter.tags" :key="item">
-        <a :href="withBase(`/pages/tags.html?tag=${item}`)">
-          {{ item }}
-        </a>
+      <span>
+        <span v-for="(item, index) in article.frontMatter.tags" :key="item">
+          <i
+            v-if="index === 0"
+            class="fa-solid fa-tags"
+            style="margin-right: 0.25rem; color: var(--vp-c-brand-1)"
+          ></i>
+          <a :href="withBase(`/pages/tags.html?tag=${item}`)">
+            {{ item
+            }}<span v-if="index < article.frontMatter.tags.length - 1"></span>
+          </a>
+        </span>
       </span>
     </div>
   </div>
@@ -74,8 +86,8 @@ const sortedPosts = computed(() => {
 
 <style lang="scss" scoped>
 .post-list {
-  border-bottom: 1px dashed var(--vp-c-brand-soft);
-  padding: 14px 0;
+  // border-bottom: 1px dashed var(--vp-c-brand-soft);
+  padding: 20px 0;
 }
 
 .post-header {
@@ -86,21 +98,25 @@ const sortedPosts = computed(() => {
 
 .post-title {
   font-size: 1.125rem;
-  font-weight: 500;
   margin: 0.1rem 0;
+  a {
+    &:hover {
+      color: var(--vp-c-text-1);
+    }
+  }
 }
 
 .describe {
-  font-size: 0.9375rem;
+  font-size: 0.9rem;
   color: var(--vp-c-text-2);
-  margin: 5px 0;
+  margin: 0.5rem 0;
   line-height: 1.5rem;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 400;
+  font-weight: 450;
 }
 
 .pagination {
@@ -111,6 +127,8 @@ const sortedPosts = computed(() => {
 
 .link {
   display: inline-block;
+  font-size: 0.9rem;
+  font-weight: 500;
   width: 24px;
   text-align: center;
   border-right: none;
@@ -121,16 +139,5 @@ const sortedPosts = computed(() => {
       color: var(--vp-c-brand-3);
     }
   }
-
-  &:first-child {
-    border-bottom-left-radius: 2px;
-    border-top-left-radius: 2px;
-  }
-
-  &:last-child {
-    border-bottom-right-radius: 2px;
-    border-top-right-radius: 2px;
-    border-right: 1px solid var(--vp-c-divider-light);
-  }
 }
 </style>
diff --git a/packages/Solis/style/styles.scss b/packages/Solis/style/styles.scss
@@ -1,3 +1,5 @@
+@import '@fortawesome/fontawesome-free/css/all.min.css';
+
 :root {
   --vp-c-brand: var(--vp-c-brand-1) !important;
   --li-dot-color: var(--vp-c-brand);
@@ -9,16 +11,18 @@
 }
 
 .vp-doc a {
-  color: var(--vp-c-brand-1);
-  font-weight: 500;
+  color: var(--vp-c-text-1);
+  font-weight: 900;
   text-decoration: none !important;
 }
 
 .content {
   a[rel~='noreferrer']:link,
   a[rel~='noreferrer']:visited {
     color: var(--vp-c-brand);
-    border-bottom: 1px solid var(--vp-c-brand);
+    font-weight: 500;
+    font-size: 1rem;
+    text-decoration: underline solid !important;
   }
 }
 
@@ -85,19 +89,25 @@
 
 .date {
   font-size: 0.875rem;
+  font-weight: 500;
   color: var(--date-color);
 }
 .post-info {
-  font-size: 12px;
+  display: flex;
+  align-items: center;
+  margin-right: 1em;
+  font-size: 0.75rem;
+  color: var(--vp-c-brand-1);
 
   span {
     display: inline-block;
-    padding: 0 8px;
-    background-color: var(--vp-c-bg-alt);
-    margin-right: 10px;
+    margin-left: 0.25rem;
     transition: 0.4s;
-    border-radius: 2px;
-    color: var(--vp-c-text-1);
+    a {
+      font-size: 0.8rem;
+      font-weight: 500;
+      color: var(--vp-c-brand-1);
+    }
   }
 }
 @media (min-width: 768px) {