Fediversity/fediversity_website_archive
Archived
7
0
Fork 0
forked from laurens/fediversity_website
Code Pull requests Activity

Verbeterde navigatie, aria-labels, optimaliseren CSS

Browse source
This commit is contained in:
Michael Boelen 2023-05-20 19:59:58 +02:00
parent 53310dd1f6
commit 9c7ec523c5
8 changed files with 102 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
themes/nluug/assets/scss/styles.scss
View file

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

103
themes/nluug/assets/scss/styles_navigation_menu.scss
View file

@ -1,82 +1,82 @@
header { header {
position: relative; position: relative;
//box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.05); //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
} }
.header-content { .header-content {
align-items: center; align-items: center;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 10px 20px; padding: 10px 20px;
color: #212529; color: #212529;
} }
.logo { .logo {
text-decoration: none; text-decoration: none;
font-size: 25px; font-size: 25px;
color: inherit; color: inherit;
margin-right: 20px; margin-right: 20px;
} }
label { label {
padding: 23px 20px; padding: 23px 20px;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
right: 0; right: 0;
top: 0; top: 0;
} }
input[type="checkbox"] { input[type="checkbox"] {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: 0; right: 0;
} }
label span { label span {
width: 20px; width: 20px;
height: 3px; height: 3px;
display: block; display: block;
background: #4f3e3e; background: #4f3e3e;
position: relative; position: relative;
} }
label span::after, label span::before { label span::after, label span::before {
content: ""; background: inherit;
position: absolute; content: "";
display: block; display: block;
background: inherit; height: inherit;
width: inherit; position: absolute;
height: inherit; width: inherit;
} }
label span::before{ label span::before{
top: 8px; top: 8px;
} }
label span::after { label span::after {
bottom: 8px; bottom: 8px;
} }
label::before { label::before {
position: absolute; position: absolute;
content: ""; content: "";
width: 58px; width: 58px;
height: 49px; height: 49px;
top: 0; top: 0;
right: 0; right: 0;
} }
input[type="checkbox"]:focus + label::before { input[type="checkbox"]:focus + label::before {
box-shadow: 0 0 20px black; box-shadow: 0 0 20px black;
} }
ul.menu { ul.menu {
background: #f2f2f2; background: #f2f2f2;
} }
ul.menu li { ul.menu li {
list-style: none; list-style: none;
font-size: 18px; font-size: 18px;
} }
ul.menu li button { ul.menu li button {
@ -90,14 +90,14 @@ ul.menu li button {
} }
ul.menu li a { ul.menu li a {
display: block; display: block;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
ul.menu li a, ul li button { ul.menu li a, ul li button {
padding: 0.7rem 1rem; padding: 0.7rem 0.5rem;
text-align: left; text-align: left;
} }
.menus { .menus {
@ -128,9 +128,11 @@ input[type="checkbox"]:checked ~ nav > ul {
} }
li:focus-within .dropdown { li:focus-within .dropdown {
height: 135px; // height: 135px;
height: auto;
} }
/*
.arrow { .arrow {
width: 0.5em; width: 0.5em;
height: 0.5em; height: 0.5em;
@ -148,6 +150,8 @@ li:focus-within > button > .arrow {
transform: rotate(-225deg); transform: rotate(-225deg);
margin-top: 4px; margin-top: 4px;
} }
*/
/* MEDIA QUERIES */ /* MEDIA QUERIES */
@media (max-width: 360px) { @media (max-width: 360px) {
@ -198,7 +202,8 @@ li:focus-within > button > .arrow {
border-radius: 0 0 0.5rem 0.5rem; border-radius: 0 0 0.5rem 0.5rem;
} }
ul.menu li:hover .dropdown { ul.menu li:hover .dropdown {
height: 135px; // height: 135px;
height: auto;
} }
ul.menu li:hover > button > .arrow { ul.menu li:hover > button > .arrow {
transform: rotate(-225deg); transform: rotate(-225deg);

27
themes/nluug/layouts/_default/baseof.html
View file

@ -30,20 +30,19 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ if eq .Section "posts" }} {{ if .Params.tags }}
<section> <section>
<h3>Tags</h3> <h3>Tags</h3>
<div class="post-date"> <div class="post-date">
<span class="g time">{{.Date.Format "January 2, 2006"}} </span> &#8729; <span class="g time">{{.Date.Format "January 2, 2006"}} </span> &#8729;
{{ $taxonomy := "tags" }} {{ with .Param $taxonomy }} {{ $taxonomy := "tags" }} {{ with .Param $taxonomy }}
{{ range $index, $tag := . }} {{ with $.Site.GetPage (printf "/%s/%s" $taxonomy $tag) -}} {{ range $index, $tag := . }} {{ with $.Site.GetPage (printf "/%s/%s" $taxonomy $tag) -}}
<a href="{{ .Permalink }}">{{ $tag | urlize }}</a> <a href="{{ .Permalink }}">{{ $tag | urlize }}</a>
{{- end -}} {{- end -}} {{- end -}} {{- end -}}
{{ end }} {{ end }}
</div> </div>
</section> </section>
{{ end }} {{ end }}
</div> </div>
</main> </main>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

7
themes/nluug/layouts/index.html
View file

@ -1,4 +1,5 @@
{{ define "main" }} {{ define "main" }}
<article>
{{ .Content }} {{ .Content }}
{{ if gt (len (where .Site.RegularPages "Section" "nieuws")) 0 }} {{ if gt (len (where .Site.RegularPages "Section" "nieuws")) 0 }}
@ -42,7 +43,7 @@
</div> </div>
<p>Naast de door ons georganiseerde evenementen staat er meer op de agenda.</p> <p>Naast de door ons georganiseerde evenementen staat er meer op de agenda.</p>
<ul> <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> <li>{{ .date_start | dateFormat "02-01-2006" }} - <a href="/evenementen/kalender/#{{ anchorize (.date_start | dateFormat "2006-01-02") }}-{{ anchorize .name }}">{{ .name }}</a></li>
{{ end }} {{ end }}
</ul> </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> <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> </section>
{{ end }} {{ end }}
</article>
{{ end }} {{ end }}

2
themes/nluug/layouts/partials/breadcrumb.html
View file

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

15
themes/nluug/layouts/partials/footer.html
View file

@ -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 }} {{ 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>
<div> <div>
<h2>Volg ons</h2>
{{ $iconsize := .Site.Params.mediumIconSize }} {{ $iconsize := .Site.Params.mediumIconSize }}
<h2>Volg ons</h2>
<nav aria-label="Social media">
{{ with .Site.Params.twitter_handle }} {{ 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> <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 }} {{ 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="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 "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> <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>
<div> <div>
<h2>Nuttige links</h2> <h2>Nuttige links</h2>
<ul> <nav aria-label="Footer links">
<li><a href="{{ absURL "contact/" }}">Contact</a></li> <ul>
<li><a href="{{ absURL "privacy/" }}">Privacy</a></li> <li><a href="{{ absURL "contact/" }}">Contact</a></li>
</ul> <li><a href="{{ absURL "privacy/" }}">Privacy</a></li>
</ul>
</nav>
</div> </div>
</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> <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>

16
themes/nluug/layouts/partials/header.html
View file

@ -4,12 +4,14 @@
<header> <header>
<div class="header-content"> <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"> <input type="checkbox" id="hamburger" aria-label="menu button">
<label for="hamburger"><span></span></label> <label for="hamburger"><span></span></label>
<nav aria-label="main navigation"> <nav aria-label="Main navigation">
<ul class="menus menu"> <ul class="menus menu">
{{ $currentPage := . }} {{ $currentPage := . }}
@ -17,19 +19,21 @@
{{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }} {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
{{ if .Children }} {{ if .Children }}
<li> <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 }} {{ range .Children }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li> <li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }} {{ end }}
</ul> </ul>
</li> </li>
{{ else }} {{ 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 }}
{{ 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> </ul>
</nav> </nav>
<a href="/zoeken/">{{ partial "show-svg-icon.html" (dict "context" . "icon" "magnifying-glass") }}</a>
</div> </div>
</header> </header>

2
themes/nluug/layouts/partials/show-svg-icon.html
View file

@ -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 }}">