From 8c8b526cc6ec98bd0c5ac6fa0515bb835416828e Mon Sep 17 00:00:00 2001
From: herbetom <git@herbetom.de>
Date: Fri, 18 Dec 2020 16:53:16 +0100
Subject: [PATCH 1/3] refresh Design

---
 config.toml                               |  13 +-
 content/karte.md                          |   3 +-
 content/kontakt.md                        |  28 +-
 layouts/shortcodes/betterplace.html       |   2 +
 themes/ffrn/assets/sass/main.scss         | 514 +++++++++++-----------
 themes/ffrn/layouts/404.html              |  21 +-
 themes/ffrn/layouts/_default/baseof.html  |  20 +-
 themes/ffrn/layouts/_default/list.html    |   3 +-
 themes/ffrn/layouts/_default/single.html  |   2 +
 themes/ffrn/layouts/index.html            |  45 +-
 themes/ffrn/layouts/partials/article.html |  26 +-
 themes/ffrn/layouts/partials/footer.html  |  92 ++--
 themes/ffrn/layouts/partials/full.html    |   5 +
 themes/ffrn/layouts/partials/head.html    |  21 +-
 themes/ffrn/layouts/partials/header.html  |  32 --
 themes/ffrn/layouts/partials/navbar.html  |  30 ++
 themes/ffrn/layouts/partials/page.html    |  19 +-
 17 files changed, 458 insertions(+), 418 deletions(-)
 create mode 100644 themes/ffrn/layouts/partials/full.html
 delete mode 100644 themes/ffrn/layouts/partials/header.html
 create mode 100644 themes/ffrn/layouts/partials/navbar.html

diff --git a/config.toml b/config.toml
index 9e1e4fe..a6bf785 100644
--- a/config.toml
+++ b/config.toml
@@ -39,8 +39,8 @@ unsafe= true
 
 [[menu.main]]
   name = "News"
-  url = "https://blog.ffrn.de/"
-  # url = "/news/"
+  # url = "https://blog.ffrn.de/"
+  url = "/news/"
   weight = 4
 
 [[menu.main]]
@@ -61,11 +61,16 @@ unsafe= true
 
 [[menu.main]]
   name = "Karte"
-  url = "https://map.ffrn.de/"
-  # url = "/karte/"
+  # url = "https://map.ffrn.de/"
+  url = "/karte/"
   weight = 8
 
 [[menu.main]]
   name = "Kontakt"
   url = "/kontakt/"
   weight = 9
+
+[[menu.main]]
+  name = "Impressum"
+  url = "/impressum/"
+  weight = 99
diff --git a/content/karte.md b/content/karte.md
index 072b43b..5cfa1e8 100644
--- a/content/karte.md
+++ b/content/karte.md
@@ -1,5 +1,6 @@
 +++
 title = "Karte"
+type = "full"
 +++
 
-<iframe id="meshviewer" name="meshviewer" allowfullscreen="" allowtransparency="true" title="Meshviewer" seamless="" src="https://map.ffrn.de" width="100%" style="display:block; height: calc(100vh - 3.25em);width: 100%;"></iframe>
+<iframe id="meshviewer" name="meshviewer" allowfullscreen="" allowtransparency="true" title="Meshviewer" seamless="" src="https://map.ffrn.de" width="100%" style="display:block; height: calc(100vh - 3.25em);width: 100%; position:absolute;"></iframe>
diff --git a/content/kontakt.md b/content/kontakt.md
index 6147487..9d9f224 100644
--- a/content/kontakt.md
+++ b/content/kontakt.md
@@ -6,40 +6,40 @@ Kommunikation ist unser größtes Anliegen also scheue dich nicht, auch wegen kl
 Du kannst uns dabei über verschiedene Wege erreichen:
 
 ### Kontakt zur Community
-
-<div class="col-sm-6 mailform">
+<div class="row">
+<div class="col">
     <h4><i class="fab fa-discourse"></i> Forum</h4>
-    <p>Unser Hauptkommunikationskanal ist das <a href="https://forum.ffrn.de">Forum</a>. Egal welche Frage du rund um Freifunk, die Hardware, unsere Infrastruktur, die Treffen, Dienste etc. stellen willst,
-        das Forum ist der Richtige Anlaufpunkt. Hier triffst du auf einen großteil der Community, welche dir gerne zur Seite steht!
+    <p>Unser Hauptkommunikationskanal ist das <a href="https://forum.ffrn.de">Forum</a>. Egal welche Frage du rund um Freifunk, die Hardware, unsere Infrastruktur, die Treffen, Dienste etc. stellen willst, das Forum ist der Richtige Anlaufpunkt. Hier triffst du auf einen großteil der Community, welche dir gerne zur Seite steht!
     </p>
 </div>
 
-<div class="col-sm-6">
-    <br>
+<div class="col">
     <h4><i class="fa fa-comments"></i> Chat</h4>
-    <p>Wir verwenden als Chatlösung für den schnellen Kontakt Matrix. Du findest uns beispielsweise im Raum <a href="https://matrix.to/#/#ffrn:ffrn.de">#ffrn:ffrn.de</a>. Weitere Infos dazu bekommst du <a href="https://blog.ffrn.de/ffrn-matrix-raum/">hier</a>.</p><br>
+    <p>Wir verwenden als Chatlösung für den schnellen Kontakt Matrix. Du findest uns beispielsweise im Raum <a href="https://matrix.to/#/#ffrn:ffrn.de">#ffrn:ffrn.de</a>. Weitere Infos dazu bekommst du <a href="https://blog.ffrn.de/ffrn-matrix-raum/">hier</a>.</p>
+</div>
 </div>
