<template>
    <footer>
        <div class="separator">
            Made by Natty &middot; 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>