Fixed CSS for onion links.

assets/css/landing.css

@@ -115,7 +115,13 @@ body {
     margin-bottom: auto;
 }
 
-.card > a {
+.buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.buttons > a {
     color: var(--primary);
     background-color: transparent;
 
@@ -123,7 +129,7 @@ body {
     border-radius: .5rem;
     /* box-shadow: 0 -5rem 20rem transparent; */
 
-    margin: 1rem 0 .5rem 0;
+    margin: 1rem .5rem .5rem .5rem;
     padding: .5rem 1.5rem;
     display: block;
 
@@ -134,13 +140,27 @@ body {
     transition: color .3s, background-color .3s, box-shadow .3s;
 }
 
-.card > a:hover,
+.buttons > a:hover,
-.card > a:focus {
+.buttons > a:focus {
     color: var(--surface);
     background-color: var(--primary);
     /* box-shadow: 0 .25rem 2rem var(--primary); */
 }
 
+.buttons > a.tor {
+    color: var(--purple);
+    border-color: var(--purple);
+    padding: .5rem 1rem;
+}
+
+.buttons > a.tor:hover,
+.buttons > a.tor:focus {
+    color: var(--surface);
+    background-color: var(--purple);
+    /* box-shadow: 0 .25rem 2rem var(--primary); */
+}
+
+
 .text-box {
     margin: 1rem;
 }

content/pages/index.njk

@@ -32,8 +32,10 @@
             <p>
                 Nitter is a Twitter frontend. Use it to browse Twitter without getting tracked.
             </p>
+            <div class="buttons">
                 <a href="https://nitter.qwik.space">BROWSE</a>
-            <a href="http://qwikxx2erhx6qrymued6ox2qkf2yeogjwypqvzoif4fqkljixasr6oid.onion">Tor</a>
+                <a class="tor" href="http://qwikxx2erhx6qrymued6ox2qkf2yeogjwypqvzoif4fqkljixasr6oid.onion">TOR</a>
+            </div>
         </div>
 
         <div class="card">
@@ -41,8 +43,10 @@
             <p>
                 Bibliogram is an Instagram frontend. Use it to browse Instagram without getting tracked.
             </p>
+            <div class="buttons">
                 <a href="https://bibliogram.qwik.space">BROWSE</a>
-            <a href="http://qwikxx2erhx6qrymued6ox2qkf2yeogjwypqvzoif4fqkljixasr6oid.onion">Tor</a>
+                <a class="tor" href="http://qwikxx2erhx6qrymued6ox2qkf2yeogjwypqvzoif4fqkljixasr6oid.onion">TOR</a>
+            </div>
         </div>
 
         <div class="card">
@@ -50,8 +54,10 @@
             <p>
                 Libreddit is a Reddit frontend. Use it to browse Reddit without getting tracked.
             </p>
+            <div class="buttons">
                 <a href="https://libreddit.qwik.space">BROWSE</a>
-            <a href="http://qwikxx4xqvhdyyazkrw7pwdpdppfnmn7j2n6cvq5zecm4atbppaslzad.onion">Tor</a>
+                <a class="tor" href="http://qwikxx4xqvhdyyazkrw7pwdpdppfnmn7j2n6cvq5zecm4atbppaslzad.onion">TOR</a>
+            </div>
         </div>
 
         <div class="card">
@@ -59,8 +65,10 @@
             <p>
                 Invidious is a YouTube frontend. Use it to browse YouTube without getting tracked.
             </p>
+            <div class="buttons">
                 <a href="https://invidious.qwik.space">WATCH</a>
-            <a href="http://qwikxxt6jvggxzxe2v2fuzro5j7ibgphxmblmri6wkj5vpicdbo2kwad.onion">TOR</a>
+                <a class="tor" href="http://qwikxxt6jvggxzxe2v2fuzro5j7ibgphxmblmri6wkj5vpicdbo2kwad.onion">TOR</a>
+            </div>
         </div>
     </div>
 
@@ -72,8 +80,8 @@
             SERVICES
         </h1>
         <p>
-            These services requires an account, which you can create <a href="https://qam.qwik.space">here</a> 
+            These services requires an account, which you can create at <a href="https://qam.qwik.space">qam.qwik.space</a>
-            [<a href="http://qwikooa6o5xx4xit4c7vubkqqaq4jj43z3zco6c3gfk6m7f43jxpleid.onion">Tor</a>].
+            (<a class="tor" href="http://qwikooa6o5xx4xit4c7vubkqqaq4jj43z3zco6c3gfk6m7f43jxpleid.onion">Tor</a>).
         </p>
         <div class="card">
             <h2>Gitea</h2>
@@ -81,8 +89,10 @@
                 Gitea is an alternative to Github, Gitlab, etc.
                 We host our own instance, but feel free to use it as well (if you're brave enough).
             </p>
+            <div class="buttons">
                 <a href="https://git.qwik.space">CODE</a>
-            <a href="http://qwikoob2jgyfaqsgenwvma4h3z44gei7a6ou7zcwd4c2mhuerakrywqd.onion">TOR</a>
+                <a class="tor" href="http://qwikoob2jgyfaqsgenwvma4h3z44gei7a6ou7zcwd4c2mhuerakrywqd.onion">TOR</a>
+            </div>
         </div>
 
         <div class="card">
@@ -90,8 +100,10 @@
             <p>
                 XMPP is an instant messaging protocol. You can find more info in the article below.
             </p>
+            <div class="buttons">
                 <a href="/articles/xmpp/intro">READ MORE</a>
             </div>
+        </div>
 
         <div class="card">
             <h2>Zulip</h2>
@@ -99,25 +111,31 @@
                 Zulip is a chat service. The UI <i>somewhat</i> resembles Discord.
                 It is quite advanced/bloated and we might switch it out for something else.
             </p>
+            <div class="buttons">
                 <a href="https://chat.qwik.space">CHAT</a>
             </div>
+        </div>
 
         <div class="card">
             <h2>Hedgedoc</h2>
             <p>
                 Hedgedoc is an online markdown editor featuring real-time collaboration.
             </p>
+            <div class="buttons">
                 <a href="https://docs.qwik.space">WRITE</a>
             </div>
+        </div>
 
         <div class="card">
             <h2>CryptPad</h2>
             <p>
                 We run an instance of CryptPad. As of now, accounts are supplied as per request. See contact options below.
             </p>
+            <div class="buttons">
                 <a href="https://pad.qwik.space">WRITE</a>
             </div>
         </div>
+    </div>
 
     <div class="separator"></div>
 
@@ -143,7 +161,7 @@
                     <p>burnyllama [at] protonmail [dot] com</p>
                 </div>
 
-                <p style=" margin: .5rem .2rem 0 .2rem;">You can read about news for qwik.space, rants, and other stuffs over at my <a style="font-size: inherit;" href="https://blog.qwik.space">blog</a> [<a href="http://qwikoov6bmdskhp5o32d2ju6nntwhpdhcrjnllajdryq5gvxfamgffqd.onion">Tor</a>].</p>
+                <p style=" margin: .5rem .2rem 0 .2rem;">You can read about news for qwik.space, rants, and other stuffs over at my <a style="font-size: inherit;" href="https://blog.qwik.space">blog</a> [<a class="tor" href="http://qwikoov6bmdskhp5o32d2ju6nntwhpdhcrjnllajdryq5gvxfamgffqd.onion">Tor</a>].</p>
             </div>
             <div class="card maintainer">
                 <h2>furo</h2>
@@ -183,7 +201,7 @@
             If you want to contribute, feel free to <a href="#contact">contact us</a>.
         </p>
 
-        <p class="footer-header"><a href="http://qwikxxeiw4kgmml6vjw2bsxtviuwjce735dunai2djhu6q7qbacq73id.onion">Visit us on TOR</a></p>
+        <p class="footer-header"><a class="tor" href="http://qwikxxeiw4kgmml6vjw2bsxtviuwjce735dunai2djhu6q7qbacq73id.onion">Visit us on TOR!</a></p>
     </div>
 </body>
 </html>