diff --git a/res/home.html b/res/home.html index d8238870..254c2b4a 100644 --- a/res/home.html +++ b/res/home.html @@ -4,289 +4,185 @@ * 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_HomePage_header h1 a { - color: #454545; -} - -.mx_HomePage h3 { - margin-top: 30px; -} - -.mx_HomePage_header { - border: 1px solid #76CFA6; - background-color: #eaf5f0; - border-radius: 5px; - align-items: center; -} - -.mx_HomePage_col { +.mx_HomePage_body { display: flex; - flex-direction: row; + flex-direction: column; + justify-content: center; + height: 100%; } -.mx_HomePage_toprow { - flex-wrap: wrap; +.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-bottom: 50px; } -.mx_HomePage_row { - flex: 1 1 0; - margin-right: 20px; - display: flex; - flex-direction: row; - flex-wrap: wrap; +.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_logo { - margin-top: 20px; - margin-left: 40px; - margin-right: 40px; - margin-bottom: 20px; - display: inline; - height: 100px; +.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: 4px; + width: 150px; + background-repeat: no-repeat; + background-position: 10px center; + text-decoration: none; + color: #2e2f32 !important; } -.mx_HomePage_room { - cursor: pointer; - float: left; - text-decoration: none; - text-align: center; - padding-left: 10px; - padding-right: 10px; - width: 120px; +.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_HomePage_toprow .mx_HomePage_room { - width: 64px; +.mx_buttonheadline { + margin-bottom: 14px; } - -.mx_HomePage_room .mx_HomePage_icon { - border-radius: 50%; - width: 64px; - height: 64px; +.mx_buttonlabel { + margin-left: 20px; } -.mx_HomePage_room .mx_HomePage_name { - display: block; +.mx_buttonwrappertext { + font-size: 13px; + margin-bottom: 10px; } -.mx_HomePage_room .mx_HomePage_desc { - display: block; - font-size: 12px; - margin-top: 8px; +.mx_Header2 { + font-size: 32px; + font-weight: 600; + margin-top: 40px; } -.mx_HomePage_comment { - display: flex; - align-items: center; - margin-left: 100px; - min-height: 64px; +.mx_Header22 { + font-size: 14px; + font-weight: 200; + margin-bottom: 40px; } -.mx_HomePage_container h3::after, -.mx_HomePage_container h4::after { - content: ":"; +.mx_ButtonSignIn { + background-color: #368BD6; + color: white !important; } -.mx_HomePage_container { - display: block ! important; - margin: 20px; +.mx_ButtonCreateAccount { + background-color: #03B381; + color: white !important; } -.mx_HomePage_container h1, -.mx_HomePage_container h2, -.mx_HomePage_container h3, -.mx_HomePage_container h4 { - font-weight: 600; +.mx_secondarybutton { + background-color: #FFFFFF; + color: #2E2F32; } + +.mx_Button_iconSignIn { + background-image: url('home/images/icon-sign-in.svg'); +} +.mx_Button_iconCreateAccount { + background-image: url('home/images/icon-create-account.svg'); +} +.mx_Button_iconHelp { + background-image: url('home/images/icon-help.svg'); +} +.mx_Button_iconRoomDirectory { + background-image: url('home/images/icon-room-directory.svg'); +} + -
-
- -
-

_t("Welcome to Riot.im")

-

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

+
+ + + +

_t("Welcome to Riot.im")

+

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

+
+
+ +
_t("Sign In")
+ + +
_t("Create Account")
+
-
-
-
-
-

_t("Search the room directory")

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

_t("Chat with Riot Bot")

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

_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") -
-
- - - #dendrite:matrix.org - - _t("Admin support for Dendrite") -
-
- - - Synapse Homeowners - - _t("Announcements about Synapse releases") -
-
- - - IRC Matrix Bridges - - _t("Support for those using and running matrix-appservice-irc") -
-
- -

_t("Building services on Matrix")

- -
-
- - - #matrix-dev:matrix.org - - _t("Support for those using the Matrix spec") -
-
- - - End-to-end crypto in Matrix - - _t("Design and implementation of E2E in Matrix") -
-
- - - #vr:matrix.org - - _t("Implementing VR services with Matrix") -
-
- - - #webrtc:matrix.org - - _t("Implementing VoIP services with Matrix") -
-
- - - Matrix Identity - - _t("Discussion of the Identity Service API") -
-
- - - Matrix Bridging - - _t("Support for those using, running and writing other bridges") -
-
- -

_t("Contributing code to Matrix and Riot")

- -
-
- - - #riot-dev - - _t("Dev chat for the Riot/Web dev team") -
-
- - - #dendrite-dev - - _t("Dev chat for the Dendrite dev team") -
-
- - - Riot Translations - - _t("Co-ordination for Riot translators") -
-
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 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index fc4ebc57..9c467cfc 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -10,30 +10,12 @@ "Dismiss": "Dismiss", "Welcome to Riot.im": "Welcome to Riot.im", "Decentralised, encrypted chat & collaboration powered by [matrix]": "Decentralised, encrypted chat & collaboration powered by [matrix]", - "Search the room directory": "Search the room directory", - "Lots of rooms already exist in Matrix, linked to existing networks (Slack, IRC, Gitter etc) or independent. Check out the directory!": "Lots of rooms already exist in Matrix, linked to existing networks (Slack, IRC, Gitter etc) or independent. Check out the directory!", + "Sign In": "Sign In", + "Create Account": "Create Account", + "Need help?": "Need help?", "Chat with Riot Bot": "Chat with Riot Bot", - "Get started with some tips from Riot Bot!": "Get started with some tips from Riot Bot!", - "General discussion about Matrix and Riot": "General discussion about Matrix and Riot", - "Discussion of all things Matrix!": "Discussion of all things Matrix!", - "Riot/Web & Desktop chat": "Riot/Web & Desktop chat", - "Riot/iOS & matrix-ios-sdk chat": "Riot/iOS & matrix-ios-sdk chat", - "Riot/Android & matrix-android-sdk chat": "Riot/Android & matrix-android-sdk chat", - "Matrix technical discussions": "Matrix technical discussions", - "Running Matrix services": "Running Matrix services", - "Community-run support for Synapse": "Community-run support for Synapse", - "Admin support for Dendrite": "Admin support for Dendrite", - "Announcements about Synapse releases": "Announcements about Synapse releases", - "Support for those using and running matrix-appservice-irc": "Support for those using and running matrix-appservice-irc", - "Building services on Matrix": "Building services on Matrix", - "Support for those using the Matrix spec": "Support for those using the Matrix spec", - "Design and implementation of E2E in Matrix": "Design and implementation of E2E in Matrix", - "Implementing VR services with Matrix": "Implementing VR services with Matrix", - "Implementing VoIP services with Matrix": "Implementing VoIP services with Matrix", - "Discussion of the Identity Service API": "Discussion of the Identity Service API", - "Support for those using, running and writing other bridges": "Support for those using, running and writing other bridges", - "Contributing code to Matrix and Riot": "Contributing code to Matrix and Riot", - "Dev chat for the Riot/Web dev team": "Dev chat for the Riot/Web dev team", - "Dev chat for the Dendrite dev team": "Dev chat for the Dendrite dev team", - "Co-ordination for Riot translators": "Co-ordination for Riot translators" + "Explore rooms": "Explore rooms", + "Room Directory": "Room Directory", + "Search the room directory": "Search the room directory", + "Get started with some tips from Riot Bot!": "Get started with some tips from Riot Bot!" }