Improve CSS styles of the sample site to be simpler

Author: jsakamoto

SampleApps/BlazorWasmApp/BlazorWasmApp.csproj

@@ -13,7 +13,7 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.8" PrivateAssets="all" />
     <PackageReference Include="PublishSPAforGitHubPages.Build" Version="3.0.0" />
-    <PackageReference Include="System.Text.Json" Version="8.0.4" />
+    <PackageReference Include="System.Text.Json" Version="8.0.5" />
   </ItemGroup>
 
   <ItemGroup>

SampleApps/BlazorWasmApp/Shared/Layout.razor.css

@@ -36,18 +36,14 @@ main {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    border: dashed 2px blueviolet;
+    --border-size: 2px;
+    border: dashed var(--border-size) blueviolet;
     position: absolute;
     inset: 0;
     text-align: center;
+    line-height: calc(100cqh - (var(--border-size) * 2));
 }
 
-    ::deep h1::before {
-        content: "";
-        display: block;
-        height: calc(50% - 0.8em);
-    }
-
 ::deep .split-container {
     --splitter-bar-size: 14px;
 }
@@ -57,4 +53,5 @@ main {
     display: flex;
     justify-content: center;
     align-items: center;
+    container-type: size;
 }