From a1ca025bedbd23302b23f868ffd7309da5e3cfd9 Mon Sep 17 00:00:00 2001
From: lukasmartinelli <me@lukasmartinelli.ch>
Date: Sat, 26 Mar 2016 15:08:37 +0100
Subject: [PATCH] Improve design on mobile and marketing text

---
 _sass/_custom.scss  | 26 +++++++++++++++++++-------
 _sass/_helpers.scss |  7 +++++++
 index.html          | 17 ++++++++---------
 3 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/_sass/_custom.scss b/_sass/_custom.scss
index c0284a2..0e29974 100644
--- a/_sass/_custom.scss
+++ b/_sass/_custom.scss
@@ -46,6 +46,7 @@ body{
   height: 270px;
   border-top: 4px solid #2571a2;
   border-bottom: 1px solid #439595;
+
   h1{
     margin: 100px 0 0 0;
     font-size: 45px;
@@ -86,14 +87,17 @@ body{
 @media(max-width: 841px){
   .banner{
 
-    h1{font-size: 30px;}
+    h1{
+      font-size: 30px;
+      margin-top: 50px;
+    }
 
     &.home{
-      height: 460px;
+      height: 400px;
 
       img{
         margin-left: -205px;
-        top: 302px;
+        top: 242px;
         width: 410px;
         height: 196px;
       }
@@ -108,23 +112,31 @@ body{
 }
 
 @media(max-width: 451px){
-
-  body.home{ 
+  body.home{
     h1{
       font-size: 24px;
     }
   }
   .banner{
     &.home{
+      height: 350px;
 
       img{
         margin-left: -151px;
-        top: 337px;
+        top: 227px;
         width: 320px;
         height: 153px;
       }
     }
   }
+  .container-branding {
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+  .title-branding {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 }
 
 #searchField {
@@ -132,4 +144,4 @@ body{
   line-height: 2.5em;
   padding: 0 8px;
   font-size: 1em;
-}
\ No newline at end of file
+}
diff --git a/_sass/_helpers.scss b/_sass/_helpers.scss
index 5660089..eea24f0 100644
--- a/_sass/_helpers.scss
+++ b/_sass/_helpers.scss
@@ -217,3 +217,10 @@ center, .center, .text-center{text-align: center;}
     font-style: italic;
   }
 }
+
+.readable {
+    text-align: center;
+    max-width: 40em;
+    margin-left: auto;
+    margin-right: auto;
+}
diff --git a/index.html b/index.html
index 050984e..f5df4e3 100644
--- a/index.html
+++ b/index.html
@@ -15,15 +15,14 @@ published: true
 
 <div class="row bg-gray-light">
   <div class="col12">
-    <div class="container center padt-5 padb-6">
-      <h1 class="pady-4"><span class="font-primary">OSM2</span>VECTORTILES</h1>
-      <p class="big">Create a custom base map in minutes with our free vector tiles
-        from <a href="http://openstreetmap.org">OpenStreetMap</a> data.
-        Easiest way how to switch to OSM thanks to
-        <a href="https://github.com/mapbox" target="_blank">MapBox</a> open-source tools.
-        Design your own map of world or country, serve raster or vector 
-        tiles from any virtual server or your own infrastructure, even 
-        offline behind a firewall.
+    <div class="container container-branding center padt-5 padb-6">
+      <h1 class="pady-4 title-branding"><span class="font-primary">OSM2</span>VECTORTILES</h1>
+        <p class="big readable">
+        Create beautiful and fast maps for web and mobile applications
+        with free downloadable vector tiles from <a href="http://openstreetmap.org">OpenStreetMap</a>.
+        Design your own map, serve raster or vector tiles from your own infrastructure or use it completely
+        offline.<br/>
+        </p>
     </div>
   </div>
 </div>