Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

finish layout and add links to buttons

Browse Source
This commit is contained in:
Bruno Windels 2019-02-01 19:58:30 +01:00
parent e1e364f7c7
commit 2411d5286b
1 changed files with 45 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
res/home.html
View File

@ -66,8 +66,12 @@ h1::after {
-webkit-align-items: center; -webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
border-radius: 10px; border-radius: 4px;
width: 140px; width: 150px;
background-repeat: no-repeat;
background-position: 10px center;
text-decoration: none;
color: #2e2f32 !important;
} }
.mx_ButtonRow { .mx_ButtonRow {
@ -75,8 +79,7 @@ h1::after {
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
width: 600px; width: 480px;
height: 120px;
-webkit-justify-content: space-around; -webkit-justify-content: space-around;
-ms-flex-pack: distribute; -ms-flex-pack: distribute;
justify-content: space-around; justify-content: space-around;
@ -84,27 +87,28 @@ h1::after {
-webkit-align-items: center; -webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: 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;
} }
.mx_buttonicon {
width: 40px;
}
.mx_buttonlabel { .mx_buttonlabel {
margin-left: 20px; margin-left: 20px;
} }
.mx_buttonwrappertext { .mx_buttonwrappertext {
font-size: 13px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.mx_Header2 { .mx_Header2 {
font-size: 32px; font-size: 32px;
font-weight: 400; font-weight: 600;
margin-top: 40px; margin-top: 40px;
} }
@ -115,20 +119,33 @@ h1::after {
} }
.mx_ButtonSignIn { .mx_ButtonSignIn {
background: #368BD6; background-color: #368BD6;
color: white; color: white !important;
} }
.mx_ButtonCreateAccount { .mx_ButtonCreateAccount {
background: #03B381; background-color: #03B381;
color: white; color: white !important;
} }
.mx_secondarybutton { .mx_secondarybutton {
background: #FFFFFF; background-color: #FFFFFF;
color: #2E2F32; 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');
}
</style> </style>
<div class="mx_Parent"> <div class="mx_Parent">
@ -139,29 +156,25 @@ h1::after {
<h4 class="mx_Header22">_t("Decentralised, encrypted chat &amp; collaboration powered by [matrix]")</h4> <h4 class="mx_Header22">_t("Decentralised, encrypted chat &amp; collaboration powered by [matrix]")</h4>
<div class="mx_Well"> <div class="mx_Well">
<div class="mx_ButtonRow"> <div class="mx_ButtonRow">
<div class="mx_ButtonParent mx_ButtonSignIn"> <a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">
<img src="home/images/icon-sign-in.svg" alt="" class="mx_buttonicon"/> <div class="mx_buttonlabel">_t("Sign In")</div>
<div class="mx_buttonlabel">Sign In</div> </a>
</div> <a href="#/register" class="mx_ButtonParent mx_ButtonCreateAccount mx_Button_iconCreateAccount">
<div class="mx_ButtonParent mx_ButtonCreateAccount"> <div class="mx_buttonlabel">_t("Create Account")</div>
<img src="home/images/icon-create-account.svg" alt="" class="mx_buttonicon"/> </a>
<div class="mx_buttonlabel">Create Account</div>
</div>
</div> </div>
<div class="mx_ButtonRow"> <div class="mx_ButtonRow">
<div class="mx_buttonwrapper"> <div class="mx_buttonwrapper">
<div class="mx_buttonwrappertext">Need help?</div> <div class="mx_buttonwrappertext">_t("Need help?")</div>
<div class="mx_ButtonParent mx_secondarybutton"> <a href="#/user/@riot-bot:matrix.org?action=chat" class="mx_ButtonParent mx_secondarybutton mx_Button_iconHelp">
<img src="home/images/icon-help.svg" alt="" class="mx_buttonicon"/> <div class="mx_buttonlabel">_t("Chat with Riot Bot")</div>
<div class="mx_buttonlabel">Chat with Riot Bot</div> </a>
</div>
</div> </div>
<div class="mx_buttonwrapper"> <div class="mx_buttonwrapper">
<div class="mx_buttonwrappertext">Explore rooms</div> <div class="mx_buttonwrappertext">_t("Explore rooms")</div>
<div class="mx_ButtonParent mx_secondarybutton"> <a href="#/directory" class="mx_ButtonParent mx_secondarybutton mx_Button_iconRoomDirectory">
<img src="home/images/icon-room-directory.svg" alt="" class="mx_buttonicon"/> <div class="mx_buttonlabel">_t("Room Directory")</div>
<div class="mx_buttonlabel">Room Directory</div> </a>
</div>
</div> </div>
</div> </div>
</div> </div>