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

css: replace hardcoded values with design tokens
All checks were successful
CI / update (push) Successful in 1m34s
Details

Browse Source 
Replace 30 border-radius: 1000px → var(--radius-pill), 6 border-radius:
20px → var(--radius-card), 21 transition: 100ms → var(--transition-fast),
and 32 transition: 200ms → var(--transition-normal) across the codebase.
This commit is contained in:
Alexander Bocken
2026-02-16 09:39:30 +01:00
parent 4191012cf1
commit 0e9daf296d
33 changed files with 282 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
scripts/generate-mystery-verses.ts
View File

@@ -5,7 +5,7 @@
import { writeFileSync } from 'fs'; import { writeFileSync } from 'fs';
import { resolve } from 'path'; import { resolve } from 'path';
import { lookupReference } from '../src/lib/server/bible'; import { lookupReference } from '../src/lib/server/bible';
import { mysteryReferences, mysteryReferencesEnglish } from '../src/lib/data/mysteryDescriptions'; import { mysteryReferences, mysteryReferencesEnglish, theologicalVirtueReference, theologicalVirtueReferenceEnglish } from '../src/lib/data/mysteryDescriptions';
import type { MysteryDescription, VerseData } from '../src/lib/data/mysteryDescriptions'; import type { MysteryDescription, VerseData } from '../src/lib/data/mysteryDescriptions';
function generateVerseData( function generateVerseData(
@@ -54,12 +54,33 @@ const enPath = resolve('static/drb.tsv');
const mysteryVerseDataDe = generateVerseData(mysteryReferences, dePath); const mysteryVerseDataDe = generateVerseData(mysteryReferences, dePath);
const mysteryVerseDataEn = generateVerseData(mysteryReferencesEnglish, enPath); const mysteryVerseDataEn = generateVerseData(mysteryReferencesEnglish, enPath);
// Generate theological virtue (1 Cor 13) verse data
function generateSingleRef(ref: { title: string; reference: string }, tsvPath: string): MysteryDescription {
const lookup = lookupReference(ref.reference, tsvPath);
let text = '';
let verseData: VerseData | null = null;
if (lookup && lookup.verses.length > 0) {
text = `«${lookup.verses.map((v) => v.text).join(' ')}»`;
verseData = { book: lookup.book, chapter: lookup.chapter, verses: lookup.verses };
} else {
console.warn(`No verses found for: ${ref.reference} in ${tsvPath}`);
}
return { title: ref.title, reference: ref.reference, text, verseData };
}
const theologicalVirtueDataDe = generateSingleRef(theologicalVirtueReference, dePath);
const theologicalVirtueDataEn = generateSingleRef(theologicalVirtueReferenceEnglish, enPath);
const output = `// Auto-generated by scripts/generate-mystery-verses.ts — do not edit manually const output = `// Auto-generated by scripts/generate-mystery-verses.ts — do not edit manually
import type { MysteryDescription } from './mysteryDescriptions'; import type { MysteryDescription } from './mysteryDescriptions';
export const mysteryVerseDataDe: Record<string, MysteryDescription[]> = ${JSON.stringify(mysteryVerseDataDe, null, '\t')}; export const mysteryVerseDataDe: Record<string, MysteryDescription[]> = ${JSON.stringify(mysteryVerseDataDe, null, '\t')};
export const mysteryVerseDataEn: Record<string, MysteryDescription[]> = ${JSON.stringify(mysteryVerseDataEn, null, '\t')}; export const mysteryVerseDataEn: Record<string, MysteryDescription[]> = ${JSON.stringify(mysteryVerseDataEn, null, '\t')};
export const theologicalVirtueVerseDataDe: MysteryDescription = ${JSON.stringify(theologicalVirtueDataDe, null, '\t')};
export const theologicalVirtueVerseDataEn: MysteryDescription = ${JSON.stringify(theologicalVirtueDataEn, null, '\t')};
`; `;
const outPath = resolve('src/lib/data/mysteryVerseData.ts'); const outPath = resolve('src/lib/data/mysteryVerseData.ts');

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

@@ -13,9 +13,9 @@ right:0;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
padding: 2rem; padding: 2rem;
border-radius: 1000px; border-radius: var(--radius-pill);
margin: 2rem; margin: 2rem;
transition: 200ms; transition: var(--transition-normal);
background-color: var(--red); background-color: var(--red);
display: grid; display: grid;
justify-content: center; justify-content: center;

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

@@ -43,7 +43,7 @@
all: unset; all: unset;
font-size: 1.5rem; font-size: 1.5rem;
cursor: pointer; cursor: pointer;
transition: 100ms; transition: var(--transition-fast);
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
position: absolute; position: absolute;
bottom: 0.5em; bottom: 0.5em;

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

@@ -119,7 +119,7 @@ nav[hidden]{
font-family: sans-serif; font-family: sans-serif;
font-size: 1.2rem; font-size: 1.2rem;
color: inherit; color: inherit;
border-radius: 1000px; border-radius: var(--radius-pill);
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
} }
:global(a.entry), :global(a.entry),
@@ -130,7 +130,7 @@ nav[hidden]{
font-family: sans-serif; font-family: sans-serif;
font-size: 1.2rem; font-size: 1.2rem;
color: white !important; color: white !important;
border-radius: 1000px; border-radius: var(--radius-pill);
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
} }
@@ -235,7 +235,7 @@ footer{
.nav_button svg{ .nav_button svg{
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: 100ms; transition: var(--transition-fast);
} }
.nav_button:focus{ .nav_button:focus{
fill: var(--red); fill: var(--red);

4
src/lib/components/LinksGrid.svelte
View File

@@ -20,7 +20,7 @@
:global(a){ :global(a){
text-decoration: unset; text-decoration: unset;
color: var(--nord0); color: var(--nord0);
transition: 200ms; transition: var(--transition-normal);
} }
:global(.links_grid a:hover){ :global(.links_grid a:hover){
box-shadow: 1em 1em 2em 1em rgba(0,0,0, 0.3); box-shadow: 1em 1em 2em 1em rgba(0,0,0, 0.3);
@@ -43,7 +43,7 @@
justify-content: center; justify-content: center;
text-decoration: unset; text-decoration: unset;
color: var(--nord0); color: var(--nord0);
transition: 200ms; transition: var(--transition-normal);
width: 100%; width: 100%;
padding: 1rem; padding: 1rem;
position: relative; position: relative;

4
src/lib/components/SearchInput.svelte
View File

@@ -20,7 +20,7 @@ input {
background: var(--nord0); background: var(--nord0);
color: #fff; color: #fff;
padding: 0.7rem 2rem; padding: 0.7rem 2rem;
border-radius: 1000px; border-radius: var(--radius-pill);
width: 100%; width: 100%;
} }
input::placeholder { input::placeholder {
@@ -35,7 +35,7 @@ input::placeholder {
font-size: 1.6rem; font-size: 1.6rem;
display: flex; display: flex;
align-items: center; align-items: center;
transition: 100ms; transition: var(--transition-fast);
filter: drop-shadow(0.4em 0.5em 0.4em rgba(0,0,0,0.4)); filter: drop-shadow(0.4em 0.5em 0.4em rgba(0,0,0,0.4));
} }

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

@@ -5,7 +5,7 @@
--icon_fill: var(--nord4); --icon_fill: var(--nord4);
} }
svg{ svg{
transition: 100ms; transition: var(--transition-fast);
height: 3em; height: 3em;
} }
svg:hover, svg:hover,

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

@@ -7,7 +7,7 @@ a{
text-decoration: none; text-decoration: none;
padding: 2rem; padding: 2rem;
border-radius: 1000000px; border-radius: 1000000px;
transition: 100ms; transition: var(--transition-fast);
font-size: 2rem; font-size: 2rem;
color: white; color: white;
} }

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

@@ -97,7 +97,7 @@
text-decoration: none; text-decoration: none;
color: white; color: white;
text-align: left; text-align: left;
transition: 100ms; transition: var(--transition-fast);
} }
#options li:hover a{ #options li:hover a{
color: var(--red); color: var(--red);

