Extend the footer and always display icons at the bottom

layouts/partials/footer.html

@@ -1,3 +1,48 @@
+<section class="footer">
+    <div class="container">
+        <div class="copyright">
+
+        {{ if .Site.Params.copyright }}
+            <a href="{{ .Site.BaseURL }}license">{{ .Site.Params.copyright}}</a>
+        {{ end }}
+
+        </div>
+        <div class="icons">
+
+        {{ if .Site.Params.github }}
+            <a href="https://github.com/{{ .Site.Params.github }}" target="_blank">
+                <i class="icon ion-social-github" title="github"></i>
+            </a>
+        {{ end }}
+
+        {{ if .Site.Params.twitter }}
+            <a href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank">
+                <i class="icon ion-social-twitter" title="twitter"></i>
+            </a>
+        {{ end }}
+
+        {{ if .Site.Params.linkedin }}
+            <a href="https://www.linkedin.com/in/{{ .Site.Params.linkedin }}" target="_blank">
+                <i class="icon ion-social-linkedin" title="linkedin"></i>
+            </a>
+        {{ end }}
+
+        {{ if .Site.Params.email }}
+            <a href="mailto:{{ .Site.Params.email }}">
+                <i class="icon ion-ios-email larger" title="email"></i>
+            </a>
+        {{ end }}
+
+        {{ if .Site.RSSLink }}
+            <a href="{{ .Site.RSSLink }}">
+                <i class="icon ion-social-rss larger" title="rss"></i>
+            </a>
+        {{ end }}
+
+        </div>
+    </div>
+</section>
+
 {{ partial "footer_scripts" . }}
 
 </body>

layouts/partials/header.html

@@ -36,46 +36,3 @@
         </div>
     </div>
 </section>
-
-<section class="icons">
-    <div class="container">
-        <div class="content">
-
-        {{ if .Site.Params.github }}
-            <a href="https://github.com/{{ .Site.Params.github }}" target="_blank">
-                <i class="icon ion-social-github" title="github"></i>
-            </a>
-        {{ end }}
-
-        {{ if .Site.Params.twitter }}
-            <a href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank">
-                <i class="icon ion-social-twitter" title="twitter"></i>
-            </a>
-        {{ end }}
-
-        {{ if .Site.Params.linkedin }}
-            <a href="https://www.linkedin.com/in/{{ .Site.Params.linkedin }}" target="_blank">
-                <i class="icon ion-social-linkedin" title="linkedin"></i>
-            </a>
-        {{ end }}
-
-        {{ if .Site.Params.email }}
-            <a href="mailto:{{ .Site.Params.email }}">
-                <i class="icon ion-ios-email larger" title="email"></i>
-            </a>
-        {{ end }}
-
-        {{ if .Site.RSSLink }}
-            <a href="{{ .Site.RSSLink }}">
-                <i class="icon ion-social-rss larger" title="rss"></i>
-            </a>
-        {{ end }}
-
-	{{ if .Site.Params.copyright }}
-	    </br>
-	    <a href="{{ .Site.BaseURL }}license">{{ .Site.Params.copyright}}</a>
-	{{ end }}
-
-        </div>
-    </div>
-</section>

static/css/main.css

@@ -246,44 +246,6 @@ section {
     max-width: 750px;
   }
 }
-section.header {
-  -webkit-order: 0;
-  -moz-order: 0;
-  -ms-order: 0;
-  order: 0;
-}
-section.icons {
-  -webkit-order: 1;
-  -moz-order: 1;
-  -ms-order: 1;
-  order: 1;
-}
-section.main {
-  -webkit-order: 2;
-  -moz-order: 2;
-  -ms-order: 2;
-  order: 2;
-}
-@media (min-width: 600px) {
-  section.header {
-    -webkit-order: 0;
-    -moz-order: 0;
-    -ms-order: 0;
-    order: 0;
-  }
-  section.icons {
-    -webkit-order: 2;
-    -moz-order: 2;
-    -ms-order: 2;
-    order: 2;
-  }
-  section.main {
-    -webkit-order: 1;
-    -moz-order: 1;
-    -ms-order: 1;
-    order: 1;
-  }
-}
 section.header .container {
   -webkit-align-items: center;
   -moz-align-items: center;
@@ -408,7 +370,10 @@ section.header nav ul li:hover {
     color: #333333;
   }
 }
-section.icons .container {
+section.footer {
+  margin-top: -2em;
+}
+section.footer .container {
   -webkit-align-items: center;
   -moz-align-items: center;
   -ms-align-items: center;
@@ -417,12 +382,11 @@ section.icons .container {
   -moz-justify-content: center;
   -ms-justify-content: center;
   justify-content: center;
-}
+  flex-direction: column-reverse;
-section.icons .content {
+  width: 100%;
-  width: auto;
   text-align: center;
 }
-section.icons .content a {
+section.footer .container a {
   font-size: 14px;
   margin-left: 6px;
   margin-right: 6px;
@@ -432,43 +396,49 @@ section.icons .content a {
   -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
   -o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
 }
-section.icons .content a:first-child {
+section.footer .container a:first-child {
   margin-left: 0;
 }
-section.icons .content a:last-child {
+section.footer .container a:last-child {
   margin-right: 0;
 }
-section.icons .content a:hover {
+section.footer .container a:hover {
   color: #111111;
 }
-section.icons .content a .icon {
+section.footer .container a .icon {
   font-size: 20px;
 }
-section.icons .content a .icon.larger {
+section.footer .container a .icon.larger {
   font-size: 22px;
 }
+section.footer .container .copyright {
+  flex-grow: 0.5;
+  text-align: start;
+}
+section.footer .container .icons {
+  flex-grow: 0.5;
+  text-align: end;
+}
 @media (min-width: 600px) {
-  section.icons {
+  section.footer {
+    margin-top: -1em;
     background-color: transparent;
   }
-  section.icons .container {
+  section.footer .container {
-    -webkit-justify-content: center;
+    flex-direction: row;
-    -moz-justify-content: center;
-    -ms-justify-content: center;
-    justify-content: center;
   }
-  section.icons .content a {
+  section.footer .container a {
     margin-left: 3px;
     margin-right: 3px;
     color: #666666;
   }
-  section.icons .content a:hover {
+  section.footer .container a:hover {
     color: #333333;
   }
-  section.icons .content a .icon {
+  section.footer .container a .icon {
     font-size: 18px;
   }
-  section.icons .content a .icon.larger {
+  section.footer .container a .icon.larger {
     font-size: 20px;
   }
 }
@@ -644,7 +614,6 @@ section.header-home {
 }
 section.main {
   padding-top: 32px;
-  padding-bottom: 32px;
 }
 section.main .container .content .post-item .meta {
     display: block;
@@ -661,12 +630,11 @@ section.main .container .content .post-item {
     padding-top: 60px;
     padding-bottom: 60px;
   }
-  section.icons {
+  section.footer {
     padding-bottom: 60px;
   }
   section.main {
     padding-top: 0;
-    padding-bottom: 0;
   }
   section.main .container .content .post-item {
     display: flex;