-
 &nbsp;
 
 ### Social Media
 
-<div class="col-sm-6 mailform">
+<div class="row">
+<div class="col">
     <h4><i class="fab fa-twitter"></i> Twitter</h4>
-    <p>Auf Twitter sind wir über den Account <a target="_blank" href="https://twitter.com/FFRheinNeckar">@FFRheinNeckar</a> unterwegs.</p><br>
-    <br>
+    <p>Auf Twitter sind wir über den Account <a target="_blank" href="https://twitter.com/FFRheinNeckar">@FFRheinNeckar</a> unterwegs.</p>
 </div>
-<div class="col-sm-6">
+<div class="col">
     <h4><i class="fab fa-mastodon"></i> Mastodon</h4>
-    <p>Unser gemeinsamer Mastodon Account ist <a target="_blank" href="https://chaos.social/@ffrn">@ffrn@chaos.social</a>.</p><br>
+    <p>Unser gemeinsamer Mastodon Account ist <a target="_blank" href="https://chaos.social/@ffrn">@ffrn@chaos.social</a>.</p>
 </div>
 
 &nbsp;
 
 ### Kontakt zum Verein
 
-<div class="mailform">
+<div class="row">
+<div class="col">
     <h4><i class="fa fa-question-circle"></i> Anfrage</h4>
     <p>Du hast eine Frage zum Verein Freifunk Rhein-Neckar e.V. oder möchtest dich direkt an einen Ansprechpartner des Vereins wenden? 
     <br>Dann schreib uns einfach eine Mail an <a href="mailto:info@freifunk-rhein-neckar.de">info@freifunk-rhein-neckar.de</a></p>
 </div>
+</div>
diff --git a/layouts/shortcodes/betterplace.html b/layouts/shortcodes/betterplace.html
index 3c1d52e..269c1ef 100644
--- a/layouts/shortcodes/betterplace.html
+++ b/layouts/shortcodes/betterplace.html
@@ -1,3 +1,4 @@
+<div class="mx-auto" style="max-width: 600px; min-height: 1200px;">
 <section class="hidden-xs">
     <script type="text/javascript">
     /* Configure at https://www.betterplace.org/de/projects/20723-freifunk-rhein-neckar-freies-wlan-im-rhein-neckar-gebiet/manage/iframe_donation_form */
@@ -20,3 +21,4 @@
         <strong><a href="https://www.betterplace.org/de/projects/20723-freifunk-rhein-neckar-freies-wlan-im-rhein-neckar-gebiet/donations/new">Jetzt Spenden für „Freifunk Rhein-Neckar - Freies WLAN im Rhein-Neckar-Gebiet“ bei unserem Partner betterplace.org</a></strong>
     </div>
 </section>
