From e16e52915b1dc53b9c51fc08636523a23e277265 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 31 May 2017 00:36:57 +0100
Subject: [PATCH] more lipstick to the welcome page

---
 res/home.html            | 42 ++++++++++++----------------
 res/home/css/welcome.css | 60 +++++++++++++++++++++++++++++++---------
 2 files changed, 64 insertions(+), 38 deletions(-)

diff --git a/res/home.html b/res/home.html
index 4b3b3198b7..d199844312 100644
--- a/res/home.html
+++ b/res/home.html
@@ -1,13 +1,13 @@
 <link href="home/css/welcome.css" rel="stylesheet">
 <div style="display: none" class="mx_HomePage_container">
-    <div class="mx_HomePage_col">
+    <div class="mx_HomePage_col mx_HomePage_header">
         <a href="https://riot.im"><img src="home/images/logo.svg" class="mx_HomePage_logo"></a>
         <div>
             <h1>Welcome to Riot.im</h1>
             <h2>Decentralised, encrypted chat &amp; collaboration powered by <a href="https://matrix.org"><img width="79" height="34" style="padding-left: 1px;vertical-align: middle" src="home/images/matrix.svg"/></a></h2>
         </div>
     </div>
-    <div class="mx_HomePage_col">
+    <div class="mx_HomePage_col mx_HomePage_toprow">
         <div class="mx_HomePage_row">
             <div>
                 <h3>Search the room directory</h3>
@@ -33,9 +33,7 @@
         </div>
     </div>
 
-    <div class="mx_HomePage_row">
-        <h3>General discussion about Matrix</h3>
-    </div>
+    <h3>General discussion about Matrix</h3>
 
     <div class="mx_HomePage_row">
         <div class="mx_HomePage_room">
@@ -50,31 +48,27 @@
                 <img class="mx_HomePage_icon" src="home/rooms/riot.png">
                 <span class="mx_HomePage_name">Riot</span>
             </a>
-            <span class="mx_HomePage_desc">Chat about Riot/Web &amp; Desktop</span>
+            <span class="mx_HomePage_desc">Riot/Web &amp; Desktop chat</span>
         </div>
         <div class="mx_HomePage_room">
             <a href="#/room/#riot-ios:matrix.org">
                 <img class="mx_HomePage_icon" src="home/rooms/riot-ios.png">
-                <span class="mx_HomePage_name">#riot-ios :matrix.org</span>
+                <span class="mx_HomePage_name">#riot-ios</span>
             </a>
-            <span class="mx_HomePage_desc">Chat about Riot/iOS &amp; matrix-ios-sdk</span>
+            <span class="mx_HomePage_desc">Riot/iOS &amp; matrix-ios-sdk chat</span>
         </div>
         <div class="mx_HomePage_room">
             <a href="#/room/#riot-android:matrix.org">
                 <img class="mx_HomePage_icon" src="home/rooms/riot-android.png">
-                <span class="mx_HomePage_name">#riot-android :matrix.org</span>
+                <span class="mx_HomePage_name">#riot-android</span>
             </a>
-            <span class="mx_HomePage_desc">Chat about Riot/Android &amp; matrix-android-sdk</span>
+            <span class="mx_HomePage_desc">Riot/Android &amp; matrix-android-sdk chat</span>
         </div>
     </div>
 
-    <div class="mx_HomePage_row">
-        <h3>Matrix technical discussions</h3>
-    </div>
+    <h3>Matrix technical discussions</h3>
+    <h4>Running Matrix services</h4>
 
-    <div class="mx_HomePage_row">
-        <h4>Running Matrix services</h4>
-    </div>
     <div class="mx_HomePage_row">
         <div class="mx_HomePage_room">
             <a href="#/room/#synapse:matrix.org">
@@ -106,9 +100,8 @@
         </div>
     </div>
 
-    <div class="mx_HomePage_row">
-        <h4>Building services on Matrix</h4>
-    </div>
+    <h4>Building services on Matrix</h4>
+
     <div class="mx_HomePage_row">
         <div class="mx_HomePage_room">
             <a href="#/room/#matrix-dev:matrix.org">
