doc(Home): update logo effect (#6621)

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Pages/Index.razor

@@ -13,6 +13,7 @@
                 </span>
             </a>
             <div class="bb-logo d-sm-block mx-auto my-5">
+                <div class="holder"></div>
                 <img src="./favicon.png" alt="bootstrap-blazor">
             </div>
             <h1 class="mb-3 fw-semibold">@Localizer["Title"]</h1>

src/BootstrapBlazor.Server/Components/Pages/Index.razor.css

@@ -38,6 +38,11 @@
         border-radius: 30px;
     }
 
+        .bd-masthead .bb-logo .holder {
+            background-color: var(--bb-primary-color);
+        }
+
+        .bd-masthead .bb-logo .holder,
         .bd-masthead .bb-logo img {
             width: calc(100% - 2 * var(--bb-btn-space));
             height: calc(100% - 2 * var(--bb-btn-space));