+</div>
diff --git a/themes/ffrn/assets/sass/main.scss b/themes/ffrn/assets/sass/main.scss
index ea56d0b..7b8f4d7 100644
--- a/themes/ffrn/assets/sass/main.scss
+++ b/themes/ffrn/assets/sass/main.scss
@@ -1,91 +1,107 @@
-* {
-  border-radius: 0 !important;
-}
-
-.mapbox {
-  position: relative;
+// * {
+//   border-radius: 0 !important;
+// }
+body {
+    padding-top: 3.25em;
 }
 
-.mapbox .overlay {
-  position: absolute;
-  top: 25px;
-  left: 0;
-  z-index: 2;
-  pointer-events: none;
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-}
+// #navigation {
+//     padding: 10px;
+// }
 
-.mapbox .overlay .btn {
-  pointer-events: initial;
-}
+// .mapbox {
+//   position: relative;
+// }
 
+// .mapbox .overlay {
+//   position: absolute;
+//   top: 25px;
+//   left: 0;
+//   z-index: 2;
+//   pointer-events: none;
+//   margin-left: auto;
+//   margin-right: auto;
+//   width: 100%;
+// }
 
-html, body {
-  height: 100%;
-}
+// .mapbox .overlay .btn {
+//   pointer-events: initial;
+// }
 
-body {
-  font-family: 'Raleway', sans-serif;
-  -webkit-font-smoothing: antialiased;
-}
 
-a {
-  color: #ff4a59;
-}
+// html, body {
+//   height: 100%;
+// }
 
-a:hover {
-  color: #ff4a59;
+// body {
+//   font-family: 'Raleway', sans-serif;
+//   -webkit-font-smoothing: antialiased;
+// }
 
-}
-h1 {
-  font-size: 26px;
-}
-/* #map { height: 500px; } */
-#map{
-  height: calc(100vh - 40px);
-}
-nav ul li a:hover {
-  background: #abc;
+ul.nav li a, ul.nav li a:visited {
+    color: #ff4a59 !important;
 }
 
-.navbar-nav .active a {
-  color: #222;
+ul.nav li a:hover, ul.nav li a:active {
+    color: #ff4a59 !important;
 }
 
-
-.container.main {
-  min-height: calc(100% - 50px);
-  height: auto;
-  margin-top: 50px;
-  position: relative;
-}
-#statusbar {
-  min-height: 40px;
-  padding-top: 12px;
-  background: #818181;
-  color: #ffffff;
-  text-align: center;
+main a {
+    color: #ff4a59 !important;
 }
-@media (min-width: 992px){
-.container.main {
-  min-height: calc(100% - 100px);
-  margin-top: 100px;
 
-}
-  h1 {
-      font-size: 36px;
-  }
-}
+// a:hover {
+//   color: #ff4a59;
 
-#index .main .row {
-  position: absolute;
-  top: 5%;
-  left: 5%;
-  width: 100%;
-  padding: 0;
-}
+// }
+h1 {
+//     background-color: chartreuse;
+//   font-size: 26px;
+}
+// /* #map { height: 500px; } */
+// #map{
+//   height: calc(100vh - 40px);
+// }
+// nav ul li a:hover {
+//   background: #abc;
+// }
+
+// .navbar-nav .active a {
+//   color: #222;
+// }
+
+
+// .container.main {
+//   min-height: calc(100% - 50px);
+//   height: auto;
+//   margin-top: 50px;
+//   position: relative;
+// }
+// #statusbar {
+//   min-height: 40px;
+//   padding-top: 12px;
+//   background: #818181;
+//   color: #ffffff;
+//   text-align: center;
+// }
+// @media (min-width: 992px){
+// .container.main {
+//   min-height: calc(100% - 100px);
+//   margin-top: 100px;
+
+// }
+//   h1 {
+//       font-size: 36px;
+//   }
+// }
+
+// #index .main .row {
+//   position: absolute;
+//   top: 5%;
+//   left: 5%;
+//   width: 100%;
+//   padding: 0;
+// }
 
 .main h1 {
   background: #ff4a59;
@@ -94,29 +110,29 @@ nav ul li a:hover {
   display: inline-block;
 }
 
-#index h1 {
-  color: #fff;
-  display: inline;
-  background: #ff4a59;
-}
+// #index h1 {
+//   color: #fff;
+//   display: inline;
+//   background: #ff4a59;
+// }
 
-.panel-default>.panel-heading {
-  background: none;
-}
+// .panel-default>.panel-heading {
+//   background: none;
+// }
 
-.panel-title>a:hover {
-  color: #ff4a59;
-  text-decoration: none;
-}
+// .panel-title>a:hover {
+//   color: #ff4a59;
+//   text-decoration: none;
+// }
 
-.leaflet-top {
-  top:50%;
+// .leaflet-top {
+//   top:50%;
 
-}
+// }
 
-.mailform {
-  padding-left: 0;
-}
+// .mailform {
+//   padding-left: 0;
+// }
 
 footer {
   margin-top: 20px;
@@ -132,6 +148,10 @@ footer h4 {
   color: #fff;
 }
 
+footer a {
+    text-decoration: none;
+}
+
 footer .container {
   padding-top: 15px;
 }
@@ -224,10 +244,10 @@ footer .footer-social i {
   border-left-color: #ff4a59;
 }
 
-/* Seite mitmachen.html */
-.iban{
-padding: 0 2px;
-}
+// /* Seite mitmachen.html */
+// .iban{
+// padding: 0 2px;
+// }
 
 dl.bank dd {
 display: inline;
@@ -242,156 +262,156 @@ display: inline-block;
 min-width: 100px;
 }
 
-/* Bootsrap überschreiben */
-
-.navbar-brand {
-  height: auto;
-  padding: 5px;
-}
-
-.navbar-nav>li>a {
-  text-transform: uppercase;
-  color: #5e5e5e;
-  font-weight: bold;
-  letter-spacing: 1px;
-}
-
-.navbar-default .navbar-toggle {
-  border: none;
-}
-
-.navbar-default .navbar-toggle:hover,
-.navbar-default .navbar-toggle:focus {
-  background: #ff4a59;
-}
-
-.panel-group .panel {
-  border-radius: 0;
-}
-
-.panel-body a {
-  color: #ff4a59;
-}
-
-@media (min-width: 992px){
-  h1 {
-      font-size: 36px;
-  }
-.navbar-brand img {
-  height: 90px;
-}
-
-#index .navbar-default {
-  background: none;
-  border: none;
-}
-
-.navbar-nav>li>a {
-  line-height: 100px;
-  padding: 0 15px;
-}
-
-.navbar-default .navbar-nav>.active>a,
-.navbar-default .navbar-nav>.active>a:hover,
-.navbar-default .navbar-nav>.active>a:focus {
-  color: #222;
-  background: none;
-}
-.pull {
-  float: right;
-}
-.blur {
-  height: 100px;
-  -webkit-filter: blur(40px);
-  -moz-filter: blur(40px);
-  -ms-filter: blur(40px);
-  -o-filter: blur(40px);
-  filter: blur(40px);
-  background: rgba(250,250,250,0.9)!important;
-}
-
-}
-
-
-/* headroom.js foo */
-
-.headroom {
-  transition: transform 200ms linear;
-  -webkit-transition:  -webkit-transform 200ms linear;
-  -moz-transition: -moz-transform 200ms linear;
-}
-.headroom--pinned {
-  transform: translateY(0%);
-  -webkit-transform: translateY(0%);
-  -moz-transform: translateY(0%);
-}
-.headroom--unpinned {
-  transform: translateY(-100%);
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-}
-
-/* Blog Styles */
-.aligncenter {
-  margin: 15px auto;
-  display: block;
-}
-
-.alignleft {
-  margin: 15px 0;
-}
-
-.blog h4 {
-  margin: 5px;
-}
-
-.blog h4 a {
-  color: #333;
-}
-
-.blog h4 a:hover {
-  color: #ff4a59;
-}
-
-.blog .meta {
-  color: #999;
-}
-
-.blog .meta .date,
-.blog .meta .author {
-  color: #ff6e7a;
-}
-
-div.navigation {
-  clear: both;
-}
-
-.newer {
-  float: left;
-  width: 50%;
-}
-
-.older {
-float: right;
-width: 50%;
-text-align: right;
-}
-
-.blog img {
-  width: 100%;
-  height: auto;
-}
-
-.btn-primary {
-  background-color: #ff4a59;
-  border-color: #ff4a59;
-}
-.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
-  background-color: #ff1e36;
-  border-color: #ff1e36;
-}
-
-.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {
-  background-color: #ff6e7a;
-  border-color: #ff6e7a;
-}
+// /* Bootsrap überschreiben */
+
+// .navbar-brand {
+//   height: auto;
+//   padding: 5px;
+// }
+
+// .navbar-nav>li>a {
+//   text-transform: uppercase;
+//   color: #5e5e5e;
+//   font-weight: bold;
+//   letter-spacing: 1px;
+// }
+
+// .navbar-default .navbar-toggle {
+//   border: none;
+// }
+
+// .navbar-default .navbar-toggle:hover,
+// .navbar-default .navbar-toggle:focus {
+//   background: #ff4a59;
+// }
+
+// .panel-group .panel {
+//   border-radius: 0;
+// }
+
+// .panel-body a {
+//   color: #ff4a59;
+// }
+
+// @media (min-width: 992px){
+//   h1 {
+//       font-size: 36px;
+//   }
+// .navbar-brand img {
+//   height: 90px;
+// }
+
+// #index .navbar-default {
+//   background: none;
+//   border: none;
+// }
+
+// .navbar-nav>li>a {
+//   line-height: 100px;
+//   padding: 0 15px;
+// }
+
+// .navbar-default .navbar-nav>.active>a,
+// .navbar-default .navbar-nav>.active>a:hover,
+// .navbar-default .navbar-nav>.active>a:focus {
+//   color: #222;
+//   background: none;
+// }
+// .pull {
+//   float: right;
+// }
+// .blur {
+//   height: 100px;
+//   -webkit-filter: blur(40px);
+//   -moz-filter: blur(40px);
+//   -ms-filter: blur(40px);
+//   -o-filter: blur(40px);
+//   filter: blur(40px);
+//   background: rgba(250,250,250,0.9)!important;
+// }
+
+// }
+
+
+// /* headroom.js foo */
+
+// .headroom {
+//   transition: transform 200ms linear;
+//   -webkit-transition:  -webkit-transform 200ms linear;
+//   -moz-transition: -moz-transform 200ms linear;
+// }
+// .headroom--pinned {
+//   transform: translateY(0%);
+//   -webkit-transform: translateY(0%);
+//   -moz-transform: translateY(0%);
+// }
+// .headroom--unpinned {
+//   transform: translateY(-100%);
+//   -webkit-transform: translateY(-100%);
+//   -moz-transform: translateY(-100%);
+// }
+
+// /* Blog Styles */
+// .aligncenter {
+//   margin: 15px auto;
+//   display: block;
+// }
+
+// .alignleft {
+//   margin: 15px 0;
+// }
+
+// .blog h4 {
+//   margin: 5px;
+// }
+
+// .blog h4 a {
+//   color: #333;
+// }
+
+// .blog h4 a:hover {
+//   color: #ff4a59;
+// }
+
+// .blog .meta {
+//   color: #999;
+// }
+
+// .blog .meta .date,
+// .blog .meta .author {
+//   color: #ff6e7a;
+// }
+
+// div.navigation {
+//   clear: both;
+// }
+
+// .newer {
+//   float: left;
+//   width: 50%;
+// }
+
+// .older {
+// float: right;
+// width: 50%;
+// text-align: right;
+// }
+
+// .blog img {
+//   width: 100%;
+//   height: auto;
+// }
+
+// .btn-primary {
+//   background-color: #ff4a59;
+//   border-color: #ff4a59;
+// }
+// .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
+//   background-color: #ff1e36;
+//   border-color: #ff1e36;
+// }
+
+// .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {
+//   background-color: #ff6e7a;
+//   border-color: #ff6e7a;
+// }
diff --git a/themes/ffrn/layouts/404.html b/themes/ffrn/layouts/404.html
index 2dfdf36..4fb6bb2 100644
--- a/themes/ffrn/layouts/404.html
+++ b/themes/ffrn/layouts/404.html
@@ -1,13 +1,16 @@
 {{ define "main" }}
