Make better use of mixins and extending for responsiveness

- uses textElement() to group together p,h1...h4
- Turns out if you extend a class then say change the class in a media breakpoint it will apply the media queried properties to everything that extends the original class.

css/style.css

@@ -180,19 +180,20 @@ body {
     font-style: italic;
     margin-top: 1.7em; }
   @media (max-width: 800px) {
+    .slide .widthCenter, .slide div, .slide p, .slide h1, .slide h2, .slide h3, .slide h4 {
+      margin-left: 12px;
+      margin-right: 12px; }
     .slide div .project {
       width: 90%;
       float: none;
       display: block;
-      margin: 0 0 .5em 5%; }
+      margin: 0 0 .5em 5%; } }
-    .slide table,
+
-    .slide p,
+#skilltablebutton {
-    .slide h1,
+  text-decoration: underline;
-    .slide h2,
+  font-size: 1.1em;
-    .slide h4,
+  font-style: italic;
-    .slide a {
+  font-weight: normal; }
-      margin-right: .8em;
-      margin-left: .8em; } }
 
 @media (max-width: 800px) {
   #mast {

index.html

@@ -123,7 +123,7 @@
                 </tr>
             </table>
         </div>
-        <div><a id="skilltablebutton" style="text-decoration: underline; font-size: 1.1em; font-style: italic; font-weight: normal;" onclick="toggleSkillTable()">More about me</a>
+        <div><a id="skilltablebutton" style="" onclick="toggleSkillTable()">More about me</a>
         </div>
     </div>
     <div class="slide">

sass/responsive.scss

@@ -3,3 +3,14 @@
         @content;
     }
 }
+
+@mixin textElements() {
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    {
+        @content;
+    }
+}

sass/style.scss

@@ -226,14 +226,14 @@ body {
         font-style: italic;
         margin-top: 1.7em;
     }
-    p,
+    @include textElements() {
-    h1,
-    h2,
-    h3,
-    h4 {
         @extend .widthCenter;
     }
     @include respond-to($width) {
+        .widthCenter {
+            margin-left: 12px;
+            margin-right: 12px;
+        }
         div {
             // margin: auto;
             // padding: 0;
@@ -245,18 +245,20 @@ body {
                 ;
             }
         }
-        table,
+        @include textElements() {
-        p,
+            // margin-right: .8em;
-        h1,
+            // margin-left: .8em;
-        h2,
-        h4,
-        a {
-            margin-right: .8em;
-            margin-left: .8em;
         }
     }
 }
 
+#skilltablebutton {
+    text-decoration: underline;
+    font-size: 1.1em;
+    font-style: italic;
+    font-weight: normal;
+}
+
 @include respond-to($width) {
     #mast {
         padding-left: 1em;