5
src/lib/components/faith/BibleModal.svelte
View File

@@ -188,9 +188,9 @@
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 1rem; padding: 1rem;
border-radius: 1000px; border-radius: var(--radius-pill);
color: white; color: white;
transition: 200ms; transition: var(--transition-normal);
box-shadow: 0 0 1em 0.2em rgba(0, 0, 0, 0.3); box-shadow: 0 0 1em 0.2em rgba(0, 0, 0, 0.3);
display: flex; display: flex;
align-items: center; align-items: center;
@@ -248,6 +248,7 @@
gap: 0.75rem; gap: 0.75rem;
line-height: 1.6; line-height: 1.6;
color: var(--nord4); color: var(--nord4);
margin: 0;
} }
@media(prefers-color-scheme: light) { @media(prefers-color-scheme: light) {

10
src/lib/components/recipes/BaseRecipeSelector.svelte
View File

@@ -123,7 +123,7 @@ dialog h2 {
margin-top: 2rem; margin-top: 2rem;
max-width: 600px; max-width: 600px;
padding: 2rem; padding: 2rem;
border-radius: 20px; border-radius: var(--radius-card);
background-color: var(--blue); background-color: var(--blue);
color: white; color: white;
box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3); box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
@@ -141,12 +141,12 @@ dialog h2 {
width: 100%; width: 100%;
padding: 0.5em 1em; padding: 0.5em 1em;
margin-top: 0.5em; margin-top: 0.5em;
border-radius: 1000px; border-radius: var(--radius-pill);
border: 2px solid var(--nord4); border: 2px solid var(--nord4);
background-color: white; background-color: white;
color: var(--nord0); color: var(--nord0);
font-size: 1rem; font-size: 1rem;
transition: 100ms; transition: var(--transition-fast);
} }
.selector-content select:hover, .selector-content select:hover,
@@ -176,10 +176,10 @@ dialog h2 {
.button-group button { .button-group button {
padding: 0.75em 2em; padding: 0.75em 2em;
font-size: 1.1rem; font-size: 1.1rem;
border-radius: 1000px; border-radius: var(--radius-pill);
border: none; border: none;
cursor: pointer; cursor: pointer;
transition: 200ms; transition: var(--transition-normal);
font-weight: bold; font-weight: bold;
} }

24
src/lib/components/recipes/CardAdd.svelte
View File

@@ -133,12 +133,12 @@ function remove_on_enter(event: KeyboardEvent, tag: string) {
font-family: sans-serif; font-family: sans-serif;
width: var(--card-width); width: var(--card-width);
aspect-ratio: 4/7; aspect-ratio: 4/7;
border-radius: 20px; border-radius: var(--radius-card);
background-size: contain; background-size: contain;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: end; justify-content: end;
transition: 200ms; transition: var(--transition-normal);
background-color: var(--blue); background-color: var(--blue);
box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3); box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
z-index: 0; z-index: 0;
@@ -155,7 +155,7 @@ function remove_on_enter(event: KeyboardEvent, tag: string) {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 20px 20px 0 0 ; border-radius: 20px 20px 0 0 ;
transition: 200ms; transition: var(--transition-normal);
} }
.img_label_wrapper:hover{ .img_label_wrapper:hover{
background-color: var(--red); background-color: var(--red);
@@ -169,7 +169,7 @@ function remove_on_enter(event: KeyboardEvent, tag: string) {
top:0; top:0;
left: 0; left: 0;
border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0;
transition: 200ms; transition: var(--transition-normal);
} }
.img_label_wrapper:hover .delete{ .img_label_wrapper:hover .delete{
opacity: 100%; opacity: 100%;
@@ -178,7 +178,7 @@ function remove_on_enter(event: KeyboardEvent, tag: string) {
width: 100px; width: 100px;
height: 100px; height: 100px;
fill: white; fill: white;
transition: 200ms; transition: var(--transition-normal);
} }
.delete{ .delete{
cursor: pointer; cursor: pointer;
@@ -188,7 +188,7 @@ function remove_on_enter(event: KeyboardEvent, tag: string) {
left: 2rem; left: 2rem;
opacity: 0%; opacity: 0%;
z-index: 4; z-index: 4;
transition:200ms; transition: var(--transition-normal);
} }
.delete:hover{ .delete:hover{
transform: scale(1.2, 1.2); transform: scale(1.2, 1.2);
@@ -220,14 +220,14 @@ input::placeholder{
text-align:center; text-align:center;
width: 2.6rem; width: 2.6rem;
aspect-ratio: 1/1; aspect-ratio: 1/1;
transition: 100ms; transition: var(--transition-fast);
position: absolute; position: absolute;
font-size: 1.5rem; font-size: 1.5rem;
top:-0.5em; top:-0.5em;
right:-0.5em; right:-0.5em;
padding: 0.25em; padding: 0.25em;
background-color: var(--nord6); background-color: var(--nord6);
border-radius:1000px; border-radius: var(--radius-pill);
box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6); box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6);
} }
.card .icon:hover, .card .icon:hover,
@@ -259,7 +259,7 @@ input::placeholder{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
transition: 100ms; transition: var(--transition-fast);
} }
.card .name{ .card .name{
all: unset; all: unset;
@@ -306,7 +306,7 @@ input::placeholder{
padding-inline: 1em; padding-inline: 1em;
line-height: 1.5em; line-height: 1.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
transition: 100ms; transition: var(--transition-fast);
box-shadow: 0.2em 0.2em 0.2em 0.05em rgba(0, 0, 0, 0.3); box-shadow: 0.2em 0.2em 0.2em 0.05em rgba(0, 0, 0, 0.3);
} }
.card .tag:hover, .card .tag:hover,
@@ -330,8 +330,8 @@ input::placeholder{
width: 10rem; width: 10rem;
background-color: var(--nord0); background-color: var(--nord0);
padding-inline: 1em; padding-inline: 1em;
border-radius: 1000px; border-radius: var(--radius-pill);
transition: 100ms; transition: var(--transition-fast);
} }
.card .title .category:hover, .card .title .category:hover,

30
src/lib/components/recipes/CreateIngredientList.svelte
View File

@@ -398,11 +398,11 @@ input.heading{
padding-inline: 2rem; padding-inline: 2rem;
font-size: 1.5rem; font-size: 1.5rem;
width: 100%; width: 100%;
border-radius: 1000px; border-radius: var(--radius-pill);
color: white; color: white;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transition: 200ms; transition: var(--transition-normal);
} }
input.heading:hover{ input.heading:hover{
background-color: var(--nord1); background-color: var(--nord1);
@@ -412,7 +412,7 @@ input.heading:hover{
position: relative; position: relative;
width: 300px; width: 300px;
margin-inline: auto; margin-inline: auto;
transition: 200ms; transition: var(--transition-normal);
} }
.heading_wrapper:hover .heading_wrapper:hover
{ {
@@ -430,8 +430,8 @@ input.heading:hover{
position: relative; position: relative;
margin-block: 3rem; margin-block: 3rem;
width: 90%; width: 90%;
border-radius: 20px; border-radius: var(--radius-card);
transition: 200ms; transition: var(--transition-normal);
} }
.shadow{ .shadow{
box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3); box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
@@ -457,7 +457,7 @@ input.heading:hover{
border-radius: 1000000px; border-radius: 1000000px;
width: 23ch; width: 23ch;
padding: 0.5em 1em; padding: 0.5em 1em;
transition: 100ms; transition: var(--transition-fast);
box-shadow: 0.5em 0.5em 1em 0.4em rgba(0,0,0,0.3); box-shadow: 0.5em 0.5em 1em 0.4em rgba(0,0,0,0.3);
} }
.category:hover{ .category:hover{
@@ -481,18 +481,18 @@ input.heading:hover{
font-size: 1.2rem; font-size: 1.2rem;
padding: 2rem; padding: 2rem;
padding-top: 2.5rem; padding-top: 2.5rem;
border-radius: 20px; border-radius: var(--radius-card);
background-color: var(--blue); background-color: var(--blue);
color: #bbb; color: #bbb;
transition: 200ms; transition: var(--transition-normal);
gap: 0.5rem; gap: 0.5rem;
} }
.add_ingredient input{ .add_ingredient input{
border: 2px solid var(--nord4); border: 2px solid var(--nord4);
color: var(--nord4); color: var(--nord4);
border-radius: 1000px; border-radius: var(--radius-pill);
padding: 0.5em 1em; padding: 0.5em 1em;
transition: 100ms; transition: var(--transition-fast);
} }
.add_ingredient input:hover, .add_ingredient input:hover,
.add_ingredient input:focus-visible .add_ingredient input:focus-visible
@@ -569,7 +569,7 @@ dialog h2{
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
transition: 200ms; transition: var(--transition-normal);
} }
.move_buttons_container button:hover{ .move_buttons_container button:hover{
scale: 1.4; scale: 1.4;
@@ -611,10 +611,10 @@ h3{
} }
.list_wrapper p[contenteditable]{ .list_wrapper p[contenteditable]{
border: 2px solid grey; border: 2px solid grey;
border-radius: 1000px; border-radius: var(--radius-pill);
padding: 0.25em 1em; padding: 0.25em 1em;
background-color: white; background-color: white;
transition: 200ms; transition: var(--transition-normal);
} }
.list_wrapper p[contenteditable]:hover, .list_wrapper p[contenteditable]:hover,
.list_wrapper p[contenteditable]:focus-within{ .list_wrapper p[contenteditable]:focus-within{
@@ -703,12 +703,12 @@ h3{
margin-block: 1rem; margin-block: 1rem;
padding: 1em 2em; padding: 1em 2em;
font-size: 1.1rem; font-size: 1.1rem;
border-radius: 1000px; border-radius: var(--radius-pill);
background-color: var(--nord9); background-color: var(--nord9);
color: white; color: white;
border: none; border: none;
cursor: pointer; cursor: pointer;
transition: 200ms; transition: var(--transition-normal);
box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.2); box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.2);
} }

28
src/lib/components/recipes/CreateStepList.svelte
View File

@@ -401,7 +401,7 @@ export function update_step_position(list_index, step_index, direction){
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
transition: 200ms; transition: var(--transition-normal);
} }
.move_buttons_container button:hover{ .move_buttons_container button:hover{
scale: 1.4; scale: 1.4;
@@ -440,11 +440,11 @@ input.heading{
padding-inline: 2rem; padding-inline: 2rem;
font-size: 1.5rem; font-size: 1.5rem;
width: 100%; width: 100%;
border-radius: 1000px; border-radius: var(--radius-pill);
color: white; color: white;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transition: 200ms; transition: var(--transition-normal);
} }
input.heading:hover, input.heading:hover,
input.heading:focus-visible input.heading:focus-visible
@@ -456,7 +456,7 @@ input.heading:focus-visible
position: relative; position: relative;
width: min(300px, 95dvw); width: min(300px, 95dvw);
margin-inline: auto; margin-inline: auto;
transition: 200ms; transition: var(--transition-normal);
} }
.heading_wrapper:hover, .heading_wrapper:hover,
.heading_wrapper:focus-visible .heading_wrapper:focus-visible
@@ -474,8 +474,8 @@ input.heading:focus-visible
position: relative; position: relative;
margin-block: 3rem; margin-block: 3rem;
width: 90%; width: 90%;
border-radius: 20px; border-radius: var(--radius-card);
transition: 200ms; transition: var(--transition-normal);
background-color: var(--blue); background-color: var(--blue);
padding: 1.5rem 2rem; padding: 1.5rem 2rem;
} }
@@ -503,7 +503,7 @@ dialog .adder{
border-radius: 1000000px; border-radius: 1000000px;
width: 23ch; width: 23ch;
padding: 0.5em 1em; padding: 0.5em 1em;
transition: 100ms; transition: var(--transition-fast);
box-shadow: 0.5em 0.5em 1em 0.4em rgba(0,0,0,0.3); box-shadow: 0.5em 0.5em 1em 0.4em rgba(0,0,0,0.3);
} }
.category:hover, .category:hover,
@@ -522,12 +522,12 @@ dialog .adder{
font-family: sans-serif; font-family: sans-serif;
width: 100%; width: 100%;
font-size: 1.2rem; font-size: 1.2rem;
border-radius: 20px; border-radius: var(--radius-card);
border: 2px solid var(--nord4); border: 2px solid var(--nord4);
border-radius: 30px; border-radius: 30px;
padding: 0.5em 1em; padding: 0.5em 1em;
color: var(--nord4); color: var(--nord4);
transition: 100ms; transition: var(--transition-fast);
} }
.add_step p:hover, .add_step p:hover,
.add_step p:focus-visible .add_step p:focus-visible
@@ -543,7 +543,7 @@ dialog{
background-color: rgba(255,255,255, 0.001); background-color: rgba(255,255,255, 0.001);
border: unset; border: unset;
margin: 0; margin: 0;
transition: 200ms; transition: var(--transition-normal);
} }
dialog .adder{ dialog .adder{
margin-top: 5rem; margin-top: 5rem;
@@ -647,10 +647,10 @@ h3{
display: inline; display: inline;
padding: 0.25em 1em; padding: 0.25em 1em;
border: 2px solid grey; border: 2px solid grey;
border-radius: 1000px; border-radius: var(--radius-pill);
} }
.additional_info div:has(p[contenteditable]){ .additional_info div:has(p[contenteditable]){
transition: 200ms; transition: var(--transition-normal);
display: inline; display: inline;
} }
.additional_info div:has(p[contenteditable]):hover, .additional_info div:has(p[contenteditable]):hover,
@@ -730,12 +730,12 @@ h3{
margin-block: 1rem; margin-block: 1rem;
padding: 1em 2em; padding: 1em 2em;
font-size: 1.1rem; font-size: 1.1rem;
border-radius: 1000px; border-radius: var(--radius-pill);
background-color: var(--nord9); background-color: var(--nord9);
color: white; color: white;
border: none; border: none;
cursor: pointer; cursor: pointer;
transition: 200ms; transition: var(--transition-normal);
box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.2); box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.2);
} }

