From eef4dddaa32f762cbcc4782850fdee1e8ba57608 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Sat, 8 Jul 2023 23:45:02 +0800
Subject: [PATCH] fix: mask

Signed-off-by: Innei <i@innei.in>
---
 src/app/(home)/page.tsx                       | 2 +-
 src/components/ui/markdown/renderers/link.tsx | 2 +-
 src/components/ui/rich-link/Favicon.tsx       | 2 +-
 src/styles/tailwindcss.css                    | 4 ++++
 src/styles/theme.css                          | 6 ++++++
 5 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 4461562517..2c8a96368e 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -367,7 +367,7 @@ const NoteScreen = () => {
 
                 {!!theLast.images?.[0]?.src && (
                   <div
-                    className="absolute inset-0 bg-cover bg-center"
+                    className="mask-top absolute inset-0 bg-cover bg-center opacity-50"
                     style={{
                       background: `url(${theLast.images[0].src})`,
                     }}
diff --git a/src/components/ui/markdown/renderers/link.tsx b/src/components/ui/markdown/renderers/link.tsx
index 0f0d40e12a..5afd935854 100644
--- a/src/components/ui/markdown/renderers/link.tsx
+++ b/src/components/ui/markdown/renderers/link.tsx
@@ -80,7 +80,7 @@ export const MLink: FC<{
       type="tooltip"
       TriggerComponent={useCallback(
         () => (
-          <span className="inline-flex items-center">
+          <span className="inline items-center">
             {!showRichLink && <Favicon href={href} />}
             {showRichLink ? (
               <RichLink name={parsedName} source={parsedType} />
diff --git a/src/components/ui/rich-link/Favicon.tsx b/src/components/ui/rich-link/Favicon.tsx
index c3ad68d84a..b71bdd004e 100644
--- a/src/components/ui/rich-link/Favicon.tsx
+++ b/src/components/ui/rich-link/Favicon.tsx
@@ -48,7 +48,7 @@ export const Favicon: Component<FaviconProps> = (props) => {
   if (!prefixToIconMap[nextSource]) return null
 
   return (
-    <span className={clsxm('mr-1', className)}>
+    <span className={clsxm('mr-1 [&_svg]:inline', className)}>
       {prefixToIconMap[nextSource]}
     </span>
   )
diff --git a/src/styles/tailwindcss.css b/src/styles/tailwindcss.css
index 5116b3e4a7..5101a95b10 100644
--- a/src/styles/tailwindcss.css
+++ b/src/styles/tailwindcss.css
@@ -62,6 +62,10 @@ textarea {
   font-size: 16px;
 }
 
+a {
+  @apply break-all;
+}
+
 @screen lg {
   input,
   textarea {
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 1354406f13..0e52787c9c 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -96,6 +96,12 @@
     animation: blink 2s ease infinite both;
   }
 
+  .mask-top {
+    mask-image: linear-gradient(to top, transparent, rgb(0 0 0 / 100%) 90%);
+    opacity: 0.3;
+    transition: opacity 0.3s ease-in-out;
+  }
+
   @keyframes blink {
     0% {
       opacity: 0;