From cbf7e05f665dce36d5a426c63e06f70d1ac4b57a Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Thu, 13 Apr 2017 08:03:31 -0700
Subject: [PATCH] Cleaned up CSS

---
 css/style.css   | 35 ++++++++++++++---------------------
 index.html      |  8 ++++----
 sass/style.scss | 36 +++++++++++++++++-------------------
 3 files changed, 35 insertions(+), 44 deletions(-)

diff --git a/css/style.css b/css/style.css
index dfd4bcd..797a4fe 100644
--- a/css/style.css
+++ b/css/style.css
@@ -3,6 +3,14 @@
   margin: 0;
   text-indent: 0; }
 
+.widthCenter, .slide div, .slide p,
+.slide h1,
+.slide h2,
+.slide h3,
+.slide h4 {
+  max-width: 800px;
+  margin: auto; }
+
 /*
  * Covers for projects section
  */
@@ -86,8 +94,6 @@ body {
   width: 100%;
   /* width wrapping */ }
   .slide div {
-    max-width: 800px;
-    margin: auto;
     /* Project bits */ }
     .slide div .project {
       width: 390px;
@@ -140,7 +146,8 @@ body {
               font-style: italic; }
             .slide div .project .details .award div p {
               font-size: .8em; }
-        .slide div .project .details .award::before {
+        .slide div .project .details .award::before,
+        .slide div .project .details .award::after {
           vertical-align: middle;
           background-image: url(../images/laurelleft.png);
           background-size: contain;
@@ -150,19 +157,12 @@ body {
           content: "";
           width: 1.6em;
           height: 3em;
-          position: relative;
+          position: relative; }
+        .slide div .project .details .award::before {
+          background-image: url(../images/laurelleft.png);
           left: .09em; }
         .slide div .project .details .award::after {
-          vertical-align: middle;
           background-image: url(../images/laurelright.png);
-          background-size: contain;
-          background-repeat: no-repeat;
-          background-position: center center;
-          display: inline-block;
-          content: "";
-          width: 1.6em;
-          height: 3em;
-          position: relative;
           right: .11em; }
   .slide table {
     line-height: 1.3;
@@ -174,18 +174,11 @@ body {
   .slide ul {
     margin: 5px; }
   .slide p {
-    text-indent: 2em;
-    max-width: 800px;
-    margin: auto; }
+    text-indent: 2em; }
   .slide h1 {
     font-size: 2em;
     font-style: italic;
-    max-width: 800px;
-    margin: auto;
     margin-top: 1.7em; }
-  .slide h4 {
-    max-width: 800px;
-    margin: auto; }
   @media (max-width: 800px) {
     .slide div .project {
       width: 90%;
diff --git a/index.html b/index.html
index ef19362..53e7f83 100644
--- a/index.html
+++ b/index.html
@@ -53,20 +53,20 @@
     </div>
     <div class="slide" style="margin-top:0px;">
         <h1>About Me <span style="font-size: .5em; font-weight:normal; color: #666;">(Why I rock)</span></h1>
-        <h4>A brief history of Chuck &amp; tech</h4>
+        <h3>A brief history of Chuck &amp; tech</h3>
         <p>When I was a child I was obsessed with trains and vacuum cleaners. In elementary school my grandma tried to teach me Photoshop. In seventh grade I started teaching myself HTML. Freshman year I started learning the basics of networking and BASH
             so I could run a Minecraft server on my sparkly new iMac. In the first half of high school I volunteered at Phoenix Children's Hospital and in the second half I taught robotics at The Waybright Academy. On top of that, I was active throughout
             the school as an officer of Firebird Robotics, the director of Firebird Word, a yearbook editor, and the design editor of Chaparral Ashes. I've been digging around in computers my whole life.</p>
-        <h4>My life today</h4>
+        <h3>My life today</h3>
         <p>I'm a Computer Science student and Hackathon winner at Arizona State University interested in the intersection of technology and art. I pride myself in taking a diverse set of interest and the resulting broad set of experiences. From editorial
             experience at the State Press to random open source contributions in my free time, I do a lot. Less formally, I moonlight as a freelance tech support, web designer, and occasionally pick up work as a photographer. Lately I've been spending
             a lot of time in JavaScript, but I've got a few interesting side projects on the back burner, including a SteamVR experiment. </p>
-        <h4>Bragging &amp; geeking out</h4>
+        <h3>Bragging &amp; geeking out</h3>
         <p>Here comes the stuff that I couldn't fit anywhere else. This summer I worked at a Starbucks to save up money to build a new PC and buy an HTC Vive to go with it. <a href="https://medium.com/chuckblog/my-computer-is-super-weird-66f50c04a9ed">My computer runs windows in a virtual machine on top of Slackware linux</a>,
             a setup that causes me unending headaches but is actually a lot of fun to tinker with when I'm not busy with school. I'm a proud Eagle scout. I like to toot my own horn. I once got so frustrated manually retyping text between command line
             systems that I built a cloud copy paste tool just for myself. </p>
         <div id="skilltable" style="display:none; ">
-            <h1 id="skills">Skills</h1>
+            <h2 id="skills">Skills</h2>
             <table>
                 <tr>
                     <td class="ld">The <span style="font-style:italic">Internet</span></td>
diff --git a/sass/style.scss b/sass/style.scss
index df2f2fd..1b67f20 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -10,6 +10,11 @@ $greybg: rgba(0, 0, 0, .5);
     text-indent: 0;
 }
 
+.widthCenter {
+    max-width: $width;
+    margin: auto;
+}
+
 
 /*
  * Covers for projects section
@@ -113,8 +118,7 @@ body {
     width: 100%;
     /* width wrapping */
     div {
-        max-width: $width;
-        margin: auto;
+        @extend .widthCenter;
         /* Project bits */
         .project {
             width: $width/2 - 10;
@@ -179,7 +183,8 @@ body {
                         }
                     }
                 }
-                .award::before {
+                .award::before,
+                .award::after {
                     vertical-align: middle;
                     background-image: url(../images/laurelleft.png);
                     background-size: contain;
@@ -189,20 +194,14 @@ body {
                     content: "";
                     width: 1.6em;
                     height: 3em;
-                    position: relative;
+                    position: relative
+                }
+                .award::before {
+                    background-image: url(../images/laurelleft.png);
                     left: .09em;
                 }
                 .award::after {
-                    vertical-align: middle;
                     background-image: url(../images/laurelright.png);
-                    background-size: contain;
-                    background-repeat: no-repeat;
-                    background-position: center center;
-                    display: inline-block;
-                    content: "";
-                    width: 1.6em;
-                    height: 3em;
-                    position: relative;
                     right: .11em;
                 }
             }
@@ -221,19 +220,18 @@ body {
     }
     p {
         text-indent: 2em;
-        max-width: $width;
-        margin: auto;
     }
     h1 {
         font-size: 2em;
         font-style: italic;
-        max-width: $width;
-        margin: auto;
         margin-top: 1.7em;
     }
+    p,
+    h1,
+    h2,
+    h3,
     h4 {
-        max-width: $width;
-        margin: auto;
+        @extend .widthCenter;
     }
     @include respond-to($width) {
         div {