update to fix vite vulns

Card is now fully loaded in itself
No longer do we have this weird shift of the description to the right of the Card until some magical JS is loaded to fix it. Not yet perfect: The now wrapping a-tag is for some reason still weirdly sent to client until some js cleans it up. Currently results in a too large gap which is fixed by local js. Still TODO: do not blur images if no js present
2024-01-22 14:16:24 +01:00 · 2024-01-22 14:13:56 +01:00
2 changed files with 248 additions and 70 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,7 @@
 			"dependencies": {
 				"@sveltejs/adapter-node": "^1.3.1",
 				"argon2": "^0.30.3",
+				"cheerio": "1.0.0-rc.12",
 				"jsonwebtoken": "^9.0.1",
 				"mongoose": "^7.4.0",
 				"sharp": "^0.32.3",
@ -357,9 +358,9 @@
 			}
 		},
 		"node_modules/@fastify/busboy": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.0.0.tgz",
-			"integrity": "sha512-JUFJad5lv7jxj926GPgymrWQxxjPYuJNiNjNMzqT+HiuP6Vl3dk5xzG+8sTX96np0ZAluvaMzPsjhHZ5rNuNQQ==",
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.0.tgz",
+			"integrity": "sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==",
 			"engines": {
 				"node": ">=14"
 			}
@ -579,24 +580,24 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "1.25.1",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.25.1.tgz",
-			"integrity": "sha512-pD8XsvNJNgTNkFngNlM60my/X8dXWPKVzN5RghEQr0NjGZmuCjy49AfFu2cGbZjNf5pBcqd2RCNMW912P5fkhA==",
+			"version": "1.30.3",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.30.3.tgz",
+			"integrity": "sha512-0DzVXfU4h+tChFvoc8C61IqErCyskD4ydSIDjpKS2lYlEzIYrtYrY7juSqACFxqcvZAnOEXvSY+zZ8br0+ZMMg==",
 			"hasInstallScript": true,
 			"dependencies": {
-				"@sveltejs/vite-plugin-svelte": "^2.4.1",
+				"@sveltejs/vite-plugin-svelte": "^2.5.0",
 				"@types/cookie": "^0.5.1",
 				"cookie": "^0.5.0",
 				"devalue": "^4.3.1",
 				"esm-env": "^1.0.0",
 				"kleur": "^4.1.5",
 				"magic-string": "^0.30.0",
-				"mime": "^3.0.0",
+				"mrmime": "^1.0.1",
 				"sade": "^1.8.1",
 				"set-cookie-parser": "^2.6.0",
 				"sirv": "^2.0.2",
 				"tiny-glob": "^0.2.9",
-				"undici": "~5.25.0"
+				"undici": "~5.26.2"
 			},
 			"bin": {
 				"svelte-kit": "svelte-kit.js"
@ -605,7 +606,7 @@
 				"node": "^16.14 || >=18"
 			},
 			"peerDependencies": {
-				"svelte": "^3.54.0 || ^4.0.0-next.0",
+				"svelte": "^3.54.0 || ^4.0.0-next.0 || ^5.0.0-next.0",
 				"vite": "^4.0.0"
 			}
 		},
@ -621,9 +622,9 @@
 			}
 		},
 		"node_modules/@sveltejs/vite-plugin-svelte": {
-			"version": "2.4.6",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.4.6.tgz",
-			"integrity": "sha512-zO79p0+DZnXPnF0ltIigWDx/ux7Ni+HRaFOw720Qeivc1azFUrJxTl0OryXVibYNx1hCboGia1NRV3x8RNv4cA==",
+			"version": "2.5.3",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.3.tgz",
+			"integrity": "sha512-erhNtXxE5/6xGZz/M9eXsmI7Pxa6MS7jyTy06zN3Ck++ldrppOnOlJwHHTsMC7DHDQdgUp4NAc4cDNQ9eGdB/w==",
 			"dependencies": {
 				"@sveltejs/vite-plugin-svelte-inspector": "^1.0.4",
 				"debug": "^4.3.4",
@ -637,7 +638,7 @@
 				"node": "^14.18.0 || >= 16"
 			},
 			"peerDependencies": {
-				"svelte": "^3.54.0 || ^4.0.0",
+				"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0",
 				"vite": "^4.0.0"
 			}
 		},
@ -658,9 +659,9 @@
 			}
 		},
 		"node_modules/@sveltejs/vite-plugin-svelte/node_modules/magic-string": {
-			"version": "0.30.4",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.4.tgz",
-			"integrity": "sha512-Q/TKtsC5BPm0kGqgBIF9oXAs/xEf2vRKiIB4wCRQTJOQIByZ1d+NnUOotvJOvNpi5RNIgVOMC3pOuaP1ZTDlVg==",
+			"version": "0.30.5",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+			"integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
 			},
@ -824,6 +825,11 @@
 				"readable-stream": "^3.4.0"
 			}
 		},
+		"node_modules/boolbase": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+			"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+		},
 		"node_modules/brace-expansion": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@ -909,6 +915,42 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/cheerio": {
