<template> <footer> <div class="separator"> Made by Natty · See us on Fedi: <a href="https://astolfo.social/@natty" target="_blank"> @natty@astolfo.social </a> </div> <div class="content"> <div> <div></div> </div> <div class="footer-section"> <div class="banners"> <img src="~/assets/88x31/blobfox.png" alt="A banner of a stylized fox looking like a fluffy blob" /> </div> </div> <div class="footer-section"> <h2>See also:</h2> <small>(Message us and we'll add your banner)</small> <div class="banners"> <a href="https://lunareclipse.zone" target="_blank"> <img src="~/assets/88x31/lunar-eclipse-zone.gif" alt="A banner of a crimson-red moon captioned Lunar Eclipse Zone" /> </a> <a href="https://pinkcreeper100.pages.gay" target="_blank"> <img src="~/assets/88x31/pc100.png" alt='A banner with a pink creeper face labeled "pc100"' /> </a> <a href="https://zvava.org" target="_blank"> <img src="~/assets/88x31/zvava.org.png" alt="A purple-ish banner for zvava.org" /> </a> </div> </div> <div class="footer-section"> <h2>Webrings</h2> <div>[not yet]</div> </div> </div> </footer> </template> <style lang="scss" scoped> footer { margin-top: 20px; .separator { background-color: $glass-surface; border-top-right-radius: 5px; border-top-left-radius: 5px; backdrop-filter: blur(2px); padding: 10px; color: $ui-surface-bg; border-top: 3px double $glass-surface; border-left: 3px double $glass-surface; border-right: 3px double $glass-surface; & a { &:link, &:hover, &:visited { color: $ui-surface-bg; } } } border-top-right-radius: 5px; border-top-left-radius: 5px; max-width: 1400px; align-self: center; width: 100vw; box-shadow: 0px 0px 10px $ui-hover-fg; .content { background-color: $ui-surface-bg; padding: 5px 5px 20px 5px; box-sizing: border-box; border-left: 3px double $primary-surface; border-right: 3px double $primary-surface; & .footer-section { h2 { margin: 0; } & .banners { display: flex; flex-direction: row; gap: 4px; margin: 4px 0px; & img { display: inline-block; height: 31px; } } } } } </style>