Pages

dumping pages code in here cos I may lose it otherwise.

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:

<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>

<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><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>

Terms of Service

html:

<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

html:

<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>&nbsp;</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-start ~ Flex items are packed toward the start of the line.

flex-end ~ Flex items are packed toward the end of the line.

center ~ Flex items are packed toward the center of the line.

space-between ~ Flex items are evenly spaced, with the first item aligned to one edge of the container and the last item aligned to the opposite edge. The edges used by the first and last items depends on flex-direction and writing mode (ltr or rtl).

space-around ~ Same as space-between except with half-size spaces on both ends.

flex-wrap

See flex-wrap demo on mozilla dev site