/* blog-list.css — page-specific styles for /blog/ (bento grid index). * * Tailwind tokens (primary, secondary, on-*, surface-container-*, * outline-variant, spacing scale, font families) are loaded globally by * base.html via static/js/tailwind-config.js. This file only contains * rules that Tailwind utilities cannot express (Material Symbols variation * settings, page background, bento-card hover glow). */ /* Material Symbols variation: FILL=0 (outline), wght=400, GRAD=0, opsz=24. Set once here so any on the page picks up the same variation without per-element styling. */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Page background. Mirrors templates-example/blog-list.html's style. Tailwind's bg-surface-container-lowest would also work but the static example uses this explicit hex value. */ body { background-color: #0e0e0e; color: #e5e2e1; } /* Bento card micro-interaction: primary-tinted border + soft glow on hover. The same --mouse-x / --mouse-y custom properties are set by static/js/blog-list.js for any future radial-gradient mask. */ .bento-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .bento-card:hover { border-color: #c0c1ff; box-shadow: 0 0 20px rgba(192, 193, 255, 0.1); }