dark theme implemented

This commit is contained in:
Alexander Bocken 2024-01-20 00:39:53 +01:00
parent e2a7de3e90
commit 7a7b19c02b
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
23 changed files with 848 additions and 118 deletions

View File

@ -399,6 +399,18 @@ h3{
.force_wrap{
overflow-wrap: break-word;
}
.button_arrow{
fill: var(--nord1);
}
@media (prefers-color-scheme: dark){
.button_arrow{
fill: var(--nord4);
}
.list_wrapper p[contenteditable]{
background-color: var(--accent-dark);
}
}
</style>
<div class=list_wrapper>
@ -411,10 +423,10 @@ h3{
<h3>
<div class=move_buttons_container>
<button on:click="{() => update_list_position(list_index, 1)}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
</button>
<button on:click="{() => update_list_position(list_index, -1)}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
</button>
</div>
@ -436,10 +448,10 @@ h3{
{#each list.list as ingredient, ingredient_index (ingredient_index)}
<div class=move_buttons_container>
<button on:click="{() => update_ingredient_position(list_index, ingredient_index, 1)}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
<svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
</button>
<button on:click="{() => update_ingredient_position(list_index, ingredient_index, -1)}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
<svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
</button>
</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->

View File

@ -425,6 +425,22 @@ h3{
width: 80%;
}
}
@media (prefers-color-scheme: dark){
.additional_info div{
background-color: var(--accent-dark);
}
.instructions{
background-color: var(--nord6-dark);
}
}
.button_arrow{
fill: var(--nord1);
}
@media (prefers-color-scheme: dark){
.button_arrow{
fill: var(--nord4);
}
}
</style>
<div class=instructions>
@ -461,10 +477,10 @@ h3{
<h3>
<div class=move_buttons_container>
<button on:click="{() => update_list_position(list_index, 1)}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
<svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
</button>
<button on:click="{() => update_list_position(list_index, -1)}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
<svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
</button>
</div>
<div on:click={() => show_modal_edit_subheading_step(list_index)}>
@ -486,10 +502,10 @@ h3{
<li>
<div class="move_buttons_container step_move_buttons">
<button on:click="{() => update_step_position(list_index, step_index, 1)}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
<svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
</button>
<button on:click="{() => update_step_position(list_index, step_index, -1)}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
<svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
</button>
</div>
<div>

View File

@ -3,6 +3,7 @@
import Cross from '$lib/assets/icons/Cross.svelte';
import SeasonSelect from '$lib/components/SeasonSelect.svelte';
import '$lib/css/action_button.css'
import '$lib/css/nordtheme.css'
import '$lib/css/shake.css'
import { redirect } from '@sveltejs/kit';
import { RecipeModelType } from '../../types/types';
@ -214,6 +215,7 @@ h1{
margin-block: 2rem;
margin-inline: auto;
background-color: var(--nord6);
background-color: red;
padding: 1rem 2rem;
}
.title p{
@ -254,6 +256,12 @@ h3{
bottom: 0;
margin: 2rem;
}
@media (prefers-color-scheme: dark){
.title{
background-color: var(--nord6-dark);
background-color: green;
}
}
</style>
<h1>{title}</h1>

View File

@ -29,6 +29,12 @@ font-family: sans-serif;
background-color: #fbf9f3;
overflow-x: hidden;
}
@media (prefers-color-scheme: dark) {
:global(body){
color: white;
background-color: var(--background-dark);
}
}
nav{
position: sticky;

View File

@ -12,6 +12,11 @@
border-radius: 1000px;
box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
}
@media (prefers-color-scheme: dark) {
a{
background-color: var(--accent-dark);
}
}
a:hover{
--angle: 15deg;
animation: shake 0.5s ease forwards;

View File

@ -0,0 +1,565 @@
<script lang='ts'>
import { onMount } from 'svelte';
import Pen from '$lib/assets/icons/Pen.svelte'
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/css/action_button.css"
export let list;
export let list_index;
let edit_ingredient = {
amount: "",
unit: "",
name: "",
sublist: "",
list_index: "",
ingredient_index: "",
}
let edit_heading = {
name:"",
list_index: "",
}
function get_sublist_index(sublist_name, list){
for(var i =0; i < list.length; i++){
if(list[i].name == sublist_name){
return i
}
}
return -1
}
export function show_modal_edit_subheading_ingredient(list_index){
edit_heading.name = ingredients[list_index].name
edit_heading.list_index = list_index
const el = document.querySelector('#edit_subheading_ingredient_modal')
el.showModal()
}
export function edit_subheading_and_close_modal(){
ingredients[edit_heading.list_index].name = edit_heading.name
const el = document.querySelector('#edit_subheading_ingredient_modal')
el.close()
}
export function add_new_ingredient(){
if(!new_ingredient.name){
return
}
let list_index = get_sublist_index(new_ingredient.sublist, ingredients)
if(list_index == -1){
ingredients.push({
name: new_ingredient.sublist,
list: [],
})
list_index = ingredients.length - 1
}
ingredients[list_index].list.push({ ...new_ingredient})
ingredients = ingredients //tells svelte to update dom
}
export function remove_list(list_index){
if(ingredients[list_index].list.length > 1){
const response = confirm("Bist du dir sicher, dass du diese Liste löschen möchtest? Alle Zutaten der Liste werden hiermit auch gelöscht.");
if(!response){
return
}
}
ingredients.splice(list_index, 1);
ingredients = ingredients //tells svelte to update dom
}
export function remove_ingredient(list_index, ingredient_index){
ingredients[list_index].list.splice(ingredient_index, 1)
ingredients = ingredients //tells svelte to update dom
}
export function show_modal_edit_ingredient(list_index, ingredient_index){
edit_ingredient = {...ingredients[list_index].list[ingredient_index]}
edit_ingredient.list_index = list_index
edit_ingredient.ingredient_index = ingredient_index
edit_ingredient.sublist = ingredients[list_index].name
const modal_el = document.querySelector("#edit_ingredient_modal");
modal_el.showModal();
}
export function edit_ingredient_and_close_modal(){
ingredients[edit_ingredient.list_index].list[edit_ingredient.ingredient_index] = {
amount: edit_ingredient.amount,
unit: edit_ingredient.unit,
name: edit_ingredient.name,
}
ingredients[edit_ingredient.list_index].name = edit_ingredient.sublist
const modal_el = document.querySelector("#edit_ingredient_modal");
modal_el.close();
}
let ghost;
let grabbed;
let lastTarget;
let mouseY = 0; // pointer y coordinate within client
let offsetY = 0; // y distance from top of grabbed element to pointer
let layerY = 0; // distance from top of list to top of client
function grab(clientY, element) {
// modify grabbed element
grabbed = element;
grabbed.dataset.grabY = clientY;
// modify ghost element (which is actually dragged)
ghost.innerHTML = grabbed.innerHTML;
// record offset from cursor to top of element
// (used for positioning ghost)
offsetY = grabbed.getBoundingClientRect().y - clientY;
drag(clientY);
}
// drag handler updates cursor position
function drag(clientY) {
if (grabbed) {
mouseY = clientY;
layerY = ghost.parentNode.getBoundingClientRect().y;
}
}
// touchEnter handler emulates the mouseenter event for touch input
// (more or less)
function touchEnter(ev) {
drag(ev.clientY);
// trigger dragEnter the first time the cursor moves over a list item
let target = document.elementFromPoint(ev.clientX, ev.clientY).closest(".item");
if (target && target != lastTarget) {
lastTarget = target;
dragEnter(ev, target);
}
}
function dragEnter(ev, target) {
// swap items in data
if (grabbed && target != grabbed && target.classList.contains("item")) {
moveDatum(parseInt(grabbed.dataset.index), parseInt(target.dataset.index));
}
}
// does the actual moving of items in data
function moveDatum(from, to) {
let temp = list[0].list[from];
list[0].list = [...list[0].list.slice(0, from), ...list[0].list.slice(from + 1)];
list[0].list= [...list[0].list.slice(0, to), temp, ...list[0].list.slice(to)];
}
function release(ev) {
grabbed = null;
}
function removeDatum(index) {
list= [...list.slice(0, index), ...list.slice(index + 1)];
}
</script>
<style>
input::placeholder{
color: inherit;
}
.drag_handle{
cursor: grab;
display:flex;
justify-content: flex-start;
align-items: center;
}
.drag_handle_header{
padding-right: 0.5em;
}
input{
color: unset;
font-size: unset;
padding: unset;
background-color: unset;
}
input.heading{
all: unset;
box-sizing: border-box;
background-color: var(--nord0);
padding: 1rem;
padding-inline: 2rem;
font-size: 1.5rem;
width: 100%;
border-radius: 1000px;
color: white;
justify-content: center;
align-items: center;
transition: 200ms;
}
input.heading:hover{
background-color: var(--nord1);
}
.heading_wrapper{
position: relative;
width: 300px;
margin-inline: auto;
transition: 200ms;
}
.heading_wrapper:hover
{
transform:scale(1.1,1.1);
}
.heading_wrapper button{
position: absolute;
bottom: -1.5rem;
right: -2rem;
}
.adder{
box-sizing: border-box;
margin-inline: auto;
position: relative;
margin-block: 3rem;
width: 90%;
border-radius: 20px;
transition: 200ms;
}
.adder button{
position: absolute;
right: -1.5rem;
bottom: -1.5rem;
}
.category{
border: none;
position: absolute;
--font_size: 1.5rem;
top: -1em;
left: -1em;
font-family: sans-serif;
font-size: 1.5rem;
background-color: var(--nord0);
color: var(--nord4);
border-radius: 1000000px;
width: 23ch;
padding: 0.5em 1em;
transition: 100ms;
box-shadow: 0.5em 0.5em 1em 0.4em rgba(0,0,0,0.3);
}
.category:hover{
background-color: var(--nord1);
transform: scale(1.05,1.05);
}
.adder:hover,
.adder:focus-within
{
transform: scale(1.05, 1.05);
}
.add_ingredient{
font-family: sans-serif;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
font-size: 1.2rem;
padding: 2rem;
padding-top: 2.5rem;
border-radius: 20px;
background-color: var(--blue);
color: #bbb;
transition: 200ms;
gap: 0.5rem;
}
.add_ingredient input{
border: 2px solid var(--nord4);
color: var(--nord4);
border-radius: 1000px;
padding: 0.5em 1em;
transition: 100ms;
}
.add_ingredient input:hover,
.add_ingredient input:focus-visible
{
border-color: white;
color: white;
transform: scale(1.02, 1.02);
}
.add_ingredient input:nth-of-type(1){
max-width: 8ch;
}
.add_ingredient input:nth-of-type(2){
max-width: 8ch;
}
.add_ingredient input:nth-of-type(3){
max-width: 30ch;
}
dialog{
box-sizing: content-box;
width: 100%;
height: 100%;
background-color: transparent;
border: unset;
margin: 0;
transition: 500ms;
}
dialog[open]::backdrop{
animation: show 200ms ease forwards;
}
@keyframes show{
from {
backdrop-filter: blur(0px);
}
to {
backdrop-filter: blur(10px);
}
}
dialog .adder{
margin-top: 5rem;
}
dialog h2{
font-size: 3rem;
font-family: sans-serif;
color: white;
text-align: center;
margin-top: 30vh;
margin-top: 30dvh;
filter: drop-shadow(0 0 0.4em black)
drop-shadow(0 0 1em black)
;
}
.mod_icons{
display: flex;
flex-direction: row;
margin-left: 2rem;
}
.button_subtle{
padding: 0em;
animation: unset;
margin: 0.2em 0.1em;
background-color: transparent;
box-shadow: unset;
}
.button_subtle:hover{
scale: 1.2 1.2;
}
h3{
width: fit-content;
display: flex;
flex-direction: row;
max-width: 1000px;
justify-content: space-between;
user-select: none;
cursor: pointer;
}
.ingredients_grid > span{
box-sizing: border-box;
display: grid;
font-size: 1.1em;
grid-template-columns: 1em 2fr 3fr 2em;
grid-template-rows: auto;
grid-auto-flow: row;
align-items: center;
row-gap: 0.5em;
column-gap: 0.5em;
}
.ingredients_grid > *{
cursor: pointer;
user-select: none;
}
.ingredients_grid>*:nth-child(3n+1){
min-width: 5ch;
}
.list_wrapper{
padding-inline: 2em;
padding-block: 1em;
}
.list_wrapper p[contenteditable]{
border: 2px solid grey;
border-radius: 1000px;
padding: 0.25em 1em;
background-color: white;
transition: 200ms;
}
@media screen and (max-width: 500px){
dialog h2{
margin-top: 2rem;
}
dialog .heading_wrapper{
width: 80%;
}
.ingredients_grid .mod_icons{
margin-left: 0;
}
}
.list {
cursor: grab;
z-index: 5;
display: flex;
flex-direction: column;
}
.item {
min-height: 3em;
margin-bottom: 0.5em;
border-radius: 2px;
user-select: none;
}
.item:last-child {
margin-bottom: 0;
}
.item:not(#grabbed):not(#ghost) {
z-index: 10;
}
.item > * {
margin: auto;
}
.buttons {
width: 32px;
min-width: 32px;
margin: auto 0;
display: flex;
flex-direction: column;
}
.buttons button {
cursor: pointer;
width: 18px;
height: 18px;
margin: 0 auto;
padding: 0;
border: 1px solid rgba(0, 0, 0, 0);
background-color: inherit;
}
.buttons button:focus {
border: 1px solid black;
}
.delete {
width: 32px;
}
#grabbed {
opacity: 0.0;
}
#ghost {
pointer-events: none;
z-index: -5;
position: absolute;
top: 0;
left: 0;
opacity: 0.0;
}
#ghost * {
pointer-events: none;
}
#ghost.haunting {
z-index: 20;
opacity: 1.0;
}
main {
position: relative;
}
</style>
<main>
<div class=dragdroplist>
<div
bind:this={ghost}
id="ghost"
class={grabbed ? "item haunting" : "item"}
style={"top: " + (mouseY + offsetY - layerY) + "px"}><p></p>
</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<h3 on:click="{() => show_modal_edit_subheading_ingredient(list_index)}">
<div class="drag_handle drag_handle_header"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><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></div>
<div>
{#if list.name }
{list.name}
{:else}
Leer
{/if}
</div>
<div class=mod_icons>
<button class="action_button button_subtle" on:click="{() => show_modal_edit_subheading_ingredient(list_index)}">
<Pen fill=var(--nord1)></Pen> </button>
<button class="action_button button_subtle" on:click="{() => remove_list(list_index)}">
<Cross fill=var(--nord1)></Cross></button>
</div>
</h3>
<div class="ingredients_grid list"
on:mousemove={function(ev) {ev.stopPropagation(); drag(ev.clientY);}}
on:touchmove={function(ev) {ev.stopPropagation(); drag(ev.touches[0].clientY);}}
on:mouseup={function(ev) {ev.stopPropagation(); release(ev);}}
on:touchend={function(ev) {ev.stopPropagation(); release(ev.touches[0]);}}
>
{#each list.list as ingredient, ingredient_index}
<span
id={(grabbed && (ingredient.id ? ingredient.id : JSON.stringify(ingredient)) == grabbed.dataset.id) ? "grabbed" : ""}
class="item"
data-index={ingredient_index}
data-id={(ingredient.id ? ingredient.id : JSON.stringify(ingredient))}
data-grabY="0"
on:mousedown={function(ev) {grab(ev.clientY, this);}}
on:touchstart={function(ev) {grab(ev.touches[0].clientY, this);}}
on:mouseenter={function(ev) {ev.stopPropagation(); dragEnter(ev, ev.target);}}
on:touchmove={function(ev) {ev.stopPropagation(); ev.preventDefault(); touchEnter(ev.touches[0]);}}
>
<div class=drag_handle><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><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></div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} >{ingredient.amount} {ingredient.unit}</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} >{@html ingredient.name}</div>
<div class=mod_icons><button class="action_button button_subtle" on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)}>
<Pen fill=var(--nord1) height=1em width=1em></Pen></button>
<button class="action_button button_subtle" on:click="{() => remove_ingredient(list_index, ingredient_index)}"><Cross fill=var(--nord1) height=1em width=1em></Cross></button></div>
</span>
{/each}
</div>
</div>
</main>
<dialog id=edit_ingredient_modal>
<h2>Zutat verändern</h2>
<div class=adder>
<input class=category type="text" bind:value={edit_ingredient.sublist} placeholder="Kategorie (optional)">
<div class=add_ingredient on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
<input type="text" placeholder="250..." bind:value={edit_ingredient.amount} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
<input type="text" placeholder="mL..." bind:value={edit_ingredient.unit} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
<input type="text" placeholder="Milch..." bind:value={edit_ingredient.name} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
<button class=action_button on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)} on:click={edit_ingredient_and_close_modal}>
<Check fill=white style="width: 2rem; height: 2rem;"></Check>
</button>
</div>
</div>
</dialog>
<dialog id=edit_subheading_ingredient_modal>
<h2>Kategorie umbenennen</h2>
<div class=heading_wrapper>
<input class=heading type="text" bind:value={edit_heading.name} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} >
<button class=action_button on:keydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} on:click={edit_subheading_and_close_modal}>
<Check fill=white style="width:2rem; height:2rem;"></Check>
</button>
</div>
</dialog>

