add cards

_sass/_default.scss 🔗

@@ -100,23 +100,40 @@ img {
     display: block;
     max-width: 100%;
 }
+.flex-cards {
+    display: flex;
+    justify-content: center;
+    background-color: #333333;
+
+}
+.flex-container > div {
+    width: 100%;
+    margin: 10px;
+}
 .card {
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
+    margin: 5px;
     transition: 0.3s;
     border-radius: 5px;
     width: 30%;
-    background: grey;
-    font-size: 1em;
+    background: #4f4f4fff;
     padding: 15px;
+    font-size: 15px;
+    text-align: center;
+}
+div.card p {
+    font-size: 17px;
+    text-align: left;
+    line-height: 27px;
 }
 .card:hover {
-    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+    box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
 }
 .button {
     border-radius: 8px;
     border: 0px;
+    color: #4f4f4fff;
     background-color: white;
-    color: #333333;
     padding: 16px 32px;
     text-align: center;
     text-decoration: none;
@@ -126,9 +143,10 @@ img {
     -webkit-transition-duration: 0.4s;
     transition-duration: 0.4s;
     cursor: pointer;
+    border: 2px solid #fff;
 }
 .button:hover {
-    background-color: #6E827D;
+    background-color: #4f4f4fff;
     color: #FFFFFF;
 }
 blockquote {

index.html 🔗

@@ -7,11 +7,52 @@ priority: 0.9
 ---
 <style>
 </style>
-<center><p>I host a variety of services that are available for anyone to use for free. Below is a list of with descriptions of each.</p></center>
-<div class="card">
-  <div class="container">
-    <h1><b>Seafile</b></h1> 
-    <p>Seafile is a file syncronisation service. Users upload their files to a central server and they are synced back to their mobile phone or desktop.</p> 
-    <center><a href="https://sea.nixnet.xyz" target="_blank"><button class="button">Upload now</button></a></center>
-  </div>
+<center><p>I host a variety of services that are available for anyone to use free of charge. Below is a list with descriptions of each.</p></center>
+
+<div class="flex-cards">
+    <div class="card">
+        <div class="container">
+            <h1><b>NixNet Chat</b></h1> 
+            <p>NixNet Chat is built on Rocket.Chat, an enterprise-grade real time chat application. Use this for communicating with other users and getting support for NixNet services.</p> 
+            <a href="https://chat.nixnet.xyz" target="_blank"><button class="button">Register!</button></a>
+        </div>
+    </div>
+    <div class="card">
+        <div class="container">
+            <h1><b>Mumble</b></h1> 
+            <p>Mumble is an open source, low-latency, high quality voice chat software primarily intended for use while gaming. It's also great for private calls between yourself and others.</p> 
+            <a href="https://sea.nixnet.xyz" target="_blank"><button class="button">Chat!</button></a>
+        </div>
+    </div>
+    <div class="card">
+        <div class="container">
+            <h1><b>Gitea</b></h1> 
+            <p>Gitea is a simple, easy-to-use and yet full-featured, self-hosted code hosting solution. Users can host 2 GB of code by default and more upon request (I don't have much storage 😢).</p> 
+            <a href="https://git.nixnet.xyz" target="_blank"><button class="button">Code!</button></a>
+        </div>
+    </div>
+</div>
+
+<div class="flex-cards">
+    <div class="card">
+        <div class="container">
+            <h1><b>CodiMD</b></h1> 
+            <p>CodiMD is an application that allows users to collaborate in real time on markdown documents and presentations. Perfect for quick and easy slideshows and documentation.</p>
+            <a href="https://nixnet.xyz/wip/" target="_blank"><button class="button">Write!</button></a>
+        </div>
+    </div>
+    <div class="card">
+        <div class="container">
+            <h1><b>PrivateBin</b></h1> 
+            <p>PrivateBin is a minimalist and open source pastebin that has zero knowledge of pasted data. Everything is encrypted and decrypted in-browser using 256bit AES in Galois Counter mode.</p> 
+            <a href="https://nixnet.xyz/wip/" target="_blank"><button class="button">Write!</button></a>
+        </div>
+    </div>
+    <div class="card">
+        <div class="container">
+            <h1><b>SearX</b></h1> 
+            <p>SearX is a meta search engine that aggregates results from more than 70 different search engines. Users are neither tracked nor profiled. SearX can also be used over Tor for increased anonymity.</p> 
+            <a href="https://nixnet.xyz/wip.html" target="_blank"><button class="button">Paste!</button></a>
+        </div>
+    </div>
 </div>

wip.html 🔗

@@ -0,0 +1,8 @@
+---
+layout: page
+title: WIP
+permalink: /wip/
+---
+<center><h2>This application is work in progress and either not yet hosted or not yet public.</h2>
+    </br>
+    <h3>Subscribe to the RSS feed for updates on services (<i>not implemented yet</i>)</h3></center>

Change summary

Detailed changes

_sass/_default.scss 🔗

index.html 🔗

wip.html 🔗