Card hover effect smooth, mobile navbar hides on click
This commit is contained in:
parent
25c3f41b42
commit
bf5c86532a
@ -23,7 +23,6 @@
|
||||
"dependencies": {
|
||||
"@sveltejs/adapter-node": "^1.2.4",
|
||||
"mongoose": "^7.3.0",
|
||||
"sass": "^1.63.4",
|
||||
"sharp": "^0.32.1"
|
||||
}
|
||||
}
|
||||
|
@ -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==}
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user