Feature/redesign

LinkDotNet.Blog.Web/Pages/Admin/CreateNewBlogPostPage.razor

@@ -7,7 +7,9 @@
 @inject IRepository repository
 @inject IToastService toastService
 
-<CreateNewBlogPost Title="Create new BlogPost" OnBlogPostCreated="@(StoreBlogPostAsync)" ></CreateNewBlogPost>
+<div class="page">
+    <CreateNewBlogPost Title="Create new BlogPost" OnBlogPostCreated="@(StoreBlogPostAsync)" ></CreateNewBlogPost>
+</div>
 
 @code {
     private async Task StoreBlogPostAsync(BlogPost blogPost)

LinkDotNet.Blog.Web/Pages/Admin/DraftBlogPosts.razor

@@ -3,13 +3,16 @@
 @using LinkDotNet.Domain
 @attribute [Authorize]
 @inject IRepository repository
-<h3>Draft Blog Posts</h3>
 
-<div class="content px-4">
-    @for (var i = 0; i < blogPosts.Count; i++)
-    {
-        <ShortBlogPost BlogPost="blogPosts[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
-    }
+<div class="page">
+    <h3>Draft Blog Posts</h3>
+
+    <div class="content px-4">
+        @for (var i = 0; i < blogPosts.Count; i++)
+        {
+            <ShortBlogPost BlogPost="blogPosts[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
+        }
+    </div>
 </div>
 
 @code {

LinkDotNet.Blog.Web/Pages/Admin/UpdateBlogPostPage.razor

@@ -7,18 +7,20 @@
 @inject IRepository repository
 @inject IToastService toastService
 
-@if (blogPostFromDb != null)
-{
-    <CreateNewBlogPost
-        Title="Update BlogPost"
-        BlogPost="@blogPostFromDb"
-        OnBlogPostCreated="StoreBlogPostAsync"
-        ClearAfterCreated="false"></CreateNewBlogPost>
-}
-else
-{
-    <p>Loading...</p>
-}
+<div class="page">
+    @if (blogPostFromDb != null)
+    {
+        <CreateNewBlogPost
+            Title="Update BlogPost"
+            BlogPost="@blogPostFromDb"
+            OnBlogPostCreated="StoreBlogPostAsync"
+            ClearAfterCreated="false"></CreateNewBlogPost>
+    }
+    else
+    {
+        <p>Loading...</p>
+    }
+</div>
 
 @code {
     [Parameter]

LinkDotNet.Blog.Web/Pages/BlogPostPage.razor

@@ -8,38 +8,40 @@
 @inject IJSRuntime jsRuntime
 @inherits MarkdownComponentBase
 
-@if (BlogPost == null)
-{
-    <h3>Loading...</h3>
-}
-else
-{
-    <Title>@BlogPost.Title</Title>
-    <OgData Title="@BlogPost.Title" 
-            AbsolutePreviewImageUrl="@BlogPost.PreviewImageUrl" 
-            Description="@(Markdown.ToPlainText(BlogPost.ShortDescription))"
-            Keywords="@Tags"></OgData>
-    <div class="blog-outer-box">
-        <div class="content blog-container">
-            <div class="blog-content">
-                <header>
-                    <h1>@BlogPost.Title</h1></header>
-                <div class="blogpost-date">
-                    @BlogPost.UpdatedDate.ToString("dd/MM/yyyy")
-                </div>
+<div class="page">
+    @if (BlogPost == null)
+    {
+        <h3>Loading...</h3>
+    }
+    else
+    {
+        <Title>@BlogPost.Title</Title>
+        <OgData Title="@BlogPost.Title" 
+                AbsolutePreviewImageUrl="@BlogPost.PreviewImageUrl" 
+                Description="@(Markdown.ToPlainText(BlogPost.ShortDescription))"
+                Keywords="@Tags"></OgData>
+        <div class="blog-outer-box">
+            <div class="content blog-container">
+                <div class="blog-content">
+                    <header>
+                        <h1>@BlogPost.Title</h1></header>
+                    <div class="blogpost-date">
+                        @BlogPost.UpdatedDate.ToString("dd/MM/yyyy")
+                    </div>
 
-                <div class="admin-action">
-                    <BlogPostAdminActions BlogPostId="@BlogPostId"></BlogPostAdminActions>
-                </div>
+                    <div class="admin-action">
+                        <BlogPostAdminActions BlogPostId="@BlogPostId"></BlogPostAdminActions>
+                    </div>
 
-                <div class="blogpost-content">
-                    @(RenderMarkupString(BlogPost.Content))
+                    <div class="blogpost-content">
+                        @(RenderMarkupString(BlogPost.Content))
+                    </div>
                 </div>
+                <Like BlogPost="@BlogPost" OnBlogPostLiked="@UpdateLikes"></Like>
             </div>
-            <Like BlogPost="@BlogPost" OnBlogPostLiked="@UpdateLikes"></Like>
         </div>
-    </div>
-}
+    }
+</div>
 
 @code {
     [Parameter]

LinkDotNet.Blog.Web/Pages/Index.razor

@@ -10,19 +10,27 @@
 <OgData Title="@(Markdown.ToPlainText(appConfiguration.BlogName))" 
         AbsolutePreviewImageUrl="@GetAbsolutePreviewImageUrl()"
         Description="@(Markdown.ToPlainText(appConfiguration.Introduction.Description))"></OgData>
-<section>
+<section class="introduction">
     <IntroductionCard Introduction="appConfiguration.Introduction"></IntroductionCard>
+</section>
 
-    <div class="content px-4">
+<section>
+    <header>
+        <div class="recent-posts">
+            <h1>Recent Posts</h1>
+        </div>
+    </header>
+    <div class="content px-4 my-2">
         @for (var i = 0; i < currentPage.Count; i++)
         {
             <ShortBlogPost BlogPost="currentPage[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
         }
     </div>
     <BlogPostNavigation CurrentPage="@currentPage" OnPageChanged="@GetPage"></BlogPostNavigation>
 </section>
+
 @code {
-    IPagedList<BlogPost> currentPage = new PagedList<BlogPost>(Array.Empty<BlogPost>(), 1, 1);
+    IPagedList<BlogPost> currentPage = new PagedList<BlogPost>(null, 1, 1);
 
     protected override async Task OnInitializedAsync()
     {

LinkDotNet.Blog.Web/Pages/Index.razor.css

@@ -0,0 +1,17 @@
+.blogpost-cards {
+    background-color: var(--blog-post-background-color);
+    margin: 1rem auto 1.6%;
+}
+
+.recent-posts {
+    text-align:center;
+    padding-top: 10px;
+}
+
+.recent-posts h1 {
+    font-size: 2.5em;
+    vertical-align:middle;
+    margin: auto;
+    padding-top: 75px;
+    padding-bottom: 20px;
+}

LinkDotNet.Blog.Web/Pages/Search.razor

@@ -2,15 +2,17 @@
 @using LinkDotNet.Infrastructure.Persistence
 @using LinkDotNet.Domain
 @inject IRepository repository
-<h3>Results for @SearchTerm</h3>
 
-<div class="content px-4">
-    @for (var i = 0; i < blogPosts.Count; i++)
-    {
-        <ShortBlogPost BlogPost="blogPosts[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
-    }
-</div>
+<div class="page">
+    <h3>Results for @SearchTerm</h3>
 
+    <div class="content px-4">
+        @for (var i = 0; i < blogPosts.Count; i++)
+        {
+            <ShortBlogPost BlogPost="blogPosts[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
+        }
+    </div>
+</div>
 @code {
     [Parameter]
     public string SearchTerm { get; set; }

LinkDotNet.Blog.Web/Pages/SearchByTag.razor

@@ -5,13 +5,15 @@
 @inject IRepository repository
 
 <Title>Search for tag: @Tag</Title>
-<h3>All posts with Tag <em>@Tag</em></h3>
 
-@for (var i = 0; i < blogPosts.Count; i++)
+<div class="page">
+    <h3>All posts with Tag <em>@Tag</em></h3>
+
+    @for (var i = 0; i < blogPosts.Count; i++)
     {
         <ShortBlogPost BlogPost="blogPosts[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
     }
-
+</div>
 @code {
     [Parameter]
     public string Tag { get; set; }

LinkDotNet.Blog.Web/Pages/_Host.cshtml

@@ -22,6 +22,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="preload" href="css/bootstrap/bootstrap.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"></noscript>
     <link href="css/site.css" rel="stylesheet"/>
+    <link href="css/basic.css" rel="stylesheet"/>
     <link href="LinkDotNet.Blog.Web.styles.css" rel="stylesheet"/>
     <link rel="preload" href="_content/Blazored.Toast/blazored-toast.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="_content/Blazored.Toast/blazored-toast.min.css"></noscript>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

LinkDotNet.Blog.Web/Shared/IntroductionCard.razor

@@ -1,12 +1,15 @@
 @using LinkDotNet.Domain
 @inherits MarkdownComponentBase
 
-<div style="background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(@Introduction.BackgroundUrl);" class="introduction-container">
-    <div class="profile-picture" style="background-image: url(@Introduction.ProfilePictureUrl)">
+<div style="background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(@Introduction.BackgroundUrl);"
+     class="inverted-colors introduction-background">
+    <div class="introduction-container">
+        <div class="profile-picture" style="background-image: url(@Introduction.ProfilePictureUrl)">
 
-    </div>
-    <div class="profile-text">
-        @RenderMarkupString(Introduction.Description)
+        </div>
+        <div class="profile-text">
+            @RenderMarkupString(Introduction.Description)
+        </div>
     </div>
 </div>
 @code {

LinkDotNet.Blog.Web/Shared/IntroductionCard.razor.css

@@ -1,7 +1,11 @@
-.introduction-container {
+.introduction-background {
     background-repeat: no-repeat;
     background-size: cover;
-    height: 350px;
+}
+
+.introduction-container {
+    padding-top: 78px;
+    height: 438px;
     display: grid;
     grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
@@ -25,15 +29,16 @@
 .profile-text {
     grid-area: profile-text;
     font-size: clamp(1rem, 0.6479rem + 1.1268vw, 1.5rem);
-    color: white;
-    line-height: clamp(1.5rem, 0.6479rem + 1.1268vw, 2.25rem);
+    color: var(--text-color-inverted);
+    line-height: clamp(1.5em, 0.6479rem + 1.1268vw, 2.25em);
 }
 
 @media only screen and (max-width: 700px) {
     .introduction-container {
         grid-template-columns: .5fr 1fr 1fr 1fr 1fr .5fr;
-        grid-template-rows: 1fr 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr 1fr;
         grid-template-areas:
+      ". . . . ." 
       ". . profile-picture profile-picture . ."
       ". profile-text profile-text profile-text profile-text ."
       ". profile-text profile-text profile-text profile-text .";

LinkDotNet.Blog.Web/Shared/MainLayout.razor

@@ -2,7 +2,10 @@
 @inherits LayoutComponentBase
 
 <BlazoredToasts Position="ToastPosition.BottomRight" />
-<NavMenu/>
-<div>
+<div class="position-relative">
+    <NavMenu/>
+
+    <div>
     @Body
+    </div>
 </div>

LinkDotNet.Blog.Web/Shared/NavMenu.razor

@@ -1,7 +1,7 @@
 @inject AppConfiguration configuration
 @inject NavigationManager navigationManager
 
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top navbar-background">
+<nav class="navbar navbar-expand-lg position-absolute navbar-background inverted-colors navbar-dark" style="width: 100%">
     <div class="container-fluid">
         <a class="nav-brand barcode ms-5" href="#">@configuration.BlogName</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

LinkDotNet.Blog.Web/Shared/NavMenu.razor.css

@@ -1,27 +1,20 @@
 /* TODO: There has to be a better way */
-.navbar-background {    
-    background-color: rgba(0, 0, 0, 0.8) !important;    
+.navbar-background {
+    background: linear-gradient(
+            rgba(0, 0, 0, 0.44),
+            rgba(0, 0, 0, 0.44)
+    ) !important;
     backdrop-filter: blur(6px) !important;
 }
 
 .barcode {
     font-family: 'Libre Barcode 128 Text', cursive;
     text-decoration: none;
+    font-weight: 400;
     font-size: 3rem;
-    color: white;
-    font-weight: 300;
 }
+
 ::deep .navbar-nav li {
     padding-left: 1.25rem;
     white-space: nowrap;
-}
-
-::deep .nav-link {
-    text-decoration: none;
-    font-size: 1.25rem;
-    color: white;
-}
-
-::deep .nav-item .nav-link:hover {
-    color: #66C3CC;
 }

LinkDotNet.Blog.Web/Shared/SearchInput.razor.css

@@ -1,5 +1,5 @@
 .search-bar {
-    border: 2px solid rgba(255,255,255,.55);
+    border: 2px solid var(--active-link-inverted);
     display: flex;
     border-radius: 100vh;
     overflow: hidden;
@@ -22,15 +22,16 @@
     left: 0;
     z-index: 2;
     cursor: pointer;
-    color:white;
+    color:var(--active-link-inverted);
+    font-weight: 800;
 }
 
 .search-bar-input:focus {
     outline: 0;
 }
 
 .search-bar-button {
-    color: white;
+    color:var(--active-link-inverted);
     border: 0;
     border-radius: 100vh;
     margin-left: auto;

LinkDotNet.Blog.Web/Shared/ShortBlogPost.razor

@@ -10,7 +10,7 @@
         <li class="date">@BlogPost.UpdatedDate.ToString("dd/MM/yyyy")</li>
         @if (BlogPost.Tags != null)
         {
-          <li class="tags">
+          <li class="tags inverted-colors">
             <ul>
               @foreach (var tag in BlogPost.Tags.Select(t => t.Content))
               {