Fork of Chiri for Astro for my blog
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

style: improve gradient mask with smoother fade transition

the3ash a35463ea 87919088

+33 -3
+33 -3
src/components/ui/GradientMask.astro
··· 27 27 top: 0; 28 28 left: 0; 29 29 width: 100%; 30 - height: 1.75rem; 30 + height: 1.5rem; 31 31 z-index: 99; 32 32 pointer-events: none; 33 33 background-color: var(--bg); 34 34 backdrop-filter: blur(1px); 35 - mask-image: linear-gradient(to bottom, black 0%, transparent 100%); 36 - -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%); 35 + mask-image: linear-gradient( 36 + to bottom, 37 + black 0%, 38 + rgba(0, 0, 0, 0.738) 19%, 39 + rgba(0, 0, 0, 0.541) 34%, 40 + rgba(0, 0, 0, 0.382) 47%, 41 + rgba(0, 0, 0, 0.278) 56.5%, 42 + rgba(0, 0, 0, 0.194) 65%, 43 + rgba(0, 0, 0, 0.126) 73%, 44 + rgba(0, 0, 0, 0.075) 80.2%, 45 + rgba(0, 0, 0, 0.042) 86.1%, 46 + rgba(0, 0, 0, 0.021) 91%, 47 + rgba(0, 0, 0, 0.008) 95.2%, 48 + rgba(0, 0, 0, 0.002) 98.2%, 49 + transparent 100% 50 + ); 51 + -webkit-mask-image: linear-gradient( 52 + to bottom, 53 + black 0%, 54 + rgba(0, 0, 0, 0.738) 19%, 55 + rgba(0, 0, 0, 0.541) 34%, 56 + rgba(0, 0, 0, 0.382) 47%, 57 + rgba(0, 0, 0, 0.278) 56.5%, 58 + rgba(0, 0, 0, 0.194) 65%, 59 + rgba(0, 0, 0, 0.126) 73%, 60 + rgba(0, 0, 0, 0.075) 80.2%, 61 + rgba(0, 0, 0, 0.042) 86.1%, 62 + rgba(0, 0, 0, 0.021) 91%, 63 + rgba(0, 0, 0, 0.008) 95.2%, 64 + rgba(0, 0, 0, 0.002) 98.2%, 65 + transparent 100% 66 + ); 37 67 opacity: 0; 38 68 transition: background-color 0.2s ease-out; 39 69 }