dark theme implemented
This commit is contained in:
parent
e2a7de3e90
commit
7a7b19c02b
GPG Key ID:
1D237BE83F9B05E8
@ -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 -->
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
565
src/lib/components/IngredientListList.svelte
Normal file
565
src/lib/components/IngredientListList.svelte
Normal 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>
|
||||
@ -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);
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
<script>
|
||||
export let payment;
|
||||
</script>
|
||||
<div>
|
||||
<p>{payment.amount}</p>
|
||||
<p>{payment.payee}</p>
|
||||
</div>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="https://stream.bocken.org" class=flex>
|
||||
<div class=text>
|
||||
<h2>Strea­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>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="/bilder" class=flex>
|
||||
<div class=text>
|
||||
<h2>Fa­mil­ien­bil­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>
|
||||
<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>
|
||||
<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="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>
|
||||
|
||||
</section>
|
||||
<section>
|
||||
<a href="/searx" class=flex>
|
||||
<div class=text>
|
||||
<h2>Pri­va­te Such­ma­schi­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>
|
||||
</section>
|
||||
<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>
|
||||
<a href="/transmission" class=flex>
|
||||
<div class=text>
|
||||
<h2>Trans­mis­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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<div>
|
||||
<img src="/icons/Transmission.svg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
<style>
|
||||
h1{
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
max-width: 1000px;
|
||||
padding-left: 5rem;
|
||||
margin-bottom: 0;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user