From 895c5c5157a176ead3c336efe90e654303c73630 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Sun, 21 Jan 2024 10:34:23 +0100
Subject: [PATCH] slightly improve js-free Card rendering

---
 src/lib/components/ActionButton.svelte   |  2 +-
 src/lib/components/Card.svelte           | 64 +++++++++++-------------
 src/lib/components/CreateStepList.svelte |  2 +-
 src/lib/components/Header.svelte         |  2 +-
 src/lib/components/IconLayout.svelte     |  2 +-
 src/lib/components/SeasonLayout.svelte   |  2 +-
 src/lib/components/SeasonSelect.svelte   |  2 +-
 src/lib/components/Symbol.svelte         |  3 ++
 src/lib/components/TagBall.svelte        |  2 +-
 src/lib/components/nordtheme.css         | 25 ---------
 10 files changed, 39 insertions(+), 67 deletions(-)
 delete mode 100644 src/lib/components/nordtheme.css

diff --git a/src/lib/components/ActionButton.svelte b/src/lib/components/ActionButton.svelte
index a3549b6..9cefa33 100644
--- a/src/lib/components/ActionButton.svelte
+++ b/src/lib/components/ActionButton.svelte
@@ -1,6 +1,6 @@
 <script lang='ts'>
 export let href
-import "$lib/components/nordtheme.css"
+import "$lib/css/nordtheme.css"
 import "$lib/css/action_button.css"
 </script>
 
diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index 6b54a42..6aef276 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -2,7 +2,8 @@
 export let recipe
 export let current_month
 export let icon_override = false;
-export let search = "search_me"
+export let search = true;
+import "$lib/css/nordtheme.css";
 import "$lib/css/shake.css";
 import "$lib/css/icon.css";
 
@@ -14,14 +15,11 @@ let isloaded = false
 
 import { onMount } from "svelte";
 	onMount(() => {
-		const el = document.querySelector("img")
-		if(el.complete){
-			isloaded = true
-		}
+		isloaded = document.querySelector("img")?.complete ? true : false
 	})
 </script>
 <style>
-.card{
+#card{
 	--card-width: 300px;
 	flex-shrink: 0;
 	transition: 200ms;
@@ -40,13 +38,13 @@ import { onMount } from "svelte";
 	background-color:  var(--blue);
 	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
 }
-.card #image{
+#image{
 	width: var(--card-width);
 	height: calc(var(--card-width)*0.85);
 	object-fit: cover;
 	transition: 200ms;
-	backdrop-filter: blur(10px);
 	filter: blur(10px);
+	backdrop-filter: blur(10px);
 }
 .unblur{
 	filter: blur(0px) !important;
@@ -67,8 +65,6 @@ div:has(div #image){
 	top: 0;
 }
 @supports(-moz-appearance:none){
-	#image{
-	}
 	#image, #div_image{
 		border-top-left-radius: 20px;
 		border-top-right-radius: 20px;
@@ -87,19 +83,17 @@ div:has(div #image){
 	}
 }
 
-
-.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;
 }
