alice.pds.demo.boltless.dev
This repository has no description
appview/home: fix masks & backgrounds
Signed-off-by: eti <eti@eti.tf>
author
eti
date
(Jul 22, 2026, 7:45 PM +0200)
commit
340e2cda
340e2cda72dc157f355a6172e247ca89d84b0702
parent
00084917
000849172de8b0a618a6baf697245affc5f8e319
+24
-13
+24
-13
appview/pages/templates/timeline/home.html
+24
-13
appview/pages/templates/timeline/home.html
···
72
72
{{ define "content" }}
73
73
<div class="flex flex-col gap-20 md:gap-40 my-20 md:my-32">
74
74
<div class="relative">
75
-
<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
76
-
[mask-image:url('https://assets.tangled.network/Rope.svg'),linear-gradient(to_bottom,black_0%,black_60%,transparent_100%)]
77
-
[-webkit-mask-image:url('https://assets.tangled.network/Rope.svg'),linear-gradient(to_bottom,black_0%,black_60%,transparent_100%)]
75
+
<div class="hidden md:block absolute inset-0 pointer-events-none z-0 opacity-50 dark:opacity-5
76
+
[mask-image:linear-gradient(to_bottom,black_0%,black_60%,transparent_100%)]
77
+
[-webkit-mask-image:linear-gradient(to_bottom,black_0%,black_60%,transparent_100%)]
78
78
[mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]
79
-
[mask-position:10%_center,center] [-webkit-mask-position:10%_center,center]
80
-
[mask-size:contain,100%_100%] [-webkit-mask-size:contain,100%_100%]
81
-
[mask-composite:intersect] [-webkit-mask-composite:source-in]"></div>
79
+
[mask-size:100%_100%] [-webkit-mask-size:100%_100%]">
80
+
<div class="absolute inset-0 bg-slate-200 dark:bg-slate-400
81
+
[mask-image:url('https://assets.tangled.network/Rope.svg')]
82
+
[-webkit-mask-image:url('https://assets.tangled.network/Rope.svg')]
83
+
[mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]
84
+
[mask-position:10%_center] [-webkit-mask-position:10%_center]
85
+
[mask-size:contain] [-webkit-mask-size:contain]"></div>
86
+
</div>
82
87
<div class="relative z-10 flex flex-col gap-20 md:gap-40">
83
88
{{ template "timeline/fragments/hero" . }}
84
89
{{ template "timeline/fragments/preview" . }}
···
118
123
{{ block "mainLayout" . }}
119
124
<div class="flex-grow relative">
120
125
<div
121
-
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">
126
+
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%]">
127
+
<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>
122
128
</div>
123
129
<div class="max-w-screen-xl mx-auto flex flex-col gap-4 relative z-10">
124
130
{{ block "contentLayout" . }}
···
415
421
{{ $linkDesktopStyle := "hover:no-underline hidden md:inline-flex absolute -bottom-10 -right-14 items-center gap-2 p-3 text-base btn" }}
416
422
417
423
<div class="relative">
418
-
<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
419
-
[mask-image:url('https://assets.tangled.network/rope-2.svg'),linear-gradient(to_bottom,transparent_0%,black_15%,black_85%,transparent_100%)]
420
-
[-webkit-mask-image:url('https://assets.tangled.network/rope-2.svg'),linear-gradient(to_bottom,transparent_0%,black_15%,black_85%,transparent_100%)]
424
+
<div class="hidden md:block absolute -top-32 -bottom-32 inset-x-0 pointer-events-none z-0 opacity-50 dark:opacity-5
425
+
[mask-image:linear-gradient(to_bottom,transparent_0%,black_15%,black_85%,transparent_100%)]
426
+
[-webkit-mask-image:linear-gradient(to_bottom,transparent_0%,black_15%,black_85%,transparent_100%)]
421
427
[mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]
422
-
[mask-position:-400px_center,center] [-webkit-mask-position:-400px_center,center]
423
-
[mask-size:auto_200%,100%_100%] [-webkit-mask-size:auto_200%,100%_100%]
424
-
[mask-composite:intersect] [-webkit-mask-composite:source-in]"></div>
428
+
[mask-size:100%_100%] [-webkit-mask-size:100%_100%]">
429
+
<div class="absolute inset-0 bg-slate-200 dark:bg-slate-400
430
+
[mask-image:url('https://assets.tangled.network/rope-2.svg')]
431
+
[-webkit-mask-image:url('https://assets.tangled.network/rope-2.svg')]
432
+
[mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]
433
+
[mask-position:-400px_center] [-webkit-mask-position:-400px_center]
434
+
[mask-size:auto_200%] [-webkit-mask-size:auto_200%]"></div>
435
+
</div>
425
436
<div class="relative z-10 w-full flex flex-col gap-6 md:gap-40 max-w-5xl mx-auto px-2">
426
437
<div class="{{ $cardStyle }} md:mr-32">
427
438
<div class="{{ $cardInnerStyle }}">