Verbeterde navigatie, aria-labels, optimaliseren CSS

themes/nluug/assets/scss/styles.scss

@@ -68,13 +68,16 @@ footer {
   column-gap: 1px;
 }
 
-h1, h2, h3, h4, h5, strong, b {
+h1, h2, h3 {
     //font-size: inherit;
     font-size: 1.1em;
     font-weight: 600;
     //text-transform: uppercase;
 }
-
+h4, h5, strong, b {
+    font-size: inherit;
+    font-weight: 600;
+}
 // Highlight-box om bijvoorbeeld onze evenementen opvallend op homepage te laten zien
 .highlight-box {
   border-radius: 4px;
@@ -218,10 +221,6 @@ ul, ol {
 //    // text-align: justify;
 //}
 
-h2.post {
-    padding-top: .5rem;
-}
-
 .list li {
     display: flex;
     align-items: baseline;
@@ -255,11 +254,16 @@ h2.post {
 .m-sm {
   margin: 1rem;
 }
+
 img {
     max-width: 100%;
     height: auto;
 }
 
+img.shownormal {
+  max-width: initial;
+}
+
 .post-date {
     margin: 5% 0 5%;
 }

themes/nluug/assets/scss/styles_navigation_menu.scss

@@ -41,12 +41,12 @@ label span {
 }
 
 label span::after, label span::before {
-  content: "";
-  position: absolute;
-  display: block;
     background: inherit;
-  width: inherit;
+    content: "";
+    display: block;
     height: inherit;
+    position: absolute;
+    width: inherit;
 }
 
 label span::before{
@@ -96,7 +96,7 @@ ul.menu li a {
 }
 
 ul.menu li a, ul li button {
-  padding: 0.7rem 1rem;
+    padding: 0.7rem 0.5rem;
     text-align: left;
 }
 
@@ -128,9 +128,11 @@ input[type="checkbox"]:checked ~ nav > ul {
 }
 
 li:focus-within .dropdown {
-  height: 135px;
+    // height: 135px;
+    height: auto;
 }
 
+/*
 .arrow {
   width: 0.5em;
   height: 0.5em;
@@ -148,6 +150,8 @@ li:focus-within > button > .arrow {
   transform: rotate(-225deg);
   margin-top: 4px;
 }
+*/
+
 
 /* MEDIA QUERIES  */
 @media (max-width: 360px) {
@@ -198,7 +202,8 @@ li:focus-within > button > .arrow {
     border-radius: 0 0 0.5rem 0.5rem; 
   }
   ul.menu li:hover .dropdown {
-    height: 135px;
+    // height: 135px;
+    height: auto;
   }
   ul.menu li:hover > button > .arrow {
     transform: rotate(-225deg);

themes/nluug/layouts/_default/baseof.html

@@ -30,7 +30,7 @@
               {{ end }}
             {{ end }}
 
-            {{ if eq .Section "posts" }}
+            {{ if .Params.tags }}
               <section>
                 <h3>Tags</h3>
                   <div class="post-date">
@@ -43,7 +43,6 @@
                   </div>
               </section>
             {{ end }}
-
         </div>
       </main>
       {{ partial "footer.html" . }}

themes/nluug/layouts/index.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+<article>
   {{ .Content }}
 
   {{ if gt (len (where .Site.RegularPages "Section" "nieuws")) 0 }}
@@ -42,7 +43,7 @@
     </div>
     <p>Naast de door ons georganiseerde evenementen staat er meer op de agenda.</p>
     <ul>
-      {{ range first 10 (where $upcoming_events "date_start" "gt" (dateFormat "2006-01-02" now)) }}
+      {{ range first 10 (where $upcoming_events "date_start" "ge" (dateFormat "2006-01-02" now)) }}
       <li>{{ .date_start | dateFormat "02-01-2006" }} - <a href="/evenementen/kalender/#{{ anchorize (.date_start | dateFormat "2006-01-02") }}-{{ anchorize .name }}">{{ .name }}</a></li>
       {{ end }}
     </ul>
@@ -61,7 +62,5 @@
       <p>Op de pagina <a href="/projecten/">Projecten</a> beschrijven we deze en andere projecten. Meehelpen? Contacteer een actief projectlid voor meer informatie.</p>
     </section>
   {{ end }}
-
+</article>
-
-
 {{ end }}

themes/nluug/layouts/partials/breadcrumb.html

@@ -1,5 +1,5 @@
 {{ if not .IsHome }}
-<nav aria-label="breadcrumb">
+<nav aria-label="Breadcrumbs">
   <ol class="breadcrumb">
     {{ range $index,$element := .Ancestors.Reverse }}
       {{ if eq $index 0 }}

themes/nluug/layouts/partials/footer.html

@@ -7,8 +7,10 @@
       {{ with .File }}<a class="btn btn-cta" href="https://github.com/NLUUG/website/edit/main/content/{{ .Path }}" target="_blank" rel="noopener">Verbeter deze pagina</a>{{ end }}
     </div>
     <div>
-      <h2>Volg ons</h2>
       {{ $iconsize := .Site.Params.mediumIconSize }}
+      <h2>Volg ons</h2>
+
+      <nav aria-label="Social media">
       {{ with .Site.Params.twitter_handle }}
         <a class="icon" href="https://twitter.com/{{ . }}" target="_blank" rel="noopener">{{- partial "show-svg-icon.html" (dict "context" . "icon" "twitter" "iconsize" $iconsize_footer) -}}</a>
       {{ end }}
@@ -22,13 +24,16 @@
       <a class="icon" href="https://www.meetup.com/nluug-dutch-unix-linux-user-group/" target="_blank" rel="noopener">{{ partial "show-svg-icon.html" (dict "context" . "icon" "meetup" "iconsize" $iconsize_footer) }}</a>
       <a class="icon" href="{{ absURL "atom.xml" }}" target="_blank" rel="noopener">{{ partial "show-svg-icon.html" (dict "context" . "icon" "rss" "iconsize" $iconsize_footer) }}</a>
       <a class="icon" href="{{ absURL "feed.json" }}" target="_blank" rel="noopener">{{ partial "show-svg-icon.html" (dict "context" . "icon" "database" "iconsize" $iconsize_footer) }}</a>
+      </nav>
     </div>
     <div>
       <h2>Nuttige links</h2>
+      <nav aria-label="Footer links">
         <ul>
           <li><a href="{{ absURL "contact/" }}">Contact</a></li>
           <li><a href="{{ absURL "privacy/" }}">Privacy</a></li>
         </ul>
+      </nav>
     </div>
   </div>
   <small>Voor meer informatie over deze {{ with .Site.GetPage "/website/" }}<a href="{{ .Permalink }}">{{ .Title | lower }}</a>{{ end }}, zie de {{ with .Site.GetPage "/website/sitemap" }}<a href="{{ .Permalink }}">{{ .Title | lower }}</a>{{ end }}, {{ with .Site.GetPage "/website/laatste-wijzigingen.rst" }}<a href="{{ .Permalink }}">{{ .Title | lower }}</a>{{ end }} en de {{ with .Site.GetPage "/website/stats-for-nerds" }}<a href="{{ .Permalink }}">{{ .Title }}</a>{{ end }}</small>

themes/nluug/layouts/partials/header.html

@@ -4,12 +4,14 @@
 <header>
   <div class="header-content">
 
-    <a href="/" class="logo"><img src="{{ .Site.Params.logoNormal }}" alt="NLUUG-logo" title="{{ .Site.Title }}"></a>
+    {{ $logoresource := resources.Get (.Site.Params.logoNormal | replaceRE "^/" "") }}
+
+    <a href="/" class="logo" title="Terug naar hoofdpagina"><img src="{{ $logoresource | relURL }}" alt="NLUUG-logo" width="{{ $logoresource.Width }}" height="{{ $logoresource.Height }}"></a>
 
     <input type="checkbox" id="hamburger" aria-label="menu button">
     <label for="hamburger"><span></span></label>
 
-    <nav aria-label="main navigation">
+    <nav aria-label="Main navigation">
 
        <ul class="menus menu">
            {{ $currentPage := . }}
@@ -17,19 +19,21 @@
                {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
              {{ if .Children }}
                <li>
-                 <button type="button" aria-haspopup="true" aria-expanded="true" aria-controls="dropdown{{ $.Scratch.Get "counter" }}"><a href="{{ .URL }}">{{ .Name }}</a><!-- <span class="arrow"></span>--></button>
+                 <button type="button" aria-haspopup="true" aria-expanded="true" aria-controls="dropdown-{{ $.Scratch.Get "counter" }}">
-                 <ul class="dropdown" id="dropdown{{ $.Scratch.Get "counter" }}">
+                   <a href="{{ .URL }}">{{ .Name }}</a>
+                 </button>
+                 <ul class="dropdown" id="dropdown-{{ $.Scratch.Get "counter" }}">
                    {{ range .Children }}
                      <li><a href="{{ .URL }}">{{ .Name }}</a></li>
                    {{ end }}
                  </ul>
                </li>
              {{ else }}
-             <li><button type="button" aria-haspopup="true" aria-expanded="true" aria-controls="dropdown{{ $.Scratch.Get "counter" }}"><a href="{{ .URL }}">{{ .Name }}</a></button></li>
+             <li><button type="button" aria-haspopup="true" aria-expanded="true"><a href="{{ .URL }}">{{ .Name }}</a></button></li>
              {{ end }}
            {{ end }}
+           <li><button type="button" aria-haspopup="false" aria-expanded="true"><a href="{{ relLangURL "/zoeken/"}}">{{ partial "show-svg-icon.html" (dict "context" . "icon" "magnifying-glass" "class" "shownormal") }}</a></button></li>
          </ul>
     </nav>
-    <a href="/zoeken/">{{ partial "show-svg-icon.html" (dict "context" . "icon" "magnifying-glass") }}</a>
   </div>
 </header>

themes/nluug/layouts/partials/show-svg-icon.html

@@ -1 +1 @@
-<img src="/afbeeldingen/iconen/{{ .icon }}.svg" height="{{ .iconsize | default 20 }}" width="{{ .iconsize | default 20 }}" alt="{{ .icon | default .Site.Params.textNoTitle }}">
+<img{{ if .class }} class="{{ .class }}"{{ end }} src="/afbeeldingen/iconen/{{ .icon }}.svg" height="{{ .iconsize | default 20 }}" width="{{ .iconsize | default 20 }}" alt="{{ .icon | default .Site.Params.textNoTitle }}">