Inverted color class plus introduction card refactor

Author: linkdotnet

LinkDotNet.Blog.Web/Pages/Index.razor

@@ -10,26 +10,21 @@
 <OgData Title="@(Markdown.ToPlainText(appConfiguration.BlogName))" 
         AbsolutePreviewImageUrl="@GetAbsolutePreviewImageUrl()"
         Description="@(Markdown.ToPlainText(appConfiguration.Introduction.Description))"></OgData>
-<section class="background-image" style="background-image: url(@appConfiguration.Introduction.BackgroundUrl);">
-</section>
-
 <section class="introduction">
     <IntroductionCard Introduction="appConfiguration.Introduction"></IntroductionCard>
 </section>
 
 <section>
-    <div class="blogpost-cards">
-        <header>
-            <div class="recent-posts">
-                <h1>Recent Posts</h1>
-            </div>
-        </header>
-        <div>
-            @for (var i = 0; i < currentPage.Count; i++)
-            {
-                <ShortBlogPost BlogPost="currentPage[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
-            }
+    <header>
+        <div class="recent-posts">
+            <h1>Recent Posts</h1>
         </div>
+    </header>
+    <div class="content px-4">
+        @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>

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

@@ -1,4 +1,5 @@
 .blogpost-cards {
+    /* TODO: Do not use the color directly, this will interfere with dark mode */
     background-color: var(--big-stone);
     margin: 1rem auto 1.6%;
 }
@@ -9,18 +10,9 @@
 }
 
 .recent-posts h1 {
-    color: var(--header1-inverted);
-    font-size: 1.75em;
+    font-size: 2.5em;
     vertical-align:middle;
     margin: auto;
-}
-
-.background-image {
-    background-repeat: no-repeat;
-    background-size: cover;
-    min-height:55vh;
-}
-
-.introduction {
-    padding-top: 35px;
+    padding-top: 75px;
+    padding-bottom: 20px;
 }

LinkDotNet.Blog.Web/Shared/IntroductionCard.razor

@@ -1,14 +1,17 @@
 @using LinkDotNet.Domain
 @inherits MarkdownComponentBase
 
-<div>
-    <div class="profile-picture" style="background-image: url(@Introduction.ProfilePictureUrl)">
-    </div>
-    <div class="profile-text">
-        @RenderMarkupString(Introduction.Description)
+<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">
+    <div class="introduction-container">
+        <div class="profile-picture" style="background-image: url(@Introduction.ProfilePictureUrl)">
+
+        </div>
+        <div class="profile-text">
+            @RenderMarkupString(Introduction.Description)
+        </div>
     </div>
 </div>
-
 @code {
     [Parameter]
     public Introduction Introduction { get; set; }

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

@@ -1,19 +1,48 @@
-.profile-picture {
+.introduction-container {
+    padding-top: 78px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 438px;
+    display: grid;
+    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    gap: 10px;
+    grid-template-areas: ". . . . . ." ". profile-picture profile-text profile-text profile-text ." ". . . . . .";
+}
+
+.profile-picture {
+    grid-area: profile-picture;
     width: 175px;
     height: 175px;
     border-radius: 50%;
     border: white;
-    margin: auto;
+    margin: 4px 0 0 4px;
     box-shadow: 0 0 0 4px white;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
 }
 
 .profile-text {
-    padding-top: 15px;
-    width: 60%;
-    margin: auto;
-    font-size: 1.5em;
-    line-height: 1.5em;
+    grid-area: profile-text;
+    font-size: clamp(1rem, 0.6479rem + 1.1268vw, 1.5rem);
+    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 1fr;
+        grid-template-areas:
+      ". . . . ." 
+      ". . profile-picture profile-picture . ."
+      ". profile-text profile-text profile-text profile-text ."
+      ". profile-text profile-text profile-text profile-text .";
+    }
+
+    .introduction-container .profile-picture {
+        margin-top: 10px;
+        margin-left: 0;
+    }
 }

LinkDotNet.Blog.Web/Shared/NavMenu.razor

@@ -1,7 +1,7 @@
 @inject AppConfiguration configuration
 @inject NavigationManager navigationManager
 
-<nav class="navbar navbar-expand-lg position-absolute navbar-background" style="width: 100%">
+<nav class="navbar navbar-expand-lg position-absolute navbar-background inverted-colors" 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

@@ -14,15 +14,6 @@
     font-size: 3rem;
 }
 
-.navbar a {
-    font-weight: 500;
-    color: var(--active-link-inverted) !important;
-}
-
-.navbar a:hover {
-    color: var(--link-hover-inverted) !important;
-}
-
 ::deep .navbar-nav li {
     padding-left: 1.25rem;
     white-space: nowrap;

LinkDotNet.Blog.Web/Shared/ShortBlogPost.razor

@@ -5,6 +5,7 @@
 <article>
   <div class="blog-card @AltCssClass">
     <div class="meta">
+      <div class="photo" style="background-image: url(@BlogPost.PreviewImageUrl)"></div>
       <ul class="details">
         <li class="date">@BlogPost.UpdatedDate.ToString("dd/MM/yyyy")</li>
         @if (BlogPost.Tags != null)
@@ -13,7 +14,7 @@
             <ul>
               @foreach (var tag in BlogPost.Tags.Select(t => t.Content))
               {
-                <li><a class="goto-tag inverse" href="/searchByTag/@(Uri.EscapeDataString(tag))">@tag</a></li>
+                <li><a class="goto-tag" href="/searchByTag/@(Uri.EscapeDataString(tag))">@tag</a></li>
               }
             </ul>
           </li>

LinkDotNet.Blog.Web/wwwroot/css/basic.css

@@ -23,6 +23,7 @@
     --header1-inverted: var(--ceramic);
     --header2: var(--pewter);
     --text-color: var(--big-stone);
+    --text-color-inverted: var(--ceramic);
 
     --navbar-background: #f4f4f4d0;
 
@@ -50,6 +51,7 @@ body {
 }
 
 a {
+    transition: 0.3s ease-in-out !important;
     font-weight: 500;
     color: var(--active-link) !important;
 }
@@ -63,15 +65,19 @@ a:hover {
     color: var(--disabled-link) !important;
 }
 
-a.inverse {
+.inverted-colors a {
     font-weight: 400;
     color: var(--active-link-inverted) !important;
 }
 
-a.inverse:hover   {
+.inverted-colors a:hover {
     color: var(--link-hover-inverted) !important;
 }
 
+.inverted-colors p {
+    color: var(--text-color-inverted) !important;
+}
+
 h1 {
     color: var(--header1);
 }