diff --git a/_includes/footer.html b/_includes/footer.html
new file mode 100644
index 00000000..e961bbea
--- /dev/null
+++ b/_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>
diff --git a/_sass/custom.scss b/_sass/custom.scss
index 3d58296f..85418433 100644
--- a/_sass/custom.scss
+++ b/_sass/custom.scss
@@ -10,4 +10,23 @@
 .translation {
 	font-family: "Noto Color Emoji", sans-serif;
 	font-size: 2em;
-}
\ No newline at end of file
+}
+
+.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));
+	}
+}