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
themes/natascha/css/custom.css
+20 -15
View File
@@ -10,19 +10,24 @@
font-display: swap;
}
:root {
--color-brand: #0081c4;
--color-text: #293236;
--color-text-light: #909090;
}
.funky-font {
font-family: 'Hobo Std', Helvetica, Verdana, Arial;
}
.text-color-blue { color: #0081c4; }
.text-color-white { color: #ffffff; }
.text-color-dark-grey { color: #293236; }
.text-color-light-grey { color: #909090; }
.text-color-blue { color: var(--color-brand); }
.text-color-white { color: #ffffff; }
.text-color-dark-grey { color: var(--color-text); }
.text-color-light-grey { color: var(--color-text-light); }
html, body {
font-family: Helvetica, Verdana, Arial;
color: #293236;
font-weight: bold;
color: var(--color-text);
min-height: 100%;
}
@@ -41,7 +46,7 @@ body {
}
#main-menu {
background-color: #0081c4;
background-color: var(--color-brand);
padding-left: 8px;
padding-right: 8px;
}
@@ -66,7 +71,7 @@ body {
#main-menu a.active,
#main-menu a:hover {
color: #293236;
color: var(--color-text);
}
#main-menu .navbar-toggler {
@@ -88,7 +93,7 @@ body {
}
#main-menu .dropdown-menu {
background-color: #0081c4;
background-color: var(--color-brand);
border-color: #fff;
min-width: 0;
}
@@ -98,8 +103,8 @@ body {
}
#main-menu .dropdown-menu .dropdown-item:hover {
background-color: #0081c4;
color: #293236;
background-color: var(--color-brand);
color: var(--color-text);
}
img.social-icon {
@@ -112,10 +117,10 @@ a:hover img.social-icon {
}
#main-outline {
border: 8px solid #0081c4;
border: 8px solid var(--color-brand);
border-top: none;
min-height: 50vh;
background-color: rgba(255, 255, 255, 0.6);
background-color: rgba(255, 255, 255, 0.88);
margin-left: 0;
margin-right: 0;
}
@@ -134,7 +139,7 @@ a:hover img.social-icon {
.main-header {
font-size: 1.8em;
color: #0081c4;
color: var(--color-brand);
}
@media (min-width: 768px) {
@@ -151,7 +156,7 @@ a:hover img.social-icon {
footer {
text-align: center;
text-shadow: 1px 1px #293236;
text-shadow: 1px 1px var(--color-text);
}
.gallery-item {