From 340e2cda72dc157f355a6172e247ca89d84b0702 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 22 Jul 2026 19:45:02 +0200
Subject: [PATCH] appview/home: fix masks & backgrounds

Signed-off-by: eti <eti@eti.tf>
---
 appview/pages/templates/timeline/home.html | 37 ++++++++++++++--------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/appview/pages/templates/timeline/home.html b/appview/pages/templates/timeline/home.html
index 7080dedc..3e56fb0f 100644
--- a/appview/pages/templates/timeline/home.html
+++ b/appview/pages/templates/timeline/home.html
@@ -72,13 +72,18 @@
 {{ define "content" }}
   <div class="flex flex-col gap-20 md:gap-40 my-20 md:my-32">
     <div class="relative">
-      <div class="hidden md:block absolute inset-0 pointer-events-none z-0 opacity-50 dark:opacity-5 bg-slate-200 dark:bg-slate-400
-        [mask-image:url('https://assets.tangled.network/Rope.svg'),linear-gradient(to_bottom,black_0%,black_60%,transparent_100%)]
-        [-webkit-mask-image:url('https://assets.tangled.network/Rope.svg'),linear-gradient(to_bottom,black_0%,black_60%,transparent_100%)]
+      <div class="hidden md:block absolute inset-0 pointer-events-none z-0 opacity-50 dark:opacity-5
+        [mask-image:linear-gradient(to_bottom,black_0%,black_60%,transparent_100%)]
+        [-webkit-mask-image:linear-gradient(to_bottom,black_0%,black_60%,transparent_100%)]
         [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]
-        [mask-position:10%_center,center] [-webkit-mask-position:10%_center,center]
-        [mask-size:contain,100%_100%] [-webkit-mask-size:contain,100%_100%]
-        [mask-composite:intersect] [-webkit-mask-composite:source-in]"></div>
+        [mask-size:100%_100%] [-webkit-mask-size:100%_100%]">
+        <div class="absolute inset-0 bg-slate-200 dark:bg-slate-400
+          [mask-image:url('https://assets.tangled.network/Rope.svg')]
+          [-webkit-mask-image:url('https://assets.tangled.network/Rope.svg')]
+          [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]
+          [mask-position:10%_center] [-webkit-mask-position:10%_center]
+          [mask-size:contain] [-webkit-mask-size:contain]"></div>
+      </div>
       <div class="relative z-10 flex flex-col gap-20 md:gap-40">
         {{ template "timeline/fragments/hero" . }}
         {{ template "timeline/fragments/preview" . }}
@@ -118,7 +123,8 @@
 {{ block "mainLayout" . }}
   <div class="flex-grow relative">
     <div
-      class="absolute opacity-50 dark:opacity-5 inset-x-0 top-0 bottom-[-50px] md:bottom-[-150px] pointer-events-none bg-slate-200 dark:bg-slate-400 [mask-image:url('https://assets.tangled.network/yarn_ball_mask.svg'),linear-gradient(to_top,transparent_0px,black_250px)] [-webkit-mask-image:url('https://assets.tangled.network/yarn_ball_mask.svg'),linear-gradient(to_top,transparent_0px,black_250px)] [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat] [mask-position:right_bottom,center] [-webkit-mask-position:right_bottom,center] [mask-size:auto,100%_100%] [-webkit-mask-size:auto,100%_100%] [mask-composite:intersect] [-webkit-mask-composite:source-in] w-full">
+      class="absolute opacity-50 dark:opacity-5 inset-x-0 top-0 bottom-[-50px] md:bottom-[-150px] pointer-events-none w-full [mask-image:linear-gradient(to_top,transparent_0px,black_250px)] [-webkit-mask-image:linear-gradient(to_top,transparent_0px,black_250px)] [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat] [mask-size:100%_100%] [-webkit-mask-size:100%_100%]">
+      <div class="absolute inset-0 bg-slate-200 dark:bg-slate-400 [mask-image:url('https://assets.tangled.network/yarn_ball_mask.svg')] [-webkit-mask-image:url('https://assets.tangled.network/yarn_ball_mask.svg')] [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat] [mask-position:right_bottom] [-webkit-mask-position:right_bottom] [mask-size:auto] [-webkit-mask-size:auto]"></div>
     </div>
     <div class="max-w-screen-xl mx-auto flex flex-col gap-4 relative z-10">
       {{ block "contentLayout" . }}
@@ -415,13 +421,18 @@
   {{ $linkDesktopStyle := "hover:no-underline hidden md:inline-flex absolute -bottom-10 -right-14 items-center gap-2 p-3 text-base btn" }}
 
   <div class="relative">
-    <div class="hidden md:block absolute -top-32 -bottom-32 inset-x-0 pointer-events-none z-0 opacity-50 dark:opacity-5 bg-slate-200 dark:bg-slate-400
-      [mask-image:url('https://assets.tangled.network/rope-2.svg'),linear-gradient(to_bottom,transparent_0%,black_15%,black_85%,transparent_100%)]
-      [-webkit-mask-image:url('https://assets.tangled.network/rope-2.svg'),linear-gradient(to_bottom,transparent_0%,black_15%,black_85%,transparent_100%)]
+    <div class="hidden md:block absolute -top-32 -bottom-32 inset-x-0 pointer-events-none z-0 opacity-50 dark:opacity-5
+      [mask-image:linear-gradient(to_bottom,transparent_0%,black_15%,black_85%,transparent_100%)]
+      [-webkit-mask-image:linear-gradient(to_bottom,transparent_0%,black_15%,black_85%,transparent_100%)]
       [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]
-      [mask-position:-400px_center,center] [-webkit-mask-position:-400px_center,center]
-      [mask-size:auto_200%,100%_100%] [-webkit-mask-size:auto_200%,100%_100%]
-      [mask-composite:intersect] [-webkit-mask-composite:source-in]"></div>
+      [mask-size:100%_100%] [-webkit-mask-size:100%_100%]">
+      <div class="absolute inset-0 bg-slate-200 dark:bg-slate-400
+        [mask-image:url('https://assets.tangled.network/rope-2.svg')]
+        [-webkit-mask-image:url('https://assets.tangled.network/rope-2.svg')]
+        [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]
+        [mask-position:-400px_center] [-webkit-mask-position:-400px_center]
+        [mask-size:auto_200%] [-webkit-mask-size:auto_200%]"></div>
+    </div>
   <div class="relative z-10 w-full flex flex-col gap-6 md:gap-40 max-w-5xl mx-auto px-2">
     <div class="{{ $cardStyle }} md:mr-32">
       <div class="{{ $cardInnerStyle }}">
-- 
2.51.2