emmas.place/src/components/Navigation.astro

---
const backgroundColor = "#ffd4de";
const backgroundColorNightMode = "#240046";
---

<nav>
	<h3>life of emma</h3>
	<ul>
		<li>
				<a href="/life/self/">emma's self</a>
		</li>
		<li>
				<a href="/life/interests/">emma's interests</a>
                 <!-- emma's interests -->
		</li>
		<li>
				<!-- <a href="/life/sunshine/">emma's rays of sunshine</a> -->
                 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>
	</ul>

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

<style define:vars={{backgroundColor, backgroundColorNightMode}}>
    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;
        margin-left: 2rem;
        padding-top: 0.75rem;
        padding-left: 1.5rem;
        border-radius: 25px;
    }

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

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

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