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 3a8d4e0979
commit fa23378952
4 changed files with 45 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -23,7 +23,6 @@
"dependencies": {
"@sveltejs/adapter-node": "^1.2.4",
"mongoose": "^7.3.0",
"sass": "^1.63.4",
"sharp": "^0.32.1"
}
}

50
pnpm-lock.yaml generated
View File

@@ -11,9 +11,6 @@ dependencies:
mongoose:
specifier: ^7.3.0
version: 7.3.0
sass:
specifier: ^1.63.4
version: 1.63.4
sharp:
specifier: ^0.32.1
version: 0.32.1
@@ -30,7 +27,7 @@ devDependencies:
version: 3.59.1
svelte-check:
specifier: ^3.0.1
version: 3.4.3(sass@1.63.4)(svelte@3.59.1)
version: 3.4.3(svelte@3.59.1)
svelte-preprocess-import-assets:
specifier: ^1.0.0
version: 1.0.0(svelte@3.59.1)
@@ -42,7 +39,7 @@ devDependencies:
version: 5.1.3
vite:
specifier: ^4.3.0
version: 4.3.9(sass@1.63.4)
version: 4.3.9
packages:
@@ -373,7 +370,7 @@ packages:
svelte: 3.59.1
tiny-glob: 0.2.9
undici: 5.22.1
vite: 4.3.9(sass@1.63.4)
vite: 4.3.9
transitivePeerDependencies:
- supports-color
@@ -388,7 +385,7 @@ packages:
'@sveltejs/vite-plugin-svelte': 2.4.1(svelte@3.59.1)(vite@4.3.9)
debug: 4.3.4
svelte: 3.59.1
vite: 4.3.9(sass@1.63.4)
vite: 4.3.9
transitivePeerDependencies:
- supports-color
@@ -406,7 +403,7 @@ packages:
magic-string: 0.30.0
svelte: 3.59.1
svelte-hmr: 0.15.2(svelte@3.59.1)
vite: 4.3.9(sass@1.63.4)
vite: 4.3.9
vitefu: 0.2.4(vite@4.3.9)
transitivePeerDependencies:
- supports-color
@@ -447,6 +444,7 @@ packages:
dependencies:
normalize-path: 3.0.0
picomatch: 2.3.1
dev: true
/balanced-match@1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -458,6 +456,7 @@ packages:
/binary-extensions@2.2.0:
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
engines: {node: '>=8'}
dev: true
/bl@4.1.0:
resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
@@ -485,6 +484,7 @@ packages:
engines: {node: '>=8'}
dependencies:
fill-range: 7.0.1
dev: true
/bson@5.3.0:
resolution: {integrity: sha512-ukmCZMneMlaC5ebPHXIkP8YJzNl5DC41N5MAIvKDqLggdao342t4McltoJBQfQya/nHBWAcSsYRqlXPoQkTJag==}
@@ -531,6 +531,7 @@ packages:
readdirp: 3.6.0
optionalDependencies:
fsevents: 2.3.2
dev: true
/chownr@1.1.4:
resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
@@ -687,6 +688,7 @@ packages:
engines: {node: '>=8'}
dependencies:
to-regex-range: 5.0.1
dev: true
/fs-constants@1.0.0:
resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
@@ -715,6 +717,7 @@ packages:
engines: {node: '>= 6'}
dependencies:
is-glob: 4.0.3
dev: true
/glob@7.2.3:
resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
@@ -759,9 +762,6 @@ packages:
resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
dev: false
/immutable@4.3.0:
resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==}
/import-fresh@3.3.0:
resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
engines: {node: '>=6'}
@@ -800,6 +800,7 @@ packages:
engines: {node: '>=8'}
dependencies:
binary-extensions: 2.2.0
dev: true
/is-builtin-module@3.2.1:
resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
@@ -817,12 +818,14 @@ packages:
/is-extglob@2.1.1:
resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
engines: {node: '>=0.10.0'}
dev: true
/is-glob@4.0.3:
resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
engines: {node: '>=0.10.0'}
dependencies:
is-extglob: 2.1.1
dev: true
/is-module@1.0.0:
resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
@@ -831,6 +834,7 @@ packages:
/is-number@7.0.0:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'}
dev: true
/is-reference@1.2.1:
resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
@@ -1025,6 +1029,7 @@ packages:
/normalize-path@3.0.0:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'}
dev: true
/once@1.4.0:
resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
@@ -1121,6 +1126,7 @@ packages:
engines: {node: '>=8.10.0'}
dependencies:
picomatch: 2.3.1
dev: true
/resolve-from@4.0.0:
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
@@ -1189,15 +1195,6 @@ packages:
dev: false
optional: true
/sass@1.63.4:
resolution: {integrity: sha512-Sx/+weUmK+oiIlI+9sdD0wZHsqpbgQg8wSwSnGBjwb5GwqFhYNwwnI+UWZtLjKvKyFlKkatRK235qQ3mokyPoQ==}
engines: {node: '>=14.0.0'}
hasBin: true
dependencies:
chokidar: 3.5.3
immutable: 4.3.0
source-map-js: 1.0.2
/semver@7.5.4:
resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
engines: {node: '>=10'}
@@ -1315,7 +1312,7 @@ packages:
engines: {node: '>= 0.4'}
dev: false
/svelte-check@3.4.3(sass@1.63.4)(svelte@3.59.1):
/svelte-check@3.4.3(svelte@3.59.1):
resolution: {integrity: sha512-O07soQFY3X0VDt+bcGc6D5naz0cLtjwnmNP9JsEBPVyMemFEqUhL2OdLqvkl5H/u8Jwm50EiAU4BPRn5iin/kg==}
hasBin: true
peerDependencies:
@@ -1328,7 +1325,7 @@ packages:
picocolors: 1.0.0
sade: 1.8.1
svelte: 3.59.1
svelte-preprocess: 5.0.4(sass@1.63.4)(svelte@3.59.1)(typescript@5.1.3)
svelte-preprocess: 5.0.4(svelte@3.59.1)(typescript@5.1.3)
typescript: 5.1.3
transitivePeerDependencies:
- '@babel/core'
@@ -1368,7 +1365,7 @@ packages:
svelte-parse-markup: 0.1.1(svelte@3.59.1)
dev: true
/svelte-preprocess@5.0.4(sass@1.63.4)(svelte@3.59.1)(typescript@5.1.3):
/svelte-preprocess@5.0.4(svelte@3.59.1)(typescript@5.1.3):
resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
engines: {node: '>= 14.10.0'}
requiresBuild: true
@@ -1409,7 +1406,6 @@ packages:
'@types/pug': 2.0.6
detect-indent: 6.1.0
magic-string: 0.27.0
sass: 1.63.4
sorcery: 0.11.0
strip-indent: 3.0.0
svelte: 3.59.1
@@ -1451,6 +1447,7 @@ packages:
engines: {node: '>=8.0'}
dependencies:
is-number: 7.0.0
dev: true
/totalist@3.0.1:
resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
@@ -1489,7 +1486,7 @@ packages:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
dev: false
/vite@4.3.9(sass@1.63.4):
/vite@4.3.9:
resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
@@ -1517,7 +1514,6 @@ packages:
esbuild: 0.17.19
postcss: 8.4.24
rollup: 3.25.1
sass: 1.63.4
optionalDependencies:
fsevents: 2.3.2
@@ -1529,7 +1525,7 @@ packages:
vite:
optional: true
dependencies:
vite: 4.3.9(sass@1.63.4)
vite: 4.3.9
/webidl-conversions@7.0.0:
resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}

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>