-<div class="container main">
-    <div class="row">
-        <div class="col-sm-12">
-            <h1>404 - Inhalt nicht gefunden</h1>
-            <br>
-            <br>
-            <br>
-            <p>Die angeforderte Seite existiert leider nicht.</p>
+<main class="container flex-shrink-0">
+    <div class="container main">
+        <div class="row">
+            <div class="col-sm-12">
+                <br>
+                <h1>404 - Inhalt nicht gefunden</h1>
+                <br>
+                <br>
+                <br>
+                <p>Die angeforderte Seite existiert leider nicht.</p>
+            </div>
         </div>
     </div>
-</div>
+</main>
 {{ end }}
diff --git a/themes/ffrn/layouts/_default/baseof.html b/themes/ffrn/layouts/_default/baseof.html
index 52eda93..8056aef 100644
--- a/themes/ffrn/layouts/_default/baseof.html
+++ b/themes/ffrn/layouts/_default/baseof.html
@@ -1,9 +1,21 @@
 <!DOCTYPE html>
-<html lang='{{ .Site.LanguageCode }}'>
-    {{ partial "head.html" . -}}
-    <body{{ if .IsHome }} id="index" {{- end }}>
-        {{- partial "header.html" . -}}
+<html lang='{{ .Site.LanguageCode }}' class="{{ block "htmlClass" . }}h-100{{ end }}">
+    <head>
+        <meta charset="UTF-8">
+        <title>{{ block "title" . }}{{- if .IsHome -}} {{ .Site.Title }} {{- else }} {{ .Title }} | {{ .Site.Title }} {{- end -}}{{ end }}</title>
+
+        {{ partial "head.html" . -}}
+    </head>
+    <body class="d-flex flex-column h-100">
+        <header>
+            {{ block "navbar" . }}
+            {{ partial "navbar.html" . }}
+            {{ end }}
+        </header>
+
         {{- block "main" . }}{{- end }}
