commit d38fb8c2dd6a1fed65dfc2da530aa45fce1affbc
parent c00bec8a927002cef05b5a40c8de458f2879bffa
Author: Jake Bauer <jbauer@paritybit.ca>
Date: Sun, 31 Jan 2021 23:37:05 -0500
Flesh out services page
Diffstat:
| M | main.css | | | 81 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------- |
| M | services.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>
