Merge pull request #5 from fjl/index-page-2

[gh-pages] improve index page design

index.html

@@ -44,20 +44,18 @@
       </div>
     </nav>
 
-    <div class="jumbotron" style="padding-top: 16px; padding-bottom: 0;">
+    <div class="jumbotron">
       <div class="container mascot">
-        <div class="row">
+        <h1>Go Ethereum</h1>
-          <div class="col-lg-2">
-          </div>
-          <div class="col-lg-8" style="text-align: center">
-            <h1 style="padding-top: 32px;">Go Ethereum</h1>
         <h2>Official Go implementation of the Ethereum protocol</h2>
         <br/>
         <a href="https://github.com/ethereum/go-ethereum" target="_blank" class="btn btn-success" style="margin: 4px;"><i class="fa fa-github" aria-hidden="true"></i> View on GitHub</a>
         <a href="https://gitter.im/ethereum/go-ethereum" target="_blank" class="btn btn-success" style="margin: 4px;"><i class="fa fa-user-circle" aria-hidden="true"></i> Chat on Gitter</a>
       </div>
     </div>
-      </div>
+
+    <div class="container mascot-mobile">
+      <img src="./static/images/mascot.png" height="200px" />
     </div>
 
     <div class="container marketing">
@@ -67,7 +65,7 @@
           <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>
@@ -78,8 +76,8 @@
           <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">
+        <div class="col-md-5 col-md-pull-7 hide-on-small-screen">
-          <img class="featurette-image center-block">
+          <img class="featurette-image center-block" src="./static/images/mascot.png" height="300px">
         </div>
       </div>
       <hr/>
@@ -89,9 +87,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,47 +1,43 @@
-.jumbotron .mascot {
+.jumbotron {
-  background-image: url('../../images/mascot.png');
+  text-align: center;
-  background-size: auto 300px;
+  padding: 20pt 0;
-  background-repeat: no-repeat;
-  background-position: 2.5% -30px;
-  height: 256px;
-}
-
-.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;
 }
 
+.mascot-mobile {
+  text-align: center;
+}
+
+.hide-on-small-screen {
+  display: none;
+}
+
 .featurette-divider {
   margin: 80px 0;
 }
 
-.featurette-heading {
-  font-weight: 300;
-  line-height: 1;
-  letter-spacing: -1px;
-}
-
 @media (min-width: 768px) {
+  .mascot-mobile {
+    display: none;
+  }
+  .hide-on-small-screen {
+    display: block;
+  }
   .featurette-heading {
     font-size: 50px;
   }
 }
 
 @media (min-width: 992px) {
-  .featurette-heading {
-    margin-top: 80px;
-  }
   .featurette-image {
     margin-top: 30px;
   }