+    {{ if ne .Type "full" }}
         {{- partial "footer.html" . -}}
+    {{ end }}
     </body>
 </html>
diff --git a/themes/ffrn/layouts/_default/list.html b/themes/ffrn/layouts/_default/list.html
index 04eaad8..ccb9612 100644
--- a/themes/ffrn/layouts/_default/list.html
+++ b/themes/ffrn/layouts/_default/list.html
@@ -1,8 +1,9 @@
 {{ define "main" }}
-<main>
+<main class="container flex-shrink-0">
     <div class="container main">
         <div class="row">
             <div class="col-sm-12">
+                <br>
                 <h1>{{ .Title }}</h1>
                 {{ range .Pages }}
                 <article>
diff --git a/themes/ffrn/layouts/_default/single.html b/themes/ffrn/layouts/_default/single.html
index 7f50537..4d3b306 100644
--- a/themes/ffrn/layouts/_default/single.html
+++ b/themes/ffrn/layouts/_default/single.html
@@ -2,6 +2,8 @@
 
     {{ if eq .Type "page" }}
         {{ partial "page.html" . }}
+    {{ else if eq .Type "full" }}
+        {{ partial "full.html" . }}
     {{ else }}
         {{ partial "article.html" . }}
     {{ end }}
diff --git a/themes/ffrn/layouts/index.html b/themes/ffrn/layouts/index.html
index ddc4ad1..29a9cab 100644
--- a/themes/ffrn/layouts/index.html
+++ b/themes/ffrn/layouts/index.html
@@ -1,34 +1,21 @@
 {{ define "main" }}
-    <div class="mapbox">
-        <div id="map"></div>
-
-        <div class="overlay">
-            <div class="container main">
-                <div class="row">
-                    <div class="col-sm-12">
-                        <h1>Werde Teil der Community.<br>Werde Freifunker!</h1>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="statusbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-md-12 center-block">
-                    <p>
-                        <span class="glyphicon glyphicon-user"></span> <span id="users-online">0</span> Benutzer verbunden.
-                        <img height="16px" src="images/ffrn_logo_green.svg" data-toggle="tooltip" data-placement="top"
-                            title="Knoten online:"/> <span id="nodes-online">0</span> Knoten online.
-                        <img height="16px" src="images/ffrn_logo_red.svg" data-toggle="tooltip" data-placement="top"
-                            title="Knoten offline:"/> <span id="nodes-offline">0</span> Knoten offline.
-                        <img height="16px" src="images/ffrn_logo.svg" data-toggle="tooltip" data-placement="top"
-                            title="Knoten gesamt:"/> <span id="nodes-total">0</span> Knoten registriert.
-                        <span class="glyphicon glyphicon-map-marker"> </span> <span id="nodes-with-geolocation">0</span>
-                        Knoten mit Geo-Koordinaten.
-                    </p>
-                </div>
+<main class="container flex-shrink-0">
+    <div class="container main">
+        <div class="row">
+            <div class="col-sm-12">
+                <br>
+                <h1>{{ .Title }}</h1>
+                <p>
+                    <img src="/images/bg.jpg" width="100%">
+                </p>
+                <p>
+                    Freifunk Rhein-Neckar baut ein freies, offenes und kostenloses WLAN-Funknetz in der Metropolregion Rhein-Neckar auf.
+                </p>
+                <p>
+                    Wir tun dies alles Ehrenamtlich in unserer Freizeit.
+                </p>
             </div>
         </div>
     </div>
+</main>
 {{ end }}
diff --git a/themes/ffrn/layouts/partials/article.html b/themes/ffrn/layouts/partials/article.html
index 4dcd627..77f1701 100644
--- a/themes/ffrn/layouts/partials/article.html
+++ b/themes/ffrn/layouts/partials/article.html
@@ -1,14 +1,16 @@
-<div class="container main">
-    <div class="row">
-        <div class="col-sm-12">
-            <!-- <br> -->
-            <h1>{{ .Title }}</h1>
-            <p>
-                <p><i class="fas fa-calendar-alt"></i> {{ .Date.Format "02.01.2006" }}</p>
-            </p>
-            <p>
-                {{ .Content }}
-            </p>
+<main class="container flex-shrink-0">
+    <div class="container main">
+        <div class="row">
+            <div class="col-sm-12">
+                <br>
+                <h1>{{ .Title }}</h1>
+                <p>
+                    <p><i class="fas fa-calendar-alt"></i> {{ .Date.Format "02.01.2006" }}</p>
+                </p>
+                <p>
+                    {{ .Content }}
+                </p>
+            </div>
         </div>
     </div>
