Fork of Chiri for Astro for my blog
style(GradientMask): add responsive height & tweak styles
+8
-2
+8
-2
src/components/ui/GradientMask.astro
+8
-2
src/components/ui/GradientMask.astro
···
27
27
top: 0;
28
28
left: 0;
29
29
width: 100%;
30
-
height: 5rem;
30
+
height: 1.75rem;
31
31
z-index: 99;
32
32
pointer-events: none;
33
33
background-color: var(--bg);
34
-
backdrop-filter: blur(3px);
34
+
backdrop-filter: blur(1px);
35
35
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
36
36
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
37
37
opacity: 0;
38
38
transition: background-color 0.2s ease-out;
39
+
}
40
+
41
+
@media (min-width: 768px) {
42
+
.gradient-mask {
43
+
height: 4rem;
44
+
}
39
45
}
40
46
</style>