Add theme cycling (system/light/dark) with localStorage persistence
and FOUC prevention. Restructure CSS color tokens to respond to
data-theme attribute across all components. Redesign header as a
floating glass pill bar with smooth view transitions including
clip-reveal logo animation.
Allow recipes to specify a default pan shape (round, rectangular, gugelhupf)
with dimensions. On the recipe page, users can enter their own pan size to
auto-calculate an ingredient multiplier based on the 2D area ratio.
Add fetchpriority="high" and <link rel="preload"> hints to hero images
on both the recipe listing and detail pages. Also prefetch the full-size
hero image on card hover via new Image() to warm the cache before navigation.
Login link now includes callbackUrl for the current page. Logout
redirects intelligently: stays on public pages, falls back to the
recipe detail for /edit/[name], to the recipe root for auth-only
sub-routes (add, favorites, to-try, admin), and to / for cospend.
When the client hydrates and finds the merged streak is still expired
(localStorage couldn't rescue it), reset to zero and push to the server.
This ensures subsequent SSR loads render the correct value from the start.
Household-shared list of external recipes to try, with name, multiple
links, and optional notes. Includes add/edit/delete with confirmation.
Linked from the favorites page via a styled pill button.
Image morphs between CompactCard thumbnail and hero, title block
slides up from bottom, header persists across transitions. Only
activates for recipe detail navigations, not between list pages.
Remove the opacity 0→1 fade-in transition — it's annoying when the
image is already cached. The dominant color background handles the
loading state, so no transition needed.
Instead of generating/serving 20px placeholder images with blur CSS, extract
a perceptually accurate dominant color (Gaussian-weighted OKLAB average) and
use it as a solid background-color while the full image loads. Removes
placeholder image generation, blur CSS/JS, and placeholder directory references
across upload flows, API routes, service worker, and all card/hero components.
Adds admin bulk tool to backfill colors for existing recipes.
Skip mobile sidebar/hamburger entirely when no links snippet is provided.
The nav with .no-links class stays in desktop layout at all screen widths.
Override UserHeader mobile styles from .no-links context to keep dropdown
opening downward with tail centered below the profile picture.
- LanguageSelector: add speech bubble tail, replace green active with
nord8 blue + dark text, remove floating gap
- Header: hide hamburger menu on mobile when no links, show profile
picture directly in top bar instead
- UserHeader: center mobile dropdown, fix tail color/position, add
profile picture overlay to tuck tail behind, add drop shadow
- Main layout: stop passing empty links snippet
Decouple lock-icon fill from nth-child color cycling via :not(.lock-icon),
use subtle --nord3 fill in both themes, add responsive lock sizing, and
bump mobile image heights (72→90px, 48→64px).
Shrink TagBall font/padding and TagCloud gap using clamp() for
fluid sizing across viewports. Add search input on the tags page
to filter through keywords.
- Reduce header height to 3rem with CSS variable --header-h
- Scale logo via --symbol-size variable, decrease nav link font sizes
- Replace JS-driven sidebar toggle with checkbox hack (:has selector)
- Separate drop shadow into own element for correct z-index layering
(top bar > sidebar > shadow)
- Bottom-align mobile nav links via ::before flex spacer
- Slide-in transition scoped to :has(:checked) to prevent resize artifacts
The hero-section's scaleY transform created a stacking context that
painted over the footer, and margin-bottom: -20vh over-compensated
for the parallax gap, pulling the footer into the recipe cards.
Derive margin-bottom from actual parallax parameters and make the
footer position: relative so it paints above the transform layer.
Use CSS min() in grid minmax to guarantee 2 tiles side-by-side at
any viewport width. Add responsive breakpoints (560px, 410px) to
progressively shrink SVG height, font size, and spacing.
Remove redundant `font-family: sans-serif` from 18 component-level
declarations — they now inherit the Helvetica/Arial/Noto Sans stack
from the global `*` selector in app.css.
Add self-hosted NotoColorEmoji subset (56 KB, down from 11 MB) as
fallback for systems without the Noto Color Emoji font installed.
The subset is generated at prebuild time via pyftsubset with a fixed
list of the ~32 emojis actually used on the site.
Migrate all recipe sub-pages from the old fixed-size Card component
inside flex-wrap Recipes wrapper to CompactCard with responsive CSS
grid for visual consistency with the main recipes page.
- Fix g-tag dark mode hover text disappearing (explicit background-color)
- Scope compact card tag styles to avoid global/scoped CSS flash on load
- Add placeholder div to prevent layout shift when FilterPanel hydrates
- Improve LogicModeToggle contrast in light mode (nord4 → nord3/nord1)
- Bump compact card recipe name font-size to 1.1rem
- Full-bleed hero image with CSS parallax (scaleY technique matching TitleImgParallax)
- Hero picks random seasonal recipe with hashed image on each visit
- Left-aligned title, subheading, and featured recipe link over the hero
- Category chips with ellipsis collapse on small screens (<600px)
- Search bar anchored to hero/grid boundary regardless of chip count
- CompactCard redesign: 3/2 aspect ratio, rounded corners, subtle hover zoom
- Search component margin adjusted to sit flush at hero boundary
Merge nordtheme.css tokens and utility classes into app.css, import
app.css once in root layout, delete redundant files (nordtheme.css,
form.css, rosenkranz.css), move domain CSS to layouts, fix broken
shake keyframe in action_button.css, and scope form styles to the
two pages that need them. 10 CSS files → 6, 41 redundant imports removed.
The RosaryStreakStore singleton survives client-side navigation but
the first mount. Also reorder onMount to merge server data before
assigning to streak, preventing a frame of stale localStorage values.
Add Guardian Angel, Apostles' Creed, Tantum Ergo, Angelus, and Regina
Caeli to the prayers collection. Move standalone Angelus route into the
prayers system with a 301 redirect from the old path. Extract Easter
computation into shared utility ($lib/js/easter.svelte.ts) and use it
for liturgical season awareness: during Eastertide the rosary defaults
to Glorious mysteries and swaps Salve Regina for Regina Caeli; during
Lent it defaults to Sorrowful mysteries. Seasonal badges shown on both
the mystery selector and prayer sections.
SVG beads are now anchor links to prayer sections, with CSS :has(:target)
highlighting the active bead. Inline mystery images render in each decade
by default and hide when JS takes over. StreakCounter uses a form action
fallback for logged-in users and hides entirely for anonymous no-JS users.
Show images toggle now works via ?images= URL param like the other toggles.
Consolidate duplicate recipe API routes into a single
api/[recipeLang=recipeLang]/ structure. Both /api/recipes/ and
/api/rezepte/ URLs continue to work via the param matcher. Shared
read endpoints now serve both languages with caching for both.
Also: remove dead code (5 unused components, cookie.js) and the
redundant cron-execute recurring payment route.
Move components from flat src/lib/components/ into recipes/, faith/, and
cospend/ subdirectories. Replace ~144 relative imports across API routes
and lib files with $models, $utils, $types, and $lib aliases. Add $types
alias to svelte.config.js. Remove unused EditRecipe.svelte.
Deduplicates mobile PiP image code shared between the rosary page and
StickyImage. Adds fullscreen support to StickyImage and fixes hidden PiP
elements capturing pointer events via pointer-events: none default.
Generalize mystery images from sorrowful-only to all mystery types (joyful,
sorrowful, glorious, luminous). Add PiP fullscreen mode with tap-to-show
controls and double-tap to toggle enlarged/fullscreen.
- Add "Bilder anzeigen" / "Show Images" toggle persisted to localStorage
- Bump mystery image column/PiP breakpoint from 900px to 1200px so
prayers keep full width on medium screens
- Fix PiP not appearing on page load by splitting $effect and using
tick() to wait for DOM before measuring element dimensions
- Fix Toggle checkbox default margin causing misalignment
Add a third grid column for sorrowful mystery images (mocking for
mysteries 2-3, crucifixion for mystery 5). Desktop uses a scrollable
sticky sidebar synced to prayer scroll position. Mobile shows a
floating PiP thumbnail. Extract prayer page PiP logic into reusable
StickyImage component.
Clicking a category on the bar chart now filters the recent activity
list to show only payments in that category. Includes a clear filter
button and empty state message. Also increases recent splits from 10
to 30 for better coverage when filtering.
The splitAmounts = { ...splitAmounts } pattern created a circular
dependency inside $effect blocks—reading and writing the same reactive
value—which Svelte 5 killed via loop protection, leaving the split
method selector non-reactive when selecting "50/50 + personal".
- Rosary: mystery selection, luminous toggle, and latin toggle fall back
to URL params (?mystery=, ?luminous=, ?latin=) for no-JS navigation
- Prayers/Angelus: latin toggle uses URL param fallback
- Search on prayers page hidden without JS (requires DOM queries)
- Toggle component supports href prop for link-based no-JS self-submit
- LanguageSelector uses <a> links with computed paths and :focus-within
dropdown for no-JS; displays correct language via server-provided prop
- Recipe language links use translated slugs from $page.data
- URL params cleaned via replaceState after hydration to avoid clutter
- Extract Bible lookup logic into shared src/lib/server/bible.ts module
- Add build script to pre-generate all 20 mystery verse lookups as static data,
eliminating runtime API calls on rosary page load
- Update Prayer.svelte to pass showLatin/urlLang as snippet parameters; all 14
prayer components now conditionally render only visible language elements
instead of hiding via CSS
- Extract 4 inline mystery selector SVGs into MysteryIcon.svelte component
- Remove unused CSS selectors from angelus page
Alexander
