Customise footer for Kubernetes

Author: Tim Bannister

assets/scss/_base.scss

@@ -893,6 +893,11 @@ section#cncf {
   }
 }
 
+footer.row {
+  margin-left: initial;
+  margin-right: initial;
+}
+
 /* DOCUMENTATION */
 
 // nav-tabs and tab-content

assets/scss/_custom.scss

@@ -328,6 +328,45 @@ footer {
   color: #e9e9e9;
 }
 
+// Custom footer sizing
+@media (min-width: 800px) and (max-width: 1279px) {
+  footer {
+    ul.footer-icons {
+      min-width: 17.5vw;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+      justify-content: space-evenly;
+    }
+    .col-sm-2 {
+      flex: 0 0 22.5%;
+      max-width: 22.5%;
+    }
+    .footer-main.text-center {
+      flex: 0 0 50%;
+      max-width: 50%;
+    }
+
+  }
+}
+
+
+@media (max-width: 799px) {
+  footer ul.footer-icons {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 0.5em;
+  }
+  footer div.order-1 ul.footer-icons {
+    margin-left: auto;
+  }
+  footer div.order-3 ul.footer-icons {
+    margin-right: auto;
+  }
+}
+
 /* SIDE-DRAWER MENU */
 
 .pi-pushmenu .sled {

layouts/partials/footer.html

@@ -2,32 +2,26 @@
 <footer class="bg-dark py-5 row d-print-none">
   <div class="container-fluid mx-sm-5">
     <div class="row">
-      <div class="col-6 col-sm-4 text-xs-center order-sm-2">
+      {{ template "footer-main-block" . }}
+      <div class="col col-sm-2 text-xs-center order-1">
         {{ with $links }}
         {{ with index . "user"}}
         {{ template "footer-links-block"  . }}
         {{ end }}
         {{ end }}
       </div>
-      <div class="col-6 col-sm-4 text-right text-xs-center order-sm-3">
+      <div class="col col-sm-2 text-right text-xs-center order-3">
         {{ with $links }}
         {{ with index . "developer"}}
         {{ template "footer-links-block"  . }}
         {{ end }}
         {{ end }}
       </div>
-      <div class="col-12 col-sm-4 text-center py-2 order-sm-2">
-        {{ with .Site.Params.copyright }}<small class="text-white">&copy; {{ now.Year}} {{ .}} {{ T "footer_all_rights_reserved" }}</small>{{ end }}
-        {{ with .Site.Params.privacy_policy }}<small class="ml-1"><a href="{{ . }}" target="_blank" rel="noopener">{{ T "footer_privacy_policy" }}</a></small>{{ end }}
-	{{ if not .Site.Params.ui.footer_about_disable }}
-		{{ with .Site.GetPage "about" }}<p class="mt-2"><a href="{{ .RelPermalink }}">{{ .Title }}</a></p>{{ end }}
-	{{ end }}
-      </div>
     </div>
   </div>
 </footer>
 {{ define "footer-links-block" }}
-<ul class="list-inline mb-0">
+<ul class="list-inline mb-0 footer-icons">
   {{ range . }}
   <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="{{ .name }}" aria-label="{{ .name }}">
     <a class="text-white" target="_blank" rel="noopener" href="{{ .url }}" aria-label="{{ .name }}">
@@ -37,3 +31,14 @@
   {{ end }}
 </ul>
 {{ end }}
+{{ define "footer-main-block" }}
+    <div class="col-5 col-sm-7 text-center order-2 footer-main">
+      <p><span class="copyright-notice">&copy; {{ now.Year}} {{ T "main_documentation_license" | safeHTML }}</span></p>
+      <p><span class="copyright-notice">&copy; {{ now.Year }} {{ T "main_copyright_notice" | safeHTML }}</span></p>
+      <p><span class="certification-notice">{{ T "china_icp_license" }} 京ICP备17074266号-3</span></p>
+      {{ with .Site.Params.privacy_policy }}<p><span class="ml-1 privacy-policy"><a href="{{ . }}" target="_blank">{{ T "footer_privacy_policy" }}</a></span></p>{{ end }}
+      {{ if not .Site.Params.ui.footer_about_disable }}
+        {{ with .Site.GetPage "about" }}<p class="mt-2"><a href="{{ .RelPermalink }}">{{ .Title }}</a></p>{{ end }}
+      {{ end }}
+    </div>
+{{ end }}