Refactor of Scoped CSS

src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor

@@ -4,16 +4,16 @@
 
 @inject IRepository<ProfileInformationEntry> Repository
 @inject ISortOrderCalculator SortOrderCalculator
-<div class="profile-card">
-    <div class="profile-name">
+<div class="aboutme-profile-card">
+    <div class="aboutme-profile-name">
         <span>@ProfileInformation.Name</span>
         <br/>
         <span>@ProfileInformation.Heading</span>
     </div>
-    <div class="profile-image">
+    <div class="aboutme-profile-image">
         <img src="@ProfileInformation.ProfilePictureUrl" alt="Profile Picture" />
     </div>
-    <ul class="profile-keypoints"
+    <ul class="aboutme-profile-keypoints"
         ondragover="event.preventDefault();">
         @foreach (var entry in profileInformationEntries)
         {

src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor

@@ -9,8 +9,8 @@
             <AddSkillDialog @ref="AddSkillDialog" SkillAdded="@AddSkill"></AddSkillDialog>
         }
     </div>
-<div class="table-container">
-    <table class="skill-table" id="skill-table">
+<div class="aboutme-table-container">
+    <table class="aboutme-skill-table" id="aboutme-skill-table">
         <tbody>
         <tr>
             <th>Capability</th>
@@ -51,7 +51,7 @@
     </table>
     @if (ShowAdminActions)
     {
-        <small for="skill-table">You can drag and drop your skills from one proficiency to another</small>
+        <small for="aboutme-skill-table">You can drag and drop your skills from one proficiency to another</small>
     }
 </div>
 @code {

src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor

@@ -1,5 +1,5 @@
 @using LinkDotNet.Blog.Domain
-<span class="skill-tag">
+<span class="aboutme-skill-tag">
     @if (!string.IsNullOrEmpty(Skill.IconUrl))
     {
         <img src="@Skill.IconUrl" alt="icon" max-width="48px"/>

src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor

@@ -32,7 +32,7 @@
                               @bind-Value="@model.Content"></MarkdownTextArea>
             <ValidationMessage For="() => model.Content"></ValidationMessage>
 
-            <div class="btn-group position-absolute bottom-0 end-0 m-5 extra-buttons">
+            <div class="btn-group position-absolute bottom-0 end-0 m-5 admin-extra-buttons">
                 <button class="btn btn-primary btn-outlined btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                     More
                 </button>

src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css

@@ -1,9 +0,0 @@
-.actions {
-    float:right;
-}
-
-.actions * {
-    margin-left: 5px;
-    margin-top: 25px;
-    width: 125px;
-}

src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor

@@ -1,13 +1,13 @@
 @using Microsoft.AspNetCore.StaticFiles
 @if (string.IsNullOrEmpty(PreviewImageUrlFallback))
 {
-    <img src="@PreviewImageUrl" alt="Preview image blogpost" loading="@LazyLoadTag" decoding="@DecodingTag" />
+    <img class="preview-img" src="@PreviewImageUrl" alt="Preview image blogpost" loading="@LazyLoadTag" decoding="@DecodingTag" />
 }
 else
 {
     <picture>
         <source srcset="@PreviewImageUrl" type="@GetMimeType()"/>
-        <img src="@PreviewImageUrlFallback" alt="Preview image blogpost" loading="@LazyLoadTag" decoding="@DecodingTag" />
+        <img class="preview-img" src="@PreviewImageUrlFallback" alt="Preview image blogpost" loading="@LazyLoadTag" decoding="@DecodingTag" />
     </picture>
 }
 

src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml

@@ -26,6 +26,11 @@
     <link rel="preload" href="css/fonts/icons.woff" as="font" type="font/woff" crossorigin />
     <link href="css/basic.css" rel="stylesheet" />
     <link href="css/icons.css" rel="stylesheet" />
+    <link href="css/aboutme.css" rel="stylesheet" />
+    <link href="css/admin.css" rel="stylesheet" />
+    <link href="css/components.css" rel="stylesheet" />
+    <link href="css/home.css" rel="stylesheet" />
+    <link href="css/blogpost.css" rel="stylesheet" />
     <link rel="preload" href="LinkDotNet.Blog.Web.styles.css" as="style">
     <link href="LinkDotNet.Blog.Web.styles.css" rel="stylesheet"/>
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />