Debloat footer

_includes/footer.html

@@ -0,0 +1,18 @@
+<footer class="site-footer h-card">
+  <data class="u-url" href="{{ "/" | relative_url }}"></data>
+
+  <div class="wrapper">
+
+    <div class="footer-col-wrapper">
+      <div class="footer-col footer-col-1">
+        <p>{{- site.description | escape -}}</p>
+      </div>
+
+      <div class="footer-col footer-col-2">
+        {%- include social.html -%}
+      </div>
+    </div>
+
+  </div>
+
+</footer>

_sass/custom.scss

@@ -11,3 +11,22 @@
 	font-family: "Noto Color Emoji", sans-serif;
 	font-size: 2em;
 }
+
+.footer-col-1, .footer-col-2 {
+	width: -webkit-calc(100% - (30px / 2));
+	width: calc(100% - (30px / 2));
+}
+
+// .footer-col-wrapper becomes "display: flex" on "min-width: 800px"
+@media screen and (min-width: 800px) {
+	.footer-col-1 {
+		width: -webkit-calc(70% - (30px / 2));
+		width: calc(70% - (30px / 2));
+	}
+	
+	.footer-col-2 {
+		text-align: right;
+		width: -webkit-calc(30% - (30px / 2));
+		width: calc(30% - (30px / 2));
+	}
+}