elh/elh.gay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

nav bar svelte

Browse source
This commit is contained in:
elh 2024-06-17 16:28:26 -04:00
parent 707aa66b35
commit e769979948
7 changed files with 73 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/Nav-bar.astro
View file

@ -1,8 +1,19 @@
--- ---
import Button from "../components/navbutton.svelte"
const pageTitle= Astro.props
--- ---
<a active=
<div class="nav-links"> <div class="nav-links">
<Button class="navbutton">
<a href="/">Home</a> <a href="/">Home</a>
<a href="/about-me">About Me</a> </Button>
<Button class="navbutton">
<a href="/about">About Me</a>
</Button>
<Button class="navbutton">
<a href="/blog">Blog</a> <a href="/blog">Blog</a>
</Button>
<Button class="navbutton">
<a href="https://youtube.com/watch?v=brwS_ZmVaRc">Caramelldansen</a> <a href="https://youtube.com/watch?v=brwS_ZmVaRc">Caramelldansen</a>
</Button>
</div> </div>

7
src/components/footer.astro Normal file
View file

@ -0,0 +1,7 @@
---
---
<footer>
<div class="footer">
<a href="https://git.lgbt/elh/elh.gay">Source Code</a>
</div>
</footer>

19
src/components/navbutton.svelte Normal file
View file

@ -0,0 +1,19 @@
<script>
let buttonProps = {
class:[$$restProps.class]
}
</script>
<button on:click
on:mouseover
on:mouseenter
on:mouseleave
{...buttonProps}>
<slot/>
</button>
<style>
.navbutton {
}
</style>

7
src/layouts/Sitelayout.astro
View file

@ -1,7 +1,8 @@
--- ---
import Header from "../components/header.astro"; import Header from "../components/header.astro";
import Footer from "../components/footer.astro"
import '../styles/global.css'; import '../styles/global.css';
const { pageTitle} = Astro.props const {pageTitle} = Astro.props
--- ---
<html lang="en"> <html lang="en">
<head> <head>
@ -13,7 +14,9 @@ const { pageTitle} = Astro.props
</head> </head>
<body> <body>
<Header/> <Header/>
<h1>{pageTitle}</h1>
<slot /> <slot />
</body> </body>
<footer>
<Footer/>
</footer>
</html> </html>

7
src/pages/about.astro Normal file
View file

@ -0,0 +1,7 @@
---
import Layout from "../layouts/Sitelayout.astro"
const pageTitle="About Me";
---
<Layout pageTitle={pageTitle}>
<h1>about me</h1>
</Layout>

7
src/pages/blog.astro Normal file
View file

@ -0,0 +1,7 @@
---
import Layout from "../layouts/Sitelayout.astro"
const pageTitle="Blog";
---
<Layout pageTitle={pageTitle}>
<h1>Blog</h1>
</Layout>

19
src/styles/global.css
View file

@ -19,6 +19,11 @@ html {
margin: 1rem 0; margin: 1rem 0;
font-size: 2.5rem; font-size: 2.5rem;
} }
footer {
text-align: center;
background-color: rgba(127,2,177, 0.50);
padding: 0.02rem;
}
/* nav styles */ /* nav styles */
@ -41,10 +46,7 @@ html {
text-transform: uppercase; text-transform: uppercase;
} }
.nav-links a:hover,
.nav-links a:focus {
background-color: #ff9776;
}
.expanded { .expanded {
display: unset; display: unset;
@ -65,3 +67,12 @@ html {
} }
} }
.navbutton {
border-radius: 30%;
background: darkorchid;
}
.navbutton a:hover, a:active
{
background-color: lightpink;
border-radius: 30%;
}