From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 13 Nov 2023 05:59:34 +0000 (-0800)
Subject: Move anchored download button to own row
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=1f3a7819c543ebc542627f04f37ed31fe9cec718;p=ens2hex

Move anchored download button to own row

This is a cleaner and more legible look, especially on smaller screens
---

diff --git a/index.html b/index.html
index 4ec7348..d091a05 100644
--- a/index.html
+++ b/index.html
@@ -193,22 +193,26 @@
 
     output#table {
       display: none;
-      position: relative;
     }
 
     #download {
       cursor: pointer;
-      position: absolute;
-      top: 8px;
-      right: 8px;
       background: none;
       border: none;
       padding: 0;
       transition: filter 400ms;
     }
 
+    label[for="download"] {
+      cursor: pointer;
+      display: inline-block;
+      color: var(--secondary);
+      font-weight: 500;
+      transform: translateY(-5px);
+    }
+
     #download:is(:hover, :focus) {
-      filter: drop-shadow(0 0 8px var(--secondary-lighter));
+      filter: drop-shadow(0 0 8px var(--secondary));
       transition: filter 200ms;
     }
 
@@ -323,6 +327,7 @@
               <path d="m9 15 3 3 3-3"></path>
             </svg>
           </button>
+          <label for="download">Download to CSV file</label>
           <table>
             <thead>
               <tr>