2
src/lib/components/recipes/Icon.svelte
View File

@@ -9,7 +9,7 @@
text-decoration: none; text-decoration: none;
padding: 0.5em; padding: 0.5em;
background-color: var(--nord4); background-color: var(--nord4);
border-radius: 1000px; border-radius: var(--radius-pill);
box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2); box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {

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

@@ -31,7 +31,7 @@
text-decoration: none; text-decoration: none;
padding: 0.5em; padding: 0.5em;
background-color: var(--nord4); background-color: var(--nord4);
border-radius: 1000px; border-radius: var(--radius-pill);
box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2); box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
} }
a:hover, a:hover,

2
src/lib/components/recipes/RecipeEditor.svelte
View File

@@ -59,7 +59,7 @@ input.temp{
display: block; display: block;
margin: 1rem auto; margin: 1rem auto;
padding: 0.2em 1em; padding: 0.2em 1em;
border-radius: 1000px; border-radius: var(--radius-pill);
background-color: var(--nord4); background-color: var(--nord4);
} }

4
src/lib/components/recipes/Search.svelte
View File

@@ -311,7 +311,7 @@ input#search {
background: var(--nord0); background: var(--nord0);
color: #fff; color: #fff;
padding: 0.7rem 2rem; padding: 0.7rem 2rem;
border-radius: 1000px; border-radius: var(--radius-pill);
width: 100%; width: 100%;
} }
input::placeholder{ input::placeholder{
@@ -326,7 +326,7 @@ input::placeholder{
font-size: 1.6rem; font-size: 1.6rem;
display: flex; display: flex;
align-items: center; align-items: center;
transition: 100ms; transition: var(--transition-fast);
filter: drop-shadow(0.4em 0.5em 0.4em rgba(0,0,0,0.4)) filter: drop-shadow(0.4em 0.5em 0.4em rgba(0,0,0,0.4))
} }

4
src/lib/components/recipes/SeasonLayout.svelte
View File

@@ -29,11 +29,11 @@
a.month{ a.month{
text-decoration: unset; text-decoration: unset;
font-family: sans-serif; font-family: sans-serif;
border-radius: 1000px; border-radius: var(--radius-pill);
background-color: var(--blue); background-color: var(--blue);
color: var(--nord5); color: var(--nord5);
padding: 0.5em; padding: 0.5em;
transition: 100ms; transition: var(--transition-fast);
min-width: 4em; min-width: 4em;
text-align: center; text-align: center;
} }

6
src/lib/components/recipes/SeasonSelect.svelte
View File

@@ -45,15 +45,15 @@ label{
padding: 0.25em 1em; padding: 0.25em 1em;
margin-inline: 0.1em; margin-inline: 0.1em;
line-height: 2em; line-height: 2em;
border-radius: 1000px; border-radius: var(--radius-pill);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: 100ms; transition: var(--transition-fast);
user-select: none; user-select: none;
} }
.checkbox_container{ .checkbox_container{
transition: 100ms; transition: var(--transition-fast);
} }
.checkbox_container:hover, .checkbox_container:hover,
.checkbox_container:focus-within .checkbox_container:focus-within

