From 7a7b19c02b1258c6483b2f719273738bcedf5e19 Mon Sep 17 00:00:00 2001 From: Alexander Bocken Date: Sat, 20 Jan 2024 00:39:53 +0100 Subject: [PATCH] dark theme implemented --- .../components/CreateIngredientList.svelte | 20 +- src/lib/components/CreateStepList.svelte | 24 +- src/lib/components/EditRecipe.svelte | 8 + src/lib/components/Header.svelte | 6 + src/lib/components/Icon.svelte | 5 + src/lib/components/IngredientListList.svelte | 565 ++++++++++++++++++ src/lib/components/IngredientsPage.svelte | 6 + src/lib/components/InstructionsPage.svelte | 8 + src/lib/components/PaymentCard.svelte | 7 - src/lib/components/TagSelector.svelte | 0 src/lib/css/form.css | 5 + src/lib/css/nordtheme.css | 4 + src/routes/(main)/+page.svelte | 205 ++++--- src/routes/(main)/login/+page.svelte | 1 + src/routes/(rezepte)/rezepte/+page.svelte | 1 + .../(rezepte)/rezepte/[name]/+page.svelte | 24 + src/routes/(rezepte)/rezepte/add/+page.svelte | 18 +- .../(rezepte)/rezepte/category/+page.svelte | 10 +- .../rezepte/category/[category]/+page.svelte | 9 +- .../rezepte/edit/[name]/+page.svelte | 11 + .../(rezepte)/rezepte/icon/+page.svelte | 10 +- src/routes/(rezepte)/rezepte/tag/+page.svelte | 10 +- .../(rezepte)/rezepte/tag/[tag]/+page.svelte | 9 +- 23 files changed, 848 insertions(+), 118 deletions(-) create mode 100644 src/lib/components/IngredientListList.svelte delete mode 100644 src/lib/components/PaymentCard.svelte delete mode 100644 src/lib/components/TagSelector.svelte diff --git a/src/lib/components/CreateIngredientList.svelte b/src/lib/components/CreateIngredientList.svelte index 698c152..a964397 100644 --- a/src/lib/components/CreateIngredientList.svelte +++ b/src/lib/components/CreateIngredientList.svelte @@ -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); + + } +}
@@ -411,10 +423,10 @@ h3{

@@ -436,10 +448,10 @@ h3{ {#each list.list as ingredient, ingredient_index (ingredient_index)}
diff --git a/src/lib/components/CreateStepList.svelte b/src/lib/components/CreateStepList.svelte index 0e7491e..91bd72a 100644 --- a/src/lib/components/CreateStepList.svelte +++ b/src/lib/components/CreateStepList.svelte @@ -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); + } +}
@@ -461,10 +477,10 @@ h3{

show_modal_edit_subheading_step(list_index)}> @@ -486,10 +502,10 @@ h3{
  • diff --git a/src/lib/components/EditRecipe.svelte b/src/lib/components/EditRecipe.svelte index 775aa2f..5edb78e 100644 --- a/src/lib/components/EditRecipe.svelte +++ b/src/lib/components/EditRecipe.svelte @@ -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; + } +}

    {title}

    diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index 7625c20..a605aca 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -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; diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte index 254ebc6..6691032 100644 --- a/src/lib/components/Icon.svelte +++ b/src/lib/components/Icon.svelte @@ -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; diff --git a/src/lib/components/IngredientListList.svelte b/src/lib/components/IngredientListList.svelte new file mode 100644 index 0000000..50922f7 --- /dev/null +++ b/src/lib/components/IngredientListList.svelte @@ -0,0 +1,565 @@ + + + + + +
    +
    + +

    +
    + + +

    +
    +
    + {#if list.name } + {list.name} + {:else} + Leer + {/if} +
    +
    + + +
    +

    + +
    +{#each list.list as ingredient, ingredient_index} + +
    + +
    show_modal_edit_ingredient(list_index, ingredient_index)} >{ingredient.amount} {ingredient.unit}
    + +
    show_modal_edit_ingredient(list_index, ingredient_index)} >{@html ingredient.name}
    +
    +
    +     +{/each} +
    + +
    +
    + + +

    Zutat verändern

    +
    + +
    do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}> + do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}> + do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}> + do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}> + +
    +
    +     + + +

    Kategorie umbenennen

    +
    + do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} > + +
    +     diff --git a/src/lib/components/IngredientsPage.svelte b/src/lib/components/IngredientsPage.svelte index 6d6334f..48926a6 100644 --- a/src/lib/components/IngredientsPage.svelte +++ b/src/lib/components/IngredientsPage.svelte @@ -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); diff --git a/src/lib/components/InstructionsPage.svelte b/src/lib/components/InstructionsPage.svelte index c4cc1df..806069a 100644 --- a/src/lib/components/InstructionsPage.svelte +++ b/src/lib/components/InstructionsPage.svelte @@ -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%; diff --git a/src/lib/components/PaymentCard.svelte b/src/lib/components/PaymentCard.svelte deleted file mode 100644 index 288971a..0000000 --- a/src/lib/components/PaymentCard.svelte +++ /dev/null @@ -1,7 +0,0 @@ - -
    -

    {payment.amount}

    -

    {payment.payee}

    -
    diff --git a/src/lib/components/TagSelector.svelte b/src/lib/components/TagSelector.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/css/form.css b/src/lib/css/form.css index 4c230c5..4881f86 100644 --- a/src/lib/css/form.css +++ b/src/lib/css/form.css @@ -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; } diff --git a/src/lib/css/nordtheme.css b/src/lib/css/nordtheme.css index 7feacda..fef982c 100644 --- a/src/lib/css/nordtheme.css +++ b/src/lib/css/nordtheme.css @@ -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; } diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte index a6cb7a1..910689b 100644 --- a/src/routes/(main)/+page.svelte +++ b/src/routes/(main)/+page.svelte @@ -1,21 +1,34 @@
    @@ -74,85 +153,49 @@ section:has(a:hover){
    - -
    - -
    -

    Git

    -

    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.

    -
    -
    -The Git Icon in orange -
    -     -
    - -
    - -
    -

    Strea­ming

    -

    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)

    -
    -
    - -
    -     - -
    - -
    - -
    -

    Fa­mil­ien­bil­der

    -

    -
    -
    - -
    -     -
    - -
    - -
    -

    Cloud

    -

    Die priavte Cloud für Datensynchronisiserung, Kontakte und Kalender.

    -
    -
    +
    + + +

    Rezepte

    +     + + +

    Git

     -
    -
    - -
    -

    Jitsi

    -

    Für die eigenene Meetings ohne ein mithören von Zoom oder Microsoft

    -
    -
    - -
    -     -
    -
    - -
    -

    Pri­va­te Such­ma­schi­ne

    -

    Eine selbsgehostete Searx-Instanz für private Suche durch diese Metasuchmaschine. Überraschend gut für Manches, überraschend schlecht für Anderes.

    -
    -
    - -
    -     -
    + + +

    Streaming

    +     -
    - -
    -

    Trans­mis­sion

    -

    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.

    +     + +

    Familienbilder

    +     + + + +

    Cloud

    +     + + + +

    Videokonferenzen

    +     + + + +

    Suchmaschine

    +     + + + +

    Transmission

    + +     + + + +

    Stammbaum

    +
    -
    - -
    - -
    diff --git a/src/routes/(main)/login/+page.svelte b/src/routes/(main)/login/+page.svelte index ceaf5ec..1c04d40 100644 --- a/src/routes/(main)/login/+page.svelte +++ b/src/routes/(main)/login/+page.svelte @@ -1,5 +1,6 @@

    Log In

    diff --git a/src/routes/(rezepte)/rezepte/+page.svelte b/src/routes/(rezepte)/rezepte/+page.svelte index 6d15dd0..0a2ae1d 100644 --- a/src/routes/(rezepte)/rezepte/+page.svelte +++ b/src/routes/(rezepte)/rezepte/+page.svelte @@ -11,6 +11,7 @@ {stripHtmlTags(data.name)} - Bocken'sche Rezepte diff --git a/src/routes/(rezepte)/rezepte/add/+page.svelte b/src/routes/(rezepte)/rezepte/add/+page.svelte index 223cc71..3160903 100644 --- a/src/routes/(rezepte)/rezepte/add/+page.svelte +++ b/src/routes/(rezepte)/rezepte/add/+page.svelte @@ -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); + } +} Rezept erstellen diff --git a/src/routes/(rezepte)/rezepte/category/+page.svelte b/src/routes/(rezepte)/rezepte/category/+page.svelte index 94e011f..ced3168 100644 --- a/src/routes/(rezepte)/rezepte/category/+page.svelte +++ b/src/routes/(rezepte)/rezepte/category/+page.svelte @@ -1,11 +1,17 @@ -

    Rezepte

    -

    Kategorien

    + +

    Kategorien

    {#each data.categories as tag} diff --git a/src/routes/(rezepte)/rezepte/category/[category]/+page.svelte b/src/routes/(rezepte)/rezepte/category/[category]/+page.svelte index 6850584..ff50d8c 100644 --- a/src/routes/(rezepte)/rezepte/category/[category]/+page.svelte +++ b/src/routes/(rezepte)/rezepte/category/[category]/+page.svelte @@ -7,8 +7,13 @@ import Card from '$lib/components/Card.svelte' import { rand_array } from '$lib/js/randomize'; -

    Rezepte

    -

    In Kategorie {data.category}

    + +

    Rezepte in Kategorie {data.category}:

    diff --git a/src/routes/(rezepte)/rezepte/edit/[name]/+page.svelte b/src/routes/(rezepte)/rezepte/edit/[name]/+page.svelte index b839b5e..5f3258b 100644 --- a/src/routes/(rezepte)/rezepte/edit/[name]/+page.svelte +++ b/src/routes/(rezepte)/rezepte/edit/[name]/+page.svelte @@ -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); + } +}

    Rezept editieren

    diff --git a/src/routes/(rezepte)/rezepte/icon/+page.svelte b/src/routes/(rezepte)/rezepte/icon/+page.svelte index 59d0c43..439e296 100644 --- a/src/routes/(rezepte)/rezepte/icon/+page.svelte +++ b/src/routes/(rezepte)/rezepte/icon/+page.svelte @@ -10,12 +10,20 @@ +

    Kategorien

    {#each data.tags as tag} diff --git a/src/routes/(rezepte)/rezepte/tag/[tag]/+page.svelte b/src/routes/(rezepte)/rezepte/tag/[tag]/+page.svelte index 4f4f6de..8a19be0 100644 --- a/src/routes/(rezepte)/rezepte/tag/[tag]/+page.svelte +++ b/src/routes/(rezepte)/rezepte/tag/[tag]/+page.svelte @@ -7,8 +7,13 @@ import Search from '$lib/components/Search.svelte'; import { rand_array } from '$lib/js/randomize'; -

    Rezepte

    -

    In Tag {data.tag}

    + +

    Rezepte mit Stichwort {data.tag}: