forked from matrix/element-web
Adjust welcome layout to match new design
This commit is contained in:
J. Ryan Stinnett
parent
1eca8e2ceb
commit
a0494c4e05
116
res/welcome.html
116
res/welcome.html
|
|
@ -28,6 +28,45 @@ h1::after {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 25px 35px;
|
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 {
|
.mx_ButtonParent {
|
||||||
|
|
@ -57,25 +96,6 @@ h1::after {
|
||||||
color: #2e2f32 !important;
|
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 {
|
.mx_ButtonHeadline {
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
@ -89,16 +109,16 @@ h1::after {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Header2 {
|
.mx_Header_title {
|
||||||
font-size: 32px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
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 {
|
.mx_ButtonSignIn {
|
||||||
|
|
@ -133,30 +153,32 @@ h1::after {
|
||||||
|
|
||||||
<div class="mx_Parent">
|
<div class="mx_Parent">
|
||||||
<a href="https://riot.im" target="_blank" rel="noopener">
|
<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>
|
</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 & collaboration powered by [matrix]")</h4>
|
<h4 class="mx_Header_subtitle">_t("Decentralised, encrypted chat & collaboration powered by [matrix]")</h4>
|
||||||
<div class="mx_ButtonRow">
|
<div class="mx_ButtonGroup">
|
||||||
<a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">
|
<div class="mx_ButtonRow">
|
||||||
<div class="mx_ButtonLabel">_t("Sign In")</div>
|
<a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">
|
||||||
</a>
|
<div class="mx_ButtonLabel">_t("Sign In")</div>
|
||||||
<a href="#/register" class="mx_ButtonParent mx_ButtonCreateAccount mx_Button_iconCreateAccount">
|
</a>
|
||||||
<div class="mx_ButtonLabel">_t("Create Account")</div>
|
<a href="#/register" class="mx_ButtonParent mx_ButtonCreateAccount mx_Button_iconCreateAccount">
|
||||||
</a>
|
<div class="mx_ButtonLabel">_t("Create Account")</div>
|
||||||
</div>
|
|
||||||
<div class="mx_ButtonRow">
|
|
||||||
<div>
|
|
||||||
<div class="mx_ButtonWrapperText">_t("Need help?")</div>
|
|
||||||
<a href="#/user/@riot-bot:matrix.org?action=chat" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconHelp">
|
|
||||||
<div class="mx_ButtonLabel">_t("Chat with Riot Bot")</div>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="mx_ButtonRow">
|
||||||
<div class="mx_ButtonWrapperText">_t("Explore rooms")</div>
|
<div>
|
||||||
<a href="#/directory" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconRoomDirectory">
|
<div class="mx_ButtonWrapperText">_t("Need help?")</div>
|
||||||
<div class="mx_ButtonLabel">_t("Room Directory")</div>
|
<a href="#/user/@riot-bot:matrix.org?action=chat" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconHelp">
|
||||||
</a>
|
<div class="mx_ButtonLabel">_t("Chat with Riot Bot")</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="mx_ButtonWrapperText">_t("Explore rooms")</div>
|
||||||
|
<a href="#/directory" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconRoomDirectory">
|
||||||
|
<div class="mx_ButtonLabel">_t("Room Directory")</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue