natty-gay/components/navigation.vue

<template>
    <Link rel="preload" :href="borderHover" as="image" />
    <Link rel="preload" :href="borderActive" as="image" />
    <header>
        <nav>
            <ul>
                <li>
                    <NuxtLink to="/">
                        <img
                            src="~/assets/nav-icon-home.webp"
                            alt=""
                            aria-hidden="true"
                        />
                        Home
                    </NuxtLink>
                </li>
                <li class="deco">&nbsp;</li>
                <li data-icon="nav-about">
                    <NuxtLink to="/about">
                        <img
                            src="~/assets/nav-icon-butterfly.webp"
                            alt=""
                            aria-hidden="true"
                        />
                        Who we are
                    </NuxtLink>
                </li>
                <li class="deco">
                    <img
                        src="~/assets/star-animated-1.webp"
                        class="star-1"
                        aria-hidden="true"
                    />
                </li>
                <li data-icon="nav-work">
                    <NuxtLink to="/work">
                        <img
                            src="~/assets/nav-icon-fox.webp"
                            alt=""
                            aria-hidden="true"
                        />

                        What we make
                    </NuxtLink>
                </li>
                <li class="deco">&nbsp;</li>
                <li data-icon="nav-work">
                    <NuxtLink to="/blog">
                        <img
                            src="~/assets/nav-icon-pencil.webp"
                            alt=""
                            aria-hidden="true"
                        />
                        Blog
                    </NuxtLink>
                </li>
                <li class="deco">&nbsp;</li>
                <li class="deco">
                    <img
                        src="~/assets/star-animated-2.webp"
                        class="star-2"
                        aria-hidden="true"
                    />
                </li>
            </ul>
        </nav>
    </header>
</template>
<script setup>
import borderHover from "~/assets/button-border-hover.webp";
import borderActive from "~/assets/button-border-active.webp";
</script>
<style lang="scss" scoped>
header {
    margin: 12px 0;
    background-image: url("~/assets/black-hole.webp");
    background-position: center;
    background-size: auto 150%;
    background-repeat: no-repeat;
}

ul,
li {
    padding: 0;
    margin: 0;
}

ul {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-items: center;
    justify-content: center;
    gap: 1em;
    padding: 0.5em;

    @media (max-width: 640px) {
        grid-template-columns: repeat(2, auto);

        & .deco {
            display: none;
        }
    }

    @media (max-width: 400px) {
        grid-template-columns: auto;
    }

    & li {
        list-style-type: none;

        & .star-1 {
            width: 24px;
            height: 24px;

            @media (prefers-reduced-motion) {
                visibility: hidden;
            }
        }

        & .star-2 {
            @media (prefers-reduced-motion) {
                visibility: hidden;
            }
        }

        & a {
            padding: 4px 8px;
            display: inline-flex;
            border-radius: 4px;
            text-decoration: none;
            border: 6px solid transparent;
            border-image: url("~/assets/button-border.webp") 50 / 10px / 2px;
            line-height: 1em;
            align-items: center;
            background-color: $ui-surface-bg;

            & img {
                width: 1.5em;
                height: 1.5em;
                margin-right: 0.4em;
                mix-blend-mode: color-burn;
            }

            &:not(:hover):not(:active) {
                &:link img {
                    filter: contrast(2);
                    mix-blend-mode: multiply;
                }
            }

            &:link {
                color: inherit;
            }

            &:visited {
                color: $ui-visited-fg;
            }

            &:hover {
                color: $ui-hover-fg;
                background-color: $ui-hover-bg;
                border-image: url("~/assets/button-border-hover.webp") 50 / 10px /
                    2px;

                @media (prefers-reduced-motion) {
                    &:not(:active) {
                        box-shadow: 1px 1px 2px $ui-hover-fg;
                    }
                }
            }

            @media not (prefers-reduced-motion) {
                & {
                    transition: box-shadow 0.25s ease-in-out;
                    box-shadow:
                        0px 0px 32px #cfafff00,
                        0px 0px 16px #cfafff00,
                        0px 0px 8px #cfafff00,
                        0px 0px 4px #cfafff00;
                }

                &:hover {
                    box-shadow:
                        0px 0px 32px #cfafff,
                        0px 0px 16px #cfafff,
                        0px 0px 8px #cfafff,
                        0px 0px 4px #cfafff;
                }
            }

            &:active {
                color: $ui-active-fg;
                background-color: $ui-active-bg;
                border-image: url("~/assets/button-border-active.webp") 50 /
                    10px / 2px;
            }
        }
    }
}
</style>