improve index page design

- avoid overlapping in the header bar
- scale down the gopher image to save a bunch of kilobytes
- hide the ethereum logo on smaller screens
- fix indentation

index.html

@@ -60,6 +60,10 @@
       </div>
     </div>
 
+    <div class="container mascot-mobile">
+      <img src="./static/images/mascot.png" height="300px" />
+    </div>
+
     <div class="container marketing">
       <div class="row featurette">
         <div class="col-md-7">
@@ -67,20 +71,17 @@
           <p class="lead">Ethereum is a  decentralized platform that runs smart contracts, applications that run exactly as programmed without possibility of downtime, censorship, fraud or third party interference.</p>
           <p class="lead">See <a href="https://ethereum.org" target="_blank">our website</a> or <a href="http://ethdocs.org/en/latest/introduction/what-is-ethereum.html" target="_blank">read the docs</a> for more infos!</p>
         </div>
-        <div class="col-md-5">
+        <div class="col-md-5 hide-on-small-screen">
           <img class="featurette-image center-block" src="./static/images/ethereum.png" height="300px">
         </div>
       </div>
       <hr/>
       <div class="row featurette">
-        <div class="col-md-7 col-md-push-5">
+        <div class="col-md-7">
           <h2 class="featurette-heading">What is Go Ethereum?</h2>
           <p class="lead">Go Ethereum is one of the three original implementations (along with C++ and Python) of the Ethereum protocol. It is written in Go, fully open source and licensed under the GNU LGPL v3.</p>
           <p class="lead">See <a href="https://github.com/ethereum/go-ethereum" target="_blank">our repository</a> and <a href="./downloads">downloads section</a> for the code!</p>
         </div>
-        <div class="col-md-5 col-md-pull-7">
-          <img class="featurette-image center-block">
-        </div>
       </div>
       <hr/>
       <div class="row featurette">
@@ -89,9 +90,6 @@
           <p class="lead">Go Ethereum is available either as a standalone client called Geth that you can install on pretty much any operating system, or as a library that you can embed in your Go, Android or iOS projects.</p>
           <p class="lead">See our <a href="./install">installation guide</a> or our <a href="./downloads">developer guide</a> for details!</p>
         </div>
-        <div class="col-md-5">
-          <img class="featurette-image center-block">
-        </div>
       </div>
       <hr/>
       <footer>

static/styles/custom/home.css

@@ -1,48 +1,52 @@
 .jumbotron .mascot {
-  background-image: url('../../images/mascot.png');
   background-size: auto 300px;
   background-repeat: no-repeat;
-  background-position: 2.5% -30px;
+  background-position: 0 -30px;
-  height: 256px;
+  height: 280px;
-}
-
-.jumbotron h1, .jumbotron h2 {
-  text-shadow: -1px 0 #ecf0f1, 0 1px #ecf0f1, 1px 0 #ecf0f1, 0 -1px #ecf0f1;
 }
 
 .jumbotron h1 {
   font-size: 56px;
   font-weight: bold;
-  margin-top: 16px;
+  margin-top: 0;
   margin-bottom: 12px;
 }
 
 .jumbotron h2 {
-  margin-top: 12px;
   font-size: 28px;
+  max-width: 500px;
+  margin: auto;
 }
 
-.featurette-divider {
+.mascot-mobile {
-  margin: 80px 0;
+  text-align: center;
 }
 
-.featurette-heading {
+.hide-on-small-screen {
-  font-weight: 300;
+  display: none;
-  line-height: 1;
+}
-  letter-spacing: -1px;
+
+.featurette-divider {
+  margin: 80px 0;
 }
 
 @media (min-width: 768px) {
+  .jumbotron .mascot {
+    background-image: url('../../images/mascot.png');
+  }
+  .mascot-mobile {
+    display: none;
+  }
   .featurette-heading {
     font-size: 50px;
   }
 }
 
 @media (min-width: 992px) {
-  .featurette-heading {
-    margin-top: 80px;
-  }
   .featurette-image {
     margin-top: 30px;
   }
+  .hide-on-small-screen {
+    display: block;
+  }
 }