emmas.place/src/components/Navigation.astro

---
const backgroundColor = "#ffd4de";
const backgroundColorNightMode = "#240046";
const transPrideBlue =  "#5bcefa";
const transPridePink =  "#f5a9b8";
const transPrideWhite = "#ffffff";
---

<nav>
	<h3>life of emma</h3>
	<ul>
		<li>
				emma's self
		</li>
		<li>
				emma's interests
		</li>
		<li>
				emma's rays of sunshine
		</li>
	</ul>
	<h3>site information</h3>
	<ul>
		<li><a href="/">home</a></li>
		<li><a href="/site/about">about</a></li>
		<li><a href="/site/why">why</a></li>
		<li><a href="/site/who">who</a></li>
		<li><a href="/site/other">other emma things</a></li>
		<li><a href="/site/contact">contact</a></li>
        <li><a href="/site/guestbook">guestbook</a></li>
		<li>changelog</li>
	</ul>

    <h3>controls</h3>
    <ul>
        <li><a href="#top">top of page</a></li>
    </ul>
</nav>

<style define:vars={{backgroundColor, backgroundColorNightMode, transPrideBlue, transPridePink, transPrideWhite}}>
    nav {
        background-color: var(--backgroundColor);
        grid-row: 2/3;
        grid-column: 1/2;
        width: 20vw;
        height: 70vh;
        font-family: system-ui;
        letter-spacing: 0.05rem;
        position: sticky;
        top: 0;
        justify-self: end;
        padding-top: 0.75rem;
        padding-left: 1.5rem;
        border-radius: 25px;
        /* border-right: 10px solid;
        border-image-slice: 1;
        border-width: 5px;
        border-image-source: linear-gradient(
            to bottom,
            var(--transPrideBlue) 0 20%,
            var(--transPridePink) 20% 40%,
            var(--transPrideWhite) 40% 60%,
            var(--transPridePink) 60% 80%,
            var(--transPrideBlue) 80%
        ); */
    }

    nav ul li {
        padding-bottom: 0.33rem;
    }

    nav ul li a {
        font-size: 1rem;
    }

    @media (prefers-color-scheme: dark) {
        nav {
            background-color: var(--backgroundColorNightMode);
        }
    }
</style>