-</div>
+</main>
diff --git a/themes/ffrn/layouts/partials/footer.html b/themes/ffrn/layouts/partials/footer.html
index d0eb603..580ff4f 100644
--- a/themes/ffrn/layouts/partials/footer.html
+++ b/themes/ffrn/layouts/partials/footer.html
@@ -1,49 +1,51 @@
-<footer>
+<footer class="footer mt-auto py-3">
     <div class="container">
-        <div class="col-sm-4 footer-links">
-            <h4>Info</h4>
-            <hr>
-            <a href="mailto:info@freifunk-rhein-neckar.de">info@freifunk-rhein-neckar.de</a><br>
-            <a href="/impressum/">Impressum</a>
-            <hr>
-            <address>
-                <strong>Freifunk Rhein-Neckar e.V.</strong><br>
-                c/o Jakob Haufe<br>
-                Hammelbächerstraße 35<br>
-                D-69469 Weinheim<br>
-            </address>
-            <hr>
-        </div>
-        <div class="col-sm-4 footer-links">
-            <h4>Links</h4>
-            <hr>
-            <ul>
-                <li><a target="_blank" href="https://freifunk-rhein-neckar.github.io/ffrn/mitgliedsantrag/Mitgliedsantrag.pdf">Mitgliedsantrag</a></li>
-                <li><a target="_blank" href="https://freifunk-rhein-neckar.github.io/ffrn/satzung/satzung_ffrn.pdf">Vereinssatzung</a></li>
-                <li><a target="_blank" href="https://freifunk-rhein-neckar.github.io/ffrn/beitragsordnung/beitragsordnung_ffrn.pdf">Beitragsordnung</a></li>
-                <li><a target="_blank" href="http://map.freifunk-rhein-neckar.de/">Map</a></li>
-                <li><a target="_blank" href="https://wiki.ffrn.de">Wiki</a></li>
-                <li><a target="_blank" href="http://fw.freifunk-rhein-neckar.de">Firmware Download</a></li>
-                <li><a target="_blank" href="https://register.freifunk-rhein-neckar.de/">Knotenverwaltung</a></li>
-            </ul>
-        </div>
-        <div class="col-sm-4 footer-links footer-social">
-            <h4>Social & Kontakt</h4>
-            <hr>
-            <ul>
-                <li><a target="_blank" href="https://forum.ffrn.de/"><i class="fab fa-discourse"></i> Forum</a></li>
-                <li><a target="_blank" href="https://matrix.to/#/#ffrn:ffrn.de"><i class="fa fa-comments"></i> #ffrn:ffrn.de</a> (<a href="http://chat.ffrn.de/">Matrix-Chat</a>)</li>
-                <li><a target="_blank" href="https://twitter.com/FFRheinNeckar"><i class="fab fa-twitter"></i> Twitter</a></li>
-                <li><a target="_blank" href="https://chaos.social/@ffrn" rel="me"><i class="fab fa-mastodon"></i> Mastodon</a></li>
-                <li><a target="_blank" href="https://github.com/Freifunk-Rhein-Neckar"><i class="fab fa-github"></i> GitHub</a></li>
-            </ul>
+        <div class="row">
+            <div class="col-sm-4 footer-links">
+                <h4>Info</h4>
+                <hr>
+                <a href="mailto:info@freifunk-rhein-neckar.de">info@freifunk-rhein-neckar.de</a><br>
+                <a href="/impressum/">Impressum</a>
+                <hr>
+                <address>
+                    <strong>Freifunk Rhein-Neckar e.V.</strong><br>
+                    c/o Jakob Haufe<br>
+                    Hammelbächerstraße 35<br>
+                    D-69469 Weinheim<br>
+                </address>
+                <hr>
+            </div>
+            <div class="col-sm-4 footer-links">
+                <h4>Links</h4>
+                <hr>
+                <ul>
+                    <li><a target="_blank" href="https://freifunk-rhein-neckar.github.io/ffrn/mitgliedsantrag/Mitgliedsantrag.pdf">Mitgliedsantrag</a></li>
+                    <li><a target="_blank" href="https://freifunk-rhein-neckar.github.io/ffrn/satzung/satzung_ffrn.pdf">Vereinssatzung</a></li>
+                    <li><a target="_blank" href="https://freifunk-rhein-neckar.github.io/ffrn/beitragsordnung/beitragsordnung_ffrn.pdf">Beitragsordnung</a></li>
+                    <li><a target="_blank" href="http://map.freifunk-rhein-neckar.de/">Map</a></li>
+                    <li><a target="_blank" href="https://wiki.ffrn.de">Wiki</a></li>
+                    <li><a target="_blank" href="http://fw.freifunk-rhein-neckar.de">Firmware Download</a></li>
+                    <li><a target="_blank" href="https://register.freifunk-rhein-neckar.de/">Knotenverwaltung</a></li>
+                </ul>
+            </div>
+            <div class="col-sm-4 footer-links footer-social">
+                <h4>Social & Kontakt</h4>
+                <hr>
+                <ul>
+                    <li><a target="_blank" href="https://forum.ffrn.de/"><i class="fab fa-discourse"></i> Forum</a></li>
+                    <li><a target="_blank" href="https://matrix.to/#/#ffrn:ffrn.de"><i class="fa fa-comments"></i> #ffrn:ffrn.de</a> (<a href="http://chat.ffrn.de/">Matrix-Chat</a>)</li>
+                    <li><a target="_blank" href="https://twitter.com/FFRheinNeckar"><i class="fab fa-twitter"></i> Twitter</a></li>
+                    <li><a target="_blank" href="https://chaos.social/@ffrn" rel="me"><i class="fab fa-mastodon"></i> Mastodon</a></li>
+                    <li><a target="_blank" href="https://github.com/Freifunk-Rhein-Neckar"><i class="fab fa-github"></i> GitHub</a></li>
+                </ul>
+            </div>
         </div>
     </div>
 </footer>
