refactor: 增加响应式支持

Author: ArgoZhang

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;