Apply UI/UX improvements and fix broken Bootstrap JS

- Add CSS custom properties for brand colors
- Remove global font-weight: bold from body
- Increase content panel opacity from 0.6 to 0.88
- Add dynamic lang attribute, favicon, and Open Graph meta tags
- Move scripts to <head> with defer (required due to automagic-images plugin)
- Disable automagic-images plugin (PHPHtmlParser strips all <script src> tags
  during HTML re-serialization, breaking Bootstrap JS and all dropdowns)
- Add loading="lazy" to below-fold images across templates

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-19 02:15:40 +02:00
parent 4f52d4d085
commit 8ad6e5a942
7 changed files with 38 additions and 26 deletions
+2 -2
View File
@@ -5,7 +5,7 @@
{% set img_main = page.header.image_main ? page.media[page.header.image_main].url : url('theme://images/portret-2.jpg') %}
{% set img_secondary = page.header.image_secondary ? page.media[page.header.image_secondary].url : url('theme://images/portret-1.jpg') %}
<img src="{{ img_main }}" class="img-fluid mb-3" alt="Portret Natascha Rieter">
<img src="{{ img_secondary }}" class="img-fluid d-none d-md-block" alt="Portret Natascha Rieter">
<img src="{{ img_secondary }}" class="img-fluid d-none d-md-block" loading="lazy" alt="Portret Natascha Rieter">
</div>
<div class="col-12 col-md-6 col-lg-6 p-3 text-start">
<h1 class="funky-font main-header text-center">{{ page.title }}</h1>
@@ -13,6 +13,6 @@
</div>
<div class="col-12 col-md-6 col-lg-3 p-3 text-center">
{% set img_logo = page.header.image_logo ? page.media[page.header.image_logo].url : url('theme://images/logo-blauw.png') %}
<img src="{{ img_logo }}" class="img-fluid mb-3" alt="Logo Galerie Groot Welsden">
<img src="{{ img_logo }}" class="img-fluid mb-3" loading="lazy" alt="Logo Galerie Groot Welsden">
</div>
{% endblock %}