69 lines
1.6 KiB
Plaintext
69 lines
1.6 KiB
Plaintext
---
|
|
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> |