-.card .title {
+.title {
 	position: relative;
-	box-sizing: border-box;
 	padding-top: 0.5em;
 	height: 50%;
 	width: 100% ;
@@ -110,17 +104,17 @@ div:has(div #image){
 	justify-content: space-between;
 	transition: 100ms;
 }
-.card .name{
+.name{
 	font-size: 2em;
 	color: white;
 	padding-inline: 0.5em;
 	padding-block: 0.2em;
 }
-.card .description{
+.description{
 	padding-inline: 1em;
 	color: var(--nord4);
 }
-.card .tags{
+.tags{
 	display: flex;
 	flex-wrap: wrap-reverse;
 	overflow: hidden;
@@ -130,7 +124,7 @@ div:has(div #image){
 	margin-bottom:0.5em;
 	flex-grow: 0;
 }
-.card .tag{
+.tag{
 	cursor: pointer;
 	text-decoration: unset;
 	background-color: var(--nord4);
@@ -142,18 +136,18 @@ div:has(div #image){
 	transition: 100ms;
 	box-shadow: 0em 0em 0.2em 0.05em rgba(0, 0, 0, 0.3);
 }
-.card .tag:hover,
-.card .tag:focus-visible
+.tag:hover,
+.tag:focus-visible
 {
 	transform: scale(1.04, 1.04);
 	background-color: var(--orange);
 	box-shadow: 0.2em 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.3);
 }
-.card .tag:focus{
+.tag:focus{
 	transition: 100ms;
 	scale: 0.9;
 }
-.card .title .category{
+.title .category{
 	position: absolute;
 	box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
 	text-decoration: none;
@@ -167,33 +161,33 @@ div:has(div #image){
 	transition: 100ms;
 
 }
-.card .title .category:hover,
-.card .title .category:focus-within
+.title .category:hover,
+.title .category:focus-within
 {
 	box-shadow: -0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.6);
 	background-color: var(--nord3);
 	transform: scale(1.05, 1.05)
 }
-.card .category:focus{
+.category:focus{
 	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 class="card {search}" href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]>
+<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'})">
-	<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 id=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}
+		<a class=icon href="/rezepte/icon/{recipe.icon}">{recipe.icon}</a>
+	{/if}
 
 	<div class=title>
 		<a class=category href="/rezepte/category/{recipe.category}" >{recipe.category}</a>
diff --git a/src/lib/components/CreateStepList.svelte b/src/lib/components/CreateStepList.svelte
index 91bd72a..3cdade0 100644
--- a/src/lib/components/CreateStepList.svelte
+++ b/src/lib/components/CreateStepList.svelte
@@ -5,7 +5,7 @@ import Cross from '$lib/assets/icons/Cross.svelte'
 import Plus from '$lib/assets/icons/Plus.svelte'
 import Check from '$lib/assets/icons/Check.svelte'
 
-import '$lib/components/nordtheme.css'
+import '$lib/css/nordtheme.css'
 import "$lib/css/action_button.css"
 
 import { do_on_key } from '$lib/components/do_on_key.js'
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index e75f0ec..f276239 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,5 +1,5 @@
 <script>
-import "$lib/components/nordtheme.css"
+import "$lib/css/nordtheme.css"
 import { onMount } from "svelte";
 import Symbol from "./Symbol.svelte"
 
diff --git a/src/lib/components/IconLayout.svelte b/src/lib/components/IconLayout.svelte
index d650ba7..89a9252 100644
--- a/src/lib/components/IconLayout.svelte
+++ b/src/lib/components/IconLayout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import '$lib/components/nordtheme.css';
+    import '$lib/css/nordtheme.css';
     import Recipes from '$lib/components/Recipes.svelte';
     import Search from './Search.svelte';
     export let icons
diff --git a/src/lib/components/SeasonLayout.svelte b/src/lib/components/SeasonLayout.svelte
index cb8379f..fdb88b9 100644
--- a/src/lib/components/SeasonLayout.svelte
+++ b/src/lib/components/SeasonLayout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import '$lib/components/nordtheme.css';
+    import '$lib/css/nordtheme.css';
     import Recipes from '$lib/components/Recipes.svelte';
     import Search from './Search.svelte';
     let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
diff --git a/src/lib/components/SeasonSelect.svelte b/src/lib/components/SeasonSelect.svelte
index 3117161..74aa007 100644
--- a/src/lib/components/SeasonSelect.svelte
+++ b/src/lib/components/SeasonSelect.svelte
@@ -1,5 +1,5 @@
 <script lang=ts>
-import "$lib/components/nordtheme.css"
+import "$lib/css/nordtheme.css"
 import { season } from '$lib/js/season_store.js'
 import {onMount} from "svelte";
     import {do_on_key} from "./do_on_key";
diff --git a/src/lib/components/Symbol.svelte b/src/lib/components/Symbol.svelte
index 7867611..a2fd5f7 100644
--- a/src/lib/components/Symbol.svelte
+++ b/src/lib/components/Symbol.svelte
@@ -1,3 +1,6 @@
+<script>
+	import "$lib/css/nordtheme.css";
+</script>
 <style>
 	:root{
 		--icon_fill: var(--nord4);
diff --git a/src/lib/components/TagBall.svelte b/src/lib/components/TagBall.svelte
index 66e38c5..d9d070a 100644
--- a/src/lib/components/TagBall.svelte
+++ b/src/lib/components/TagBall.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 export let tag : string;
 export let ref: string;
-import '$lib/components/nordtheme.css'
+import '$lib/css/nordtheme.css'
 </script>
 <style>
 a{
diff --git a/src/lib/components/nordtheme.css b/src/lib/components/nordtheme.css
deleted file mode 100644
index 7feacda..0000000
--- a/src/lib/components/nordtheme.css
+++ /dev/null
@@ -1,25 +0,0 @@
-:root{
-	--nord0: #2E3440;
-	--nord1: #3B4252;
-	--nord2: #434C5E;
-	--nord3: #4C566A;
-	--nord4: #D8DEE9;
-	--nord5: #E5E9F0;
-	--nord6: #ECEFF4;
-	--nord7: #8FBCBB;
-	--nord8: #88C0D0;
-	--nord9: #81A1C1;
-	--nord10: #5E81AC;
-	--nord11: #BF616A;
-	--nord12: #D08770;
-	--nord13: #EBCB8B;
-	--nord14: #A3BE8C;
-	--nord15: #B48EAD;
-	--lightblue: var(--nord9);
-	--blue: var(--nord10);
-	--red: var(--nord11);
-	--orange: var(--nord12);
-	--yellow: var(--nord13);
-	--green: var(--nord14);
-	--purple: var(--nord15);
-}