Login button styling

frontend/src/assets/pagerite.css

@@ -432,18 +432,24 @@ article h1 .edit-link {
   opacity: 1;
 }
 
-/* Login link injected by pagerite.js for anonymous visitors when an auth
-   server gates /_api (validate answered 401). Same corner as the site pen. */
-a.login-link {
+/* Login button injected by pagerite.js for anonymous visitors when an auth
+   proxy gates /_api (the settings probe answered 401). Same corner as the
+   site pen, styled like the edit pens. */
+button.login-link {
   position: absolute;
   top: 0.6rem;
   right: 1.25rem;
   z-index: 10;
-  font-size: 0.85rem;
+  font: inherit;
+  border: none;
+  cursor: pointer;
+  background: none;
+  padding: 0;
   opacity: 0.7;
+  text-shadow: 0 0 0.1em black;
 }
 
-a.login-link:hover {
+button.login-link:hover {
   opacity: 1;
 }
 

frontend/src/pagerite.js

@@ -64,11 +64,15 @@
   function addLoginLink() {
     const banner = document.getElementById("page-banner");
     if (!banner || banner.parentElement.querySelector(".login-link")) return;
-    const a = document.createElement("a");
-    a.className = "login-link";
-    a.href = "/auth/";
-    a.textContent = "log in";
-    banner.after(a);
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "login-link";
+    btn.title = "log in";
+    btn.textContent = "🔑";
+    btn.addEventListener("click", () => {
+      location.href = "/auth/";
+    });
+    banner.after(btn);
   }
 
   async function setupAuth() {