add contact icons to bottom of the page

Signed-off-by: Daniel Holbach <[email protected]>
zjedi · Dec 23, 2023 · 175781d · 175781d
1 parent 4269990
commit 175781d
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 0 deletions.
diff --git a/assets/css/theme.scss b/assets/css/theme.scss
@@ -273,3 +273,14 @@ a.fn-item {
 .site-footer a:hover {
   color: var(--sticky-menu-text-color);
 }
+
+/* Bottom Icons */
+.icons {
+  ol {
+    padding-left: 0;
+  }
+
+  li {
+    display: inline-block;
+  }
+}
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -51,6 +51,10 @@ title = "Jane Doe - Nutrition Coach & Chef Consultant"
     # The sections of the home page alternate styling. Mark invert as true to swap the styling of the sections
     invertSectionColors = false
 
+    [params.footer]
+    # Show contact icons for email/phone (if specified) in the footer of the page
+    showContactIcons = false
+
     [params.meta]
         keywords = "some, keywords, for, seo, you, know, google, duckduckgo, and, such"
 

diff --git a/i18n/de.toml b/i18n/de.toml
@@ -0,0 +1,5 @@
+[email]
+other = "Email"
+
+[phone]
+other = "Telefon"
diff --git a/i18n/en.toml b/i18n/en.toml
@@ -0,0 +1,5 @@
+[email]
+other = "Email"
+
+[phone]
+other = "Phone"
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,5 +1,16 @@
 <footer class="site-footer">
   <div class="inner">
+    {{ if ne .Site.Params.footer.showContactIcons false }}
+      {{ with .Site.Params.contact }}
+      <section class="icons">
+        <ol>
+          <li><a href="mailto:{{ .email }}" aria-label='{{ i18n "email" }}'><i class="fa fa-envelope"></i></a></li>
+          <li><a href="tel:{{ .phone }}" aria-label='{{ i18n "phone" }}'><i class="fa fa-phone"></i></a></li>
+        </ol>
+      </section>
+      {{ end }}
+    {{ end }}
+
     {{ with .Site.Params.copyright }}
       <section class="copyright">{{ . | safeHTML }}</section>
     {{ end }}