From 829c20f9e41e8de6abb70bd7346e8743ef40e3d1 Mon Sep 17 00:00:00 2001 From: Wouter Bos Date: Mon, 27 Jan 2025 20:58:35 +0100 Subject: [PATCH] Styling header --- partials/base.html | 115 ++++++++++++++++++++++++++++---------------- partials/custom.css | 86 +++++++++++++++++++++++++++++++++ 2 files changed, 159 insertions(+), 42 deletions(-) diff --git a/partials/base.html b/partials/base.html index 00c65ef..167dd8e 100644 --- a/partials/base.html +++ b/partials/base.html @@ -1,61 +1,92 @@ - + {{ pagemeta.title }} - - - - - + + + + + {% block extrameta %} {% endblock %} - + - + {% block javascript %} {% endblock %} - + +
+ +
+
+ {% block customheader %}{% endblock %} +
-
-
- - [overzicht] - [activiteiten] - [ongeplande activiteiten] - [besluiten] - [commissies] - [geschenken] - [kamerleden] - [kamerstukdossiers] - [🧑mijn] - [open vragen] -
- [toezeggingen] - [stemmingen] - [verslagen] - [🔍 uitgebreid zoeken] - [wat is dit?] -
- - {% block customheader %}{% endblock %} -
-
-
- {% block main %}{% endblock %} -
+
{% block main %}{% endblock %}
diff --git a/partials/custom.css b/partials/custom.css index 66196b3..538bc16 100644 --- a/partials/custom.css +++ b/partials/custom.css @@ -17,3 +17,89 @@ span.jarig::before { content: '🎈'; } .stemming.meertegen .besluittekst { background-color: var(--pico-form-element-invalid-border-color); } + + + +.navigatie, .navigatie * { + all: revert; +} + +.navigatie { + position: sticky; + top: 0; + display: block; + margin-bottom: 2rem; + padding: .4rem 1rem; + background-color: var(--pico-header-background); + backdrop-filter: blur(1rem); + box-shadow: var(--pico-card-box-shadow); +} + +.navigatie-secondary { + display: flex; +} + +.navigatie .home { + flex-grow: 1; + margin: .4rem 0; + font-size: 1.2rem; +} + +.navigatie .home a { + border-radius: var(--pico-border-radius); + padding: .2rem .5rem; + color: var(--pico-color); + text-decoration: none; +} +.navigatie .home a:focus-visible { + outline: none; + transition-duration: 0.05s; + color: var(--pico-primary-inverse); + background: var(--pico-primary-focus); +} +.navigatie nav { + display: flex; + flex-direction: column; +} + +.navigatie[class] ul { + display: inline-flex; + flex-wrap: wrap; + margin: .3rem 0; + padding: 0; + font-size: 0.9rem; +} +.navigatie ul.navigatie--about { + font-size: 0.8rem; +} + +.navigatie li { + display: inline-block; + margin: .2rem .1rem; + padding: 0; +} +.navigatie li:first-child { + margin-left: 0; +} +.navigatie li:last-child { + margin-right: 0; +} + +.navigatie ul a { + padding: .2rem .5rem; + border-radius: var(--pico-border-radius); + color: var(--pico-color); + text-decoration: none; + transition: var(--pico-transition); +} +.navigatie ul a:hover { + color: var(--pico-primary-inverse); + background: var(--pico-color); + transition-duration: 0.05s; +} +.navigatie ul a:focus-visible { + outline: none; + transition-duration: 0.05s; + color: var(--pico-primary-inverse); + background: var(--pico-primary-focus); +} \ No newline at end of file