Implement adaptive background images for mobile and desktop

Browse Source

- Add desktop.webp (2732x1535) for desktop devices and mobile.webp (556x1535) for mobile
- Create adaptive-background.css with media queries (max-width: 736px for mobile)
- Update config.toml to use desktop.webp as default background
- Modify htmlhead.html to include adaptive-background.css
- Update preload-images.html for responsive image preloading
- Optimize background loading based on device screen width

Both images include overlay.png and gradient overlay for consistent design.
Mobile version (124 KB) is 5.8x lighter than desktop version (716 KB).

...

This commit is contained in:

Kirik

2025-11-12 19:53:54 +01:00

parent 93dc90ce31

commit 6269d3323c

7 changed files with 42 additions and 4 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

static/images/desktop.webp

Executable

BIN

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 716 KiB

static/images/mobile.webp

Executable

BIN

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 124 KiB