2
src/lib/components/recipes/TagChip.svelte
View File

@@ -16,7 +16,7 @@
.tag-chip { .tag-chip {
all: unset; all: unset;
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
border-radius: 1000px; border-radius: var(--radius-pill);
font-size: 0.9rem; font-size: 0.9rem;
cursor: pointer; cursor: pointer;
transition: all 100ms ease; transition: all 100ms ease;

2
src/lib/components/recipes/TitleImgParallax.svelte
View File

@@ -87,7 +87,7 @@
width: min(1000px, 100dvw); width: min(1000px, 100dvw);
z-index: -1; z-index: -1;
opacity: 0; opacity: 0;
transition: 200ms; transition: var(--transition-normal);
height: max(60dvh,600px); height: max(60dvh,600px);
object-fit: cover; object-fit: cover;
object-position: 50% 20%; object-position: 50% 20%;

4
src/lib/css/action_button.css
View File

@@ -7,10 +7,10 @@
border: none; border: none;
cursor: pointer; cursor: pointer;
background-color: var(--red); background-color: var(--red);
transition: 200ms; transition: var(--transition-normal);
box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3); box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
padding: 1rem; padding: 1rem;
border-radius: 1000px; border-radius: var(--radius-pill);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

11
src/lib/data/mysteryDescriptions.ts
View File

@@ -106,6 +106,17 @@ export const mysteryReferences = {
] ]
} as const; } as const;
// Reference for the three opening Ave Marias (Faith, Hope, Love)
export const theologicalVirtueReference = {
title: "Das Hohelied der Liebe",
reference: "1 Kor 13, 1-13"
} as const;
export const theologicalVirtueReferenceEnglish = {
title: "The Hymn to Love",
reference: "1 Cor 13:1-13"
} as const;
export const mysteryReferencesEnglish = { export const mysteryReferencesEnglish = {
lichtreichen: [ lichtreichen: [
{ {

128
src/lib/data/mysteryVerseData.ts
View File

@@ -1046,3 +1046,131 @@ export const mysteryVerseDataEn: Record<string, MysteryDescription[]> = {
} }
] ]
}; };
export const theologicalVirtueVerseDataDe: MysteryDescription = {
"title": "Das Hohelied der Liebe",
"reference": "1 Kor 13, 1-13",
"text": "«Wenn ich mit den Zungen der Menschen und Engel rede, aber die Liebe nicht habe, so bin ich wie ein tönendes Erz oder eine klingende Schelle geworden. Und wenn ich die Gabe der Weissagung habe, und kenne alle Geheimnisse und alle Wissenschaft, und wenn ich allen Glauben habe, so dass ich Berge versetzen könnte, die Liebe aber nicht habe, so bin ich nichts. Und wenn ich alle meine Habe zur Speisung der Armen austeile, und wenn ich meinen Leib dahingebe, dass ich verbrannt werde, die Liebe aber nicht habe, so nützt es mir nichts. Die Liebe ist langmütig, ist gütig; die Liebe eifert nicht, sie handelt nicht unbescheiden, sie bläht sich nicht auf; sie ist nicht ehrsüchtig, sucht nicht das ihre, sie lässt sich nicht erbittern, sie rechnet das Böse nicht an; sie freut sich nicht der Ungerechtigkeit, sie freut sich aber mit der Wahrheit; alles erträgt sie, alles glaubt sie, alles hofft sie, alles übersteht sie. Die Liebe hört nie auf, wenn auch die Weissagungen abgetan werden oder die Sprachen ein Ende nehmen, und die Erkenntnis vergehen wird. Denn unser Erkennen ist Stückwerk, und unser Weissagen ist Stückwerk. Wenn aber das Vollkommene kommt, dann wird das, was Stückwerk ist, abgetan werden. Als ich ein Kind war, redete ich wie ein Kind, dachte wie ein Kind, urteilte wie ein Kind; als ich aber Mann ward, legte ich ab, was des Kindes war. Jetzt sehen wir durch einen Spiegel im Rätsel, alsdann aber von Angesicht zu Angesicht. Jetzt ist mein Erkennen Stückwerk, dann aber werde ich erkennen, so wie auch ich erkannt bin. Nun aber bleiben Glaube, Hoffnung Liebe, diese drei; das größte aber unter diesen ist die Liebe.»",
"verseData": {
"book": "1 Korinther",
"chapter": 13,
"verses": [
{
"verse": 1,
"text": "Wenn ich mit den Zungen der Menschen und Engel rede, aber die Liebe nicht habe, so bin ich wie ein tönendes Erz oder eine klingende Schelle geworden."
},
{
"verse": 2,
"text": "Und wenn ich die Gabe der Weissagung habe, und kenne alle Geheimnisse und alle Wissenschaft, und wenn ich allen Glauben habe, so dass ich Berge versetzen könnte, die Liebe aber nicht habe, so bin ich nichts."
},
{
"verse": 3,
"text": "Und wenn ich alle meine Habe zur Speisung der Armen austeile, und wenn ich meinen Leib dahingebe, dass ich verbrannt werde, die Liebe aber nicht habe, so nützt es mir nichts."
},
{
"verse": 4,
"text": "Die Liebe ist langmütig, ist gütig; die Liebe eifert nicht, sie handelt nicht unbescheiden, sie bläht sich nicht auf;"
},
{
"verse": 5,
"text": "sie ist nicht ehrsüchtig, sucht nicht das ihre, sie lässt sich nicht erbittern, sie rechnet das Böse nicht an;"
},
{
"verse": 6,
"text": "sie freut sich nicht der Ungerechtigkeit, sie freut sich aber mit der Wahrheit;"
},
{
"verse": 7,
"text": "alles erträgt sie, alles glaubt sie, alles hofft sie, alles übersteht sie."
},
{
"verse": 8,
"text": "Die Liebe hört nie auf, wenn auch die Weissagungen abgetan werden oder die Sprachen ein Ende nehmen, und die Erkenntnis vergehen wird."
},
{
"verse": 9,
"text": "Denn unser Erkennen ist Stückwerk, und unser Weissagen ist Stückwerk."
},
{
"verse": 10,
"text": "Wenn aber das Vollkommene kommt, dann wird das, was Stückwerk ist, abgetan werden."
},
{
"verse": 11,
"text": "Als ich ein Kind war, redete ich wie ein Kind, dachte wie ein Kind, urteilte wie ein Kind; als ich aber Mann ward, legte ich ab, was des Kindes war."
},
{
"verse": 12,
"text": "Jetzt sehen wir durch einen Spiegel im Rätsel, alsdann aber von Angesicht zu Angesicht. Jetzt ist mein Erkennen Stückwerk, dann aber werde ich erkennen, so wie auch ich erkannt bin."
},
{
"verse": 13,
"text": "Nun aber bleiben Glaube, Hoffnung Liebe, diese drei; das größte aber unter diesen ist die Liebe."
}
]
}
};
export const theologicalVirtueVerseDataEn: MysteryDescription = {
"title": "The Hymn to Love",
"reference": "1 Cor 13:1-13",
"text": "«If I speak with the tongues of men and of angels, and have not charity, I am become as sounding brass, or a tinkling cymbal. And if I should have prophecy and should know all mysteries and all knowledge, and if I should have all faith, so that I could remove mountains, and have not charity, I am nothing. And if I should distribute all my goods to feed the poor, and if I should deliver my body to be burned, and have not charity, it profiteth me nothing. Charity is patient, is kind: charity envieth not, dealeth not perversely, is not puffed up, Is not ambitious, seeketh not her own, is not provoked to anger, thinketh no evil: Rejoiceth not in iniquity, but rejoiceth with the truth: Beareth all things, believeth all things, hopeth all things, endureth all things. Charity never falleth away: whether prophecies shall be made void or tongues shall cease or knowledge shall be destroyed. For we know in part: and we prophesy in part. But when that which is perfect is come, that which is in part shall be done away. When I was a child, I spoke as a child, I understood as a child, I thought as a child. But, when I became a man, I put away the things of a child. We see now through a glass in a dark manner: but then face to face. Now I know in part: but then I shall know even as I am known. And now there remain faith, hope, and charity, these three: but the greatest of these is charity.»",
"verseData": {
"book": "1 Corinthians",
"chapter": 13,
"verses": [
{
"verse": 1,
"text": "If I speak with the tongues of men and of angels, and have not charity, I am become as sounding brass, or a tinkling cymbal."
},
{
"verse": 2,
"text": "And if I should have prophecy and should know all mysteries and all knowledge, and if I should have all faith, so that I could remove mountains, and have not charity, I am nothing."
},
{
"verse": 3,
"text": "And if I should distribute all my goods to feed the poor, and if I should deliver my body to be burned, and have not charity, it profiteth me nothing."
},
{
"verse": 4,
"text": "Charity is patient, is kind: charity envieth not, dealeth not perversely, is not puffed up,"
},
{
"verse": 5,
"text": "Is not ambitious, seeketh not her own, is not provoked to anger, thinketh no evil:"
},
{
"verse": 6,
"text": "Rejoiceth not in iniquity, but rejoiceth with the truth:"
},
{
"verse": 7,
"text": "Beareth all things, believeth all things, hopeth all things, endureth all things."
},
{
"verse": 8,
"text": "Charity never falleth away: whether prophecies shall be made void or tongues shall cease or knowledge shall be destroyed."
},
{
"verse": 9,
"text": "For we know in part: and we prophesy in part."
},
{
"verse": 10,
"text": "But when that which is perfect is come, that which is in part shall be done away."
},
{
"verse": 11,
"text": "When I was a child, I spoke as a child, I understood as a child, I thought as a child. But, when I became a man, I put away the things of a child."
},
{
"verse": 12,
"text": "We see now through a glass in a dark manner: but then face to face. Now I know in part: but then I shall know even as I am known."
},
{
"verse": 13,
"text": "And now there remain faith, hope, and charity, these three: but the greatest of these is charity."
}
]
}
};

5
src/lib/server/bible.ts
View File

@@ -38,11 +38,12 @@ export function loadVersesFromFile(tsvPath?: string): BibleVerse[] {
function parseReference(reference: string) { function parseReference(reference: string) {
const match = reference.match( const match = reference.match(
/^([A-Za-zäöüÄÖÜß]+)\s*(\d+)[\s,:]+(\d+)(?:[-:](\d+))?$/ /^(\d?\s?[A-Za-zäöüÄÖÜß]+)\s*(\d+)[\s,:]+(\d+)(?:[-:](\d+))?$/
); );
if (!match) return null; if (!match) return null;
const [, bookRef, chapterStr, startVerseStr, endVerseStr] = match; const [, rawBookRef, chapterStr, startVerseStr, endVerseStr] = match;
const bookRef = rawBookRef.replace(/\s/g, '');
return { return {
bookRef, bookRef,

2
src/routes/(main)/+page.svelte
View File

@@ -67,7 +67,7 @@
gap: 2rem; gap: 2rem;
} }
.hero img{ .hero img{
border-radius: 1000px; border-radius: var(--radius-pill);
margin: 1rem; margin: 1rem;
width: clamp(100px, 300px, 50vw); width: clamp(100px, 300px, 50vw);
object-fit: cover; object-fit: cover;

4
src/routes/(main)/register/+page.svelte
View File

@@ -19,9 +19,9 @@ form button {
border: none; border: none;
padding: 0.5em 1em; padding: 0.5em 1em;
font-size: 1.3em; font-size: 1.3em;
border-radius: 1000px; border-radius: var(--radius-pill);
margin-top: 1em; margin-top: 1em;
transition: 100ms; transition: var(--transition-fast);
cursor: pointer; cursor: pointer;
} }
form button:hover, form button:focus-visible { form button:hover, form button:focus-visible {

4
src/routes/(main)/settings/+page.svelte
View File

@@ -26,9 +26,9 @@ form button {
border: none; border: none;
padding: 0.5em 1em; padding: 0.5em 1em;
font-size: 1.3em; font-size: 1.3em;
border-radius: 1000px; border-radius: var(--radius-pill);
margin-top: 1em; margin-top: 1em;
transition: 100ms; transition: var(--transition-fast);
cursor: pointer; cursor: pointer;
} }
form button:hover, form button:focus-visible { form button:hover, form button:focus-visible {

28
src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
View File

@@ -16,6 +16,7 @@ import RosaryFinalPrayer from "$lib/components/faith/prayers/RosaryFinalPrayer.s
import MichaelGebet from "$lib/components/faith/prayers/MichaelGebet.svelte"; import MichaelGebet from "$lib/components/faith/prayers/MichaelGebet.svelte";
import CounterButton from "$lib/components/CounterButton.svelte"; import CounterButton from "$lib/components/CounterButton.svelte";
import BibleModal from "$lib/components/faith/BibleModal.svelte"; import BibleModal from "$lib/components/faith/BibleModal.svelte";
import { theologicalVirtueVerseDataDe, theologicalVirtueVerseDataEn } from "$lib/data/mysteryVerseData";
import Toggle from "$lib/components/Toggle.svelte"; import Toggle from "$lib/components/Toggle.svelte";
import LanguageToggle from "$lib/components/faith/LanguageToggle.svelte"; import LanguageToggle from "$lib/components/faith/LanguageToggle.svelte";
import StreakCounter from "$lib/components/faith/StreakCounter.svelte"; import StreakCounter from "$lib/components/faith/StreakCounter.svelte";
@@ -264,6 +265,9 @@ function handleCitationClick(reference, title = '', verseData = null) {
showModal = true; showModal = true;
} }
// 1 Cor 13 reference for the three theological virtue Ave Marias
const theologicalVirtueData = $derived(isEnglish ? theologicalVirtueVerseDataEn : theologicalVirtueVerseDataDe);
const pos = sectionPositions; const pos = sectionPositions;
onMount(() => { onMount(() => {
@@ -799,6 +803,14 @@ h1 {
mystery="Jesus, der in uns den Glauben vermehre" mystery="Jesus, der in uns den Glauben vermehre"
mysteryEnglish="Jesus, who may increase our faith" mysteryEnglish="Jesus, who may increase our faith"
/> />
<div class="decade-buttons">
<span class="bible-reference-text">{theologicalVirtueData.reference}</span>
<button
class="bible-reference-button"
onclick={() => handleCitationClick(theologicalVirtueData.reference, theologicalVirtueData.title, theologicalVirtueData.verseData)}
aria-label={labels.showBibleVerse}
>📖</button>
</div>
</div> </div>
<!-- Second Ave Maria (Hope) --> <!-- Second Ave Maria (Hope) -->
@@ -814,6 +826,14 @@ h1 {
mystery="Jesus, der in uns die Hoffnung stärke" mystery="Jesus, der in uns die Hoffnung stärke"
mysteryEnglish="Jesus, who may strengthen our hope" mysteryEnglish="Jesus, who may strengthen our hope"
/> />
<div class="decade-buttons">
<span class="bible-reference-text">{theologicalVirtueData.reference}</span>
<button
class="bible-reference-button"
onclick={() => handleCitationClick(theologicalVirtueData.reference, theologicalVirtueData.title, theologicalVirtueData.verseData)}
aria-label={labels.showBibleVerse}
>📖</button>
</div>
</div> </div>
<!-- Third Ave Maria (Love) --> <!-- Third Ave Maria (Love) -->
@@ -829,6 +849,14 @@ h1 {
mystery="Jesus, der in uns die Liebe entzünde" mystery="Jesus, der in uns die Liebe entzünde"
mysteryEnglish="Jesus, who may kindle our love" mysteryEnglish="Jesus, who may kindle our love"
/> />
<div class="decade-buttons">
<span class="bible-reference-text">{theologicalVirtueData.reference}</span>
<button
class="bible-reference-button"
onclick={() => handleCitationClick(theologicalVirtueData.reference, theologicalVirtueData.title, theologicalVirtueData.verseData)}
aria-label={labels.showBibleVerse}
>📖</button>
</div>
</div> </div>
<!-- Gloria Patri before decades --> <!-- Gloria Patri before decades -->

8
src/routes/[recipeLang=recipeLang]/add/+page.svelte
View File

@@ -168,10 +168,10 @@ input {
border: unset; border: unset;
margin: 1rem auto; margin: 1rem auto;
padding: 0.5em 1em; padding: 0.5em 1em;
border-radius: 1000px; border-radius: var(--radius-pill);
background-color: var(--nord4); background-color: var(--nord4);
font-size: 1.1rem; font-size: 1.1rem;
transition: 100ms; transition: var(--transition-fast);
} }
input:hover, input:hover,
input:focus-visible { input:focus-visible {
@@ -213,7 +213,7 @@ h1 {
border-radius: 10000px; border-radius: 10000px;
padding: 0.5em 1em; padding: 0.5em 1em;
font-size: 1.1rem; font-size: 1.1rem;
transition: 200ms; transition: var(--transition-normal);
} }
.title p:hover, .title p:hover,
.title p:focus-within { .title p:focus-within {
@@ -226,7 +226,7 @@ h1 {
border: 2px solid var(--nord1); border: 2px solid var(--nord1);
border-radius: 45px; border-radius: 45px;
padding: 1em 1em; padding: 1em 1em;
transition: 100ms; transition: var(--transition-fast);
} }
.addendum:hover, .addendum:hover,
.addendum:focus-within { .addendum:focus-within {

8
src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
View File

@@ -248,10 +248,10 @@
border: unset; border: unset;
margin: 1rem auto; margin: 1rem auto;
padding: 0.5em 1em; padding: 0.5em 1em;
border-radius: 1000px; border-radius: var(--radius-pill);
background-color: var(--nord4); background-color: var(--nord4);
font-size: 1.1rem; font-size: 1.1rem;
transition: 100ms; transition: var(--transition-fast);
} }
input:hover, input:hover,
input:focus-visible { input:focus-visible {
@@ -293,7 +293,7 @@
border-radius: 10000px; border-radius: 10000px;
padding: 0.5em 1em; padding: 0.5em 1em;
font-size: 1.1rem; font-size: 1.1rem;
transition: 200ms; transition: var(--transition-normal);
} }
.title p:hover, .title p:hover,
.title p:focus-within { .title p:focus-within {
@@ -306,7 +306,7 @@
border: 2px solid var(--nord1); border: 2px solid var(--nord1);
border-radius: 45px; border-radius: 45px;
padding: 1em 1em; padding: 1em 1em;
transition: 100ms; transition: var(--transition-fast);
} }
.addendum:hover, .addendum:hover,
.addendum:focus-within { .addendum:focus-within {

2
src/routes/[recipeLang=recipeLang]/icon/+page.svelte
View File

@@ -25,7 +25,7 @@
text-decoration: none; text-decoration: none;
padding: var(--padding); padding: var(--padding);
background-color: var(--nord4); background-color: var(--nord4);
border-radius: 1000px; border-radius: var(--radius-pill);
box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2); box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
text-align: center; text-align: center;
--width: calc(1.2em + var(--padding) * 2); --width: calc(1.2em + var(--padding) * 2);