fixed even row offset for responsiveness

Author: Meredith G Hoo

css/secrets.css

@@ -8,23 +8,18 @@ body {
 .row {
   display: flex;
 }
-.row:nth-child(2n) {
-  position: relative;
-  left: -75px;
-}
-
 svg {
   margin: 8px;
 }
 
 .cell:hover, .cell:visited, .cell:focus {
-  animation: loaderAnim 5s ease-in-out infinite normal forwards;
+  animation: rotate 5s ease-in-out infinite normal forwards;
   padding: 0;
   margin: 0;
 }
 
 
-@keyframes loaderAnim {
+@keyframes rotate {
   0% {
     transform:rotate(0deg);
   }
@@ -35,13 +30,3 @@ svg {
     transform:rotate(0deg);
   }
 }
-@media only screen and (max-width: 450px) {
-  .row:nth-child(2n) {
-    position: relative;
-    left: 75px;
-  }
-  body {
-    left: -100px;
-    top: 10px;
-  }
-}

js/2secrets.js

@@ -28,6 +28,7 @@ function setup() {
   makeGrid(rows, cols);
   shapes = makeFlowers(radius);
   addSvgsToCells(size, padding);
+  offsetEvenRows(size);
 }
 
 function addSvgsToCells(size, padding) {
@@ -43,13 +44,21 @@ function addSvgsToCells(size, padding) {
   });
 }
 
+function offsetEvenRows(size) {
+  $(".row").each(function (index, object) {
+    if (index % 2) {
+      $(object).css("position", "relative");
+      $(object).css("left", size / 2 * - 1 + "px");
+    }
+  });
+}
+
 function makeGrid(rows, cols) {
   $('body').empty();
   for (var r = 0; r < rows; r++) {
     var rowId = "row" + r;
     var row = $("<div/>").addClass("row").attr("id", rowId).appendTo('body');
-    var vi = r / (rows - 1);
-    for (var c = 0; c < cols; c++) {
+    for (var c = 0; c < cols + 1; c++) {
       var cellId = "cell" + ((r * rows) + c);
       $(row).append('<div class="cell" id="' + cellId + '"></div>');
     }