Merge pull request #281 from brickmaker17/feature-redesign

Fixed mobile styling for table

content/assets/stylesheets/includes/about.scss

@@ -1,3 +1,67 @@
+@media only screen and (max-width: 425px) {
+  table {
+    border-collapse: inherit;
+  }
+  thead {
+    > tr {
+      visibility: collapse;
+    }
+  }
+  tbody {
+    > tr {
+      display: grid;
+      grid-template-columns: auto auto;
+      grid-template-areas:
+        "func func"
+        "name name"
+        "email link";
+
+      width: 87vw;
+    }
+    > tr > td:nth-child(3) {
+      grid-area: email;
+      border: none;
+    }
+    > tr > td:nth-child(2) {
+      grid-area: name;
+      border: none;
+    }
+    > tr > td:nth-child(4) {
+      display: grid;
+      justify-items: end;
+      grid-area: link;
+      border: none;
+    }
+    > tr > td:nth-child(1) {
+      grid-area: func;
+      border: none;
+    }
+  }
+  tbody {
+    > tr > td:nth-child(3):before {
+      content: "E-mail: ";
+      font-weight: bold;
+    }
+  }
+  tbody {
+    > tr > td:nth-child(2):before {
+      content: "Name: ";
+      font-weight: bold;
+    }
+  }
+  tbody {
+    > tr > td:nth-child(1):before {
+      content: "Function: ";
+      font-weight: bold;
+    }
+  }
+  tbody {
+    > tr > td:nth-child(4):before {
+      grid-area: link;
+    }
+  }
+}
+
 #contact-icons {
   display: flex;
   justify-content: center;
@@ -44,16 +108,14 @@
       }
     }
 
-        .contact-circle-wrapper:hover, .contact-circle-wrapper:focus {
-            
+    .contact-circle-wrapper:hover,
+    .contact-circle-wrapper:focus {
       .grow {
-                transition: all .2s ease-in-out;
+        transition: all 0.2s ease-in-out;
         -moz-transform: scale(1.2);
         -webkit-transform: scale(1.2);
         transform: scale(1.2);
       }
-
-            
     }
 
     .contact-description {
@@ -74,7 +136,6 @@
       color: $secondary;
     }
   }
-
 }
 
 #contact-info {
@@ -92,7 +153,8 @@
     text-align: center;
   }
 
-    .button:hover, .button:focus {
+  .button:hover,
+  .button:focus {
     border-color: $primary;
   }
 }