Matrix/element-web
Matrix/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-09-09 22:55:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

WIP improvements on welcome page; fix indentation, some verbiage and some CSS

Browse source
This commit is contained in:
Matthew Hodgson 2017-05-29 18:37:35 +01:00
parent 3ea3630c3b
commit 823fbafe85
2 changed files with 180 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
res/home/css/welcome.css
View file

@ -1,66 +1,60 @@
.container { .container {
background-color: #e7e7e7;
} }
div.row { div.row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
} }
img.logo { img.logo {
margin-top: 26px; margin-top: 26px;
margin-left: 10px; margin-left: 10px;
display: inline; display: inline;
} }
a.bigicon { a.bigicon {
cursor: pointer; cursor: pointer;
display: inline; display: inline;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
width: 120px; width: 120px;
} }
a.bigicon .icon { a.bigicon .icon {
border-radius: 50%; border-radius: 50%;
width: 65px; width: 65px;
height: 65px; height: 65px;
} }
a.bigicon .title { a.bigicon .title {
display: block; display: block;
} }
a.bigicon .roomname { a.bigicon .roomname {
display: block; display: block;
white-space: nowrap; white-space: nowrap;
font-size: 12px; font-size: 12px;
} }
.description { .description {
display: inline; display: inline;
vertical-align: top; vertical-align: top;
}
h1, h2, h3, h4 {
font-family: "Tahoma";
} }
h2 { h2 {
font-size: 26px; font-size: 26px;
} }
h4 { h4 {
margin-top: 22px; margin-top: 22px;
} }
h3::after, h4::after { h3::after, h4::after {
content: ":"; content: ":";
} }
p { p {
font-family: "Tahoma";
} }

301
res/home/index.html
View file

