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

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

<style define:vars={{backgroundColor, transPrideBlue, transPridePink, transPrideWhite}}>
    nav {
        background-color: var(--backgroundColor);
        grid-row: 2/3;
        grid-column: 1/2;
        justify-self: end;
        align-self: end;
        width: 20vw;
        height: 85vh;
        font-family: system-ui;
        letter-spacing: 0.05rem;
        padding-top: 0.75rem;
        padding-left: 1.5rem;
        padding-bottom: 0.5rem;
        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.5rem;
    }

    nav ul li a {
        font-size: 1rem;
    }
</style>