Change footer layout and menus

assets/main/scss/_footer.scss

@@ -0,0 +1,5 @@
+.footer {
+    .social-link {
+        font-size: 1.5em;
+    }
+}

assets/main/scss/index.scss

@@ -15,6 +15,7 @@
 @import 'component';
 @import 'code';
 @import 'dropdown';
+@import 'footer';
 @import 'form';
 @import 'gallery';
 @import 'highlight';

exampleSite/config/_default/menu.toml

@@ -107,18 +107,32 @@
   weight = 3
 
 [[footer]]
-  identifier = "demo"
-  name = "Demo"
+  identifier = "sponsor"
+  name = "Sponsor"
   weight = 4
 [[footer]]
-  identifier = "demo-netlify"
-  parent = "demo"
-  name = "Netlify"
+  identifier = "sponsor-paypal"
+  parent = "sponsor"
+  name = "PayPal"
   weight = 1
-  url = "https://hbs.razonyang.com"
+  url = "https://paypal.me/razonyang"
+  pre = '<i class="fab fa-fw fa-paypal me-1" style="color: darkblue;"></i>'
 [[footer]]
-  identifier = "demo-china"
-  parent = "demo"
-  name = "China"
+  identifier = "sponsor-ko-fi"
+  parent = "sponsor"
+  name = "Ko-fi"
   weight = 2
-  url = "https://hbs-cn.razonyang.com"
+  url = "https://ko-fi.com/razonyang"
+[[footer]]
+  identifier = "sponsor-opencollective"
+  parent = "sponsor"
+  name = "Open Collective"
+  weight = 3
+  url = "https://opencollective.com/hbs"
+[[footer]]
+  identifier = "sponsor-patreon"
+  parent = "sponsor"
+  name = "Patreon"
+  weight = 4
+  url = "https://www.patreon.com/razonyang"
+  pre = '<i class="fab fa-fw fa-patreon me-1 text-danger"></i>'

layouts/partials/footer/copyright.html

@@ -1,3 +1,3 @@
-<div class="copyright mb-2">
-  {{- partial "helpers/copyright" . }}
+<div class="copyright mb-2 text-secondary">
+  <small>{{- partial "helpers/copyright" . }}</small>
 </div>

layouts/partials/footer/main.html

@@ -1,5 +1,13 @@
 {{- partialCached "footer/actions-panel" . -}}
-{{- partialCached "footer/menu" . -}}
-{{- partial "footer/social-links" . -}}
-{{- partialCached "footer/copyright" . -}}
-{{- partialCached "footer/powered-by" . -}}
+<div class="row text-center{{ if .Site.Menus.footer }} text-lg-start{{ end }}">
+  <div class="col-12 mt-2{{ if .Site.Menus.footer }} col-lg-3{{ end }}">
+    <p class="mb-2">{{ .Site.Title }}</p>
+    <p class="text-secondary mb-2"><small>{{ .Site.Params.Description }}</small></p>
+    {{- partialCached "footer/copyright" . -}}
+    {{- partialCached "footer/powered-by" . -}}
+    {{- partial "footer/social-links" . -}}
+  </div>
+  <div class="col-12 col-lg-8 offset-0 offset-lg-1">
+    {{- partialCached "footer/menu" . -}}
+  </div>
+</div>

layouts/partials/footer/menu.html

@@ -1,8 +1,8 @@
 
 {{- if .Site.Menus.footer -}}
-<ul class="nav justify-content-between footer-memu mb-3">
+<ul class="nav justify-content-between footer-memu mb-3 row">
   {{- range .Site.Menus.footer -}}
-  <li class="nav-item">
+  <li class="nav-item col-12 col-md-6 col-lg-3 px-0">
     {{- if .HasChildren -}}
     <ul class="nav flex-column align-items-start">
       <li class="nav-item">

layouts/partials/footer/powered-by.html

@@ -1,5 +1,7 @@
 {{- if .Site.Params.poweredBy -}}
-<div class="powered-by mb-2">
-  Powered by <a class="text-primary" href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> and the <a class="text-primary" href="https://github.com/razonyang/hugo-theme-bootstrap" target="_blank" rel="noopener noreferrer">HBS</a> theme.
+<div class="powered-by mb-2 text-secondary">
+  <small>
+    Build with ❤️ from the <a class="text-primary" href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> and the <a class="text-primary" href="https://github.com/razonyang/hugo-theme-bootstrap" target="_blank" rel="noopener noreferrer">HBS</a> theme.
+  </small>
 </div>
 {{- end -}}

layouts/partials/footer/social-links.html

@@ -1,7 +1,8 @@
 {{- partial "helpers/social-links" (dict
   "links" .Site.Social
-  "size" "fa-2x"
-  "class" "justify-content-between justify-content-lg-center mb-2"
+  "size" (cond (isset .Site.Menus "footer") "" "fa-2x")
+  "class" "justify-content-between mb-2 mt-3"
+  "linkClass" "p-0 me-1 mb-2"
   "OutputFormats" $.OutputFormats
   "home" (.GetPage "/") "params" .Site.Params) 
 -}}