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: tweak mask

the3ash 4fb62558 e25237c9

+6 -21
+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>