+			"version": "1.0.0-rc.12",
+			"resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
+			"integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
+			"dependencies": {
+				"cheerio-select": "^2.1.0",
+				"dom-serializer": "^2.0.0",
+				"domhandler": "^5.0.3",
+				"domutils": "^3.0.1",
+				"htmlparser2": "^8.0.1",
+				"parse5": "^7.0.0",
+				"parse5-htmlparser2-tree-adapter": "^7.0.0"
+			},
+			"engines": {
+				"node": ">= 6"
+			},
+			"funding": {
+				"url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+			}
+		},
+		"node_modules/cheerio-select": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+			"integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+			"dependencies": {
+				"boolbase": "^1.0.0",
+				"css-select": "^5.1.0",
+				"css-what": "^6.1.0",
+				"domelementtype": "^2.3.0",
+				"domhandler": "^5.0.3",
+				"domutils": "^3.0.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/fb55"
+			}
+		},
 		"node_modules/chokidar": {
 			"version": "3.5.3",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@ -1012,6 +1054,32 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/css-select": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+			"integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+			"dependencies": {
+				"boolbase": "^1.0.0",
+				"css-what": "^6.1.0",
+				"domhandler": "^5.0.2",
+				"domutils": "^3.0.1",
+				"nth-check": "^2.0.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/fb55"
+			}
+		},
+		"node_modules/css-what": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+			"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+			"engines": {
+				"node": ">= 6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/fb55"
+			}
+		},
 		"node_modules/debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -1085,6 +1153,57 @@
 			"resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.2.tgz",
 			"integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg=="
 		},
+		"node_modules/dom-serializer": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+			"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+			"dependencies": {
+				"domelementtype": "^2.3.0",
+				"domhandler": "^5.0.2",
+				"entities": "^4.2.0"
+			},
+			"funding": {
+				"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+			}
+		},
+		"node_modules/domelementtype": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+			"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			]
+		},
+		"node_modules/domhandler": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+			"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+			"dependencies": {
+				"domelementtype": "^2.3.0"
+			},
+			"engines": {
+				"node": ">= 4"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domhandler?sponsor=1"
+			}
+		},
+		"node_modules/domutils": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+			"integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+			"dependencies": {
+				"dom-serializer": "^2.0.0",
+				"domelementtype": "^2.3.0",
+				"domhandler": "^5.0.3"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domutils?sponsor=1"
+			}
+		},
 		"node_modules/ecdsa-sig-formatter": {
 			"version": "1.0.11",
 			"resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
@ -1106,6 +1225,17 @@
 				"once": "^1.4.0"
 			}
 		},
+		"node_modules/entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
 		"node_modules/es6-promise": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
@ -1336,6 +1466,24 @@
 			"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
 			"integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
 		},
+		"node_modules/htmlparser2": {
+			"version": "8.0.2",
+			"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+			"integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+			"funding": [
+				"https://github.com/fb55/htmlparser2?sponsor=1",
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			],
+			"dependencies": {
+				"domelementtype": "^2.3.0",
+				"domhandler": "^5.0.3",
+				"domutils": "^3.0.1",
+				"entities": "^4.4.0"
+			}
+		},
 		"node_modules/https-proxy-agent": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@ -1673,17 +1821,6 @@
 				"node": ">=8.6"
 			}
 		},
-		"node_modules/mime": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
-			"integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
-			"bin": {
-				"mime": "cli.js"
-			},
-			"engines": {
-				"node": ">=10.0.0"
-			}
-		},
 		"node_modules/mimic-response": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
@ -1996,6 +2133,17 @@
 				"set-blocking": "^2.0.0"
 			}
 		},
+		"node_modules/nth-check": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+			"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+			"dependencies": {
+				"boolbase": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/nth-check?sponsor=1"
+			}
+		},
 		"node_modules/object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@ -2024,6 +2172,29 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/parse5": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+			"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+			"dependencies": {
