Drop <button> under <a>

cgzones · matze · commit 1fab87c2ebce · 2025-01-07T23:00:30.000+01:00
Reported by https://validator.w3.org/nu/: The element button must not appear as a descendant of the a element.
diff --git a/src/themes/style.css b/src/themes/style.css
@@ -63,6 +63,8 @@ main {
 
 #nav-title {
   margin-right: auto;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 
 header ul {
@@ -75,16 +77,19 @@ header li {
   display: inline-block;
 }
 
-header button {
+header .navigation {
   color: #39bae6;
   border: none;
   padding: 1rem;
   background: none;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 1.125rem;
 }
 
-header button:hover {
+header .navigation:hover {
   background-color: #39bae6;
   color: #0f1419;
+  cursor: pointer;
 }
 
 button {
diff --git a/templates/base.html b/templates/base.html
@@ -14,7 +14,7 @@
   <body>
     <div id="main-container">
       <header>
-        <span id="nav-title"><a href="{{ base_path.path() }}"><button>home</button></a></span>
+        <span id="nav-title"><a href="{{ base_path.path() }}" class="navigation">home</a></span>
         <nav>
           <ul>
             {% block nav %}{% endblock %}
diff --git a/templates/index.html b/templates/index.html
@@ -63,7 +63,7 @@
 {% endblock %}
 
 {% block nav %}
-    <li><button onclick="openFile()">open</button></li>
+    <li><button onclick="openFile()" class="navigation">open</button></li>
 {% endblock %}
 
 {%- block content -%}
diff --git a/templates/paste.html b/templates/paste.html
@@ -47,9 +47,9 @@
 
 {% block nav %}
   {% if can_delete %}
-    <li><a href="{{ base_path.join("delete/") }}{{ id }}"><button>delete</button></a></li>
+    <li><a href="{{ base_path.join("delete/") }}{{ id }}" class="navigation">delete</a></li>
   {% endif %}
-    <li><a href="{{ base_path.join(id) }}?dl={{ ext }}"><button>download</button></a></li>
-    <li><a href="{{ base_path.join(id) }}?fmt=raw"><button>raw</button></a></li>
-    <li><a href="{{ base_path.join(id) }}?fmt=qr"><button>qr</button></a></li>
+    <li><a href="{{ base_path.join(id) }}?dl={{ ext }}" class="navigation">download</a></li>
+    <li><a href="{{ base_path.join(id) }}?fmt=raw" class="navigation">raw</a></li>
+    <li><a href="{{ base_path.join(id) }}?fmt=qr" class="navigation">qr</a></li>
 {% endblock %}
