WIP home updates

res/home.html

@@ -4,289 +4,190 @@
  * voodoo where we have to set display: none by default
  */
 
-.mx_HomePage_header h1 {
-    margin-left: 0px;
-    margin-bottom: 0px;
-    margin-top: 20px;
-    margin-right: 20px;
-    color: #454545;
+h1::after {
+    content: "!";
 }
 
-.mx_HomePage_header h2 {
-    margin-left: 0px;
-    margin-top: 5px;
-    margin-bottom: 20px;
-    margin-right: 20px;
-    color: #454545;
+.mx_Parent {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  margin-top: 100px;
 }
 
-.mx_HomePage_header h1 a {
-    color: #454545;
+.mx_Well {
+  display: block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 10px;
+  background-color: #F2F5F8;
 }
 
-.mx_HomePage h3 {
-    margin-top: 30px;
+.mx_ButtonParent {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 10px 20px;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 10px;
+  width: 140px;
 }
 
-.mx_HomePage_header {
-    border: 1px solid #76CFA6;
-    background-color: #eaf5f0;
-    border-radius: 5px;
-    align-items: center;
+.mx_ButtonRow {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 600px;
+  height: 120px;
+  -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;
 }
 
-.mx_HomePage_col {
-    display: flex;
-    flex-direction: row;
+.mx_buttonheadline {
+  margin-bottom: 14px;
 }
 
-.mx_HomePage_toprow {
-    flex-wrap: wrap;
+.mx_buttonicon {
+  width: 40px;
 }
 
-.mx_HomePage_row {
-    flex: 1 1 0;
-    margin-right: 20px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+.mx_buttonlabel {
+  margin-left: 20px;
 }
 
-.mx_HomePage_logo {
-    margin-top: 20px;
-    margin-left: 40px;
-    margin-right: 40px;
-    margin-bottom: 20px;
-    display: inline;
-    height: 100px;
+.mx_buttonwrappertext {
+  margin-bottom: 10px;
 }
 
-.mx_HomePage_room {
-    cursor: pointer;
-    float: left;
-    text-decoration: none;
-    text-align: center;
-    padding-left: 10px;
-    padding-right: 10px;
-    width: 120px;
+.mx_Header2 {
+  font-size: 32px;
+  font-weight: 400;
+  margin-top: 40px;
 }
 
-.mx_HomePage_toprow .mx_HomePage_room {
-    width: 64px;
+.mx_Header22 {
+  font-size: 14px;
+  font-weight: 200;
+  margin-bottom: 40px;
 }
 
-
-.mx_HomePage_room .mx_HomePage_icon {
-    border-radius: 50%;
-    width: 64px;
-    height: 64px;
+.mx_ButtonSignIn {
+  background: #368BD6;
+  color: white;
 }
 
-.mx_HomePage_room .mx_HomePage_name {
-    display: block;
+.mx_ButtonCreateAccount {
+  background: #03B381;
+  color: white;
 }
 
-.mx_HomePage_room .mx_HomePage_desc {
-    display: block;
-    font-size: 12px;
-    margin-top: 8px;
+.mx_secondarybutton {
+  background: #FFFFFF;
+  color: #2E2F32;
 }
 
-.mx_HomePage_comment {
-    display: flex;
-    align-items: center;
-    margin-left: 100px;
-    min-height: 64px;
-}
-
-.mx_HomePage_container h3::after,
-.mx_HomePage_container h4::after {
-    content: ":";
-}
-
-.mx_HomePage_container {
-    display: block ! important;
-    margin: 20px;
-}
-
-.mx_HomePage_container h1, 
-.mx_HomePage_container h2, 
-.mx_HomePage_container h3, 
-.mx_HomePage_container h4 {
-    font-weight: 600;
-}
 </style>
 
-<div class="mx_HomePage_container">
-    <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>_t("Welcome to Riot.im")</h1>
-            <h2>_t("Decentralised, encrypted chat &amp; collaboration powered by [matrix]")</h2>
-        </div>
-    </div>
-    <div class="mx_HomePage_col mx_HomePage_toprow">
-        <div class="mx_HomePage_row">
-            <div>
-                <h3>_t("Search the room directory")</h3>
-                <a class="mx_HomePage_room" href="#/directory">
-                    <img class="mx_HomePage_icon" src="home/images/icons-directory.svg">
-                </a>
-                <span class="mx_HomePage_comment">
-                    _t("Lots of rooms already exist in Matrix, linked to existing networks (Slack, IRC, Gitter etc) or independent. Check out the directory!")
-                 </span>
+<div class="mx_Parent">
+    <a href="https://riot.im">
+        <img src="home/images/logo.svg" alt="" class="mx_logo"/>
+    </a>
+    <h1 class="mx_Header2">_t("Welcome to Riot.im")</h1>
+    <h4 class="mx_Header22">_t("Decentralised, encrypted chat &amp; collaboration powered by [matrix]")</h4>
+    <div class="mx_Well">
+        <div class="mx_ButtonRow">
+            <div class="mx_ButtonParent mx_ButtonSignIn">
+                <img src="home/images/icon-sign-in.svg" alt="" class="mx_buttonicon"/>
+                <div class="mx_buttonlabel">Sign In</div>
+            </div>
+            <div class="mx_ButtonParent mx_ButtonCreateAccount">
+                <img src="home/images/icon-create-account.svg" alt="" class="mx_buttonicon"/>
+                <div class="mx_buttonlabel">Create Account</div>
             </div>
         </div>
-        <div class="mx_HomePage_row">
-            <div>
-                <h3>_t("Chat with Riot Bot")</h3>
-                <a class="mx_HomePage_room" href="#/user/@riot-bot:matrix.org?action=chat">
-                    <img class="mx_HomePage_icon" src="home/rooms/riot-bot.png">
-                </a>
-                <span class="mx_HomePage_comment">
-                    _t("Get started with some tips from Riot Bot!")
-                </span>
+        <div class="mx_ButtonRow">
+            <div class="mx_buttonwrapper">
+                <div class="mx_buttonwrappertext">Need help?</div>
+                <div class="mx_ButtonParent mx_secondarybutton">
+                    <img src="home/images/icon-help.svg" alt="" class="mx_buttonicon"/>
+                    <div class="mx_buttonlabel">Chat with Riot Bot</div>
+                </div>
+            </div>
+            <div class="mx_buttonwrapper">
+                <div class="mx_buttonwrappertext">Explore rooms</div>
+                <div class="mx_ButtonParent mx_secondarybutton">
+                    <img src="home/images/icon-room-directory.svg" alt="" class="mx_buttonicon"/>
+                    <div class="mx_buttonlabel">Room Directory</div>
+                </div>
             </div>
         </div>
     </div>
 
-    <h3>_t("General discussion about Matrix and Riot")</h3>
 
-    <div class="mx_HomePage_row">
-        <div class="mx_HomePage_room">
-            <a href="#/room/#matrix:matrix.org">
-                <img class="mx_HomePage_icon" src="home/rooms/matrix.png">
-                <span class="mx_HomePage_name">Matrix HQ</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("Discussion of all things Matrix!")</span>
-        </div>
-        <div class="mx_HomePage_room">
-            <a href="#/room/#riot:matrix.org">
-                <img class="mx_HomePage_icon" src="home/rooms/riot.png">
-                <span class="mx_HomePage_name">Riot</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("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</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("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</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("Riot/Android &amp; matrix-android-sdk chat")</span>
-        </div>
-    </div>
 
-    <h3>_t("Matrix technical discussions")</h3>
-    <h4>_t("Running Matrix services")</h4>
-
-    <div class="mx_HomePage_row">
-        <div class="mx_HomePage_room">
-            <a href="#/room/#synapse:matrix.org">
-                <img class="mx_HomePage_icon" src="home/rooms/matrix.png">
-                <span class="mx_HomePage_name">Synapse Support Community</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("Community-run support for Synapse")</span>
+    <!-- <div class="mx_HomePage_well">
+        <div class="mx_HomePage_col">
+            <div class="mx_HomePage_row ">
+                <div>
+                    <h3>_t("Search the room directory")</h3>
+                    <a class="mx_HomePage_room" href="#/directory">
+                        <img class="mx_HomePage_icon" src="home/images/icons-directory.svg">
+                    </a>
+                </div>
+            </div>
+            <div class="mx_HomePage_row">
+                <div>
+                    <h3>_t("Chat with Riot Bot")</h3>
+                    <a class="mx_HomePage_room" href="#/user/@riot-bot:matrix.org?action=chat">
+                        <img class="mx_HomePage_icon" src="home/rooms/riot-bot.png">
+                    </a>
+                    <span class="mx_HomePage_comment">
+                        _t("Get started with some tips from Riot Bot!")
+                    </span>
+                </div>
+            </div>
         </div>
-        <div class="mx_HomePage_room">
-            <a href="#/room/#dendrite:matrix.org">
-                <img class="mx_HomePage_icon" src="home/rooms/dendrite.png">
-                <span class="mx_HomePage_name">#dendrite:matrix.org</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("Admin support for Dendrite")</span>
-        </div>
-        <div class="mx_HomePage_room">
-            <a href="#/room/#homeowners:matrix.org">
-                <img class="mx_HomePage_icon" src="home/rooms/homeowners.png">
-                <span class="mx_HomePage_name">Synapse Homeowners</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("Announcements about Synapse releases")</span>
-        </div>
-        <div class="mx_HomePage_room">
-            <a href="#/room/#irc:matrix.org">
-                <img class="mx_HomePage_icon" src="home/rooms/irc.png">
-                <span class="mx_HomePage_name">IRC Matrix Bridges</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("Support for those using and running matrix-appservice-irc")</span>
-        </div>
-    </div>
-
-    <h4>_t("Building services on Matrix")</h4>
-
-    <div class="mx_HomePage_row">
-        <div class="mx_HomePage_room">
-            <a href="#/room/#matrix-dev:matrix.org">
-                <img class="mx_HomePage_icon" src="home/rooms/matrix-dev.png">
-                <span class="mx_HomePage_name">#matrix-dev:matrix.org</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("Support for those using the Matrix spec")</span>
-        </div>
-        <div class="mx_HomePage_room">
-            <a href="#/room/#e2e:matrix.org">
-                <img class="mx_HomePage_icon" src="home/rooms/e2e.png">
-                <span class="mx_HomePage_name">End-to-end crypto in Matrix</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("Design and implementation of E2E in Matrix")</span>
-        </div>
-        <div class="mx_HomePage_room">
-            <a href="#/room/#vr:matrix.org">
-                <img class="mx_HomePage_icon" src="home/rooms/vr.png">
-                <span class="mx_HomePage_name">#vr:matrix.org</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("Implementing VR services with Matrix")</span>
-        </div>
-        <div class="mx_HomePage_room">
-            <a href="#/room/#webrtc:matrix.org">
-                <img class="mx_HomePage_icon" src="home/rooms/webrtc.png">
-                <span class="mx_HomePage_name">#webrtc:matrix.org</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("Implementing VoIP services with Matrix")</span>
-        </div>
-        <div class="mx_HomePage_room">
-            <a href="#/room/#matrix-identity:matrix.org">
-                <img class="mx_HomePage_icon" src="home/rooms/identity.jpg">
-                <span class="mx_HomePage_name">Matrix Identity</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("Discussion of the Identity Service API")</span>
-        </div>
-        <div class="mx_HomePage_room">
-            <a href="#/room/#bridging:matrix.org">
-                <img class="mx_HomePage_icon" src="home/rooms/bridging.png">
-                <span class="mx_HomePage_name">Matrix Bridging</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("Support for those using, running and writing other bridges")</span>
-        </div>
-    </div>
-
-    <h4>_t("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</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("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</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("Dev chat for the Dendrite dev team")</span>
-        </div>
-        <div class="mx_HomePage_room">
-            <a href="#/room/#riotweb-translations:matrix.org">
-                <img class="mx_HomePage_icon" src="home/rooms/riot-translations.png">
-                <span class="mx_HomePage_name">Riot Translations</span>
-            </a>
-            <span class="mx_HomePage_desc">_t("Co-ordination for Riot translators")</span>
-        </div>
-    </div>
-</div>
+    </div> -->