Theme and nav improvements: lang switcher styling, dropdown, theme thumbnail

- Style language switcher dropdown to match site colours
- Move language switcher left of social icons
- Set theme thumbnail to logo PNG in blueprints
- Add Dutch language override and system config tweaks
- Various CSS fixes for dropdown alignment and width

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-19 00:15:08 +02:00
parent edc6fd7eda
commit 1ecb32b94a
9 changed files with 445 additions and 5 deletions
+1
View File
@@ -2,5 +2,6 @@ name: Natascha
version: 1.0.0
description: Custom theme for Natascha Rieter art gallery website
type: theme
thumbnail: /user/themes/natascha/images/logo-blauw.png
author:
name: Claude
+21
View File
@@ -81,6 +81,27 @@ body {
box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}
#main-menu .nav-item.dropdown .nav-link {
line-height: 25px;
padding-top: 0;
padding-bottom: 0;
}
#main-menu .dropdown-menu {
background-color: #0081c4;
border-color: #fff;
min-width: 0;
}
#main-menu .dropdown-menu .dropdown-item {
color: #fff;
}
#main-menu .dropdown-menu .dropdown-item:hover {
background-color: #0081c4;
color: #293236;
}
img.social-icon {
filter: invert(1);
}
@@ -1,7 +1,7 @@
{% extends 'partials/langswitcher-logic.html.twig' %}
{% block language_block_start %}
<li class="nav-item dropdown">
<li class="nav-item dropdown d-flex align-items-center">
<a class="nav-link dropdown-toggle p-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{{ langswitcher.current|upper }}
</a>
@@ -17,6 +17,7 @@
</li>
{% endif %}
{% endfor %}
{% include 'partials/langswitcher.html.twig' %}
<li class="nav-item">
<a class="nav-link p-1" href="#" aria-label="Instagram">
<img src="{{ url('theme://images/icon-instagram.png') }}" height="25" class="social-icon" alt="Instagram">
@@ -32,7 +33,6 @@
<img src="{{ url('theme://images/icon-linked-in.png') }}" height="25" class="social-icon" alt="LinkedIn">
</a>
</li>
{% include 'partials/langswitcher.html.twig' %}
</ul>
</div>
</div>