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

Card hover effect smooth, mobile navbar hides on click

Browse Source
This commit is contained in:
Alexander Bocken
2023-07-13 13:53:29 +02:00
parent 25c3f41b42
commit bf5c86532a
4 changed files with 45 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/lib/components/Card.svelte
View File

@ -22,8 +22,9 @@ import { onMount } from "svelte";
</script>
<style>
.card{
flex-shrink: 0;
--card-width: 300px;
flex-shrink: 0;
transition: 200ms;
text-decoration: none;
position: relative;
box-sizing: border-box;

24
src/lib/components/Header.svelte
View File

@ -1,11 +1,22 @@
<script>
import "$lib/components/nordtheme.css"
import { onMount } from "svelte";
function show_sidebar(){
function toggle_sidebar(state){
// state: force hidden state (optional)
const nav_el = document.querySelector("nav")
nav_el.hidden = !nav_el.hidden
if(state === undefined) nav_el.hidden = !nav_el.hidden
else nav_el.hidden = state
}
onMount( () => {
const link_els = document.querySelectorAll("nav a")
link_els.forEach((el) => {
el.addEventListener("click", () => {toggle_sidebar(true)});
})
console.log(link_els)
})
</script>
<style>
:global(*){
@ -91,12 +102,17 @@ nav[hidden]{
.nav_button svg{
width: 100%;
height: 100%;
transition: 100ms;
}
.nav_button:active{
fill: var(--red);
scale: 0.9;
}
nav{
position: fixed;
top: 0;
right: 0;
height: 100%;
height: 150vh; /* dvh does not work, breaks because of transition and only being applied after scroll ends*/
width: min(80svw, 40em);
transition: 100ms;
z-index: 10;
@ -134,7 +150,7 @@ margin-top: auto;
<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>
<button class=nav_button on:click={() => {toggle_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>