diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index c8b501c4..21939a14 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -23,10 +23,9 @@ let underlineWidth = $state(0);
let disableTransition = $state(false);
function toggle_sidebar(state){
- // state: force hidden state (optional)
- const nav_el = document.querySelector("nav")
- if(state === undefined) nav_el.hidden = !nav_el.hidden
- else nav_el.hidden = state
+ const checkbox = document.getElementById('nav-toggle')
+ if(state === undefined) checkbox.checked = !checkbox.checked
+ else checkbox.checked = !state
}
function updateUnderline() {
@@ -93,16 +92,16 @@ nav{
background-color: var(--nord0);
top: 0;
z-index: 10;
- display: flex !important;
+ display: flex;
flex-direction: row;
justify-content: space-between !important;
align-items: center;
box-shadow: 0 1em 1rem 0rem rgba(0,0,0,0.4);
- height: 4rem;
+ height: var(--header-h);
padding-left: 0.5rem;
}
-nav[hidden]{
- display:block;
+.nav-toggle{
+ display: none;
}
:global(.site_header li),
@@ -116,20 +115,20 @@ nav[hidden]{
:global(.site_header li>a)
{
text-decoration: none;
- font-size: 1.2rem;
+ font-size: 1rem;
color: inherit;
border-radius: var(--radius-pill);
- padding: 0.5rem 0.75rem;
+ padding: 0.4rem 0.6rem;
}
:global(a.entry),
:global(a.entry:link),
:global(a.entry:visited)
{
text-decoration: none;
- font-size: 1.2rem;
+ font-size: 1rem;
color: white !important;
border-radius: var(--radius-pill);
- padding: 0.5rem 0.75rem;
+ padding: 0.4rem 0.6rem;
}
:global(.site_header li:hover),
@@ -176,6 +175,9 @@ nav[hidden]{
display: none;
padding-inline: 0.5rem;
}
+.header-shadow{
+ display: none;
+}
.right-buttons{
display: flex;
align-items: center;
@@ -187,9 +189,10 @@ nav[hidden]{
gap: 0.5rem;
}
:global(svg.symbol){
- height: 4rem;
- width: 4rem;
+ --symbol-size: calc(var(--header-h) - 1rem);
+ width: var(--symbol-size);
border-radius: 10000px;
+ margin: 0.25rem;
}
/*:global(a:has(svg.symbol)){
padding: 0 !important;
@@ -198,6 +201,8 @@ nav[hidden]{
margin-left: 1rem;
}*/
.wrapper{
+ --header-h: 3rem;
+ --symbol-size: calc(var(--header-h) - 1rem);
display:flex;
flex-direction: column;
min-height: 100svh;
@@ -211,33 +216,46 @@ footer{
@media screen and (max-width: 800px) {
.button_wrapper{
- box-shadow: 0 1em 1rem 0rem rgba(0,0,0,0.4);
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
background-color: var(--nord0);
width: 100%;
- height: 4rem;
+ height: var(--header-h);
top: 0;
z-index: 9999;
}
- .nav_button{
- border: unset;
- background-color: unset;
+ .header-shadow{
display: block;
+ position: sticky;
+ top: 0;
+ width: 100%;
+ height: var(--header-h);
+ margin-top: calc(-1 * var(--header-h));
+ box-shadow: 0 1em 1rem 0rem rgba(0,0,0,0.4);
+ z-index: 9997;
+ pointer-events: none;
+ }
+ .nav_button{
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
fill: white;
margin-inline: 0.5rem;
- width: 2rem;
- aspect-ratio: 1;
+ width: 1.25rem;
+ height: 1.25rem;
+ cursor: pointer;
}
.nav_button svg{
width: 100%;
height: 100%;
transition: var(--transition-fast);
}
- .nav_button:focus{
- fill: var(--red);
+ .nav_button:hover,
+ .nav_button:active,
+ .nav-toggle:focus-visible + .nav_button{
+ fill: var(--nord8);
scale: 0.9;
}
.nav_site{
@@ -247,42 +265,44 @@ footer{
height: 100vh; /* dvh does not work, breaks because of transition and only being applied after scroll ends*/
margin-bottom: 50vh;
width: min(95svw, 25em);
- transition: transform 100ms;
- z-index: 10;
+ z-index: 9998;
flex-direction: column;
- justify-content: flex-start !important;
- align-items: left;
- justify-content: space-between!important;
padding-inline: 0.5rem;
}
+ .nav_site::before{
+ content: '';
+ flex: 1;
+ }
:global(.nav_site ul){
width: 100% ;
}
.nav_site :first-child{
display:none;
}
- .nav_site[hidden]{
+ .nav_site{
transform: translateX(100%);
}
+ .wrapper:has(.nav-toggle:checked) .nav_site{
+ transform: translateX(0);
+ transition: transform 100ms;
+ }
:global(.nav_site a:last-child){
margin-bottom: 2rem;
}
.nav_site .links-wrapper {
- align-self: flex-start;
width: 100%;
- margin: 2rem;
+ padding: 0 2rem;
}
:global(.site_header){
flex-direction: column;
- padding-top: min(10rem, 10vh);
align-items: flex-start;
}
:global(.site_header li, .site_header a){
- font-size: 4rem;
+ font-size: 1.5rem;
}
:global(.site_header li > a, .site_header a){
- font-size: 2rem;
+ font-size: 1.3rem;
}
:global(.site_header li:hover),
:global(.site_header li:focus-within){
@@ -315,10 +335,12 @@ footer{
-