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

slightly improve js-free Card rendering

Browse Source
This commit is contained in:
Alexander Bocken 2024-01-21 10:34:23 +01:00
parent 27c643ef2b
commit 18e26790ce
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
10 changed files with 39 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/ActionButton.svelte
View File

@ -1,6 +1,6 @@
<script lang='ts'> <script lang='ts'>
export let href export let href
import "$lib/components/nordtheme.css" import "$lib/css/nordtheme.css"
import "$lib/css/action_button.css" import "$lib/css/action_button.css"
</script> </script>

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

@ -2,7 +2,8 @@
export let recipe export let recipe
export let current_month export let current_month
export let icon_override = false; 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/shake.css";
import "$lib/css/icon.css"; import "$lib/css/icon.css";
@ -14,14 +15,11 @@ let isloaded = false
import { onMount } from "svelte"; import { onMount } from "svelte";
onMount(() => { onMount(() => {
const el = document.querySelector("img") isloaded = document.querySelector("img")?.complete ? true : false
if(el.complete){
isloaded = true
}
}) })
</script> </script>
<style> <style>
.card{ #card{
--card-width: 300px; --card-width: 300px;
flex-shrink: 0; flex-shrink: 0;
transition: 200ms; transition: 200ms;
@ -40,13 +38,13 @@ import { onMount } from "svelte";
background-color: var(--blue); background-color: var(--blue);
box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3); box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
} }
.card #image{ #image{
width: var(--card-width); width: var(--card-width);
height: calc(var(--card-width)*0.85); height: calc(var(--card-width)*0.85);
object-fit: cover; object-fit: cover;
transition: 200ms; transition: 200ms;
backdrop-filter: blur(10px);
filter: blur(10px); filter: blur(10px);
backdrop-filter: blur(10px);
} }
.unblur{ .unblur{
filter: blur(0px) !important; filter: blur(0px) !important;
@ -67,8 +65,6 @@ div:has(div #image){
top: 0; top: 0;
} }
@supports(-moz-appearance:none){ @supports(-moz-appearance:none){
#image{
}
#image, #div_image{ #image, #div_image{
border-top-left-radius: 20px; border-top-left-radius: 20px;
border-top-right-radius: 20px; border-top-right-radius: 20px;
@ -87,19 +83,17 @@ div:has(div #image){
} }
} }
#card:hover,
.card:hover, #card:focus-within{
.card:focus-within{
transform: scale(1.02,1.02); transform: scale(1.02,1.02);
background-color: var(--red); background-color: var(--red);
box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3); box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3);
} }
.card:focus{ #card:focus{
scale: 0.95 0.95; scale: 0.95 0.95;
} }
.card .title { .title {
position: relative; position: relative;
box-sizing: border-box;
padding-top: 0.5em; padding-top: 0.5em;
height: 50%; height: 50%;
width: 100% ; width: 100% ;
@ -110,17 +104,17 @@ div:has(div #image){
justify-content: space-between; justify-content: space-between;
transition: 100ms; transition: 100ms;
} }
.card .name{ .name{
font-size: 2em; font-size: 2em;
color: white; color: white;
padding-inline: 0.5em; padding-inline: 0.5em;
padding-block: 0.2em; padding-block: 0.2em;
} }
.card .description{ .description{
padding-inline: 1em; padding-inline: 1em;
color: var(--nord4); color: var(--nord4);
} }
.card .tags{ .tags{
display: flex; display: flex;
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
overflow: hidden; overflow: hidden;
@ -130,7 +124,7 @@ div:has(div #image){
margin-bottom:0.5em; margin-bottom:0.5em;
flex-grow: 0; flex-grow: 0;
} }
.card .tag{ .tag{
cursor: pointer; cursor: pointer;
text-decoration: unset; text-decoration: unset;
background-color: var(--nord4); background-color: var(--nord4);
@ -142,18 +136,18 @@ div:has(div #image){
transition: 100ms; transition: 100ms;
box-shadow: 0em 0em 0.2em 0.05em rgba(0, 0, 0, 0.3); box-shadow: 0em 0em 0.2em 0.05em rgba(0, 0, 0, 0.3);
} }
.card .tag:hover, .tag:hover,
.card .tag:focus-visible .tag:focus-visible
{ {
transform: scale(1.04, 1.04); transform: scale(1.04, 1.04);
background-color: var(--orange); background-color: var(--orange);
box-shadow: 0.2em 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.3); box-shadow: 0.2em 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.3);
} }
.card .tag:focus{ .tag:focus{
transition: 100ms; transition: 100ms;
scale: 0.9; scale: 0.9;
} }
.card .title .category{ .title .category{
position: absolute; position: absolute;
box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6); box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
text-decoration: none; text-decoration: none;
@ -167,33 +161,33 @@ div:has(div #image){
transition: 100ms; transition: 100ms;
} }
.card .title .category:hover, .title .category:hover,
.card .title .category:focus-within .title .category:focus-within
{ {
box-shadow: -0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.6); box-shadow: -0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.6);
background-color: var(--nord3); background-color: var(--nord3);
transform: scale(1.05, 1.05) transform: scale(1.05, 1.05)
} }
.card .category:focus{ .category:focus{
scale: 0.9 0.9; scale: 0.9 0.9;
} }
.card:hover .icon, #card:hover .icon,
.card:focus-visible .icon #card:focus-visible .icon
{ {
animation: shake 0.6s; animation: shake 0.6s;
} }
</style> </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_div_image >
<div id=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})"> <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}/> <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>
</div> </div>
{#if icon_override || recipe.season.includes(current_month)} {#if icon_override || recipe.season.includes(current_month)}
<a class=icon href="/rezepte/icon/{recipe.icon}">{recipe.icon}</a> <a class=icon href="/rezepte/icon/{recipe.icon}">{recipe.icon}</a>
{/if} {/if}
<div class=title> <div class=title>
<a class=category href="/rezepte/category/{recipe.category}" >{recipe.category}</a> <a class=category href="/rezepte/category/{recipe.category}" >{recipe.category}</a>

2
src/lib/components/CreateStepList.svelte
View File

@ -5,7 +5,7 @@ import Cross from '$lib/assets/icons/Cross.svelte'
import Plus from '$lib/assets/icons/Plus.svelte' import Plus from '$lib/assets/icons/Plus.svelte'
import Check from '$lib/assets/icons/Check.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 "$lib/css/action_button.css"
import { do_on_key } from '$lib/components/do_on_key.js' import { do_on_key } from '$lib/components/do_on_key.js'

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

@ -1,5 +1,5 @@
<script> <script>
import "$lib/components/nordtheme.css" import "$lib/css/nordtheme.css"
import { onMount } from "svelte"; import { onMount } from "svelte";
import Symbol from "./Symbol.svelte" import Symbol from "./Symbol.svelte"

2
src/lib/components/IconLayout.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import '$lib/components/nordtheme.css'; import '$lib/css/nordtheme.css';
import Recipes from '$lib/components/Recipes.svelte'; import Recipes from '$lib/components/Recipes.svelte';
import Search from './Search.svelte'; import Search from './Search.svelte';
export let icons export let icons

2
src/lib/components/SeasonLayout.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import '$lib/components/nordtheme.css'; import '$lib/css/nordtheme.css';
import Recipes from '$lib/components/Recipes.svelte'; import Recipes from '$lib/components/Recipes.svelte';
import Search from './Search.svelte'; import Search from './Search.svelte';
let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"] let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]

2
src/lib/components/SeasonSelect.svelte
View File

@ -1,5 +1,5 @@
<script lang=ts> <script lang=ts>
import "$lib/components/nordtheme.css" import "$lib/css/nordtheme.css"
import { season } from '$lib/js/season_store.js' import { season } from '$lib/js/season_store.js'
import {onMount} from "svelte"; import {onMount} from "svelte";
import {do_on_key} from "./do_on_key"; import {do_on_key} from "./do_on_key";

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

@ -1,3 +1,6 @@
<script>
import "$lib/css/nordtheme.css";
</script>
<style> <style>
:root{ :root{
--icon_fill: var(--nord4); --icon_fill: var(--nord4);

2
src/lib/components/TagBall.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
export let tag : string; export let tag : string;
export let ref: string; export let ref: string;
import '$lib/components/nordtheme.css' import '$lib/css/nordtheme.css'
</script> </script>
<style> <style>
a{ a{

25
src/lib/components/nordtheme.css
View File

@ -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);
}