alice.pds.demo.boltless.dev
This repository has no description
appview/pages: incorporate rope svgs into landing
Signed-off-by: oppiliappan <me@oppi.li>
author
oppiliappan
date
(Jul 22, 2026, 12:11 PM +0100)
commit
abb63f3b
abb63f3b82e99b395f332c76d6b50991de7e17af
parent
ce9570e7
ce9570e7dd90fc860be88c4c28aa8aa081a006f3
change-id
uypzkxpz
uypzkxpzxkpvtlllnozzpyomxwnoqruw
+24
-4
+24
-4
appview/pages/templates/timeline/home.html
+24
-4
appview/pages/templates/timeline/home.html
···
71
71
72
72
{{ define "content" }}
73
73
<div class="flex flex-col gap-20 md:gap-40 my-20 md:my-32">
74
-
{{ template "timeline/fragments/hero" . }}
75
-
{{ template "timeline/fragments/preview" . }}
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%)]
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>
82
+
<div class="relative z-10 flex flex-col gap-20 md:gap-40">
83
+
{{ template "timeline/fragments/hero" . }}
84
+
{{ template "timeline/fragments/preview" . }}
85
+
</div>
86
+
</div>
76
87
{{ template "features1" . }}
77
88
{{ template "features2" . }}
78
89
{{ template "recentUpdates" . }}
···
106
117
{{ block "mainLayout" . }}
107
118
<div class="flex-grow relative">
108
119
<div
109
-
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')] [mask-repeat:no-repeat] [mask-position:right_bottom] [-webkit-mask-image:url('https://assets.tangled.network/yarn_ball_mask.svg')] [-webkit-mask-repeat:no-repeat] [-webkit-mask-position:right_bottom] w-full">
120
+
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">
110
121
</div>
111
122
<div class="max-w-screen-xl mx-auto flex flex-col gap-4 relative z-10">
112
123
{{ block "contentLayout" . }}
···
349
360
{{ $iconCircleStyle := "rounded-full flex items-center justify-center border border-gray-200 dark:border-gray-700" }}
350
361
{{ $linkDesktopStyle := "hover:no-underline hidden md:inline-flex absolute -bottom-10 -right-14 items-center gap-2 p-3 text-base btn" }}
351
362
352
-
<div class="w-full flex flex-col gap-6 md:gap-40 max-w-5xl mx-auto px-2">
363
+
<div class="relative">
364
+
<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
365
+
[mask-image:url('https://assets.tangled.network/rope-2.svg'),linear-gradient(to_bottom,transparent_0%,black_15%,black_85%,transparent_100%)]
366
+
[-webkit-mask-image:url('https://assets.tangled.network/rope-2.svg'),linear-gradient(to_bottom,transparent_0%,black_15%,black_85%,transparent_100%)]
367
+
[mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]
368
+
[mask-position:-400px_center,center] [-webkit-mask-position:-400px_center,center]
369
+
[mask-size:auto_200%,100%_100%] [-webkit-mask-size:auto_200%,100%_100%]
370
+
[mask-composite:intersect] [-webkit-mask-composite:source-in]"></div>
371
+
<div class="relative z-10 w-full flex flex-col gap-6 md:gap-40 max-w-5xl mx-auto px-2">
353
372
<div class="{{ $cardStyle }} md:mr-32">
354
373
<div class="{{ $cardInnerStyle }}">
355
374
{{ $moreLink := "https://docs.tangled.org/quick-start-guide.html#login-or-sign-up" }}
···
444
463
</div>
445
464
</div>
446
465
</div>
466
+
</div>
447
467
</div>
448
468
{{ end }}
449
469