CSS tweaks for mobile compatibility

css/style.css

@@ -191,6 +191,38 @@ a:focus {
     .intro .intro-body .intro-text {
         font-size: 26px;
     }
+
+    .hb-sm {
+      display: none;
+    }
+    .hb-xs {
+      display: block;
+    }
+    #logo_large, #logo_about {
+      display: none;
+    }
+    #logo_small {
+      display: block;
+    }
+}
+
+.hb-sm {
+  display: block;
+}
+.hb-xs {
+  display: none;
+}
+#logo_large, #logo_about {
+  display: block;
+}
+#logo_small {
+  display: none;
+}
+#logo_large, #logo_about {
+  display: none;
+}
+#logo_small {
+  display: block;
 }
 
 .btn-circle {
@@ -268,7 +300,7 @@ a:focus {
 }
 
 .content-section {
-    padding-top: 50px;
+    padding-top: 0px;
     text-align: center;
 }
 

index.html

@@ -57,26 +57,32 @@
           <div class="row">
             <div class="col-md-8 col-md-offset-2">
               <hr>
-              <h1 class="brand-heading"><img style="max-width: 512px;" src="img/logo.png"/></h1>
+              <h1 class="brand-heading" id="heading_large"><img style="max-width: 512px;" src="img/logo.png"/></h1>
+              <h1 class="brand-heading" id="heading_small"><img style="max-width: 512px;" src="img/e-w.png"/></h1>
               <hr>
               <ul class="list-inline">
                 <li>
                   <a href="mailto:enpaul@enpaul.net"><span class="hb hb-sm"><i class="fa fa-envelope-o"></i></span></a>
+                  <a href="mailto:enpaul@enpaul.net"><span class="hb hb-xs"><i class="fa fa-envelope-o"></i></span></a>
                 </li>
                 <li>
                   <a href="https://drive.enpaul.net/index.php/s/ffyHdMV0yljDIwr"><span class="hb hb-sm"><i class="fa fa-file-text-o"></i></span></a>
+                  <a href="https://drive.enpaul.net/index.php/s/ffyHdMV0yljDIwr"><span class="hb hb-xs"><i class="fa fa-file-text-o"></i></span></a>
                 </li>
                 <!--<li>
                   <a href="#"><span class="hb hb-sm"><i class="fa fa-facebook"></i></span></a>
                 </li>-->
               	<li>
                   <a href="https://twitter.com/theenpaul"><span class="hb hb-sm"><i class="fa fa-twitter"></i></span></a>
+                  <a href="https://twitter.com/theenpaul"><span class="hb hb-xs"><i class="fa fa-twitter"></i></span></a>
                 </li>
                 <li>
                   <a href="https://plus.google.com/+EthanPaul42"><span class="hb hb-sm"><i class="fa fa-google-plus"></i></span></a>
+                  <a href="https://plus.google.com/+EthanPaul42"><span class="hb hb-xs"><i class="fa fa-google-plus"></i></span></a>
                 </li>
                 <li>
                   <a href="https://www.linkedin.com/in/enpaul"><span class="hb hb-sm"><i class="fa fa-linkedin"></i></span></a>
+                  <a href="https://www.linkedin.com/in/enpaul"><span class="hb hb-xs"><i class="fa fa-linkedin"></i></span></a>
                 </li>
               </ul>
             </div>
@@ -90,7 +96,7 @@
       <div class="row">
         <div class="col-lg-8 col-lg-offset-2">
           <h2>About ENPaul</h2>
-          <img src="img\e-w.png" width="128">
+          <img id="logo_about" src="img\e-w.png" width="128">
           <p>
             ENPaul is a Mechanical Engineering student at <a href="https://wpi.edu">Worcester Polytechnic Institute</a> in Worcester Massachusets with way too much time on his hands. He works at <a href="http://www.wpi.edu/+netops">WPI Network Operations</a> and <a href="www.solidworks.com">3DS SolidWorks</a> and runs this website when he's bored. He is SolidWorks Professional Certified, and working on getting certified in AutoDesk AutoCAD and SolidWorks Simulation.
             <br><br>