Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

API routes now return proper Responses and basic errors are handled

Browse Source 
slight improvements in layouting
This commit is contained in:
Alexander Bocken
2023-07-02 23:39:31 +02:00
parent ece3b3634c
commit 24ddd39f35
12 changed files with 349 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/lib/components/Header.svelte Normal file
View File

@ -0,0 +1,149 @@
<script>
import "$lib/components/nordtheme.css"
function show_sidebar(){
const nav_el = document.querySelector("nav")
nav_el.hidden = !nav_el.hidden
}
</script>
<style>
:global(*){
box-sizing: border-box;
font-family: sans-serif;
}
:global(body){
margin:0;
padding:0;
background-color: #fbf9f3;
overflow-x: hidden;
}
nav{
position: sticky;
background-color: var(--nord0);
top: 0;
z-index: 10;
}
nav[hidden]{
display:block;
}
:global(.site_header li){
list-style-type:none;
transition: 100ms;
color: white;
user-select: none;
}
:global(.site_header li>a){
text-decoration: none;
font-family: sans-serif;
font-size: 1.2rem;
color: inherit;
border-radius: 1000px;
padding: 0.5rem 1rem;
}
:global(.site_header li:hover),
:global(.site_header li:focus-within)
{
cursor: pointer;
color: var(--red);
transform: scale(1.1,1.1);
}
:global(.site_header) {
padding-block: 1.5rem;
display: flex;
flex-direction: row;
gap: 1rem;
justify-content: space-evenly;
max-width: 1000px;
margin: 0;
margin-inline: auto;
}
.nav_button{
display: none;
}
.button_wrapper{
display: none;
}
@media screen and (max-width: 500px) {
.button_wrapper{
display: flex;
justify-content: right;
align-items: center;
position: sticky;
background-color: var(--nord0);
width: 100%;
height: 4rem;
top: 0;
z-index: 9999;
}
.nav_button{
border: unset;
background-color: unset;
display: block;
fill: white;
margin-inline: 1rem;
width: 3rem;
aspect-ratio: 1;
}
.nav_button svg{
width: 100%;
height: 100%;
}
nav{
position: fixed;
top: 0;
right: 0;
height: 100%;
width: min(80svw, 40em);
transition: 100ms;
z-index: 10;
}
nav[hidden]{
transform: translateX(100%);
}
:global(.site_header){
flex-direction: column;
padding-top: min(10rem, 10vh);
}
:global(.site_header li){
font-size: 4rem;
}
:global(.site_header li > a){
font-size: 2rem;
}
:global(.site_header li:hover),
:global(.site_header li:focus-within){
transform: unset;
}
}
.wrapper{
display:flex;
flex-direction: column;
min-height: 100svh;
}
footer{
padding-block: 1rem;
text-align: center;
margin-top: auto;
}
</style>
<div class=wrapper>
<div>
<div class=button_wrapper>
<button class=nav_button on:click={show_sidebar}><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg></button>
</div>
<nav hidden>
<slot name=links></slot>
</nav>
<slot></slot>
</div>
<footer>
Ad maiorem Dei gloriam
</footer>
</div>