laurens/fediversity_website
Archived
2
1
Fork 1
Code Issues Pull requests Packages Projects Releases Wiki Activity

Footer verdelen in 3 kolommen met responsive layout

Browse source
This commit is contained in:
Michael Boelen 2023-05-19 16:15:21 +02:00
parent adf4973a90
commit c2cebbc592
2 changed files with 52 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -256,7 +256,29 @@ img {
.tags li { .tags li {
display: inline; display: inline;
} }
i
/* Kolommen voor de footer */
// container
.three-column-grid {
display:block;
}
/* columns */
.three-column-grid > * {
padding:1rem;
}
@media (min-width:768px) {
.three-column-grid {
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
}
/* Width definitions */
.w-10 { width: 10%; } .w-10 { width: 10%; }
.w-20 { width: 20%; } .w-20 { width: 20%; }
.w-30 { width: 30%; } .w-30 { width: 30%; }

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

@ -1,9 +1,12 @@
<footer> <footer>
{{ $iconsize_footer := 32 }} {{ $iconsize_footer := 32 }}
<div class="three-column-grid">
<div>
<h2>Help mee</h2> <h2>Help mee</h2>
{{ 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>
<h2>Volg ons</h2> <h2>Volg ons</h2>
{{ $iconsize := .Site.Params.mediumIconSize }} {{ $iconsize := .Site.Params.mediumIconSize }}
{{ with .Site.Params.twitter_handle }} {{ with .Site.Params.twitter_handle }}
@ -17,17 +20,17 @@
{{ end }} {{ end }}
<a class="footer-social" href="https://www.linkedin.com/groups/130891/" target="_blank" rel="noopener">{{ partial "show-svg-icon.html" (dict "context" . "icon" "linkedin" "iconsize" $iconsize_footer) }}</a> <a class="footer-social" href="https://www.linkedin.com/groups/130891/" target="_blank" rel="noopener">{{ partial "show-svg-icon.html" (dict "context" . "icon" "linkedin" "iconsize" $iconsize_footer) }}</a>
<a class="footer-social" 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="footer-social" 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="footer-social" href="{{ absURL "atom.xml" }}" target="_blank" rel="noopener">{{ partial "show-svg-icon.html" (dict "context" . "icon" "rss" "iconsize" $iconsize_footer) }}</a> <a class="footer-social" href="{{ absURL "atom.xml" }}" target="_blank" rel="noopener">{{ partial "show-svg-icon.html" (dict "context" . "icon" "rss" "iconsize" $iconsize_footer) }}</a>
<a class="footer-social" href="{{ absURL "feed.json" }}" target="_blank" rel="noopener">{{ partial "show-svg-icon.html" (dict "context" . "icon" "database" "iconsize" $iconsize_footer) }}</a> <a class="footer-social" href="{{ absURL "feed.json" }}" target="_blank" rel="noopener">{{ partial "show-svg-icon.html" (dict "context" . "icon" "database" "iconsize" $iconsize_footer) }}</a>
</div>
<div>
<h2>Nuttige links</h2> <h2>Nuttige links</h2>
<ul> <ul>
<li><a href="{{ absURL "contact/" }}">Contact</a></li> <li><a href="{{ absURL "contact/" }}">Contact</a></li>
<li><a href="{{ absURL "privacy/" }}">Privacy</a></li> <li><a href="{{ absURL "privacy/" }}">Privacy</a></li>
</ul> </ul>
</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>
{{ if .Site.IsServer }} {{ if .Site.IsServer }}