doc(Home): add responsive support for logo image (#6549)

* refactor: 精简样式

* refactor: 增加响应式支持

* refactor: 更新样式

* doc: 微调 OTP 样式

Author: ArgoZhang

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

@@ -7,22 +7,20 @@
 <section class="bd-masthead">
     <div class="container-xxl bd-gutter">
         <div class="col-md-8 mx-auto text-center">
-            <a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://github.com/dotnetcore/BootstrapBlazor?wt.mc_id=DT-MVP-5004174" rel="noopener" target="_blank">
-                <span class="d-sm-inline-flex align-items-center gap-1 py-2 px-3 mb-lg-0 rounded-5 masthead-notice">
+            <a class="d-inline-flex text-dark text-decoration-none" href="https://github.com/dotnetcore/BootstrapBlazor?wt.mc_id=DT-MVP-5004174" rel="noopener" target="_blank">
+                <span class="py-2 px-3 rounded-5 masthead-notice">
                     @Localizer["Support"]
                 </span>
             </a>
-            <img src="./favicon.png" alt="bootstrap-blazor" class="bb-logo d-none d-sm-block mx-auto my-5">
+            <img src="./favicon.png" alt="bootstrap-blazor" class="bb-logo d-sm-block mx-auto my-5">
             <h1 class="mb-3 fw-semibold">@Localizer["Title"]</h1>
             <p class="lead mb-4">
                 @Localizer["SubTitle"]
             </p>
-            <div class="d-flex flex-column flex-lg-row align-items-md-stretch justify-content-md-center gap-3 mb-4">
-                <a href="introduction/" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold">
-                    <i class="fa-solid fa-book-open"></i>
-                    <span class="ms-2">@Localizer["Docs"]</span>
-                </a>
-            </div>
+            <a href="introduction" class="btn btn-lg bd-btn-lg btn-bd-primary mb-4 d-inline-flex align-items-center justify-content-center fw-semibold">
+                <i class="fa-solid fa-book-open"></i>
+                <span class="ms-2">@Localizer["Docs"]</span>
+            </a>
             <p class="text-body-secondary mb-0">
                 Currently <strong>@_versionString</strong>
                 <span class="px-1">·</span>

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

@@ -4,7 +4,7 @@
     --bd-pink-rgb: 214, 51, 132;
     --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
     --bd-accent-rgb: 255, 228, 132;
-    padding-top: calc(3rem + var(--bs-header-height));
+    padding-top: 3rem;
     background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.01), rgba(var(--bs-body-bg-rgb), 1) 85%), radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), 0.5), transparent 50%), radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), 0.5), transparent 50%), radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), 0.5), transparent 50%), radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), 0.5), transparent 50%);
     margin-top: calc(0px - var(--bs-header-height));
 }
@@ -88,10 +88,14 @@
     }
 
 @media (min-width: 768px) {
-    .bd-masthead .lead {
-        font-size: calc(1.275rem + .3vw);
+    .bd-masthead {
+        padding-top: calc(3rem + var(--bs-header-height));
     }
 
+        .bd-masthead .lead {
+            font-size: calc(1.275rem + .3vw);
+        }
+
     .welcome-header {
         margin-top: 0;
         margin-bottom: 0;

src/BootstrapBlazor.Server/Components/Samples/OtpInputs.razor

@@ -11,10 +11,12 @@
             text-align: center;
         }
 
+        @@media(max-width: 768px) {
             .otp-input-demo .bb-otp-input {
                 --bb-otp-item-width: 32px;
                 --bb-otp-font-size: 1.2em;
             }
+        }
     </style>
 </HeadContent>