View File

@ -151,6 +151,12 @@ font-family: sans-serif;
background-color: var(--nord5);
box-shadow: 0px 0px 0.4em 0.05em rgba(0,0,0, 0.2);
}
@media (prefers-color-scheme: dark){
.multipliers button{
color: var(--tag-font);
background-color: var(--nord6-dark);
}
}
.multipliers :is(button, div):is(:hover, :focus-within){
scale: 1.2;
background-color: var(--orange);

View File

@ -38,6 +38,14 @@ ol li::marker{
box-shadow: 0.3em 0.3em 1em 0.2em rgba(0,0,0,0.3);
max-width: 30%
}
@media (prefers-color-scheme: dark){
.instructions{
background-color: var(--nord6-dark);
}
.additional_info > *{
background-color: var(--accent-dark);
}
}
@media screen and (max-width: 500px){
.additional_info > *{
max-width: 60%;

View File

@ -1,7 +0,0 @@
<script>
export let payment;
</script>
<div>
<p>{payment.amount}</p>
<p>{payment.payee}</p>
</div>

View File

@ -10,6 +10,11 @@ form{
padding-block: 2rem;
margin-block: 2rem;
}
@media (prefers-color-scheme: dark){
form{
background-color: var(--accent-dark);
}
}
form label{
font-size: 1.2em;
}

View File

@ -22,4 +22,8 @@
--yellow: var(--nord13);
--green: var(--nord14);
--purple: var(--nord15);
--nord6-dark: #292c31;
--accent-dark: #1f1f21;
--background-dark: #21201b;
--font-default-dark: #ffffff;
}

View File

@ -1,21 +1,34 @@
<script>
import "$lib/css/nordtheme.css";
</script>
<style>
section{
padding: 2rem 1rem;
min-height: 350px;
overflow: hidden;
transition: 200ms;
}
section:nth-child(3n){
section:nth-child(3n),
.grid_section a:nth-child(4n),
.grid_section a:nth-child(4n) svg{
background-color: var(--nord4);
fill: var(--nord11);
}
section:nth-child(3n+1){
section:nth-child(4n+1),
.grid_section a:nth-child(4n+1),
.grid_section a:nth-child(4n+1) svg{
background-color: var(--nord6);
fill: var(--nord10);
}
section:nth-child(3n+2){
section:nth-child(3n+2),
.grid_section a:nth-child(4n+2){
background-color: var(--nord5);
}
.grid_section a:nth-child(4n+3){
background-color: var(--nord5);
}
section:nth-child(2n) .flex{
flex-direction: row-reverse;
}
@ -60,6 +73,72 @@ section:hover{
section:has(a:hover){
box-shadow: 1em 1em 1em 1em rgba(0,0,0, 0.3);
}
.grid_section a:hover{
box-shadow: 1em 1em 2em 1em rgba(0,0,0, 0.3);
}
.grid_section a{
box-shadow: 0.2em 0.2em 1em 1em rgba(0,0,0, 0.1);
}
.grid_section{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1000px;
margin-inline: auto;
padding: 2rem 1rem;
}
.grid_section a{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: unset;
color: var(--nord0);
transition: 200ms;
width: 100%;
padding: 1rem;
}
.grid_section a:hover{
scale: 1.02;
}
.grid_section a :is(svg, img){
height: 120px;
fill: var(--nord0);
}
.grid_section h3{
font-size: 1.5rem;
}
@media (prefers-color-scheme: dark){
*{
color: white;
}
section:nth-child(3n),
.grid_section a:nth-child(4n),
.grid_section a:nth-child(4n) svg{
background-color: var(--nord6-dark);
fill: var(--nord11);
}
section:nth-child(4n+1),
.grid_section a:nth-child(4n+1),
.grid_section a:nth-child(4n+1) svg{
background-color: var(--accent-dark);
fill: var(--nord9);
}
section:nth-child(3n+2),
.grid_section a:nth-child(4n+2),
.grid_section a:nth-child(4n+2) svg{
background-color: var(--nord1);
fill: var(--nord8);
}
.grid_section a:nth-child(4n+3),
.grid_section a:nth-child(4n+3) svg{
background-color: var(--background-dark);
fill: var(--nord7);
}
}
</style>
<section>
@ -74,85 +153,49 @@ section:has(a:hover){
</a>
</section>
<section>
<a href="/git" class=flex>
<div class=text>
<h2>Git</h2>
<p>Alle Möglichen eigene Codingprojekte kann man auf dieser eigenen gehosteten Gitea Instanz finden. So auch z.B. diese Website. Anki-Vokabelkarten oder auch nur kleinere Personalisierungen von Linux Desktopprogrammen à la DWM oder dmenu sind auch hier zu finden.</p>
</div>
<div>
<img src="/icons/Git.svg" alt="The Git Icon in orange">
</div>
<div class=grid_section>
<a href="rezepte">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M240 144A96 96 0 1 0 48 144a96 96 0 1 0 192 0zm44.4 32C269.9 240.1 212.5 288 144 288C64.5 288 0 223.5 0 144S64.5 0 144 0c68.5 0 125.9 47.9 140.4 112h71.8c8.8-9.8 21.6-16 35.8-16H496c26.5 0 48 21.5 48 48s-21.5 48-48 48H392c-14.2 0-27-6.2-35.8-16H284.4zM144 80a64 64 0 1 1 0 128 64 64 0 1 1 0-128zM400 240c13.3 0 24 10.7 24 24v8h96c13.3 0 24 10.7 24 24s-10.7 24-24 24H280c-13.3 0-24-10.7-24-24s10.7-24 24-24h96v-8c0-13.3 10.7-24 24-24zM288 464V352H512V464c0 26.5-21.5 48-48 48H336c-26.5 0-48-21.5-48-48zM48 320h80 16 32c26.5 0 48 21.5 48 48s-21.5 48-48 48H160c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V336c0-8.8 7.2-16 16-16zm128 64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160v32h16zM24 464H200c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>
<h3>Rezepte</h3>
</a>
</section>
<section>
<a href="https://stream.bocken.org" class=flex>
<div class=text>
<h2>Strea&shy;ming</h2>
<p>Die persönliche Filme und TV-Shows zum streamen gehosted via Jellyfin. Somit wird Netflix und Co. vollends ersetzt. Login notwendiged. (Zur Zeit noch separat von main-page login)</p>
</div>
<div>
<img src="/icons/Jellyfin.svg" alt="">
</div>
<a href=git>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>
<h3>Git</h3>
</a>
</section>
<section>
<a href="/bilder" class=flex>
<div class=text>
<h2>Fa&shy;mil&shy;ien&shy;bil&shy;der</h2>
<p></p>
</div>
<div>
<img src="/icons/Photoprism.svg" alt="">
</div>
</a>
</section>
<section>
<a href="https://cloud.bocken.org" class=flex>
<div class=text>
<h2>Cloud</h2>
<p>Die priavte Cloud für Datensynchronisiserung, Kontakte und Kalender.</p>
</div>
<div><img src="/icons/Nextcloud.svg" alt=""></div>
</a>
</section>
<section>
<a href="https://meet.bocken.org" class=flex>
<div class=text>
<h2>Jitsi</h2>
<p>Für die eigenene Meetings ohne ein mithören von Zoom oder Microsoft</p>
</div>
<div>
<img src="/icons/Jitsi.svg" alt="">
</div>
<a href="https://stream.bocken.org">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M448 32H361.9l-1 1-127 127h92.1l1-1L453.8 32.3c-1.9-.2-3.8-.3-5.8-.3zm64 128V96c0-15.1-5.3-29.1-14-40l-104 104H512zM294.1 32H201.9l-1 1L73.9 160h92.1l1-1 127-127zM64 32C28.7 32 0 60.7 0 96v64H6.1l1-1 127-127H64zM512 192H0V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V192z"/></svg>
<h3>Streaming</h3>
</a>
</section>
<section>
<a href="/searx" class=flex>
<div class=text>
<h2>Pri&shy;va&shy;te Such&shy;ma&shy;schi&shy;ne</h2>
<p>Eine selbsgehostete Searx-Instanz für private Suche durch diese Metasuchmaschine. Überraschend gut für Manches, überraschend schlecht für Anderes.</p>
</div>
<div>
<img src="/icons/Searx.svg" alt="">
</div>
<a href="/bilder">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"/></svg>
<h3>Familienbilder</h3>
</a>
</section>
<section>
<a href="/transmission" class=flex>
<div class=text>
<h2>Trans&shy;mis&shy;sion</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero doloremque atque totam nam voluptatum at facere itaque autem quae? Saepe hic iure delectus vero culpa maiores fuga, provident ipsam consectetur.</p>
</div>
<div>
<img src="/icons/Transmission.svg" alt="">
</div>
<a href="https://cloud.bocken.org">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 336c0 79.5 64.5 144 144 144H512c70.7 0 128-57.3 128-128c0-61.9-44-113.6-102.4-125.4c4.1-10.7 6.4-22.4 6.4-34.6c0-53-43-96-96-96c-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32C167.6 32 96 103.6 96 192c0 2.7 .1 5.4 .2 8.1C40.2 219.8 0 273.2 0 336z"/></svg>
<h3>Cloud</h3>
</a>
</section>
<a href="https://meet.bocken.org">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2V384c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1V320 192 174.9l14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"/></svg>
<h3>Videokonferenzen</h3>
</a>
<a href="/searx">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
<h3>Suchmaschine</h3>
</a>
<a href="/transmission">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
<h3>Transmission</h3>
</a>
<a href="https://tree.bocken.org">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M335.5 4l288 160c15.4 8.6 21 28.1 12.4 43.5s-28.1 21-43.5 12.4L320 68.6 47.5 220c-15.4 8.6-34.9 3-43.5-12.4s-3-34.9 12.4-43.5L304.5 4c9.7-5.4 21.4-5.4 31.1 0zM320 160a40 40 0 1 1 0 80 40 40 0 1 1 0-80zM144 256a40 40 0 1 1 0 80 40 40 0 1 1 0-80zm312 40a40 40 0 1 1 80 0 40 40 0 1 1 -80 0zM226.9 491.4L200 441.5V480c0 17.7-14.3 32-32 32H120c-17.7 0-32-14.3-32-32V441.5L61.1 491.4c-6.3 11.7-20.8 16-32.5 9.8s-16-20.8-9.8-32.5l37.9-70.3c15.3-28.5 45.1-46.3 77.5-46.3h19.5c16.3 0 31.9 4.5 45.4 12.6l33.6-62.3c15.3-28.5 45.1-46.3 77.5-46.3h19.5c32.4 0 62.1 17.8 77.5 46.3l33.6 62.3c13.5-8.1 29.1-12.6 45.4-12.6h19.5c32.4 0 62.1 17.8 77.5 46.3l37.9 70.3c6.3 11.7 1.9 26.2-9.8 32.5s-26.2 1.9-32.5-9.8L552 441.5V480c0 17.7-14.3 32-32 32H472c-17.7 0-32-14.3-32-32V441.5l-26.9 49.9c-6.3 11.7-20.8 16-32.5 9.8s-16-20.8-9.8-32.5l36.3-67.5c-1.7-1.7-3.2-3.6-4.3-5.8L376 345.5V400c0 17.7-14.3 32-32 32H296c-17.7 0-32-14.3-32-32V345.5l-26.9 49.9c-1.2 2.2-2.6 4.1-4.3 5.8l36.3 67.5c6.3 11.7 1.9 26.2-9.8 32.5s-26.2 1.9-32.5-9.8z"/></svg>
<h3>Stammbaum</h3>
</a>
</div>

View File

@ -1,5 +1,6 @@
<script>
import "$lib/css/form.css"
import "$lib/css/nordtheme.css"
</script>
<form action="?/login" method=POST>
<h1>Log In</h1>

View File

@ -11,6 +11,7 @@
<style>
h1{
box-sizing: border-box;
text-align: center;
max-width: 1000px;
padding-left: 5rem;
margin-bottom: 0;

View File

@ -125,6 +125,12 @@ h1{
transition: 100ms;
box-shadow: 0em 0em 0.5em 0.05em rgba(0,0,0,0.3);
}
@media (prefers-color-scheme: dark) {
.tag{
background-color: var(--nord0);
color: white;
}
}
.tag:hover,
.tag:focus-visible
{
@ -144,6 +150,11 @@ h1{
transform: translateY(-7rem);
z-index: -2;
}
@media (prefers-color-scheme: dark) {
.wrapper_wrapper{
background-color: var(--background-dark);
}
}
.wrapper{
display: flex;
@ -167,6 +178,12 @@ h1{
translate: 0 1px; /*bruh*/
z-index: 1;
}
@media (prefers-color-scheme: dark) {
.title{
background-color: var(--nord6-dark);
}
}
.icon{
position: absolute;
top: -1em;
@ -179,6 +196,12 @@ h1{
transition: 100ms;
box-shadow: 0em 0em 1em 0.3em rgba(0,0,0,0.4);
}
@media (prefers-color-scheme: dark) {
.icon{
background-color: var(--accent-dark);
}
}
.icon:hover,
.icon:focus-visible{
scale: 1.2 1.2;
@ -243,6 +266,7 @@ h4{
.date{
margin-bottom: 0;
}
</style>
<svelte:head>
<title>{stripHtmlTags(data.name)} - Bocken'sche Rezepte</title>

View File

@ -168,19 +168,6 @@ input:focus-visible
flex-direction: column;
}
}
.submit_wrapper{
position: relative;
margin-inline: auto;
width: max(300px, 50vw)
}
.submit_wrapper button{
position: absolute;
right:-1em;
bottom: -0.5em;
}
.submit_wrapper h2{
margin-bottom: 0;
}
h1{
text-align: center;
margin-bottom: 2rem;
@ -250,6 +237,11 @@ button.action_button{
padding-right: 0.5em;
margin: 0;
}
@media (prefers-color-scheme: dark){
.title{
background-color: var(--nord6-dark);
}
}
</style>
<svelte:head>
<title>Rezept erstellen</title>

View File

@ -1,11 +1,17 @@
<script lang="ts">
import type { PageData } from './$types';
import "$lib/css/nordtheme.css";
export let data: PageData;
import TagCloud from '$lib/components/TagCloud.svelte';
import TagBall from '$lib/components/TagBall.svelte';
</script>
<h1>Rezepte</h1>
<h2>Kategorien</h2>
<style>
h1 {
text-align: center;
font-size: 3rem;
}
</style>
<h1>Kategorien</h1>
<section>
<TagCloud>
{#each data.categories as tag}

View File

@ -7,8 +7,13 @@
import Card from '$lib/components/Card.svelte'
import { rand_array } from '$lib/js/randomize';
</script>
<h1>Rezepte</h1>
<h2>In Kategorie {data.category}</h2>
<style>
h1 {
text-align: center;
font-size: 3em;
}
</style>
<h1>Rezepte in Kategorie <q>{data.category}</q>:</h1>
<Search></Search>
<section>
<Recipes>

View File

@ -3,6 +3,7 @@
import Cross from '$lib/assets/icons/Cross.svelte';
import SeasonSelect from '$lib/components/SeasonSelect.svelte';
import '$lib/css/action_button.css'
import '$lib/css/nordtheme.css'
import { redirect } from '@sveltejs/kit';
import EditRecipeNote from '$lib/components/EditRecipeNote.svelte';
@ -285,6 +286,11 @@ h1{
background-color: var(--nord6);
padding: 1rem 2rem;
}
@media (prefers-color-scheme: dark){
.title{
background-color: var(--nord6-dark);
}
}
.title p{
border: 2px solid var(--nord1);
border-radius: 10000px;
@ -336,6 +342,11 @@ button.action_button{
padding-right: 0.5em;
margin: 0;
}
@media (prefers-color-scheme: dark){
:global(body){
background-color: var(--background-dark);
}
}
</style>
<h1>Rezept editieren</h1>
<CardAdd {card_data} {image_preview_url} ></CardAdd>

View File

@ -10,12 +10,20 @@
</script>
<style>
a{
--padding: 0.5em;
font-size: 3rem;
text-decoration: none;
padding: 0.5em;
padding: var(--padding);
background-color: var(--nord4);
border-radius: 1000px;
box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
text-align: center;
--width: calc(1.2em + var(--padding) * 2);
width: var(--width);
line-height: calc(var(--width) - 2*var(--padding));
height: var(--width);
}
a:hover,
a:focus-visible

View File

@ -1,11 +1,17 @@
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
import "$lib/css/nordtheme.css";
import TagCloud from '$lib/components/TagCloud.svelte';
import TagBall from '$lib/components/TagBall.svelte';
</script>
<h1>Rezepte</h1>
<h2>Kategorien</h2>
<style>
h1 {
font-size: 3rem;
text-align: center;
}
</style>
<h1>Kategorien</h1>
<section>
<TagCloud>
{#each data.tags as tag}

View File

@ -7,8 +7,13 @@
import Search from '$lib/components/Search.svelte';
import { rand_array } from '$lib/js/randomize';
</script>
<h1>Rezepte</h1>
<h2>In Tag {data.tag}</h2>
<style>
h1 {
text-align: center;
font-size: 2em;
}
</style>
<h1>Rezepte mit Stichwort <q>{data.tag}</q>:</h1>
<Search></Search>
<section>
<Recipes>