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 87b0893ebd
commit 589b70aae9
7 changed files with 38 additions and 26 deletions
@@ -3,7 +3,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
{% endblock %}
{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js" defer></script>
{% endblock %}
{% block content %}
<div class="row mb-3">
@@ -13,7 +13,7 @@
{% for i in 1..8 %}
<div class="col-6 col-md-4 col-lg-3">
<a href="https://picsum.photos/seed/detail{{ i }}/800/800" class="glightbox gallery-item" data-gallery="detail" data-description="Werk {{ i }}">
<div class="gallery-thumb"><img src="https://picsum.photos/seed/detail{{ i }}/350/350" alt="Werk {{ i }}"></div>
<div class="gallery-thumb"><img src="https://picsum.photos/seed/detail{{ i }}/350/350" loading="lazy" alt="Werk {{ i }}"></div>
</a>
</div>
{% endfor %}