Jonas_Jones/blog.jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/blog.jonasjones.dev.git synced 2025-10-23 13:59:18 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

part of skeleton

Browse source
This commit is contained in:
Jonas_Jones 2024-06-07 00:26:22 +02:00
parent b550b19aae
commit 68f6de3e11
24 changed files with 2375 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/components/Navbar.svelte Normal file
View file

@ -0,0 +1,55 @@
<nav class="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<a href="https://jonasjones.dev" class="sticky-link">Homepage</a>
</ul>
</nav>
<style>
.navbar {
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
width: 100%; /* Ensures ul takes full width */
}
li {
display: inline;
}
a {
text-decoration: none;
color: #e2b714;
padding: 10px 20px;
display: block;
}
a:hover {
color: #d1d0c5;
}
.sticky-link {
position: absolute;
top: 0;
right: 0;
padding: 10px 20px;
text-decoration: none;
}
</style>

40
src/components/Title.svelte Normal file
View file

@ -0,0 +1,40 @@
<script>
export let visible = true;
</script>
<style>
.title-parent {
background-color: black;
padding: 25px 0;
}
.title {
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
transform: translateY(0);
opacity: 1;
font-family: 'Tiny5';
color: #e2b714;
}
#titleh1 {
text-align: center;
font-family: 'Pixelify Sans';
color: #e2b714;
margin: 0;
width: 90%;
margin: 0 auto;
font-size: 5vw
}
.hidden {
transform: translateY(-100%);
opacity: 0;
}
</style>
<main>
<div class="title-parent">
<div class:title={!visible ? 'hidden' : ''}>
<h1 id="titleh1">blog.jonasjones.dev</h1>
</div>
</div>
</main>