-<script src="/js/jquery.min.js"></script>
-<script src="/js/bootstrap.min.js"></script>
-<script src="/js/headroom.min.js"></script>
-<script src="/js/headroom.conf.js"></script>
-<script type="text/javascript" src="/js/app.js"></script>
-<script type="text/javascript" src="/js/View/App.Helper.js"></script>
-<script src="/js/View/map.js"></script>
+<!-- <script src="/js/jquery.min.js"></script> -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+<!-- <script src="/js/headroom.min.js"></script>
+<script src="/js/headroom.conf.js"></script> -->
+<!-- <script type="text/javascript" src="/js/app.js"></script>
+<script type="text/javascript" src="/js/View/App.Helper.js"></script> -->
+<!-- <script src="/js/View/map.js"></script> -->
diff --git a/themes/ffrn/layouts/partials/full.html b/themes/ffrn/layouts/partials/full.html
new file mode 100644
index 0000000..21e4e6d
--- /dev/null
+++ b/themes/ffrn/layouts/partials/full.html
@@ -0,0 +1,5 @@
+<main class="flex-shrink-0">
+    <div class="main" style="width: 100%; display:block; height: calc(100vh - 3.25em); position:absolute;">
+        {{ .Content }}
+    </div>
+</main>
diff --git a/themes/ffrn/layouts/partials/head.html b/themes/ffrn/layouts/partials/head.html
index 37538e0..3d3c847 100644
--- a/themes/ffrn/layouts/partials/head.html
+++ b/themes/ffrn/layouts/partials/head.html
@@ -1,6 +1,4 @@
-<head>
-    <meta charset="UTF-8">
-    <title> {{- if .IsHome -}} {{ .Site.Title }} {{- else }} {{ .Title }} | {{ .Site.Title }} {{- end -}} </title>
+
     {{ $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | resources.ToCSS | resources.Minify | resources.Fingerprint }}
     <link rel="stylesheet" href="{{ $style.Permalink }}">
 
@@ -9,14 +7,15 @@
     {{ end -}}
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <!-- <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"> -->
     <link rel="stylesheet" href="/fa/css/all.min.css">
-    <link rel="stylesheet" type="text/css" href="/css/LeafletStyleSheet.css">
-    <link rel="stylesheet" href="/css/LeafletMain.css"/>
-    <script src="/js/Leaflet.js"></script>
-    <link rel="stylesheet" type="text/css" href="/css/styles.css">
-    <script src="/js/PruneCluster.js"></script>
-    <script src="/js/easy-button.js"></script>
+    <!-- <link rel="stylesheet" type="text/css" href="/css/LeafletStyleSheet.css"> -->
+    <!-- <link rel="stylesheet" href="/css/LeafletMain.css"/> -->
+    <!-- <script src="/js/Leaflet.js"></script> -->
+    <!-- <link rel="stylesheet" type="text/css" href="/css/styles.css"> -->
+    <!-- <script src="/js/PruneCluster.js"></script> -->
+    <!-- <script src="/js/easy-button.js"></script> -->
 
     <link rel="apple-touch-icon" sizes="57x57" href="/images/icon/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="/images/icon/apple-icon-60x60.png">
@@ -37,5 +36,3 @@
     <meta name="theme-color" content="#ffffff">
 
     <meta name="description" content="Herzlich Willkommen bei Freifunk Rhein-Neckar! Wir sind ein Community-Projekt zum Aufbau von freien, dezentralen WLAN-Netzwerken in der Metropolregion Rhein-Neckar.">
