Changes to the head and content block

Gemfile.lock

@@ -86,7 +86,7 @@ DEPENDENCIES
   therubyracer
 
 RUBY VERSION
-   ruby 2.4.2p198
+   ruby 2.4.1p111
 
 BUNDLED WITH
-   1.15.4
+   1.16.1

_sass/screen.scss

@@ -6,7 +6,7 @@ http://opensource.org/licenses/MIT.
 /*Styles for HTML tags*/
 
 body{
-    font-family:"Helvetica Neue", "Helvetica", Arial, sans-serif;
+    font-family:"Titillium Web", Arial, sans-serif;
     font-size:16px;
     margin:0;
     padding:0;
@@ -14,15 +14,14 @@ body{
     background-color:#f7f7f7;
 }
 h1{
-    font-family:'Ubuntu', sans-serif;
-    font-weight:700;
-    color:#0d579b;
-    font-size:160%;
-    margin-top:0;
+    font-weight:400;
+    color: #FFFFFF;
+    font-size:250%;
+    margin:0 0 20px;
     text-align:center;
+    line-height: 65px;
 }
 h2{
-    font-family:'Ubuntu', sans-serif;
     font-weight:700;
     color:#383838;
     font-size:130%;
@@ -105,6 +104,48 @@ table td,table th{
 
 /*Styles for whole website*/
 
+@font-face {
+    font-family: 'Titillium Web';
+    src: url('/font/titillium/TitilliumWeb-Regular.eot');
+    src: url('/font/titillium/TitilliumWeb-Regular.eot?#iefix') format('embedded-opentype'), url('/font/titilliumTitilliumWeb-Regular.woff2') format('woff2'), url('/font/titillium/TitilliumWeb-Regular.woff') format('woff'), url('TitilliumWeb-Regular.ttf') format('truetype'), url('/font/titillium/TitilliumWeb-Regular.svg#TitilliumWeb-Regular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Titillium Web';
+    src: url('/font/titillium/TitilliumWeb-SemiBold.eot');
+    src: url('/font/titillium/TitilliumWeb-SemiBold.eot?#iefix') format('embedded-opentype'),
+        url('/font/titillium/TitilliumWeb-SemiBold.woff2') format('woff2'),
+        url('/font/titillium/TitilliumWeb-SemiBold.woff') format('woff'),
+        url('/font/titillium/TitilliumWeb-SemiBold.ttf') format('truetype'),
+        url('/font/titillium/TitilliumWeb-SemiBold.svg#TitilliumWeb-SemiBold') format('svg');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Titillium Web';
+    src: url('/font/titillium/TitilliumWeb-Bold.eot');
+    src: url('/font/titillium/TitilliumWeb-Bold.eot?#iefix') format('embedded-opentype'),
+        url('/font/titillium/TitilliumWeb-Bold.woff2') format('woff2'),
+        url('/font/titillium/TitilliumWeb-Bold.woff') format('woff'),
+        url('/font/titillium/TitilliumWeb-Bold.ttf') format('truetype'),
+        url('/font/titillium/TitilliumWeb-Bold.svg#TitilliumWeb-Bold') format('svg');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Titillium Web';
+    src: url('/font/titillium/TitilliumWeb-Italic.eot');
+    src: url('/font/titillium/TitilliumWeb-Italic.eot?#iefix') format('embedded-opentype'),
+        url('/font/titillium/TitilliumWeb-Italic.woff2') format('woff2'),
+        url('/font/titillium/TitilliumWeb-Italic.woff') format('woff'),
+        url('/font/titillium/TitilliumWeb-Italic.ttf') format('truetype'),
+        url('/font/titillium/TitilliumWeb-Italic.svg#TitilliumWeb-Italic') format('svg');
+    font-weight: normal;
+    font-style: italic;
+}
 @font-face{
     font-family:'Ubuntu';
     src:url('/font/ubuntu/ubuntu-r-webfont.eot');
@@ -145,7 +186,10 @@ table td,table th{
     font-weight:700;
     font-style:italic;
 }
-
+.container {
+    max-width: 1170px;
+    margin: 0 auto
+}
 .banner-message,
 .banner-message a,
 .banner-message a:link,
@@ -191,7 +235,8 @@ table td,table th{
 }
 
 .head{
-    margin:30px 0 30px 0;
+    padding: 15px 0;
+    background: #ffffff;
 }
 .head div{
     width:940px;
@@ -200,8 +245,6 @@ table td,table th{
     z-index:100;
 }
 .body{
-    width:940px;
-    margin:auto;
     position:relative;
 }
 
@@ -220,7 +263,7 @@ table td,table th{
 .lang{
     position:absolute;
     right:5px;
-    top:8px;
+    top:0;
     border-left:2px solid transparent;
     border-right:2px solid transparent;
     border-top:2px solid transparent;
@@ -288,8 +331,11 @@ table td,table th{
 .logo{
     display:block;
     margin-left:40px;
-    width:191px;
-    height:40px;
+}
+
+.logo img {
+    width:132px;
+    height:29px;
 }
 
 .menumobile{
@@ -299,7 +345,7 @@ table td,table th{
 .menusimple{
     margin:0;
     position:absolute;
-    top:8px;
+    top:0;
     left:245px;
     padding:0;
     height:35px;
@@ -318,17 +364,17 @@ table td,table th{
 .menusimple>li a:active,
 .menusimple>li a:visited,
 .menusimple>li a:link{
-    color:#2c6fad;
+    color: #13161F;
 }
 .menusimple>li a{
-    cursor:pointer;
-    font-family:'Ubuntu', sans-serif;
-    font-weight:300;
-    font-size:110%;
+    padding:6px 10px 4px 10px;
+    font-family:'Titillium Web', sans-serif;
+    font-weight:400;
+    font-size:93.75%;
     display:block;
     text-decoration:none;
-    padding:6px 10px 4px 10px;
     white-space:nowrap;
+    cursor:pointer;
 }
 .menusimple>li ul{
     display:none;
@@ -353,13 +399,13 @@ table td,table th{
     margin:1px 0;
     padding:6px 10px 3px 10px;
 }
-.menusimple li:hover,
-.menusimple li.active{
-    background-color:#2c6fad;
-}
+// .menusimple li:hover,
+// .menusimple li.active{
+//     background-color:#090C14;
+// }
 .menusimple li:hover>a,
 .menusimple li.active>a{
-    color:#fff;
+    color: #FF7E00;
 }
 .menusimple li:hover>ul{
     display:block;
@@ -387,15 +433,10 @@ table td,table th{
 }
 .content{
     position:relative;
-    padding:30px 40px 40px 40px;
-    margin:0 5px;
+    padding:0 0 40px;
     text-align:justify;
     background-color:#fff;
     min-height:400px;
-    border:2px solid #ebebeb;
-    -webkit-border-radius:6px;
-    -moz-border-radius:6px;
-    border-radius:6px;
 }
 .content p,
 .content li,
@@ -406,7 +447,10 @@ table td,table th{
 h1 span.fa, h2 span.fa, h3 span.fa, h4 span.fa, h5 span.fa, h6 span.fa {
     margin-right: 10px;
 }
-
+.hero {
+    padding: 120px 0 173px;
+    background: #13161F;
+}
 .footer{
     text-align:center;
     width:940px;
@@ -589,76 +633,72 @@ h1 span.fa, h2 span.fa, h3 span.fa, h4 span.fa, h5 span.fa, h6 span.fa {
 }
 
 .starttitle{
+    margin:70px 0 50px;
+    color: #FF7E00;
     text-align:center;
+    line-height: 65px;
 }
 .starttitle span{
-    padding:10px;
-    border-bottom:1px solid #E2E2E2;
-    font-size:155%;
-    margin:20px auto;
-    display:inline-block;
-}
-.start{
-    text-align:left;
-}
-.start div{
-    position:relative;
+    font-size:162%;
 }
+// .start div{
+//     position:relative;
+// }
 .start>div:first-child+div{
-    border-top:1px solid #e0e0e0;
+    // border-top:1px solid #e0e0e0;
 }
 .start div div{
-    display:inline-block;
-    width:380px;
-    vertical-align:top;
-    padding-bottom:70px;
+    // display:inline-block;
+    // width:380px;
+    // vertical-align:top;
+    // padding-bottom:70px;
     position:static;
 }
 .start>div>div:first-child{
     padding-right:40px;
-    border-right:1px solid #e0e0e0;
 }
 .start>div>div:first-child+div{
-    padding-left:40px;
-    border-left:1px solid #e0e0e0;
-    margin-left:-1px;
+    // padding-left:40px;
+    // margin-left:-1px;
 }
 .start div div div a,
 .start div div div a:link,
 .start div div div a:active,
 .start div div div a:visited{
     display:inline-block;
-    padding:6px 12px;
-    font-size:115%;
+    padding:20px 30px;
+    font-size:100%;
+    font-weight: 600;
+    text-transform: uppercase;
     color:#fff;
-    border:1px solid #d57700;
-    background-color:#ee9209;
-    background-image:-o-linear-gradient(bottom, #e28700 14%, #ee9209 70%);
-    background-image:-moz-linear-gradient(bottom, #e28700 14%, #ee9209 70%);
-    background-image:-webkit-linear-gradient(bottom, #e28700 14%, #ee9209 70%);
-    background-image:-ms-linear-gradient(bottom, #e28700 14%, #ee9209 70%);
-    background-image:linear-gradient(bottom, #e28700 14%, #ee9209 70%);
+    background: #F7931A;
     -webkit-border-radius:3px;
     -moz-border-radius:3px;
-    border-radius:3px;
+    border-radius:1px;
 }
 .start div div div a:hover{
     background-image:none;
     color:#fff;
 }
-.start h2{
-    color:#0d579b;
+.start h2 {
+    margin: 0 0 20px;
+    font-size: 137.5%;
+    font-weight: 400;
+    line-height: 1.6;
+    color: #13161F;
 }
-.start h2 span{
-    font-size:200%;
-    color:#ee9209;
+.start p {
+    margin: 0;
+    font-size: 125%;
+    line-height: 1.7;
+    color: #4D5060;
 }
 .start div div div{
     display:block;
     width:auto;
     padding-bottom:0;
-    position:absolute;
-    bottom:35px;
+    // position:absolute;
+    // bottom:35px;
 }
 .starttitle a{
     margin:0 20px auto;
@@ -1769,7 +1809,7 @@ h2 .rssicon{
 
 .summary{
     font-size:125%;
-    margin-bottom:40px;
+    margin:0;
     text-align:center;
 }
 .summarytxt{

_templates/getting-started.html

@@ -5,60 +5,97 @@
 layout: base
 id: getting-started
 ---
-<h1>{% translate pagetitle %}</h1>
-
-<p class="summary">{% translate pagedesc %}</p>
-
-<div class="starttitle"><span>{% translate users %}</span></div>
-
-<div class="start">
-<div>
-  <div>
-    <h2 id="inform"><span>1.</span> {% translate inform %}</h2>
-    <p>{% translate informtxt %}</p>
-    <div><a href="/{{ page.lang }}/{% translate you-need-to-know url %}">{% translate informbut %}</a></div>
-  </div><div>
-    <h2 id="choose"><span>2.</span> {% translate choose %}</h2>
-    <p>{% translate choosetxt %}</p>
-    <div><a href="/{{ page.lang }}/{% translate choose-your-wallet url %}">{% translate choosebut %}</a></div>
-  </div>
-  </div>
-  <div>
-  <div>
-    <h2 id="get"><span>3.</span> {% translate get %}</h2>
-    <p>{% translate gettxt %}</p>
-    <div><a href="/en/buy">{% translate getbut %}</a></div>
-  </div><div>
-    <h2 id="spend"><span>4.</span> {% translate spend %}</h2>
-    <p>{% translate spendtxt %}</p>
-    <div><a href="/en/spend-bitcoin">{% translate spendbut %}</a></div>
+<div class="hero">
+  <div class="container">
+    <h1>{% translate pagetitle %}</h1>
+  <p class="summary">{% translate pagedesc %}</p>
   </div>
 </div>
-</div>
 
-<div class="starttitle"><span>{% translate merchants %}</span></div>
-
-<div class="start">
-<div>
-  <div>
-    <h2 id="merchantinform"><span>1.</span> {% translate merchantinform %}</h2>
-    <p>{% translate merchantinformtxt %}</p>
-    <div><a href="/{{ page.lang }}/{% translate you-need-to-know url %}">{% translate merchantinformbut %}</a></div>
-  </div><div>
-    <h2 id="merchantservice"><span>2.</span> {% translate merchantservice %}</h2>
-    <p>{% translate merchantservicetxt %}</p>
-    <div><a href="https://en.bitcoin.it/wiki/How_to_accept_Bitcoin,_for_small_businesses#Merchant_Services">{% translate merchantservicebut %}</a></div>
+<div class="container">
+  <div class="starttitle">
+    <span>{% translate users %}</span>
   </div>
+  
+  <div class="start">
+    <div>
+      <div>
+        <h2 id="inform">
+          {% translate inform %}</h2>
+        <p>{% translate informtxt %}</p>
+        <div>
+          <a href="/{{ page.lang }}/{% translate you-need-to-know url %}">{% translate informbut %}</a>
+        </div>
+      </div>
+      <div>
+        <h2 id="choose">
+          {% translate choose %}</h2>
+        <p>{% translate choosetxt %}</p>
+        <div>
+          <a href="/{{ page.lang }}/{% translate choose-your-wallet url %}">{% translate choosebut %}</a>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div>
+        <h2 id="get">
+          {% translate get %}</h2>
+        <p>{% translate gettxt %}</p>
+        <div>
+          <a href="/en/buy">{% translate getbut %}</a>
+        </div>
+      </div>
+      <div>
+        <h2 id="spend">
+          {% translate spend %}</h2>
+        <p>{% translate spendtxt %}</p>
+        <div>
+          <a href="/en/spend-bitcoin">{% translate spendbut %}</a>
+        </div>
+      </div>
+    </div>
   </div>
-  <div>
-  <div>
-    <h2 id="tax"><span>3.</span> {% translate tax %}</h2>
-    <p>{% translate taxtxt %}</p>
-    <div><a href="https://en.bitcoin.it/wiki/How_to_accept_Bitcoin,_for_small_businesses#Setting_Prices">{% translate taxbut %}</a></div>
-  </div><div>
-    <h2 id="visibility"><span>4.</span> {% translate visibility %}</h2>
-    <p>{% translate visibilitytxt %}</p>
-    <div><a href="/en/spend-bitcoin">{% translate visibilitybut %}</a></div>
+  
+  <div class="starttitle">
+    <span>{% translate merchants %}</span>
+  </div>
+  
+  <div class="start">
+    <div>
+      <div>
+        <h2 id="merchantinform">
+          {% translate merchantinform %}</h2>
+        <p>{% translate merchantinformtxt %}</p>
+        <div>
+          <a href="/{{ page.lang }}/{% translate you-need-to-know url %}">{% translate merchantinformbut %}</a>
+        </div>
+      </div>
+      <div>
+        <h2 id="merchantservice">
+          {% translate merchantservice %}</h2>
+        <p>{% translate merchantservicetxt %}</p>
+        <div>
+          <a href="https://en.bitcoin.it/wiki/How_to_accept_Bitcoin,_for_small_businesses#Merchant_Services">{% translate merchantservicebut %}</a>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div>
+        <h2 id="tax">
+          {% translate tax %}</h2>
+        <p>{% translate taxtxt %}</p>
+        <div>
+          <a href="https://en.bitcoin.it/wiki/How_to_accept_Bitcoin,_for_small_businesses#Setting_Prices">{% translate taxbut %}</a>
+        </div>
+      </div>
+      <div>
+        <h2 id="visibility">
+          {% translate visibility %}</h2>
+        <p>{% translate visibilitytxt %}</p>
+        <div>
+          <a href="/en/spend-bitcoin">{% translate visibilitybut %}</a>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
-</div>