From b620d8eee665ee412d9d30ecff315b29aaac81e2 Mon Sep 17 00:00:00 2001
From: Nico Verbruggen <mail@nicoverbruggen.be>
Date: Mon, 23 Mar 2026 23:17:06 +0100
Subject: [PATCH] Final design tweaks

---
 web/src/css/style.css | 29 ++++++++---------------------
 web/src/index.html    | 17 +++++++++--------
 2 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/web/src/css/style.css b/web/src/css/style.css
index e5462ac..be800f6 100644
--- a/web/src/css/style.css
+++ b/web/src/css/style.css
@@ -96,6 +96,8 @@ h1 {
     margin-top: 0.25rem;
 }
 
+
+
 h2 {
     font-size: 1.1rem;
     font-weight: 600;
@@ -290,32 +292,17 @@ h2 {
     line-height: 1.5;
 }
 
-.mode-card-title {
-    position: relative;
+.mode-card-recommended {
+    border-left-color: var(--primary);
 }
 
-.recommended-pill {
-    position: absolute;
-    top: -8px;
-    right: -20px;
-    margin-left: auto;
-    font-size: 10px;
+.recommended-label {
+    font-size: 0.7rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    background: var(--primary);
-    color: #fff;
-    padding: 0.25rem 0.6rem;
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-    line-height: 1.5;
-}
-
-@media (max-width: 500px) {
-    .recommended-pill {
-        position: static;
-        border-radius: 8px;
-    }
+    color: var(--primary);
+    margin-bottom: 0.35rem;
 }
 
 /* NickelMenu option radio cards */
diff --git a/web/src/index.html b/web/src/index.html
index 6987bb9..c2038ea 100644
--- a/web/src/index.html
+++ b/web/src/index.html
@@ -77,7 +77,7 @@
         <main>
         <header class="hero">
             <h1>KoboPatch <span class="hero-accent">Web UI</span> <span class="beta-pill" hidden>beta</span></h1>
-            <p class="subtitle">A browser-based tool for installing NickelMenu or applying custom patches on your Kobo e-reader.</p>
+            <p class="subtitle">Customize your Kobo e-reader with NickelMenu or community patches.</p>
         </header>
 
         <!-- Shown until JS initialises -->
@@ -99,13 +99,11 @@
             </div>
             <p>How would you like to set up your Kobo?</p>
             <div class="mode-cards">
-                <button id="btn-connect" class="mode-card mode-card-btn">
+                <button id="btn-connect" class="mode-card mode-card-btn mode-card-recommended">
                     <svg class="mode-card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15,7V11H16V13H13V5H15L12,1L9,5H11V13H8V10.93C8.66,10.59 9.1,9.87 9.1,9A2.1,2.1 0 0,0 7,6.9C5.84,6.9 4.9,7.84 4.9,9C4.9,9.87 5.34,10.59 6,10.93V13A2,2 0 0,0 8,15H11V18.05C10.29,18.32 9.75,18.93 9.75,19.75A1.75,1.75 0 0,0 11.5,21.5C12.47,21.5 13.25,20.72 13.25,19.75C13.25,18.93 12.71,18.32 12,18.05V15H16A2,2 0 0,0 18,13V11H19V7H15Z"/></svg>
                     <div class="mode-card-body">
-                        <div class="mode-card-title">
-                            Connect my Kobo
-                            <span class="recommended-pill">recommended</span>
-                        </div>
+                        <div class="mode-card-title">Connect my Kobo</div>
+                        <div class="recommended-label">Recommended</div>
                         <div class="mode-card-desc">Connect your device via USB. Your device will be automatically identified, and this is the easiest way to apply customizations. You will have the option to apply these changes directly, or you can download a ZIP.</div>
                     </div>
                 </button>
@@ -209,10 +207,11 @@
         <section id="step-mode" class="step" hidden>
             <p>What would you like to do?</p>
             <div class="mode-cards" role="radiogroup" aria-label="Mode selection">
-                <label class="mode-card mode-card-selected">
+                <label class="mode-card mode-card-selected mode-card-recommended">
                     <input type="radio" name="mode" value="nickelmenu" checked>
                     <div class="mode-card-body">
-                        <div class="mode-card-title">Install or remove NickelMenu <span class="recommended-pill">recommended</span></div>
+                        <div class="mode-card-title">Install or remove NickelMenu</div>
+                        <div class="recommended-label">Recommended</div>
                         <div class="mode-card-desc">Installs a custom menu and various tweaks for your device. Works with most Kobo devices. The safest solution, as it has a lot of error checking and a failsafe mechanism which will automatically uninstall it as a last resort. </div>
                     </div>
                 </label>
@@ -422,6 +421,8 @@
             &nbsp;&middot;&nbsp;
             <a href="https://github.com/nicoverbruggen/kobopatch-webui" class="site-footer-link" target="_blank">GitHub</a>
             &nbsp;&middot;&nbsp;
+            <a href="https://nicoverbruggen.be/blog/kobopatch-webui" class="site-footer-link" target="_blank">About</a>
+            &nbsp;&middot;&nbsp;
             <a id="commit-link" class="site-footer-link" href="https://github.com/nicoverbruggen/kobopatch-webui" target="_blank"><span id="commit-hash"></span></a>
         </p>
         <p class="site-footer-attribution">