From 088d6a54586f3c9f6e067530a7c9d5a2c7da4dea Mon Sep 17 00:00:00 2001
From: Shihaam Abdul Rahman <shihaam@shihaam.me>
Date: Sun, 22 Mar 2026 23:15:33 +0500
Subject: [PATCH] add tag line and favicons

---
 README.md  |  2 ++
 index.html |  6 +++++-
 styles.css | 22 ++++++++++++++++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c4c3184..159c90b 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # Roadworthiness Sticker Generator
 
+*Roadworthy stickers for unworthy roads - if they can't fix the potholes, they can't spot the difference*
+
 > **Legal Disclaimer:** For legal reasons, this is a **joke**. This tool is for educational and entertainment purposes only. Do not use generated stickers for any official or fraudulent purposes.
 
 ---
diff --git a/index.html b/index.html
index f6af432..c46bbc0 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
     <meta name="darkreader-lock">
     <meta name="color-scheme" content="light dark">
     <title>Roadworthiness Sticker Generator</title>
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
 
     <!-- Material Design Icons -->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -37,7 +38,10 @@
         <header class="app-bar">
             <div class="app-bar-content">
                 <span class="material-icons">directions_car</span>
-                <h1>Roadworthiness Sticker Generator</h1>
+                <div class="app-bar-text">
+                    <h1>Roadworthiness Sticker Generator</h1>
+                    <p class="tagline">Roadworthy stickers for unworthy roads - if they can't fix the potholes, they can't spot the difference</p>
+                </div>
                 <a href="https://git.shihaam.dev/shihaam/roadworthiness-sticker-generator" target="_blank" rel="noopener" class="git-link" title="View Source">
                     <span class="material-icons">code</span>
                 </a>
diff --git a/styles.css b/styles.css
index f7e92d8..75277e6 100644
--- a/styles.css
+++ b/styles.css
@@ -211,11 +211,25 @@ body {
     gap: 12px;
 }
 
+.app-bar-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
 .app-bar h1 {
     font: var(--md-sys-typescale-headline-medium);
     font-weight: 500;
 }
 
+.app-bar .tagline {
+    font-size: 0.8rem;
+    font-style: italic;
+    color: var(--md-sys-color-outline);
+    margin: 0;
+    line-height: 1.3;
+}
+
 .app-bar .material-icons {
     font-size: 28px;
     color: var(--md-sys-color-primary);
@@ -557,6 +571,10 @@ body {
     .app-bar h1 {
         font-size: 1.25rem;
     }
+
+    .app-bar .tagline {
+        font-size: 0.7rem;
+    }
 }
 
 @media (max-width: 600px) {
@@ -568,6 +586,10 @@ body {
         font-size: 1.1rem;
     }
 
+    .app-bar .tagline {
+        display: none;
+    }
+
     .main-content {
         padding: 16px;
         gap: 16px;