fix: mask

Signed-off-by: Innei <i@innei.in>
Innei · Jul 8, 2023 · eef4ddd · eef4ddd · vercel · Jul 8, 2023
1 parent 4a94877
commit eef4ddd
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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;