From a9c881979c1b6133e49783d0a96f3c5f1b59480a Mon Sep 17 00:00:00 2001
From: pluja <codeberg@r3d.red>
Date: Tue, 27 Feb 2024 23:03:28 +0100
Subject: [PATCH] styling improvements

---
 src/frontend/templates/about.html        | 41 ++++++++++++------------
 src/frontend/templates/layouts/main.html |  2 +-
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/frontend/templates/about.html b/src/frontend/templates/about.html
index 3934528..1294cc8 100644
--- a/src/frontend/templates/about.html
+++ b/src/frontend/templates/about.html
@@ -64,7 +64,7 @@
     display: block;
     word-wrap: break-word;
     max-width: 90vw;
-    margin-top: 1em;
+    margin-top: .2em;
   }
 
   hr {
@@ -104,8 +104,8 @@
     </div>
   </div>
 
-  <article class="max-w-5xl font-inter">
-    <div class="p-2 m-2 rounded-xl bg-gray-500/10">
+  <article class="max-w-5xl [&>div]:px-4 [&>div]:py-1  font-inter">
+    <div class="m-2 rounded-xl bg-gray-500/10">
       <h2 id="why" class="font-bold text-lime-400">why kycnot.me?</h2>
       <p>
         Cryptocurrencies were created to revolutionize the way we pay for goods
@@ -131,7 +131,7 @@
       </p>
     </div>
 
-    <div class="p-2 m-2 rounded-xl bg-gray-500/10">
+    <div class="m-2 rounded-xl bg-gray-500/10">
       <h2 id="what" class="font-bold text-lime-400">what's KYC?</h2>
       <div class="space-y-2">
         <p>
@@ -184,7 +184,7 @@
       </div>
     </div>
 
-    <div class="p-2 m-2 rounded-xl bg-gray-500/10">
+    <div class="m-2 rounded-xl bg-gray-500/10">
       <h2 id="btcxmr">why only Bitcoin and Monero?</h2>
       <p>
         <strong>Bitcoin</strong>: it is the most well-known cryptocurrency. It's
@@ -202,7 +202,7 @@
       </p>
     </div>
 
-    <div class="p-2 m-2 rounded-xl bg-gray-500/10">
+    <div class="m-2 rounded-xl bg-gray-500/10">
       <h2 id="listings">listings</h2>
       <h3 id="request">request</h3>
       <p>
@@ -331,7 +331,7 @@
       </p>
     </div>
 
-    <div class="p-2 m-2 rounded-xl bg-gray-500/10">
+    <div class="m-2 rounded-xl bg-gray-500/10">
       <h2 id="tos">terms of service auto-reviews</h2>
 
       <p>
@@ -354,7 +354,7 @@
       </p>
     </div>
 
-    <div class="p-2 m-2 rounded-xl bg-gray-500/10">
+    <div class="m-2 rounded-xl bg-gray-500/10">
       <h2 id="support">support this project</h2>
 
       <p>
@@ -363,7 +363,7 @@
         >, you can donate using the following methods:
       </p>
 
-      <div class="[&>span]:block space-y-2">
+      <div class="[&>span]:block space-y-6">
         <span>
           <span class="flex items-center space-x-2">
             <svg
@@ -396,7 +396,7 @@
           </p>
           <code>{{.Xmr}}</code>
 
-          <details class="my-2 rounded-lg cursor-pointer">
+          <details class="my-2 mt-2 rounded-lg cursor-pointer">
             <summary class="flex items-center space-x-1 text-sm text-white/60">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -527,7 +527,6 @@
             <a
               target="_blank"
               rel="noreferrer"
-              class="underline"
               href="{{.Lnn}}"
               >Tip via Lightning Network</a
             >
@@ -535,8 +534,8 @@
         </span>
       </div>
 
-      <p class="px-4 text-sm text-white/60">
-        Note: I fund this project entirely on my own, as an independent
+      <p class="px-4 mt-6 text-sm text-white/60">
+        <b>Note</b>: I fund this project entirely on my own, as an independent
         individual without sponsors or alternative revenue streams, I rely
         solely on <b>donations</b> and
         <b><a class="text-sm text-white/60" href="#referrals">referrals</a></b>
@@ -548,7 +547,7 @@
       </p>
     </div>
 
-    <div class="p-2 m-2 rounded-xl bg-gray-500/10">
+    <div class="m-2 rounded-xl bg-gray-500/10">
       <h2 id="contact">contact</h2>
       <p>
         Due to misuse and the inability to manage them effectively, I have
@@ -563,7 +562,7 @@
         messaging option.
       </p>
 
-      <div class="[&>span]:block space-y-2">
+      <div class="[&>span]:block [&>span>a]:!no-underline [&>span>a]:font-bold pb-2 space-y-2">
         <span>
           <a
             target="_blank"
@@ -588,7 +587,7 @@
       </div>
     </div>
 
-    <div class="p-2 m-2 rounded-xl bg-gray-500/10">
+    <div class="m-2 rounded-xl bg-gray-500/10">
       <h2 id="comments">(nostr) comments</h2>
 
       <p>
@@ -618,7 +617,7 @@
       </p>
     </div>
 
-    <div class="p-2 m-2 rounded-xl bg-gray-500/10">
+    <div class="m-2 rounded-xl bg-gray-500/10">
       <h2 id="transparency">transparency</h2>
 
       <p>
@@ -645,7 +644,7 @@
       </div>
     </div>
 
-    <div class="p-2 m-2 rounded-xl bg-gray-500/10">
+    <div class="m-2 rounded-xl bg-gray-500/10">
       <h2 id="privacy">privacy</h2>
 
       <p>
@@ -678,7 +677,7 @@
       </div>
     </div>
 
-    <div class="p-2 m-2 rounded-xl bg-gray-500/10">
+    <div class="m-2 rounded-xl bg-gray-500/10">
       <h2 id="api">api</h2>
 
       <p>KYCnot.me offers a public API to get its data.</p>
@@ -705,7 +704,7 @@
       </p>
     </div>
 
-    <div class="p-2 m-2 rounded-xl bg-gray-500/10">
+    <div class="m-2 rounded-xl bg-gray-500/10">
       <h2 id="referrals">referrals</h2>
 
       <p>
@@ -738,7 +737,7 @@
       </p>
     </div>
 
-    <div class="p-2 m-2 rounded-xl bg-gray-500/10">
+    <div class="m-2 rounded-xl bg-gray-500/10">
       <h2 id="disclaimer">disclaimer</h2>
 
       <p>
diff --git a/src/frontend/templates/layouts/main.html b/src/frontend/templates/layouts/main.html
index 72646cb..ada6efa 100644
--- a/src/frontend/templates/layouts/main.html
+++ b/src/frontend/templates/layouts/main.html
@@ -102,7 +102,7 @@
 
     {{ template "content" . }}
 
-    <footer class="mb-6 space-x-4 text-md text-center *:text-lime-600">
+    <footer class="my-6 space-x-4 text-md text-center *:text-lime-600">
         <a class="hover:text-lime-300" href="https://nostr.com/npub188x98j0r7l2fszeph6j7hj99h8xl07n989pskk5zd69d2fcksetq5mgcqf">nostr</a>
         <a class="hover:text-lime-300" href="https://fosstodon.org/@kycnotme">mastodon</a>
         <a class="hover:text-lime-300" href="http://kycnotmezdiftahfmc34pqbpicxlnx3jbf5p7jypge7gdvduu7i6qjqd.onion/">tor</a>