Adjust header text and navigation link styles for better responsiveness and consistency.

Author: phil-scott-78

Spectre.Docs/Components/Shared/SharedHeader.razor

@@ -78,27 +78,27 @@
                         </g>
                     </svg>
 
-                    <span class="text-2xl font-bold bg-gradient-to-r from-primary-600 to-tertiary-one-600 dark:from-primary-400 dark:to-tertiary-one-400 bg-clip-text text-transparent">
+                    <span class="text-xl lg:text-2xl font-bold bg-gradient-to-r from-primary-600 to-tertiary-one-600 dark:from-primary-400 dark:to-tertiary-one-400 bg-clip-text text-transparent">
                         Spectre.Console
                     </span>
                 </a>
             </div>
 
             <!-- Navigation -->
-            <nav class="hidden md:flex items-center space-x-1">
-                <a href="/" class="px-3 py-2 rounded-md text-sm font-medium @(CurrentSection == "" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
+            <nav class="hidden md:flex items-center space-x-1 text-xs lg:text-sm font-medium">
+                <a href="/" class="px-2 lg:px-3 py-2 rounded-md @(CurrentSection == "" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
                     Home
                 </a>
-                <a href="/console" class="px-3 py-2 rounded-md text-sm font-medium @(CurrentSection == "Console" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
+                <a href="/console" class="px-2 lg:px-3 py-2 rounded-md  @(CurrentSection == "Console" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
                     Console
                 </a>
-                <a href="/cli" class="px-3 py-2 rounded-md text-sm font-medium @(CurrentSection == "Cli" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
+                <a href="/cli" class="px-2 lg:px-3 py-2 rounded-md @(CurrentSection == "Cli" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
                     CLI
                 </a>
-                <a href="/blog" class="px-3 py-2 rounded-md text-sm font-medium @(CurrentSection == "Blog" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
+                <a href="/blog" class="px-2 lg:px-3 py-2 rounded-md  @(CurrentSection == "Blog" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
                     Blog
                 </a>
-                <a href="https://github.com/spectreconsole" class="px-3 py-2 rounded-md text-sm font-medium text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800 transition-colors">
+                <a href="https://github.com/spectreconsole" class="px-2 lg:px-3 py-2 rounded-md text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800 transition-colors">
                     GitHub
                 </a>
             </nav>