update feature highlight

sites/postcss-preset-env/index.njk

@@ -112,14 +112,13 @@ module.exports = {
 				</div>
 				<div class="ppe-section-decoration">
 					<ul class="ppe-word-rotate">
-						<li>custom properties</li>
-						<li><code>:is</code> pseudo class</li>
+						<li>cascade layers</li>
+						<li><code>:is()</code> pseudo class</li>
 						<li>media query ranges</li>
 						<li>nesting rules</li>
 						<li><code>oklab()</code> function</li>
-						<li><code>system-ui</code> font family</li>
 						<li>custom selectors</li>
-						<li><code>color()</code> function</li>
+						<li><code>light-dark()</code></li>
 						<li><code>color-mix()</code> function</li>
 					</ul>
 				</div>

sites/postcss-preset-env/src/static/css/pages/_landing.css

@@ -112,13 +112,15 @@
 	height: 1em;
 	position: relative;
 	display: inline-block;
+	text-align: center;
 
 	& li {
 		height: 1em;
 		position: absolute;
 		bottom: 0;
 		left: 0;
 		transition: all 0.5s;
+		width: 100%;
 	}
 }
 

sites/postcss-preset-env/src/static/js/home/index.js

@@ -30,6 +30,7 @@
 			const op = (Math.cos(rad) + 1) / 2;
 			words[i].style.transform = `perspective(100px) translateZ(${translateZ}px) translateY(${translateY}%)`;
 			words[i].style.opacity = `${op}`;
+			words[i].style.filter = `blur(${(1 - op) * 2.5}px)`;
 		}
 	}
 })();