Responsive layout for #links.

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>

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 {