@@ -154,26 +147,25 @@
         </div>
     </div>
 
-    <div class="mx_HomePage_row">
-        <h4>Contributing code to Matrix and Riot</h4>
-    </div>
+    <h4>Contributing code to Matrix and Riot</h4>
+
     <div class="mx_HomePage_row">
         <div class="mx_HomePage_room">
             <a href="#/room/#riot-dev:matrix.org">
                 <img class="mx_HomePage_icon" src="home/rooms/riot-dev.png">
-                <span class="mx_HomePage_name">#riot-dev:matrix.org</span>
+                <span class="mx_HomePage_name">#riot-dev</span>
             </a>
             <span class="mx_HomePage_desc">Dev chat for the Riot/Web dev team</span>
         </div>
         <div class="mx_HomePage_room">
             <a href="#/room/#dendrite-dev:matrix.org">
                 <img class="mx_HomePage_icon" src="home/rooms/dendrite-dev.png">
-                <span class="mx_HomePage_name">#dendrite-dev :matrix.org</span>
+                <span class="mx_HomePage_name">#dendrite-dev</span>
             </a>
             <span class="mx_HomePage_desc">Dev chat for the Dendrite dev team</span>
         </div>
         <div class="mx_HomePage_room">
-            <a href="#/room/#riotweb-translations.org">
+            <a href="#/room/#riotweb-translations:matrix.org">
                 <img class="mx_HomePage_icon" src="home/rooms/riot-translations.png">
                 <span class="mx_HomePage_name">Riot-Web Translations</span>
             </a>
diff --git a/res/home/css/welcome.css b/res/home/css/welcome.css
index 0d3c5a5ee8..3b840c0f46 100644
--- a/res/home/css/welcome.css
+++ b/res/home/css/welcome.css
@@ -1,6 +1,35 @@
+.mx_HomePage_header h1 {
+    margin-left: 0px;
+    margin-bottom: 0px;
+    margin-top: 20px;
+    margin-right: 20px;
+}
+
+.mx_HomePage_header h2 {
+    margin-left: 0px;
+    margin-top: 5px;
+    margin-bottom: 20px;
+    margin-right: 20px;
+}
+
+.mx_HomePage h3 {
+    margin-top: 30px;
+}
+
+.mx_HomePage_header {
+    border: 1px solid #76CFA6;
+    background-color: #eaf5f0;
+    border-radius: 5px;
+    color: #454545;
+    align-items: center;
+}
+
 .mx_HomePage_col {
     display: flex;
     flex-direction: row;
+}
+
+.mx_HomePage_toprow {
     flex-wrap: wrap;
 }
 
@@ -31,10 +60,15 @@
     width: 120px;
 }
 
+.mx_HomePage_toprow .mx_HomePage_room {
+    width: 64px;
+}
+
+
 .mx_HomePage_room .mx_HomePage_icon {
     border-radius: 50%;
-    width: 65px;
-    height: 65px;
+    width: 64px;
+    height: 64px;
 }
 
 .mx_HomePage_room .mx_HomePage_name {
@@ -48,12 +82,14 @@
 }
 
 .mx_HomePage_comment {
-    display: block;
-    margin-left: 140px;
-    vertical-align: top;
+    display: flex;
+    align-items: center;
+    margin-left: 100px;
+    min-height: 64px;
 }
 
-h3::after, h4::after {
+.mx_HomePage_container h3::after,
+.mx_HomePage_container h4::after {
     content: ":";
 }
 
@@ -62,11 +98,9 @@ h3::after, h4::after {
     margin: 20px;
 }
 
-.mx_HomePage_container h1 {
-    margin: 0px;
-    margin-top: 35px;
-}
-
-.mx_HomePage_container h2 {
-    margin-top: 5px;
+.mx_HomePage_container h1, 
+.mx_HomePage_container h2, 
+.mx_HomePage_container h3, 
+.mx_HomePage_container h4 {
+    font-weight: 600;
 }
\ No newline at end of file