TPH styling

src/Layout/MainLayout.razor

@@ -5,11 +5,7 @@
     </div>
 
     <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-        </div>
-
-        <article class="content px-4">
+        <article class="content px-4 d-flex row justify-content-center text-center">
             @Body
         </article>
     </main>

src/Layout/MainLayout.razor.css

@@ -9,7 +9,7 @@ main {
 }
 
 .sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+    background-image: linear-gradient(225deg, #9423fc 0%, #feac70 99%);
 }
 
 .top-row {
@@ -27,23 +27,23 @@ main {
         text-decoration: none;
     }
 
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
+        .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+            text-decoration: underline;
+        }
 
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+        .top-row ::deep a:first-child {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
 
 @media (max-width: 640.98px) {
     .top-row {
         justify-content: space-between;
     }
 
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        margin-left: 0;
-    }
+        .top-row ::deep a, .top-row ::deep .btn-link {
+            margin-left: 0;
+        }
 }
 
 @media (min-width: 641px) {
@@ -64,14 +64,14 @@ main {
         z-index: 1;
     }
 
-    .top-row.auth ::deep a:first-child {
-        flex: 1;
-        text-align: right;
-        width: 0;
-    }
+        .top-row.auth ::deep a:first-child {
+            flex: 1;
+            text-align: right;
+            width: 0;
+        }
 
     .top-row, article {
         padding-left: 2rem !important;
         padding-right: 1.5rem !important;
     }
-}
+}

src/Pages/Home.razor

@@ -1,7 +1,16 @@
 @page "/"
 
-<PageTitle>Home</PageTitle>
+<PageTitle>TPH Blazor Spotlight Example</PageTitle>
 
-<h1>Hello, world!</h1>
+<h1>Welcome to TPH Blazor Spotlight Example</h1>
+
+<h5 class="text-secondary">For everyone that doesn't know: TPH = The Programmer's Hangout</h5>
+
+<h4 class="mt-5">Links</h4>
+
+<p class="mb-0">Discord Server</p>
+<a href="https://discord.gg/programming">discord.gg/programming</a>
+
+<p class="mt-4 mb-0">GitHub Repository</p>
+<a href="https://github.com/Stone-Red-Code/TPH-Blazor-Spotlight-Example">github.com/Stone-Red-Code/TPH-Blazor-Spotlight-Example</a>
 
-Welcome to your new app.

src/Program.cs

@@ -1,11 +1,12 @@
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+
 using TphBlazorSpotlightExample;
 
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
+WebAssemblyHostBuilder builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.RootComponents.Add<App>("#app");
 builder.RootComponents.Add<HeadOutlet>("head::after");
 
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 
-await builder.Build().RunAsync();
+await builder.Build().RunAsync();

src/_Imports.razor

@@ -8,3 +8,4 @@
 @using Microsoft.JSInterop
 @using TphBlazorSpotlightExample
 @using TphBlazorSpotlightExample.Layout
+@using TphBlazorSpotlightExample.Models

src/wwwroot/css/app.css

@@ -1,5 +1,8 @@
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    background-color: #121240;
+    color: aliceblue !important;
+    overflow: hidden;
 }
 
 h1:focus {
@@ -7,7 +10,7 @@ h1:focus {
 }
 
 a, .btn-link {
-    color: #0071c1;
+    color: #33AAFF;
 }
 
 .btn-primary {
@@ -17,7 +20,7 @@ a, .btn-link {
 }
 
 .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
 }
 
 .content {
@@ -82,7 +85,7 @@ a, .btn-link {
     }
 
         .loading-progress circle:last-child {
-            stroke: #1b6ec2;
+            stroke: #9423fc;
             stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
             transition: stroke-dasharray 0.05s ease-in-out;
         }