-
-</head>
diff --git a/themes/ffrn/layouts/partials/header.html b/themes/ffrn/layouts/partials/header.html
deleted file mode 100644
index b6ea765..0000000
--- a/themes/ffrn/layouts/partials/header.html
+++ /dev/null
@@ -1,32 +0,0 @@
-{{ if .IsHome -}}<div class="blur navbar navbar-default navbar-fixed-top"></div>{{ end }}
-<nav id="navigation" class="navbar navbar-default navbar-fixed-top" role="navigation">
-    <div class="container">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar">
-                <span class="sr-only">Toggle navigation</span>
-                <i class="fa fa-bars"></i>
-            </button>
-            <b><a class="navbar-brand" href="/"><img src="/images/ffrn_logo.svg" alt="logo"></a></b>
-        </div>
-        <div class="collapse navbar-collapse pull" id="main-navbar">
-            <ul class="nav navbar-nav">
-                {{ $currentPage := . }}
-                {{- range .Site.Menus.main }}
-                    {{- $active := "" }}
-                    {{- $menu_item_url := .URL | relLangURL }}
-                    {{- $page_url:= $currentPage.RelPermalink | relLangURL }}
-                    {{- if eq $menu_item_url $page_url -}}
-                        {{- $active = "active" }}
-                    {{- end -}}
-                    <li class="{{ $active }}">
-                    <a href="{{ .URL | relLangURL }}" {{ if strings.HasPrefix ( .URL | relLangURL ) "http" -}} target="_blank" {{ end -}} 
-                        class="block mt-4 md:inline-block md:mt-0 hover:text-eureka mr-4 main-a">
-                        {{ .Name }}
-                    </a>
-                </li>
-                {{ end }}
-            </ul>
-        </div>
-    </div>
-    <div class="header-line"></div>
-</nav>
diff --git a/themes/ffrn/layouts/partials/navbar.html b/themes/ffrn/layouts/partials/navbar.html
new file mode 100644
index 0000000..79923a9
--- /dev/null
+++ b/themes/ffrn/layouts/partials/navbar.html
@@ -0,0 +1,30 @@
+<nav id="navigation" class="navbar navbar-expand-md navbar-light fixed-top bg-light" role="navigation">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="/">
+            <img src="/images/ffrn_logo.svg" alt="Logo" class="d-inline-block align-top" width="30" height="24" >
+            {{ .Site.Title }}
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-navbar" aria-controls="#main-navbar" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="main-navbar">
+            <ul class="navbar-nav me-auto mb-2 mb-md-00">
+    {{ $currentPage := . }}
+    {{- range .Site.Menus.main }}
+        {{- $active := "" }}
+        {{- $menu_item_url := .URL | relLangURL }}
+        {{- $page_url:= $currentPage.RelPermalink | relLangURL }}
+        {{- if eq $menu_item_url $page_url -}}
+            {{- $active = "active" }}
+        {{- end -}}
+                <li class="nav-item">
+                    <a href="{{ .URL | relLangURL }}" {{ if strings.HasPrefix ( .URL | relLangURL ) "http" -}} target="_blank" {{ end -}} class="nav-link {{ $active }}">
+                        {{ .Name }}
+                    </a>
+                </li>
+    {{ end }}
+            </ul>
+        </div>
+    </div>
+    <div class="header-line"></div>
+</nav>
diff --git a/themes/ffrn/layouts/partials/page.html b/themes/ffrn/layouts/partials/page.html
index 8c52273..d67ae48 100644
--- a/themes/ffrn/layouts/partials/page.html
+++ b/themes/ffrn/layouts/partials/page.html
@@ -1,10 +1,13 @@
-<div class="container main">
-    <div class="row">
-        <div class="col-sm-12">
-            <h1>{{ .Title }}</h1>
-            <p>
-                {{ .Content }}
-            </p>
+<main class="container flex-shrink-0">
+    <div class="container main">
+        <div class="row">
+            <div class="col-sm-12">
+                <br>
+                <h1>{{ .Title }}</h1>
+                <p>
+                    {{ .Content }}
+                </p>
+            </div>
         </div>
     </div>
-</div>
+</main>

From a66de7b29e5ae23b7a1df677a189d5b34803961a Mon Sep 17 00:00:00 2001
From: Tom Herbers <mail@tomherbers.de>
Date: Fri, 31 Dec 2021 19:01:04 +0100
Subject: [PATCH 2/3] kontakt: link to internal news

---
 content/kontakt.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/kontakt.md b/content/kontakt.md
index 9d9f224..2161d1e 100644
--- a/content/kontakt.md
+++ b/content/kontakt.md
@@ -15,7 +15,7 @@ Du kannst uns dabei über verschiedene Wege erreichen:
 
 <div class="col">
     <h4><i class="fa fa-comments"></i> Chat</h4>
-    <p>Wir verwenden als Chatlösung für den schnellen Kontakt Matrix. Du findest uns beispielsweise im Raum <a href="https://matrix.to/#/#ffrn:ffrn.de">#ffrn:ffrn.de</a>. Weitere Infos dazu bekommst du <a href="https://blog.ffrn.de/ffrn-matrix-raum/">hier</a>.</p>
+    <p>Wir verwenden als Chatlösung für den schnellen Kontakt Matrix. Du findest uns beispielsweise im Raum <a href="https://matrix.to/#/#ffrn:ffrn.de">#ffrn:ffrn.de</a>. Weitere Infos dazu bekommst du <a href="/news/ffrn-matrix-raum/">hier</a>.</p>
 </div>
 </div>
 &nbsp;

From 5b6d1d27a095630739f33a880c690e486c57bf03 Mon Sep 17 00:00:00 2001
From: Tom Herbers <mail@tomherbers.de>
Date: Fri, 31 Dec 2021 19:02:36 +0100
Subject: [PATCH 3/3] update bootstrap

---
 themes/ffrn/layouts/partials/footer.html | 3 ++-
 themes/ffrn/layouts/partials/head.html   | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/themes/ffrn/layouts/partials/footer.html b/themes/ffrn/layouts/partials/footer.html
index 580ff4f..55f05c8 100644
--- a/themes/ffrn/layouts/partials/footer.html
+++ b/themes/ffrn/layouts/partials/footer.html
@@ -43,7 +43,8 @@ <h4>Social & Kontakt</h4>
     </div>
 </footer>
 <!-- <script src="/js/jquery.min.js"></script> -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+
 <!-- <script src="/js/headroom.min.js"></script>
 <script src="/js/headroom.conf.js"></script> -->
 <!-- <script type="text/javascript" src="/js/app.js"></script>
diff --git a/themes/ffrn/layouts/partials/head.html b/themes/ffrn/layouts/partials/head.html
index 3d3c847..f25f2db 100644
--- a/themes/ffrn/layouts/partials/head.html
+++ b/themes/ffrn/layouts/partials/head.html
@@ -7,7 +7,9 @@
     {{ end -}}
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+
+
     <!-- <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"> -->
     <link rel="stylesheet" href="/fa/css/all.min.css">
     <!-- <link rel="stylesheet" type="text/css" href="/css/LeafletStyleSheet.css"> -->