Horizontal ordering of Repos + Forks (#66)

* decent grid layout. some weird gutter issue tho

* added neg margin to align with headings. fix a elem width.

* quick fix for single-column error when screen is very wide

assets/index.html

@@ -11,6 +11,7 @@
         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"
         integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
     <link rel="stylesheet" href="index.css">
 </head>
 
@@ -85,6 +86,33 @@
             });
         }
     </script>
+
+    <script>
+        const magicProjectsGrid = new MagicGrid({
+          container: '#work_section',
+          animate: false,
+          gutter: 30, // default gutter size
+          static: true,
+          useMin: false,
+          maxColumns: 2,
+          useTransform: true
+        });
+
+        const magicForksGrid = new MagicGrid({
+          container: '#forks_section',
+          animate: false,
+          gutter: 30, // default gutter size
+          static: true,
+          useMin: false,
+          maxColumns: 2,
+          useTransform: true
+        })
+
+        $('document').ready(() => {
+          magicProjectsGrid.listen();
+          magicForksGrid.listen();
+        });
+    </script>
 </body>
 
 </html>