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

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

301
res/home/index.html
View File

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