From c2cebbc592270673c9bacdbc7391bc2b55a5f783 Mon Sep 17 00:00:00 2001
From: Michael Boelen <michael.boelen@cisofy.com>
Date: Fri, 19 May 2023 16:15:21 +0200
Subject: [PATCH] Footer verdelen in 3 kolommen met responsive layout

---
 themes/nluug/assets/scss/styles.scss      | 22 +++++++++
 themes/nluug/layouts/partials/footer.html | 57 ++++++++++++-----------
 2 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/themes/nluug/assets/scss/styles.scss b/themes/nluug/assets/scss/styles.scss
index 679d21e..6eae44a 100644
--- a/themes/nluug/assets/scss/styles.scss
+++ b/themes/nluug/assets/scss/styles.scss
@@ -256,7 +256,29 @@ img {
 .tags li {
     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-20 { width: 20%; }
 .w-30 { width: 30%; }
diff --git a/themes/nluug/layouts/partials/footer.html b/themes/nluug/layouts/partials/footer.html
index 3196363..99c58cf 100644
--- a/themes/nluug/layouts/partials/footer.html
+++ b/themes/nluug/layouts/partials/footer.html
@@ -1,33 +1,36 @@
 <footer>
-
   {{ $iconsize_footer := 32 }}
-  <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 }}
-
-  <h2>Volg ons</h2>
-  {{ $iconsize := .Site.Params.mediumIconSize }}
-  {{ with .Site.Params.twitter_handle }}
-    <a class="footer-social" href="https://twitter.com/{{ . }}" target="_blank" rel="noopener">{{- partial "show-svg-icon.html" (dict "context" . "icon" "twitter" "iconsize" $iconsize_footer) -}}</a>
-  {{ end }}
-  {{ if and
-    (.Site.Params.mastodon_handle)
-    (.Site.Params.mastodon_instance)
-  }}
-    <a class="footer-social" href="{{ .Site.Params.mastodon_instance }}@{{ .Site.Params.mastodon_handle }}" target="_blank" rel="noopener">{{ partial "show-svg-icon.html" (dict "context" . "icon" "mastodon" "iconsize" $iconsize_footer) }}</a>
-  {{ 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.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 "feed.json" }}" target="_blank" rel="noopener">{{ partial "show-svg-icon.html" (dict "context" . "icon" "database" "iconsize" $iconsize_footer) }}</a>
-
-
-  <h2>Nuttige links</h2>
-  <ul>
-    <li><a href="{{ absURL "contact/" }}">Contact</a></li>
-    <li><a href="{{ absURL "privacy/" }}">Privacy</a></li>
-  </ul>
 
+  <div class="three-column-grid">
+    <div>
+      <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 }}
+    </div>
+    <div>
+      <h2>Volg ons</h2>
+      {{ $iconsize := .Site.Params.mediumIconSize }}
+      {{ with .Site.Params.twitter_handle }}
+        <a class="footer-social" href="https://twitter.com/{{ . }}" target="_blank" rel="noopener">{{- partial "show-svg-icon.html" (dict "context" . "icon" "twitter" "iconsize" $iconsize_footer) -}}</a>
+      {{ end }}
+      {{ if and
+        (.Site.Params.mastodon_handle)
+        (.Site.Params.mastodon_instance)
+      }}
+      <a class="footer-social" href="{{ .Site.Params.mastodon_instance }}@{{ .Site.Params.mastodon_handle }}" target="_blank" rel="noopener">{{ partial "show-svg-icon.html" (dict "context" . "icon" "mastodon" "iconsize" $iconsize_footer) }}</a>
+      {{ 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.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 "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>
+      <ul>
+        <li><a href="{{ absURL "contact/" }}">Contact</a></li>
+        <li><a href="{{ absURL "privacy/" }}">Privacy</a></li>
+      </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>
 
 {{ if .Site.IsServer }}