add tag line and favicons

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.
 
 ---

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>

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;