riot-web/res/home-status.html

185 lines
5.1 KiB
HTML
Raw Normal View History

2017-10-26 02:38:07 +02:00
<style type="text/css">
/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
* voodoo where we have to set display: none by default
*/
.mx_HomePage_container {
text-align: center;
display: block ! important;
width: 690px;
margin: 20px;
}
.mx_HomePage_header {
margin-top: 37px;
margin-left: 10px;
width: 670px;
box-sizing: border-box;
font-size: 18px;
background-color: #fff;
box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05);
border-radius: 5px;
padding: 20px 80px 20px 80px;
align-items: center;
}
.mx_HomePage_header h1 {
font-size: 29px;
margin-bottom: 10px;
}
.mx_HomePage_intro h2 {
margin-top: 32px;
font-size: 25px;
color: #49555F;
}
.mx_HomePage_intro {
margin: auto;
width: 600px;
margin-top: 40px;
margin-bottom: 40px;
font-size: 18px;
}
.mx_HomePage_coc {
font-size: 16px;
}
.mx_HomePage_coc a {
color: #4360DF;
}
.mx_HomePage_room, .mx_HomePage_telegram {
float: left;
background-color: #fff;
box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05);
border-radius: 5px;
margin: 10px;
width: 210px;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
}
.mx_HomePage_telegram {
background-color: transparent;
border: 1px solid rgba(113, 129, 142, 0.2);
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 16px;
line-height: 25px;
box-sizing: border-box;
}
.mx_HomePage_telegram a {
text-transform: uppercase;
color: #4360DF;
font-size: 13px;
font-family: PostGrotesk-Medium;
}
.mx_HomePage_room .mx_HomePage_icon {
margin-top: 24px;
margin-bottom: 16px;
width: 50px;
height: 50px;
}
.mx_HomePage_room .mx_HomePage_name {
display: block;
font-family: PostGrotesk-Medium;
font-weight: 600;
font-size: 15px;
color: #49555F;
line-height: 25px;
margin: 0px 12px 0px 12px;
}
.mx_HomePage_room .mx_HomePage_desc {
flex: 1;
display: block;
margin: 0px 12px 0px 12px;
font-size: 14px;
line-height: 20px;
}
.mx_HomePage_button {
align-self: normal;
margin: 12px;
border-radius: 8px;
border: 1px solid rgba(199, 206, 209, 0.12);
background-color: #6CC1F6;
font-size: 13px;
font-family: PostGrotesk-Medium;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff ! important;
cursor: pointer;
outline: none;
padding: 14px;
box-sizing: border-box;
padding-left: 1.5em;
padding-right: 1.5em;
}
</style>
<div class="mx_HomePage_container">
<div class="mx_HomePage_header">
<div>
<h1>Welcome to Status Community Chat, powered by Riot.</h1>
<p>For contributors, developers and Ethereum-enthusiasts who care about the movement for decentralization.</p>
</div>
</div>
<div class="mx_HomePage_intro">
<h2>Our rooms</h2>
<p>Please abide by the channels discussion categories and remain on topic to the specific category details listed.</p>
<p class="mx_HomePage_coc">Before posting please refer to our <a href="#">Code of Conduct</a></p>
</div>
<div class="mx_HomePage_room">
<img class="mx_HomePage_icon" src="themes/status/img/a.png">
<span class="mx_HomePage_name">#announcements</span>
<span class="mx_HomePage_desc">Company wide announcements.</span>
<a class="mx_HomePage_button" href="#/room/#announcements:status.im">Join</a>
</div>
<div class="mx_HomePage_room">
<img class="mx_HomePage_icon" src="themes/status/img/i.png">
<span class="mx_HomePage_name">#introductions</span>
<span class="mx_HomePage_desc">Newcomer introductions.</span>
<a class="mx_HomePage_button" href="#/room/#introductions:status.im">Join</a>
</div>
<div class="mx_HomePage_room">
<img class="mx_HomePage_icon" src="themes/status/img/g.png">
<span class="mx_HomePage_name">#general</span>
<span class="mx_HomePage_desc">General discussions of Status.</span>
<a class="mx_HomePage_button" href="#/room/#general:status.im">Join</a>
</div>
<div class="mx_HomePage_room">
<img class="mx_HomePage_icon" src="themes/status/img/d.png">
<span class="mx_HomePage_name">#dev-status</span>
<span class="mx_HomePage_desc">Contributing to our codebase? Building a DApp or a chatbot? We're here to help.</span>
<a class="mx_HomePage_button" href="#/room/#dev-status:status.im">Join</a>
</div>
<div class="mx_HomePage_room">
<img class="mx_HomePage_icon" src="themes/status/img/n.png">
<span class="mx_HomePage_name">#news-articles</span>
<span class="mx_HomePage_desc">Share news, articles related to Ethereum or projects you're excited about</span>
<a class="mx_HomePage_button" href="#/room/#news-articles:status.im">Join</a>
</div>
<div class="mx_HomePage_telegram">
<p>
Interested in market and cryptocurrency type discussions?
</p>
<a href="#">Join Telegram</a>
</div>
</div>