Refined footer

assets/css/screen.css

@@ -212,6 +212,7 @@ html,
 
 /* Footer
 /* ---------------------------------------------------------- */
+
 .gh-foot {
     display: flex;
     align-items: center;
@@ -226,3 +227,47 @@ html,
 .gh-foot a {
     color: inherit;
 }
+
+.gh-foot-menu {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.gh-foot-menu .nav {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    list-style: none;
+    font-size: 1.8rem;
+}
+
+.gh-foot-menu .nav li {
+    margin: 0 0.75vw;
+    padding: 0;
+}
+
+.gh-foot-menu .nav a {
+    display: inline-block;
+    padding: 3px 0;
+    text-decoration: none;
+    box-shadow: 0 -1px 0 0 currentcolor inset;
+}
+
+.gh-foot-meta {
+    margin: 2rem 0;
+    font-size: 1.5rem;
+    text-align: center;
+    opacity: 0.5;
+}
+
+@media (max-width: 700px) {
+    .gh-foot-menu .nav {
+        font-size: 1.6rem;
+    }
+    .gh-foot-menu .nav li {
+        margin: 0 1rem;
+        padding: 0;
+    }
+}

default.hbs

@@ -60,7 +60,12 @@
 
 <footer class="gh-foot">
     <div class="gh-container">
-        &copy; {{date format="YYYY"}} <a href="{{@site.url}}">{{@site.title}}</a> &mdash; Published with <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
+        <div class="gh-foot-menu">
+            {{navigation}}
+        </div>
+        <div class="gh-foot-meta">
+            Published with <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
+        </div>
     </div>
 </footer>
 
@@ -98,7 +103,6 @@ images.forEach(function (image) {
     container.style.flex = ratio + ' 1 0%';
 });
 $(document).ready(function () {
-    // FitVids - start
     var $postContent = $(".gh-content");
     $postContent.fitVids();
 });