@ -1,158 +1,167 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Welcome to Riot.im</title> <title>Welcome to Riot.im</title>
<link href="css/welcome.css" rel="stylesheet"> <link href="css/welcome.css" rel="stylesheet">
<base target="_parent" /> <base target="_parent" />
</head> <!-- evil hack to inherit CSS from the parent, so theming might work -->
<body> <script type="text/javascript">
<div class="container"> window.onload = function() {
<div class="row"> if (parent) {
<img src="images/logo.svg" class="logo"> var oHead = document.getElementsByTagName("head")[0];
<div> var arrStyleSheets = parent.document.getElementsByTagName("style");
<h1>Welcome to Riot.im</h1> for (var i = 0; i < arrStyleSheets.length; i++)
<h2>Distributed. Secure. Free and Open Source.</h2> oHead.appendChild(arrStyleSheets[i].cloneNode(true));
</div> }
</div> }
<div class="row"> </script>
<div> </head>
<h3>Chat with Riot Bot</h3> <body>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#matrix:matrix.org"> <div class="container">
<img class="icon" src="rooms/riot-bot.png"> <div class="row">
</a> <img src="images/logo.svg" class="logo">
<span class="description"> <div>
Chat with our friendly friend the Riot bot. He just wants to help you use the thing. <h1>Welcome to Riot.im</h1>
</span> <h2>Decentralised, encrypted chat &amp; collaboration powered by <a href="https://matrix.org">Matrix</a>.</h2>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div> <div>
<h3>Find a room</h3> <h3>Chat with Riot Bot</h3>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#matrix:matrix.org"> <a class="bigicon" href="#/user/@riot-bot:matrix.org">
<img class="icon" src="https://riot.im/app/img/icons-directory.svg"> <img class="icon" src="rooms/riot-bot.png">
</a> </a>
<span class="description"> <span class="description">
We got lotsa rooms. Find yourself one and talk in it. Get started with some tips from Riot Bot!
</span> </span>
</div> </div>
</div> </div>
<div class="row">
<div>
<h3>Search the room directory</h3>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#matrix:matrix.org">
<img class="icon" src="https://riot.im/app/img/icons-directory.svg">
</a>
<span class="description">
Lots of rooms already exist in Matrix, both linked with existing networks (Slack, Freenode, Gitter etc) or existing independently. Check out the directory!
</span>
</div>
</div>
<div class="row"> <div class="row">
<h3>General discussion about Matrix</h3> <h3>General discussion about Matrix</h3>
</div> </div>
<div class="row"> <div class="row">
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#matrix:matrix.org"> <a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#matrix:matrix.org">
<img class="icon" src="rooms/matrix.png"> <img class="icon" src="rooms/matrix.png">
<span class="title">Matrix HQ</span> <span class="title">Matrix HQ</span>
<span class="roomname">#matrix:matrix.org</span> <span class="roomname">#matrix:matrix.org</span>
</a> </a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#riot:matrix.org"> <a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#riot:matrix.org">
<img class="icon" src="rooms/riot_im.png"> <img class="icon" src="rooms/riot_im.png">
<span class="title">Riot.im</span> <span class="title">Riot.im</span>
<span class="roomname">#riot:matrix.org</span> <span class="roomname">#riot:matrix.org</span>
</a> </a>
</div> </div>
<div class="row"> <div class="row">
<h3>Matrix technical discussions</h3> <h3>Matrix technical discussions</h3>
</div> </div>
<div class="row"> <div class="row">
<h4>Running Matrix services</h4> <h4>Running Matrix services</h4>
</div> </div>
<div class="row"> <div class="row">
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#synapse:matrix.org"> <a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#synapse:matrix.org">
<img class="icon" src="rooms/matrix.png"> <img class="icon" src="rooms/matrix.png">
<span class="title">#synapse</span> <span class="title">#synapse</span>
<span class="roomname">#synapse:matrix.org</span> <span class="roomname">#synapse:matrix.org</span>
</a> </a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#dendrite:matrix.org"> <a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#dendrite:matrix.org">
<img class="icon" src="rooms/dendrite.png"> <img class="icon" src="rooms/dendrite.png">
<span class="title">#dendrite</span> <span class="title">#dendrite</span>
<span class="roomname">#dendrite:matrix.org</span> <span class="roomname">#dendrite:matrix.org</span>
</a> </a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#homeowners:matrix.org"> <a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#homeowners:matrix.org">
<img class="icon" src="rooms/homeowners.png"> <img class="icon" src="rooms/homeowners.png">
<span class="title">#homeowners</span> <span class="title">#homeowners</span>
<span class="roomname">#homeowners:matrix.org</span> <span class="roomname">#homeowners:matrix.org</span>
</a> </a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#irc:matrix.org"> <a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#irc:matrix.org">
<img class="icon" src="rooms/irc.png"> <img class="icon" src="rooms/irc.png">
<span class="title">#irc</span> <span class="title">#irc</span>
<span class="roomname">#irc:matrix.org</span> <span class="roomname">#irc:matrix.org</span>
</a> </a>
</div> </div>
<div class="row"> <div class="row">
<h4>Building service atop Matrix</h4> <h4>Building services on Matrix</h4>
</div> </div>
<div class="row"> <div class="row">
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#matrix-dev:matrix.org"> <a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#matrix-dev:matrix.org">
<img class="icon" src="rooms/matrix-dev.png"> <img class="icon" src="rooms/matrix-dev.png">
<span class="title">#matrix-dev</span> <span class="title">#matrix-dev</span>
<span class="roomname">#matrix-dev:matrix.org</span> <span class="roomname">#matrix-dev:matrix.org</span>
</a> </a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#e2e:matrix.org"> <a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#e2e:matrix.org">
<img class="icon" src="rooms/e2e.png"> <img class="icon" src="rooms/e2e.png">
<span class="title">#e2e</span> <span class="title">#e2e</span>
<span class="roomname">#e2e:matrix.org</span> <span class="roomname">#e2e:matrix.org</span>
</a> </a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#vr:matrix.org"> <a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#vr:matrix.org">
<img class="icon" src="rooms/vr.png"> <img class="icon" src="rooms/vr.png">
<span class="title">#vr</span> <span class="title">#vr</span>
<span class="roomname">#vr:matrix.org</span> <span class="roomname">#vr:matrix.org</span>
</a> </a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#webrtc:matrix.org"> <a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#webrtc:matrix.org">
<img class="icon" src="rooms/webrtc.png"> <img class="icon" src="rooms/webrtc.png">
<span class="title">#webrtc</span> <span class="title">#webrtc</span>
<span class="roomname">#webrtc:matrix.org</span> <span class="roomname">#webrtc:matrix.org</span>
</a> </a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#identity:matrix.org"> <a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#identity:matrix.org">
<img class="icon" src="rooms/identity.png"> <img class="icon" src="rooms/identity.png">
<span class="title">#identity</span> <span class="title">#identity</span>
<span class="roomname">#identity:matrix.org</span> <span class="roomname">#identity:matrix.org</span>
</a> </a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#bridging:matrix.org"> <a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#bridging:matrix.org">
<img class="icon" src="rooms/bridging.png"> <img class="icon" src="rooms/bridging.png">
<span class="title">#bridging</span> <span class="title">#bridging</span>
<span class="roomname">#bridging:matrix.org</span> <span class="roomname">#bridging:matrix.org</span>
</a> </a>
</div> </div>
<div class="row"> <div class="row">
<h4>Contributing code to Matrix and Riot</h4> <h4>Contributing code to Matrix and Riot</h4>
</div>
<div class="row">
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#riot-dev:matrix.org">
<img class="icon" src="rooms/riot-dev.png">
<span class="title">#riot-dev</span>
<span class="roomname">#riot-dev:matrix.org</span>
</a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#dendrite-dev:matrix.org">
<img class="icon" src="rooms/dendrite-dev.png">
<span class="title">#dendrite-dev</span>
<span class="roomname">#dendrite-dev:matrix.org</span>
</a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#riotweb-translations.org">
<img class="icon" src="rooms/riot-translations.png">
<span class="title">#riot-translations</span>
<span class="roomname">#riotweb-translations:matrix.org</span>
</a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#irc:matrix.org">
<img class="icon" src="rooms/irc.png">
<span class="title">#irc</span>
<span class="roomname">#irc:matrix.org</span>
</a>
</div>
</div> </div>
<div class="row"> </body>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#riot-dev:matrix.org">
<img class="icon" src="rooms/riot-dev.png">
<span class="title">#riot-dev</span>
<span class="roomname">#riot-dev:matrix.org</span>
</a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#dendrite-dev:matrix.org">
<img class="icon" src="rooms/dendrite-dev.png">
<span class="title">#dendrite-dev</span>
<span class="roomname">#dendrite-dev:matrix.org</span>
</a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#riotweb-translations.org">
<img class="icon" src="rooms/riot-translations.png">
<span class="title">#riot-translations</span>
<span class="roomname">#riotweb-translations:matrix.org</span>
</a>
<a class="bigicon" href="https://lant.uk/riot/new-guest-access/#/room/#irc:matrix.org">
<img class="icon" src="rooms/irc.png">
<span class="title">#irc</span>
<span class="roomname">#irc:matrix.org</span>
</a>
</div>
</div>
</body>
</html> </html>