zepp/emmas.place
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

creation of Navigation component

Browse Source
This commit is contained in:
emma 2025-02-19 20:01:04 -05:00
parent 1597f9cdc2
commit 661d0f8564
2 changed files with 76 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/Navigation.astro
View File

@ -0,0 +1,73 @@
---
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>

36
src/styles/global.css
View File

@ -27,9 +27,6 @@
--disability-pride-white-light: #e8e8e8;
--disability-pride-blue-light: #7bc2e0;
--disability-pride-green-light: #3bb07d;
--trans-pride-blue-light: #5bcefa;
--trans-pride-pink-light: #f5a9b8;
--trans-pride-white-light: #ffffff;
}
*,
@ -72,18 +69,14 @@ details {
margin: 0.5rem;
}
main,
nav {
padding-bottom: 0.5rem;
font-family: system-ui;
letter-spacing: 0.05rem;
}
main {
background-color: var(--background-color);
height: 85vh;
width: 60vw;
padding-left: 2.5rem;
padding-bottom: 0.5rem;
font-family: system-ui;
letter-spacing: 0.05rem;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--scroll-gutter) var(--scroll-bar);
@ -149,29 +142,6 @@ footer {
gap: 0.75rem;
}
nav {
background-color: var(--background-color);
grid-row: 2/3;
grid-column: 1/2;
justify-self: end;
align-self: end;
width: 20vw;
height: 85vh;
padding-top: 0.75rem;
padding-left: 1.5rem;
border-right: 10px solid;
border-image-slice: 1;
border-width: 5px;
border-image-source: linear-gradient(
to bottom,
var(--trans-pride-blue-light) 0 20%,
var(--trans-pride-pink-light) 20% 40%,
var(--trans-pride-white-light) 40% 60%,
var(--trans-pride-pink-light) 60% 80%,
var(--trans-pride-blue-light) 80%
);
}
section {
width: 55vw;
}