💄 update link style

JohnsonMao · Nov 9, 2023 · 8de60ec · 8de60ec
1 parent 9f17eb2
commit 8de60ec
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 13 deletions.
diff --git a/src/app/[lang]/Menu.tsx b/src/app/[lang]/Menu.tsx
@@ -72,7 +72,7 @@ function Menu({ menu }: MenuProps) {
       <span
         className={cn(
           'absolute bottom-0 left-0 h-px w-10',
-          'origin-left translate-x-[var(--active-offset-x)] translate-y-1/3 scale-x-[var(--active-offset-w)] scale-y-50 transition-transform',
+          'origin-left translate-x-[var(--active-offset-x)] translate-y-1/3 scale-x-[var(--active-offset-w)] transition-transform',
           'bg-gradient-to-r from-transparent via-primary-600 to-transparent dark:via-primary-400'
         )}
       />

diff --git a/src/app/[lang]/posts/[postId]/page.tsx b/src/app/[lang]/posts/[postId]/page.tsx
@@ -55,7 +55,7 @@ async function PostPage({ params: { postId } }: PostParams) {
           </nav>
         </aside>
         <div>
-          <article className="prose prose-xl prose-slate mx-auto dark:prose-invert">
+          <article className="prose prose-zinc mx-auto px-4 dark:prose-invert">
             {content}
           </article>
           <Link href="/">回首頁</Link>

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -32,11 +32,11 @@ function Card({
           />
         )}
       </div>
-      <div className="prose prose-slate dark:prose-invert">
+      <div className="prose prose-zinc dark:prose-invert">
         <H2>
           <Link href={`/posts/${id}`}>{title}</Link>
         </H2>
-        <p>{description}</p>
+        <p className="multiline-ellipsis">{description}</p>
         <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
           <div className="flex items-center gap-1">
             <BsCalendar4Week />

diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx
@@ -20,7 +20,7 @@ function Heading({ as, id, className, children, ...otherProps }: HeadingProps) {
       {id && (
         <Link
           href={`#${id}`}
-          className="absolute -left-6 no-underline opacity-0 group-hover:opacity-100"
+          className="absolute right-full pr-2 no-underline opacity-0 group-hover:opacity-100"
         >
           #
         </Link>

diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -45,10 +45,7 @@ function Link<T extends string = string>({
     return (
       <NextLink
         href={adjustedHref as Route}
-        className={cn(
-          'hover:text-primary-700 dark:hover:text-primary-300',
-          className
-        )}
+        className={className}
         {...otherProps}
       >
         {children}
@@ -61,10 +58,7 @@ function Link<T extends string = string>({
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      className={cn(
-        'inline-flex hover:text-primary-700 dark:hover:text-primary-300',
-        className
-      )}
+      className={cn('inline-flex', className)}
       {...otherProps}
     >
       {children}