Adjust welcome layout to match new design

res/welcome.html

@@ -28,6 +28,45 @@ h1::after {
     align-items: center;
     text-align: center;
     padding: 25px 35px;
+    color: #2e2f32;
+}
+
+.mx_Logo {
+    height: 54px;
+    margin-top: 2px;
+}
+
+.mx_ButtonGroup {
+    margin-top: 10px;
+}
+
+.mx_ButtonRow {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-justify-content: space-around;
+    -ms-flex-pack: distribute;
+    justify-content: space-around;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    margin: 12px 0 0;
+}
+
+.mx_ButtonRow > * {
+    margin: 0 10px;
+}
+
+.mx_ButtonRow > *:first-child {
+    margin-left: 0;
+}
+
+.mx_ButtonRow > *:last-child {
+    margin-right: 0;
 }
 
 .mx_ButtonParent {
@@ -57,25 +96,6 @@ h1::after {
     color: #2e2f32 !important;
 }
 
-.mx_ButtonRow {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    width: 480px;
-    -webkit-justify-content: space-around;
-    -ms-flex-pack: distribute;
-    justify-content: space-around;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 40px;
-    box-sizing: border-box;
-    margin: 28px 0;
-}
-
 .mx_ButtonHeadline {
     margin-bottom: 14px;
 }
@@ -89,16 +109,16 @@ h1::after {
     margin-bottom: 10px;
 }
 
-.mx_Header2 {
+.mx_Header_title {
-    font-size: 32px;
+    font-size: 24px;
     font-weight: 600;
-    margin-top: 40px;
+    margin: 20px 0 0;
 }
 
-.mx_Header22 {
+.mx_Header_subtitle {
-    font-size: 14px;
+    font-size: 12px;
-    font-weight: 200;
+    font-weight: normal;
-    margin-bottom: 40px;
+    margin: 8px 0 0;
 }
 
 .mx_ButtonSignIn {
@@ -133,10 +153,11 @@ h1::after {
 
 <div class="mx_Parent">
     <a href="https://riot.im" target="_blank" rel="noopener">
-        <img src="welcome/images/logo.svg" alt="" class="mx_logo"/>
+        <img src="welcome/images/logo.svg" alt="" class="mx_Logo"/>
     </a>
-    <h1 class="mx_Header2">_t("Welcome to Riot.im")</h1>
+    <h1 class="mx_Header_title">_t("Welcome to Riot.im")</h1>
-    <h4 class="mx_Header22">_t("Decentralised, encrypted chat &amp; collaboration powered by [matrix]")</h4>
+    <h4 class="mx_Header_subtitle">_t("Decentralised, encrypted chat &amp; collaboration powered by [matrix]")</h4>
+    <div class="mx_ButtonGroup">
         <div class="mx_ButtonRow">
             <a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">
                 <div class="mx_ButtonLabel">_t("Sign In")</div>
@@ -160,3 +181,4 @@ h1::after {
             </div>
         </div>
     </div>
+</div>