jaderune.net

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit d38fb8c2dd6a1fed65dfc2da530aa45fce1affbc
parent c00bec8a927002cef05b5a40c8de458f2879bffa
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Sun, 31 Jan 2021 23:37:05 -0500

Flesh out services page

Diffstat:
Mmain.css | 81+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------
Mservices.html | 43++++++++++++++++++++++++++++++++++++++++++-
2 files changed, 107 insertions(+), 17 deletions(-)

diff --git a/main.css b/main.css @@ -1,15 +1,7 @@ -:root { - --main-bg: #121414; - --main-fg: #BABABA; - --menu-bg: #54595D; - --menu-fg: #F0EDD9; - --accent: #107B4C; -} - body { font-family: mono; - background-color: var(--main-bg); - color: var(--main-fg); + background-color: #121414; + color: #BABABA; line-height: 1.3em; } @@ -25,7 +17,7 @@ main { } .title { - color: var(--menu-fg); + color: #FFFFFF; font-size: 140%; font-weight: bold; text-decoration: none; @@ -44,7 +36,7 @@ nav ul { list-style-type: none; margin: -5px 0px 0px 0px; padding: 0px; - background-color: var(--menu-bg); + background-color: #54595D; overflow: hidden; } nav li { @@ -53,7 +45,7 @@ nav li { padding: 5px 0px; } nav a { - color: var(--menu-fg); + color: #FFFFFF; padding: 5px 10px; text-decoration: none; } @@ -61,13 +53,13 @@ nav a:hover { text-decoration: underline; } nav a:visited { - color: var(--menu-fg); + color: #FFFFFF; } nav>ul>li a:hover:not(.active){ - background-color: var(--accent); + background-color: #107B4C; } .active { - background-color: var(--accent); + background-color: #107B4C; } /* END NAV BAR */ @@ -93,6 +85,57 @@ a:visited { } /* END LINKS */ +/* SERVICE CARDS */ +.flex-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.card { + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5); + margin: 5px; + transition: 0.2s; + border-radius: 5px; + width: 28.3%; + background-color: #54595D; + color: #FFFFFF; + padding: 1em; + font-size: 80%; + text-align: center; +} +.card p { + text-align: left; + line-height: 1.2em; +} +.card h2 { + margin: 5px 0; + text-decoration: underline; +} +.card:hover { + box-shadow: 0 6px 10px 0 rgba(16,123,76,0.5); +} +.button { + border-radius: 5px; + border: 2px outset #000000; + color: #000000; + background-color: white; + padding: 8px 16px; + text-align: center; + text-decoration: none; + display: inline-block; + margin: 4px 2px; + transition-duration: 0.2s; +} +.button:hover { + background-color: #107B4C; + color: #FFFFFF; + cursor: crosshair; +} +.button:focus { + border-style: inset; +} +/* END SERVICE CARDS */ + pre { line-height: initial; font-size: 140%; @@ -118,6 +161,9 @@ pre { position: relative; left: 50%; } + .card { + width: 40% + } } @media only screen and (max-width: 360px) { @@ -127,4 +173,7 @@ pre { main { margin: 6em auto; } + .card { + width: 100% + } } diff --git a/services.html b/services.html @@ -22,7 +22,48 @@ <main> <h1>JadeRune.net Services</h1> - <p>Writeup and tutorials coming soon!</p> + <p>We provide a variety of services free for our members to use. By + default, every member will get an email account and an XMPP + account on our servers. Check out the cards below to read more + about the individual services and for instructions on getting + set up with some recommended clients. + </p> + + <div class="flex-wrapper"> + <div class="card"> + <h2>Email</h2> + <p>JadeRune.net provides an email address for every member + with IMAP access and a web interface powered by + Roundcube. + </p> + <a href="https://www.jaderune.net/mail.html"><button + class="button">Log In!</button></a> + </div> + <div class="card"> + <h2>XMPP</h2> + <p>XMPP is the primary way we communicate in the + society. It offers 1-on-1 and group chat capabilities as + well as voice and video calling. + </p> + <a href="https://www.jaderune.net/xmpp.html"><button class="button">Connect!</button></a> + </div> + <div class="card"> + <h2>Mumble</h2> + <p>We run a mumble server for voice communications. It's + a convenient and hassle-free way to have + high-quality voice chats online. + </p> + <a href="https://www.jaderune.net/mumble.html"><button class="button">Chat!</button></a> + </div> + <div class="card"> + <h2>Gitea</h2> + <p>For those who wish to collaborate on programming + projects, we also host a Gitea server. It has a + similar user experience and workflow to GitHub. + </p> + <a href="https://git.jaderune.net"><button class="button">Code!</button></a> + </div> + </div> </main> </body> </html>