---import { Image } from 'astro:assets';import logo from '../assests/logo.jpg';const year = new Date().getFullYear();---<footer class="site-footer"> <div class="container footer-inner"> <div class="footer-brand"> <Image src={logo} alt="" width={40} height={40} class="footer-mark" /> <span class="footer-name">Ryuzaki</span> </div> <p class="footer-meta"> © {year} · Work in progress · Tauri v2 · Rust · React 18 </p> <div class="footer-links"> <a class="footer-link" href="https://github.com/RyuzakiProject" target="_blank" rel="noopener noreferrer">Project</a> <span class="footer-sep" aria-hidden="true">·</span> <a class="footer-link" href="https://github.com/louiml" target="_blank" rel="noopener noreferrer">@louiml</a> </div> </div></footer><style> .site-footer { margin-top: 40px; padding: 48px 0 56px; border-top: 1px solid var(--separator); background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .footer-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 4px; } .footer-mark { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); } .footer-name { font-family: var(--mono); font-size: 0.95rem; color: var(--accent); letter-spacing: -0.01em; } .footer-links { display: flex; align-items: center; gap: 10px; margin-top: 2px; } .footer-link { font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.02em; transition: color 160ms var(--ease-spring-soft); } .footer-link:hover { color: var(--accent); } .footer-sep { color: var(--text-dim); font-size: 0.72rem; } .footer-meta { margin: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--text-dim); }</style>