From b53a2c57518841d2dbfc71624687b002f3f45035 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Thu, 9 Apr 2026 12:42:27 +0200
Subject: [PATCH] ui: implement typography, scrollbars, and minimalist
 empty/focus states

---
 static/css/style.css | 46 +++++++++++++++++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 9 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 8a19584..d8641f1 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -51,10 +51,36 @@
   box-sizing: border-box;
 }
 
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+:focus-visible {
+  outline: 1px solid var(--text);
+  outline-offset: 2px;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
 body {
   background-color: var(--bg);
   color: var(--text);
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: var(--text-lg);
   line-height: 1.5;
   margin: 0;
@@ -209,13 +235,13 @@ header {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--surface-hover);
+  background-color: var(--surface-hover);
+  background-image: repeating-linear-gradient(45deg, var(--border) 0, var(--border) 1px, transparent 1px, transparent 6px);
   border: 1px solid var(--border);
-  font-size: var(--text-xs);
-  color: var(--text-muted);
+  font-size: 0;
+  color: transparent;
   flex-shrink: 0;
-  text-align: center;
-  padding: var(--space-xs);
+  user-select: none;
 }
 
 .search-result-info {
@@ -328,10 +354,12 @@ a:visited {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-muted);
-  font-size: var(--text-base);
-  background: var(--surface);
+  color: transparent;
+  font-size: 0;
+  background-color: var(--surface);
+  background-image: repeating-linear-gradient(45deg, var(--border) 0, var(--border) 1px, transparent 1px, transparent 8px);
   border: 1px solid var(--border);
+  user-select: none;
 }
 
 .catalog-title {