mobile-ready now

_sass/_default.scss 🔗

@@ -100,22 +100,24 @@ img {
     display: block;
     max-width: 100%;
 }
-.flex-cards {
+.flex-wrapper {
     display: flex;
     justify-content: center;
     background-color: #333333;
-
 }
-.flex-container > div {
+.flex-cards {
     width: 100%;
-    margin: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    background-color: #333;
+    justify-content: center;
 }
 .card {
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
     margin: 5px;
     transition: 0.3s;
     border-radius: 5px;
-    width: 30%;
+    width: 28.3%;
     background: #4f4f4fff;
     padding: 15px;
     font-size: 15px;
@@ -435,4 +437,17 @@ strong {
     .post-title__subtitle {
         font-size: 18px;
     }
+    .card {
+        width: 40%;
+    }
+}
+@media (max-width: 620px) {
+    .card {
+        width: 80%;
+    }
+}
+@media (max-width: 400px) {
+    .card {
+        width: 100%;
+    }
 }

index.html 🔗

@@ -9,47 +9,34 @@ priority: 0.9
 </style>
 <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">
+<div class="flex-wrapper">
+    <div class="flex-cards">
+        <div class="card">
             <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">
+        <div class="card">
             <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">
+        <div class="card">
             <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">
+        <div class="card">
             <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">
+        <div class="card">
             <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">
+        <div class="card">
             <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>

Change summary

Detailed changes

_sass/_default.scss 🔗

index.html 🔗