From e1e364f7c717fb04fe9e670a96cf2a54f924f1ad Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Fri, 1 Feb 2019 18:07:51 +0000 Subject: [PATCH] WIP home updates --- res/home.html | 395 +++++++++--------------- res/home/images/icon-create-account.svg | 17 + res/home/images/icon-help.svg | 16 + res/home/images/icon-room-directory.svg | 19 ++ res/home/images/icon-sign-in.svg | 16 + res/home/images/logo.svg | 90 +----- 6 files changed, 231 insertions(+), 322 deletions(-) create mode 100644 res/home/images/icon-create-account.svg create mode 100644 res/home/images/icon-help.svg create mode 100644 res/home/images/icon-room-directory.svg create mode 100644 res/home/images/icon-sign-in.svg diff --git a/res/home.html b/res/home.html index d8238870..4ee8d8fd 100644 --- a/res/home.html +++ b/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; -} -
-
- -
-

_t("Welcome to Riot.im")

-

_t("Decentralised, encrypted chat & collaboration powered by [matrix]")

-
-
-
-
-
-

_t("Search the room directory")

- - - - - _t("Lots of rooms already exist in Matrix, linked to existing networks (Slack, IRC, Gitter etc) or independent. Check out the directory!") - +
+ + + +

_t("Welcome to Riot.im")

+

_t("Decentralised, encrypted chat & collaboration powered by [matrix]")

+
+
+
+ +
Sign In
+
+
+ +
Create Account
-
-
-

_t("Chat with Riot Bot")

- - - - - _t("Get started with some tips from Riot Bot!") - +
+
+
Need help?
+
+ +
Chat with Riot Bot
+
+
+
+
Explore rooms
+
+ +
Room Directory
+
-

_t("General discussion about Matrix and Riot")

-
-
- - - Matrix HQ - - _t("Discussion of all things Matrix!") -
-
- - - Riot - - _t("Riot/Web & Desktop chat") -
-
- - - #riot-ios - - _t("Riot/iOS & matrix-ios-sdk chat") -
-
- - - #riot-android - - _t("Riot/Android & matrix-android-sdk chat") -
-
-

_t("Matrix technical discussions")

-

_t("Running Matrix services")

- -
-
- - - Synapse Support Community - - _t("Community-run support for Synapse") + diff --git a/res/home/images/icon-create-account.svg b/res/home/images/icon-create-account.svg new file mode 100644 index 00000000..c9d25f2f --- /dev/null +++ b/res/home/images/icon-create-account.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/res/home/images/icon-help.svg b/res/home/images/icon-help.svg new file mode 100644 index 00000000..dc96f8e0 --- /dev/null +++ b/res/home/images/icon-help.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/res/home/images/icon-room-directory.svg b/res/home/images/icon-room-directory.svg new file mode 100644 index 00000000..6f888611 --- /dev/null +++ b/res/home/images/icon-room-directory.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/res/home/images/icon-sign-in.svg b/res/home/images/icon-sign-in.svg new file mode 100644 index 00000000..584b2f0a --- /dev/null +++ b/res/home/images/icon-sign-in.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/res/home/images/logo.svg b/res/home/images/logo.svg index a5f70e5e..79039b70 100644 --- a/res/home/images/logo.svg +++ b/res/home/images/logo.svg @@ -1,76 +1,16 @@ - - - - -New_logo - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + +