Rocket Chat Markup
Backing up the pages’ code in here cos I may lose it otherwise and it has to be hand-coded, so that would be a pain in the ass… It’s for the static pages on the rocket chat instance.
Home Page
css:
/* .sidebar__footer, .rooms-list, .sidebar-flex__header {
background-color: #eeeeee;
} */
#home-img {
width: 100%;
max-width: 500px;
height: auto;
}
/* 3 divs in home page */
#apps {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
background-color: #D6FFD6;
}
#apps > div {
width: 15em;
border: .1em;
margin: .5em;
padding: .5em;
background-color: #FFFFB3;
}
html:
<div style="width:100%; background-color: black;"> <img id="home-img"; style=" margin-bottom: 1em; display: block; margin-left: auto; margin-right: auto;" src="https://chat.clickforafrica.org/file-upload/5LWqsSdPB66KPsazn/chat_header.png" /> </div>
<p style="text-align: center; font-size: 180%; font-weight: bold;">Welcome To The Chat!</p>
<p style="line-height: 1.5;">This is for general use during development of the Direct Sponsor and Click For Africa sites.</p>
<p style="line-height: 1.5;">We will be able to have:</p>
<ul style="margin-bottom: 0.5em; line-height: 1.5; list-style-type: disc; line-height: 1.5; margin-left: 1em;">
<li>Text, voice and Video chats</li>
<li>Video Conferencing</li>
<li>Private individual chats</li>
<li>A private chat room for each project</li>
<li>General chat rooms and rooms for any topics</li>
</ul>
<div id="apps">
<div><p style="line-height: 1.5;">The Rocket.Chat desktops apps for Windows, macOS and Linux are available to download <a title="Rocket.Chat desktop apps" href="https://rocket.chat/download" target="_blank" rel="noopener">here</a>.</p>
</div>
<div><p style="line-height: 1.5;">The native mobile app, Rocket.Chat+, for Android and iOS is available from <a title="Rocket.Chat+ on Google Play" href="https://play.google.com/store/apps/details?id=chat.rocket.android" target="_blank" rel="noopener">Google Play</a> and the <a title="Rocket.Chat+ on the App Store" href="https://itunes.apple.com/app/rocket-chat/id1148741252" target="_blank" rel="noopener">App Store</a>.</p>
</div>
<div><p style="line-height: 1.5;">For further help, please consult the <a title="Rocket.Chat Documentation" href="https://rocket.chat/docs/" target="_blank" rel="noopener">documentation</a>. Or in the <a href="https://chat.clickforafrica.org/channel/help">help channel</a></p>
</div>
<div>
<p><a href="terms-of-service">Terms of Service</a> and <a href="privacy-policy">Privacy Policy</a>.</p>
</div>
</div>
Terms of Service
<div style="padding:3em;"><h1 style="margin-top: 1em;">Terms of Service </h1>
<p style="line-height: 1.5;">Just be nice!</p>
</div>
Privacy Policy
<div style="padding:3em;"><h1 style="margin-top: 1em;">Privacy Policy</h1>
<p style="line-height: 1.5; background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px;"> Don't kid yourself. Privacy policies ... user agreements ... terms and conditions… none of these were written to protect you. They're written to give corporations every possible advantage—or, at the very least, to protect them against lawsuits.
<br /> - <a href="http://undergroundprivacysecrets.com/">undergroundprivacysecrets.com</a></p>
<p style="line-height: 1.5;">Just assume nothing is private. Even if the chat room is not being tracked by its owners, that doesn't mean no-one else is tracking you. We have no idea what's going on, and there is no point in us making an impressive privacy policy because unless you know us personally you have no way of knowing if we are lying. </p>
<p> </p>
</div>
Reference
from stackoverflow
Justify-content
The justify-content
property aligns flex items along the main axis of the flex container.
It is applied to the flex container but only affects flex items.
There are five alignment options:
flex-wrap
See flex-wrap demo on mozilla dev site