From 35d25d79ebca618b256985e43d0171b93843b311 Mon Sep 17 00:00:00 2001
From: Luke Barrett <gotluke@gmail.com>
Date: Fri, 5 Oct 2018 23:05:18 -0600
Subject: [PATCH] Fixed mobile styling for table

---
 .../assets/stylesheets/includes/about.scss    | 245 +++++++++++-------
 1 file changed, 158 insertions(+), 87 deletions(-)

diff --git a/content/assets/stylesheets/includes/about.scss b/content/assets/stylesheets/includes/about.scss
index 0421bc2..389f34e 100644
--- a/content/assets/stylesheets/includes/about.scss
+++ b/content/assets/stylesheets/includes/about.scss
@@ -1,98 +1,169 @@
+@media only screen and (max-width: 425px) {
+  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;
+    }
+    > tr > td:nth-child(2) {
+      grid-area: name;
+    }
+    > tr > td:nth-child(4) {
+      display: grid;
+      justify-items: end;
+      grid-area: link;
+    }
+    > tr > td:nth-child(1) {
+      grid-area: func;
+    }
+  }
+  tbody {
+    > tr:last-child {
+      > td:nth-child(1) {
+        border: 1px solid #dbdbdb !important;
+        border-width: 0 0 1px !important;
+        padding: 0.5em 0.75em !important;
+        vertical-align: top !important;
+      }
+      > td:nth-child(2) {
+        border: 1px solid #dbdbdb !important;
+        border-width: 0 0 1px !important;
+        padding: 0.5em 0.75em !important;
+        vertical-align: top !important;
+      }
+    }
+  }
+  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;
-    align-items: center;
-    
-    > .column {
-        max-width: 70vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  > .column {
+    max-width: 70vw;
+  }
+
+  .contact-circle-option {
+    display: block;
+    max-width: 200px;
+
+    .contact-circle-wrapper {
+      display: block;
+      position: relative;
+      width: 60%;
+      padding-bottom: 60%;
+      height: 0;
+      margin: 0 auto;
+
+      .contact-circle-pulse {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        border: 1px solid $secondary;
+        margin: 0 auto;
+      }
+
+      .contact-circle {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background-color: $secondary;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0 auto;
+        color: $highlighted-text-colour;
+      }
     }
 
-    .contact-circle-option {
-        display: block;
-        max-width: 200px;
-
-        .contact-circle-wrapper {
-            display: block;
-            position: relative;
-            width: 60%;
-            padding-bottom: 60%;
-            height: 0;
-            margin: 0 auto;
-            
-            .contact-circle-pulse {
-                position: absolute;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                border-radius: 50%;
-                border: 1px solid $secondary;
-                margin: 0 auto;
-            }
-
-            .contact-circle {
-                position: absolute;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                border-radius: 50%;
-                background-color: $secondary;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin: 0 auto;
-                color: $highlighted-text-colour;
-            }
-        }
-
-        .contact-circle-wrapper:hover, .contact-circle-wrapper:focus {
-            
-            .grow { 
-                transition: all .2s ease-in-out;
-                -moz-transform: scale(1.2);
-                -webkit-transform: scale(1.2);
-                transform: scale(1.2);
-            }
-
-            
-        }
-
-        .contact-description {
-            display: block;
-            text-align: center;
-            margin-top: 20px;
-            color: $primary;
-        }
-
-        .contact-text-link {
-            color: $text;
-            border-bottom: 1px solid $secondary;
-            margin-top: 7px;
-            //font-size: 1.5em;
-        }
-
-        .contact-text-link:hover {
-            color: $secondary;
-        }
+    .contact-circle-wrapper:hover,
+    .contact-circle-wrapper:focus {
+      .grow {
+        transition: all 0.2s ease-in-out;
+        -moz-transform: scale(1.2);
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+      }
     }
 
+    .contact-description {
+      display: block;
+      text-align: center;
+      margin-top: 20px;
+      color: $primary;
+    }
+
+    .contact-text-link {
+      color: $text;
+      border-bottom: 1px solid $secondary;
+      margin-top: 7px;
+      //font-size: 1.5em;
+    }
+
+    .contact-text-link:hover {
+      color: $secondary;
+    }
+  }
 }
 
 #contact-info {
-    h1 {
-        margin-bottom: 0.3em;
-    }
+  h1 {
+    margin-bottom: 0.3em;
+  }
 
-    .is-divider {
-        margin-bottom: 0.7em;
-        margin-top: 0.7em;
-    }
+  .is-divider {
+    margin-bottom: 0.7em;
+    margin-top: 0.7em;
+  }
 
-    #contact-location-buttons {
-        width: 100%;
-        text-align: center;
-    }
+  #contact-location-buttons {
+    width: 100%;
+    text-align: center;
+  }
 
-    .button:hover, .button:focus {
-        border-color: $primary;
-    }
-}
\ No newline at end of file
+  .button:hover,
+  .button:focus {
+    border-color: $primary;
+  }
+}