docs: styling

algorandfoundation · Feb 11, 2025 · f335d2a · f335d2a
1 parent ff3a32d
commit f335d2a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -121,11 +121,18 @@ export const lang = "en";
                                 </TabItem>
                             </Tabs>
                         </div>
+                        <div class="flex flex-col gap-4">
                         <a
-                            class="text-white/80 hover:text-[#BFBFF9]"
+                            class="text-white/80 block hover:text-[#BFBFF9]"
                             href="https://developer.algorand.co/nodes/nodekit-quick-start"
                             >Guides &amp; Documentation <Icon name="external" />
                         </a>
+                        <a
+                            class="text-white/80 block hover:text-[#BFBFF9]"
+                            href="/offline"
+                            >Quick keyreg offline tool<Icon name="external" />
+                        </a>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/docs/src/pages/offline.astro b/docs/src/pages/offline.astro
@@ -9,7 +9,7 @@ export const lang = "en";
 
 <html lang="en" data-mode="dark" class="dark">
   <head>
-    <title>NodeKit - Keyreg Offline helper</title>
+    <title>NodeKit - Quick Keyreg Offline</title>
     <meta
       name="description"
       content="Quickly sign a keyreg offline for your account(s)"
@@ -87,7 +87,7 @@ export const lang = "en";
           .map(({ addr, label, online }) => {
             const destLink = `https://lora.algokit.io/mainnet/transaction-wizard?type[0]=keyreg&sender[0]=${addr}`;
             return `
-                <div class="my-4 border-2 p-4 border-white/20 bg-blue-500/10 rounded-lg max-w-[300px] flex flex-col gap-5">
+                <div class="my-4 border-2 p-4 border-white/20 bg-blue-500/10 rounded-lg max-w-[calc(min(98vw,420px))] flex flex-col gap-5">
                     <div class="text-white font-bold truncate">${addr}</div>
                     <div class="flex text-sm justify-between"><span>Participating</span><span class="${online ? "text-green-400" : "text-red-400"}">${online ? "Yes" : "No"}</span></div>
                     <div class="flex justify-between items-center">
@@ -231,25 +231,29 @@ export const lang = "en";
             </svg>
           </a>
         </div>
-        <div class="w-full h-svh mx-4 flex-grow grow">
+        <div class="w-full h-svh mx-4 flex flex-col" style={{justifyContent: "safe center"}}>
           <div
-            class="w-full mt-[33svh] flex gap-6 flex-col items-center justify-center px-6 pb-10"
+            class="w-full mt-14 flex gap-10 flex-col items-center justify-center px-6 pb-10"
           >
-            <div class="font-bold text-white mb-2 text-xl">
-              Keyreg offline utility
+            <div class="font-bold text-white text-xl text-[#a9a9f6]">
+              Quick <span class="text-white/90">keyreg offline</span> tool
             </div>
-            <div class="">Construct a keyreg offline transaction.</div>
             <input
               type="text"
               id="input-query"
-              class="bg-gray-50 disabled:bg-gray-500 border border-gray-300 disabled:border-gray-700 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-[300px] max-w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              class="bg-gray-50 disabled:bg-gray-500 border border-gray-300 disabled:border-gray-700 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-[calc(min(98vw,420px))] max-w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
               placeholder="Enter your account address or NFD"
               required
               autofocus
               oninput="changeQuery()"
             />
-            <div id="results-container" class="w-[300px] max-w-full hidden">
-              <div id="status" class="text-white/70 mt-2 mb-4">Results:</div>
+            <div id="results-container" class="w-[calc(min(98vw,420px))] max-w-full">
+              <div id="status" class="text-white/70 mt-2 mb-4 flex flex-col gap-2">
+                  <div class="mb-2">Need to register offline in a jiffy? Easy as 1-2:</div>
+                  <div>1. Find your account by address or NFD.</div>
+                  <div>2. Sign offline keyreg via Lora.</div>
+                <div class="mt-2"><i>This is a web based workflow. Nodekit not required.</i></div>
+              </div>
               <div id="results" class=""></div>
             </div>
           </div>