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.css

@@ -272,11 +272,18 @@ body{
 }
 
 .projects {
-    columns:2;
+  margin-left: -15px; /* align section w/ heading above */
+}
+
+.projects a {
+  /* 30px is the gutter size in magic grid */
+  width: calc(49% - 30px);  /* 49% avoids a weird single column on some wide screens */
+  display: flex;
+  text-decoration: none;
 }
 
 .projects section {
-    width:85%;
+    width: 100%;
     padding:2.5vh 5%;
     display:inline-block;
     border-radius:5px;
@@ -284,7 +291,6 @@ body{
     border:1px solid rgb(0, 0, 0, 0.08);
     box-shadow:0px 0px 0px rgb(0, 0, 0, 0);
     transition:0.4s ease-in-out;
-    margin:2vh 0px;
     transform:scale(1);
 }
 
@@ -332,7 +338,6 @@ body{
 }
 
 #blogs {
-    columns:2;
 }
 
 #blogs section {
@@ -401,13 +406,15 @@ body{
         margin:0px;
     }
     .projects {
-        columns:1;
+      margin-left: 0; /* remove neg margin to align w/ header */
+    }
+    .projects a {
+      width: 100%;
     }
     .projects section {
         width:88%;
     }
     #blogs {
-        columns:1;
     }
     #blogs section {
         width:98%;

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>