m038/natascha-rieter.nl-user
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply UI/UX improvements and fix broken Bootstrap JS

Browse Source 
- 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:
Mischa
2026-04-19 02:15:40 +02:00
parent 4f52d4d085
commit 8ad6e5a942
7 changed files with 38 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/plugins/automagic-images.yaml
+1
View File
@@ -0,0 +1 @@
enabled: false
themes/natascha/css/custom.css
+19 -14
View File
@@ -10,19 +10,24 @@
font-display: swap; font-display: swap;
} }
:root {
--color-brand: #0081c4;
--color-text: #293236;
--color-text-light: #909090;
}
.funky-font { .funky-font {
font-family: 'Hobo Std', Helvetica, Verdana, Arial; font-family: 'Hobo Std', Helvetica, Verdana, Arial;
} }
.text-color-blue { color: #0081c4; } .text-color-blue { color: var(--color-brand); }
.text-color-white { color: #ffffff; } .text-color-white { color: #ffffff; }
.text-color-dark-grey { color: #293236; } .text-color-dark-grey { color: var(--color-text); }
.text-color-light-grey { color: #909090; } .text-color-light-grey { color: var(--color-text-light); }
html, body { html, body {
font-family: Helvetica, Verdana, Arial; font-family: Helvetica, Verdana, Arial;
color: #293236; color: var(--color-text);
font-weight: bold;
min-height: 100%; min-height: 100%;
} }
@@ -41,7 +46,7 @@ body {
} }
#main-menu { #main-menu {
background-color: #0081c4; background-color: var(--color-brand);
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
} }
@@ -66,7 +71,7 @@ body {
#main-menu a.active, #main-menu a.active,
#main-menu a:hover { #main-menu a:hover {
color: #293236; color: var(--color-text);
} }
#main-menu .navbar-toggler { #main-menu .navbar-toggler {
@@ -88,7 +93,7 @@ body {
} }
#main-menu .dropdown-menu { #main-menu .dropdown-menu {
background-color: #0081c4; background-color: var(--color-brand);
border-color: #fff; border-color: #fff;
min-width: 0; min-width: 0;
} }
@@ -98,8 +103,8 @@ body {
} }
#main-menu .dropdown-menu .dropdown-item:hover { #main-menu .dropdown-menu .dropdown-item:hover {
background-color: #0081c4; background-color: var(--color-brand);
color: #293236; color: var(--color-text);
} }
img.social-icon { img.social-icon {
@@ -112,10 +117,10 @@ a:hover img.social-icon {
} }
#main-outline { #main-outline {
border: 8px solid #0081c4; border: 8px solid var(--color-brand);
border-top: none; border-top: none;
min-height: 50vh; min-height: 50vh;
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.88);
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
@@ -134,7 +139,7 @@ a:hover img.social-icon {
.main-header { .main-header {
font-size: 1.8em; font-size: 1.8em;
color: #0081c4; color: var(--color-brand);
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@@ -151,7 +156,7 @@ a:hover img.social-icon {
footer { footer {
text-align: center; text-align: center;
text-shadow: 1px 1px #293236; text-shadow: 1px 1px var(--color-text);
} }
.gallery-item { .gallery-item {
themes/natascha/templates/cv.html.twig
+1 -1
View File
@@ -11,6 +11,6 @@
</div> </div>
<div class="col-12 col-md-3 p-3 text-center"> <div class="col-12 col-md-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') %} {% 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> </div>
{% endblock %} {% endblock %}
themes/natascha/templates/galerie.html.twig
+2 -2
View File
@@ -3,7 +3,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
{% endblock %} {% endblock %}
{% block extra_js %} {% 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 %} {% endblock %}
{% block content %} {% block content %}
<div class="row mb-3"> <div class="row mb-3">
@@ -16,7 +16,7 @@
{% for i in 1..12 %} {% for i in 1..12 %}
<div class="col-6 col-md-4 col-lg-3"> <div class="col-6 col-md-4 col-lg-3">
<a href="https://picsum.photos/seed/kunst{{ i }}/800/800" class="glightbox gallery-item" data-gallery="galerie" data-description="Werk {{ i }}"> <a href="https://picsum.photos/seed/kunst{{ i }}/800/800" class="glightbox gallery-item" data-gallery="galerie" data-description="Werk {{ i }}">
<div class="gallery-thumb"><img src="https://picsum.photos/seed/kunst{{ i }}/350/350" alt="Werk {{ i }}"></div> <div class="gallery-thumb"><img src="https://picsum.photos/seed/kunst{{ i }}/350/350" loading="lazy" alt="Werk {{ i }}"></div>
</a> </a>
</div> </div>
{% endfor %} {% endfor %}
themes/natascha/templates/home.html.twig
+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_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') %} {% 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_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>
<div class="col-12 col-md-6 col-lg-6 p-3 text-start"> <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> <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
@@ -13,6 +13,6 @@
</div> </div>
<div class="col-12 col-md-6 col-lg-3 p-3 text-center"> <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') %} {% 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> </div>
{% endblock %} {% endblock %}
themes/natascha/templates/partials/base.html.twig
+10 -4
View File
@@ -1,13 +1,22 @@
<!doctype html> <!doctype html>
<html lang="nl"> <html lang="{{ grav.language.active ?? 'nl' }}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% if page.title %}{{ page.title }} – {% endif %}Natascha Rieter</title> <title>{% if page.title %}{{ page.title }} – {% endif %}Natascha Rieter</title>
<meta name="description" content="{{ page.header.description ?? 'Keramieke Galerie Groot Welsden – Natascha Rieter' }}"> <meta name="description" content="{{ page.header.description ?? 'Keramieke Galerie Groot Welsden – Natascha Rieter' }}">
<meta property="og:title" content="{% if page.title %}{{ page.title }} – {% endif %}Natascha Rieter">
<meta property="og:description" content="{{ page.header.description ?? 'Keramieke Galerie Groot Welsden – Natascha Rieter' }}">
<meta property="og:image" content="{{ url('theme://images/logo-blauw.png', true) }}">
<meta property="og:url" content="{{ page.permalink }}">
<meta property="og:type" content="website">
<link rel="icon" type="image/png" href="{{ url('theme://images/logo-vignet-blauw.png') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
{% block extra_css %}{% endblock %} {% block extra_css %}{% endblock %}
<link rel="stylesheet" href="{{ url('theme://css/custom.css') }}"> <link rel="stylesheet" href="{{ url('theme://css/custom.css') }}">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>
<script src="{{ url('theme://js/main.js') }}" defer></script>
{% block extra_js %}{% endblock %}
</head> </head>
<body> <body>
@@ -25,8 +34,5 @@
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
{% block extra_js %}{% endblock %}
<script src="{{ url('theme://js/main.js') }}"></script>
</body> </body>
</html> </html>
themes/natascha/templates/werk-in-detail.html.twig
+2 -2
View File
@@ -3,7 +3,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
{% endblock %} {% endblock %}
{% block extra_js %} {% 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 %} {% endblock %}
{% block content %} {% block content %}
<div class="row mb-3"> <div class="row mb-3">
@@ -13,7 +13,7 @@
{% for i in 1..8 %} {% for i in 1..8 %}
<div class="col-6 col-md-4 col-lg-3"> <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 }}"> <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> </a>
</div> </div>
{% endfor %} {% endfor %}