From 049406202797e084c9983614c2e17faae6147fb7 Mon Sep 17 00:00:00 2001
From: Ben Kurtovic <ben.kurtovic@gmail.com>
Date: Sat, 18 Oct 2014 00:38:11 -0500
Subject: [PATCH] Responsive layout for #links.

---
 index.html      | 26 ++++++++------------------
 static/main.css | 30 ++++++++++++++++++++++++------
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index 0412da6..1aa6fbb 100644
--- a/index.html
+++ b/index.html
@@ -82,24 +82,14 @@ projects:
 ---
 
 <p id="bio">I'm a software developer and <a href="//en.wikipedia.org/">Wikipedian</a> currently studying computer science at the <a href="//illinois.edu/">University of Illinois at Urbana&ndash;Champaign</a>. My work mostly focuses on text parsing and analysis, but I'm also interested in programming language theory and algorithm design. Want to chat? Contact me at <a href="mailto:ben.kurtovic@gmail.com">ben.kurtovic@gmail.com</a>.</p>
-<table id="links">
-    <tr>
-        <td>GitHub</td>
-        <td>Freenode IRC</td>
-        <td>Wikipedia</td>
-        <td>Twitter</td>
-        <td>LinkedIn</td>
-        <td>PGP Key</td>
-    </tr>
-    <tr>
-        <td><a href="//github.com/earwig">earwig</a></td>
-        <td><a href="http://webchat.freenode.net/?channels=%23%23earwig">Earwig</a></td>
-        <td><a href="//en.wikipedia.org/wiki/User:The_Earwig">The Earwig</a></td>
-        <td><a href="//twitter.com/the_earwig">@the_earwig</a></td>
-        <td><a href="//linkedin.com/in/benkurtovic">benkurtovic</a></td>
-        <td><a href="http://pgp.mit.edu:11371/pks/lookup?search=0x8A19649AE8DBB515&amp;fingerprint=on&amp;op=index">E8DBB515</a></td>
-    </tr>
-</table>
+<div id="links">
+    <div>GitHub<br /><a href="//github.com/earwig">earwig</a></div
+    ><div>Freenode IRC<br /><a href="http://webchat.freenode.net/?channels=%23%23earwig">Earwig</a></div
+    ><div>Wikipedia<br /><a href="//en.wikipedia.org/wiki/User:The_Earwig">The Earwig</a></div
+    ><div>Twitter<br /><a href="//twitter.com/the_earwig">@the_earwig</a></div
+    ><div>LinkedIn<br /><a href="//linkedin.com/in/benkurtovic">benkurtovic</a></div
+    ><div>PGP Key<br /><a href="http://pgp.mit.edu:11371/pks/lookup?search=0x8A19649AE8DBB515&amp;fingerprint=on&amp;op=index">E8DBB515</a></div>
+</div>
 <table id="work">
     <tr>
         <td>
diff --git a/static/main.css b/static/main.css
index 11d920b..784d88b 100644
--- a/static/main.css
+++ b/static/main.css
@@ -61,17 +61,35 @@ p#bio {
 }
 
 #links {
-    width: 100%;
     text-align: center;
-    border-spacing: 0;
 }
 
-#links td {
-    width: 16.666666666667%;
+#links div {
+    display: inline-block;
 }
 
-#links td:not(:first-child) {
-    border-left: 1px solid #CCC;
+@media (min-width: 800px) {
+    #links div {
+        width: 16%;
+    }
+
+    #links div:not(:first-child) {
+        border-left: 1px solid #CCC;
+    }
+}
+
+@media (max-width: 799px) {
+    #links div {
+        width: 32%;
+    }
+
+    #links div:nth-child(-n+3) {
+        margin-bottom: 1em;
+    }
+
+    #links div:not(:nth-child(3n+1)) {
+        border-left: 1px solid #CCC;
+    }
 }
 
 #work {