From 03fcaba1d69cc5a01d21cb416f6350952c9483ec Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Thu, 13 Apr 2017 08:16:49 -0700
Subject: [PATCH] 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        | 19 ++++++++++---------
 index.html           |  2 +-
 sass/responsive.scss | 11 +++++++++++
 sass/style.scss      | 28 +++++++++++++++-------------
 4 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/css/style.css b/css/style.css
index 797a4fe..cd3fca3 100644
--- a/css/style.css
+++ b/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%; }
-    .slide table,
-    .slide p,
-    .slide h1,
-    .slide h2,
-    .slide h4,
-    .slide a {
-      margin-right: .8em;
-      margin-left: .8em; } }
+      margin: 0 0 .5em 5%; } }
+
+#skilltablebutton {
+  text-decoration: underline;
+  font-size: 1.1em;
+  font-style: italic;
+  font-weight: normal; }
 
 @media (max-width: 800px) {
   #mast {
diff --git a/index.html b/index.html
index 53e7f83..a893c8c 100644
--- a/index.html
+++ b/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">
diff --git a/sass/responsive.scss b/sass/responsive.scss
index e5446f9..da5175a 100644
--- a/sass/responsive.scss
+++ b/sass/responsive.scss
@@ -2,4 +2,15 @@
     @media (max-width: $width) {
         @content;
     }
+}
+
+@mixin textElements() {
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    {
+        @content;
+    }
 }
\ No newline at end of file
diff --git a/sass/style.scss b/sass/style.scss
index 1b67f20..8378b69 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -226,14 +226,14 @@ body {
         font-style: italic;
         margin-top: 1.7em;
     }
-    p,
-    h1,
-    h2,
-    h3,
-    h4 {
+    @include textElements() {
         @extend .widthCenter;
     }
     @include respond-to($width) {
+        .widthCenter {
+            margin-left: 12px;
+            margin-right: 12px;
+        }
         div {
             // margin: auto;
             // padding: 0;
@@ -245,18 +245,20 @@ body {
                 ;
             }
         }
-        table,
-        p,
-        h1,
-        h2,
-        h4,
-        a {
-            margin-right: .8em;
-            margin-left: .8em;
+        @include textElements() {
+            // 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;