Fork of Chiri for Astro for my blog
style: tweak mask
+6
-21
+6
-21
src/components/ui/GradientMask.astro
+6
-21
src/components/ui/GradientMask.astro
···
27
27
top: 0;
28
28
left: 0;
29
29
width: 100%;
30
-
height: 6rem;
30
+
height: 5rem;
31
31
z-index: 99;
32
32
pointer-events: none;
33
-
background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
34
-
mask-image: linear-gradient(
35
-
to bottom,
36
-
black 0%,
37
-
rgba(0, 0, 0, 0.8) 20%,
38
-
rgba(0, 0, 0, 0.6) 40%,
39
-
rgba(0, 0, 0, 0.4) 60%,
40
-
rgba(0, 0, 0, 0.2) 80%,
41
-
transparent 100%
42
-
);
43
-
-webkit-mask-image: linear-gradient(
44
-
to bottom,
45
-
black 0%,
46
-
rgba(0, 0, 0, 0.8) 20%,
47
-
rgba(0, 0, 0, 0.6) 40%,
48
-
rgba(0, 0, 0, 0.4) 60%,
49
-
rgba(0, 0, 0, 0.2) 80%,
50
-
transparent 100%
51
-
);
33
+
background-color: var(--bg);
34
+
backdrop-filter: blur(3px);
35
+
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
36
+
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
52
37
opacity: 0;
53
-
transition: opacity 0.3s ease;
38
+
transition: opacity 0.2s ease-out;
54
39
}
55
40
</style>