+				"entities": "^4.4.0"
+			},
+			"funding": {
+				"url": "https://github.com/inikulin/parse5?sponsor=1"
+			}
+		},
+		"node_modules/parse5-htmlparser2-tree-adapter": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
+			"integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
+			"dependencies": {
+				"domhandler": "^5.0.2",
+				"parse5": "^7.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/inikulin/parse5?sponsor=1"
+			}
+		},
 		"node_modules/path-is-absolute": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@ -2953,9 +3124,9 @@
 			}
 		},
 		"node_modules/undici": {
-			"version": "5.25.4",
-			"resolved": "https://registry.npmjs.org/undici/-/undici-5.25.4.tgz",
-			"integrity": "sha512-450yJxT29qKMf3aoudzFpIciqpx6Pji3hEWaXqXmanbXF58LTAGCKxcJjxMXWu3iG+Mudgo3ZUfDB6YDFd/dAw==",
+			"version": "5.26.5",
+			"resolved": "https://registry.npmjs.org/undici/-/undici-5.26.5.tgz",
+			"integrity": "sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==",
 			"dependencies": {
 				"@fastify/busboy": "^2.0.0"
 			},
@ -2969,9 +3140,9 @@
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
 		},
 		"node_modules/vite": {
-			"version": "4.4.10",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.10.tgz",
-			"integrity": "sha512-TzIjiqx9BEXF8yzYdF2NTf1kFFbjMjUSV0LFZ3HyHoI3SGSPLnnFUKiIQtL3gl2AjHvMrprOvQ3amzaHgQlAxw==",
+			"version": "4.5.2",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
+			"integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
 			"dependencies": {
 				"esbuild": "^0.18.10",
 				"postcss": "^8.4.27",
@ -3023,11 +3194,11 @@
 			}
 		},
 		"node_modules/vitefu": {
-			"version": "0.2.4",
-			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.4.tgz",
-			"integrity": "sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==",
+			"version": "0.2.5",
+			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
+			"integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
 			"peerDependencies": {
-				"vite": "^3.0.0 || ^4.0.0"
+				"vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
 			},
 			"peerDependenciesMeta": {
 				"vite": {
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@ -14,22 +14,27 @@ if(icon_override){
 let isloaded = false

 import { onMount } from "svelte";
+
 onMount(() => {
 	isloaded = document.querySelector("img")?.complete ? true : false
 })
+
 </script>
 <style>
-#card{
+.card_anchor{
+	border-radius: 20px;
+}
+.card{
 	--card-width: 300px;
+	position: relative;
 	flex-shrink: 0;
 	transition: 200ms;
 	text-decoration: none;
-	position: relative;
 	box-sizing: border-box;
 	font-family: sans-serif;
 	cursor: pointer;
-	height: calc(7/4 * var(--card-width)); /* otherwise card is not initialized at correct size and readjusts when populated*/
-	width: var(--card-width);
+	height: 525px;
+	width: 300px;
 	border-radius: 20px;
 	background-size: contain;
 	display: flex;
@ -39,8 +44,8 @@ import { onMount } from "svelte";
 	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
 }
 #image{
-	width: var(--card-width);
-	height: calc(var(--card-width)*0.85);
+	width: 300px;
+	height: 255px;
 	object-fit: cover;
 	transition: 200ms;
 	filter: blur(10px);
@ -49,9 +54,9 @@ import { onMount } from "svelte";
 .unblur{
 	filter: blur(0px) !important;
 }
-#div_image,
-#div_div_image{
-	width: var(--card-width);
+.div_image,
+.div_div_image{
+	width: 300px;
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center;
@ -59,27 +64,28 @@ import { onMount } from "svelte";
 	border-top-left-radius: inherit;
 	border-top-right-radius: inherit;
 }
-#div_div_image{
-	height: calc(var(--card-width)*0.85);
+.div_div_image{
+	height: 255px;
 	position: absolute;
-	width: var(--card-width);
+	width: 300px;
 	top: 0;
 }

-#card:hover,
-#card:focus-within{
+.card:hover,
+.card:focus-within{
 	transform: scale(1.02,1.02);
 	background-color: var(--red);
 	box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3);
 }
-#card:focus{
+.card:focus{
 	scale: 0.95 0.95;
 }
-.title {
-	position: relative;
+.card_title {
+	position: absolute;
 	padding-top: 0.5em;
-	height: 50%;
-	width: 100% ;
+	height: 262.5px;
+	width: 300px;
+	top: 262.5px;
 	border-bottom-left-radius: inherit;
 	border-bottom-right-radius: inherit;
 	display: flex;
@ -130,7 +136,7 @@ import { onMount } from "svelte";
 	transition: 100ms;
 	scale: 0.9;
 }
-.title .category{
+.card_title .category{
 	position: absolute;
 	box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
 	text-decoration: none;
@ -144,8 +150,8 @@ import { onMount } from "svelte";
 	transition: 100ms;

 }
-.title .category:hover,
-.title .category:focus-within
+.card_title .category:hover,
+.card_title .category:focus-within
 {
 	box-shadow: -0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.6);
 	background-color: var(--nord3);
@ -155,24 +161,24 @@ import { onMount } from "svelte";
 	scale: 0.9 0.9;
 }

-#card:hover .icon,
-#card:focus-visible .icon
+.card:hover .icon,
+.card:focus-visible .icon
 {
 	animation: shake 0.6s;
 }
 </style>

-<a id="card" class:search_me={search}  href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]>
-	<div id=div_div_image >
-		<div id=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})">
+<a class=card_anchor href="/rezepte/{recipe.short_name}">
+<div class="card" class:search_me={search} data-tags=[{recipe.tags}]>
+	<div class=div_div_image >
+		<div class=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})">
 			<img class:unblur={isloaded} id=image src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy  alt="{recipe.alt}" on:load={() => isloaded=true}/>
 		</div>
 	</div>
 	{#if icon_override || recipe.season.includes(current_month)}
 		<a class=icon href="/rezepte/icon/{recipe.icon}">{recipe.icon}</a>
 	{/if}
-
-	<div class=title>
+	<div class="card_title">
 		<a class=category href="/rezepte/category/{recipe.category}" >{recipe.category}</a>
 		<div>
 			<div class=name>{@html recipe.name}</div>
@ -184,4 +190,5 @@ import { onMount } from "svelte";
 		{/each}
 		</div>
 	</div>
+</div>
 </a>