remove outline on focus

Author: mythz

MyApp/Components/Account/Shared/ManageLayout.razor

@@ -2,7 +2,7 @@
 @layout AccountLayout
 
 <div class="mt-8 mx-auto max-w-screen-lg">
-    <Heading1>Manage your account</Heading1>
+    <Heading1 class="focus:outline-none">Manage your account</Heading1>
     <Heading4>Change your account settings</Heading4>
     <hr class="mt-4 dark:border-gray-700" />
     <div class="flex flex-wrap">

MyApp/Components/Pages/Home.razor

@@ -22,7 +22,7 @@
         <div class="text-center">
             @if (!string.IsNullOrEmpty(AppData.Config.FeaturedTitle))
             {
-                <h1 class="pt-12 text-white text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
+                <h1 tabindex="-1" class="pt-12 text-white text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl focus:outline-none">
                     @AppData.Config.FeaturedTitle
                 </h1>
             }

MyApp/Components/Pages/Posts/Post.razor

@@ -18,7 +18,7 @@
             var authorHref = Blog.GetAuthorLink(author?.Name);
             var authorProfileUrl = Blog.GetAuthorProfileUrl(doc.Author);
             <article class="mt-20">
-                <h1 class="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
+                <h1 class="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left focus:outline-none">
                     @doc.Title
                 </h1>
                 <div class="flex justify-between">

MyApp/wwwroot/pages/TemplateHome.mjs

@@ -49,7 +49,7 @@ export default {
 <div class="flex justify-center my-20 py-20 bg-slate-100 dark:bg-slate-800">
     <div class="text-center">
         <svg class="text-indigo-600 w-36 h-36 inline-block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m18 16l-4-3.2V16H6V8h8v3.2L18 8m2-4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z" /></svg>
-        <h1 class="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
+        <h1 class="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left focus:outline-none">
             Videos
         </h1>
     </div>

MyApp/wwwroot/tailwind/ServiceStack.Blazor.html

@@ -1306,7 +1306,7 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 <h1 class=@ClassNames(Classes, Class) @attributes="AdditionalAttributes">@ChildContent</h1>
 @code {
 [Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
-public static string Classes { get; set; } = "mb-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl";
+public static string Classes { get; set; } = "mb-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl focus:outline-none";
 }
 @inherits UiComponentLiteBase
 <h2 class=@ClassNames(Classes, Class) @attributes="AdditionalAttributes">@ChildContent</h2>