feat: change to new link cards styles

Ryaang · Sep 10, 2023 · c95eda1 · c95eda1
1 parent 248b42c
commit c95eda1
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/src/components/Link/LinkCard.vue b/src/components/Link/LinkCard.vue
@@ -74,8 +74,8 @@ export default defineComponent({
   @apply relative;
 
   &.highlighted.category-mode .article .article-content p {
-    @apply h-12 sm:h-14 lg:h-[4.6rem];
-    -webkit-line-clamp: 3;
+    @apply h-8 sm:h-10 lg:h-10;
+    -webkit-line-clamp: 2;
   }
 
   &.article-container {
@@ -99,7 +99,7 @@ export default defineComponent({
   }
 
   .article .article-content p {
-    @apply h-10 sm:h-10 lg:h-12;
+    @apply h-10 sm:h-10 lg:h-10 text-sm;
     display: -webkit-box;
     margin: 0 auto;
     -webkit-line-clamp: 2;

diff --git a/src/components/Link/LinkCategoryList.vue b/src/components/Link/LinkCategoryList.vue
@@ -10,9 +10,7 @@
       <span class="text-ob-dim mb-8 text-lg">
         {{ t(`${convertToLocale(category)}-desc`) }}
       </span>
-      <ul
-        class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-8"
-      >
+      <ul :class="linkWrapperClasses(category)">
         <template v-for="[i, link] of links[category].entries()" :key="i">
           <LinkCard
             :nick="link.nick"
@@ -50,8 +48,15 @@ export default defineComponent({
     const { t } = useI18n()
 
     return {
-      t,
-      convertToLocale
+      linkWrapperClasses: (category: string) => {
+        return {
+          'grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6': true,
+          'xl:grid-cols-5': category !== 'links-badge-vip',
+          'xl:grid-cols-4': category === 'links-badge-vip'
+        }
+      },
+      convertToLocale,
+      t
     }
   }
 })

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -88,9 +88,7 @@ b {
 }
 
 .highlighted {
-  @apply border-solid;
-  border-width: 1px;
-  border-color: var(--bg-sub-accent-55);
+  @apply relative;
 }
 
 .highlighted:before {