Initial refactor of Scoped CSS

EliasMasche · EliasMasche · commit e8e154c53579 · 2025-03-26T03:51:20.000Z
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor b/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)
         {
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css
@@ -1,51 +1 @@
-﻿.profile-card {
-    display: inline-block;
-    box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
-    width: 100%;
-    border-radius: 8px;
-}
-
-.profile-name {
-    padding: 20px;
-    font-size: 1.25em;
-    line-height: 1.5em;
-}
-
-.profile-name:first-child {
-    background: var(--tag-background);
-}
-
-.profile-image {
-    padding: 30px;
-    background: var(--tag-background);
-}
-
-.profile-image img {
-    width: 100%;
-    margin: auto;
-    border-radius: 50vw;
-    display: block;
-}
-
-.profile-keypoints {
-    background-color: var(--tag-background);
-    padding-top: 10px;
-    padding-left: 2.5em;
-    padding-right: 1.5em;
-    list-style: none;
-    margin-bottom: 0;
-}
-
-.profile-keypoints li {
-    padding-bottom: 0.6em;
-    letter-spacing: 0.05em;
-}
-
-/* As the MarkupComponent is a base class we have to use deep */
-::deep .profile-keypoints li p {
-    display: inline;
-}
-
-.item-draggable {
-    cursor: grab;
-}
+﻿
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor b/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 {
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor.css
@@ -1,26 +0,0 @@
-.table-container {
-    overflow-x: auto;
-}
-
-.skill-table {
-    margin-top: 20px;
-    width: 100%;
-}
-
-.skill-table td:first-of-type {
-    width:10%
-}
-
-.skill-table td {
-    width: 30%;
-    border-top: 1px var(--bs-light) solid;
-    vertical-align: top;
-    min-width: 100px;
-}
-
-.skill-table td div {
-    display: inline-block;
-    margin-right: 8px;
-    margin-top: 12px;
-    margin-bottom: 12px;
-}
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor b/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"/>
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css
@@ -1,14 +0,0 @@
-.skill-tag {
-    padding: 8px;
-    border-radius: 5px;
-    background-color: var(--tag-background);
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.skill-tag img {
-    padding-right: 12px;
-    width: 36px;
-}
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css
@@ -1,5 +0,0 @@
-.nav>.nav-item>button {
-    border: 0;
-    background: transparent !important;
-    color: var(--bs-body-color) !important;
-}
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor b/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>
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor.css b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor.css
@@ -1,7 +0,0 @@
-.extra-buttons {
-	opacity: 0.25;
-}
-
-.extra-buttons:hover {
-	opacity: 1;
-}
diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css b/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;
-}
diff --git a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css
@@ -1,8 +0,0 @@
-img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    object-fit: cover;
-    height: 100%;
-    width: 100%;
-}
diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css
@@ -1,197 +1 @@
-﻿.blog-card {
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
-    margin: 1rem auto 1.6%;
-    line-height: 1.4;
-    border-radius: 5px;
-    overflow: hidden;
-    z-index: 0;
-    transform: scale(1.0);
-    transition: transform 0.35s;
-    content-visibility: auto;
-    contain-intrinsic-size: 300px;
-}
-
-.blog-card:hover {
-    transform: scale(1.05);
-    transition: 1s ease;
-    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-}
-
-.blog-card a {
-    color: inherit;
-}
-
-.blog-card .meta {
-    position: relative;
-    z-index: 0;
-    height: 200px;
-}
-.blog-card .details,
-.blog-card .details ul {
-    margin: auto;
-    padding: 0;
-    list-style: none;
-}
-.blog-card .details {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: -100%;
-    margin: auto;
-    transition: left 0.5s;
-    background: rgba(0, 0, 0, 0.6);
-    color: var(--bs-white);
-    padding: 10px;
-    width: 100%;
-    font-size: 0.9rem;
-}
-.blog-card .details a {
-    -webkit-text-decoration: dotted underline;
-    text-decoration: dotted underline;
-}
-.blog-card .details ul li {
-    display: inline-block;
-}
-
-.blog-card .details li:before {
-    margin-right: 10px;
-}
-
-.blog-card .details li ul:before {
-    margin-right: 10px;
-}
-
-.blog-card .details .tags li {
-    margin-right: 2px;
-}
-
-.blog-card .details .tags ul:before {
-    font-family: 'icons';
-    font-weight: 900;
-    content: "\e936";
-}
-
-.blog-card .description {
-    padding: 1rem;
-    background: var(--background);
-    position: relative;
-    z-index: 1;
-}
-
-.blog-card .description .header {
-	display: flex;
-	justify-content: space-between;
-}
-
-.blog-card .description .read-more {
-    text-align: right;
-}
-.blog-card .description .read-more a {
-    display: inline-block;
-    position: relative;
-}
-.blog-card .description .read-more a:before {
-    font-family: 'icons';
-    content: '\ea42';
-		display: inline-block;
-    font-weight: 900;
-    text-decoration: none;
-    margin-right: -5px;
-    opacity: 0;
-    transition: margin 0.3s, opacity 0.3s;
-		vertical-align: bottom;
-}
-.blog-card .description .read-more a:hover:before {
-    margin-right: 8px;
-    opacity: 1;
-		display: inline-block;
-}
-
-.blog-card .read-time:before {
-    font-family: 'icons';
-    font-weight: 900;
-    content: "\e94f";
-}
-
-.blog-card p {
-    position: relative;
-    margin: 1rem 0 0;
-}
-.blog-card p:first-of-type {
-    margin-top: 1.25rem;
-}
-.blog-card p:first-of-type:before {
-    content: "";
-    position: absolute;
-    height: 5px;
-    width: 35px;
-    top: -0.75rem;
-    border-radius: 3px;
-}
-.blog-card:hover .details {
-    left: 0;
-}
-
-.goto-tag {
-	color: white !important;
-}
-
-.goto-tag:hover {
-	color: #D7D7D7 !important;
-}
-
-.schedule {
-	background-color: #28a745;
-}
-
-.draft {
-	background-color: #ff8700;
-}
-
-.card-title {
-    font-weight: 600;
-    line-height: 1.3;
-    margin-right: 1rem;
-}
-
-.card-content {
-    font-weight: 300;
-}
-
-@media (min-width: 640px) {
-    .blog-card {
-        flex-direction: row;
-        max-width: 1200px;
-    }
-    .blog-card .meta {
-        flex-basis: 30%;
-        height: auto;
-    }
-    .blog-card .description {
-        flex-basis: 70%;
-    }
-    .blog-card .description:before {
-        transform: skewX(-3deg);
-        content: "";
-		background: var(--background);
-        width: 30px;
-        position: absolute;
-        left: -10px;
-        top: 0;
-        bottom: 0;
-        z-index: -1;
-    }
-    .blog-card.alt {
-        flex-direction: row-reverse;
-    }
-    .blog-card.alt .description:before {
-        left: inherit;
-        right: -10px;
-        transform: skew(3deg);
-    }
-    .blog-card.alt .details {
-        padding-left: 25px;
-    }
-}
+﻿
diff --git a/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml b/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml
diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css b/src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css
diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/admin.css b/src/LinkDotNet.Blog.Web/wwwroot/css/admin.css
diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/components.css b/src/LinkDotNet.Blog.Web/wwwroot/css/components.css

Original file line number	Diff line number	Diff line change
`@@ -9,8 +9,8 @@`
`9`	`9`	`<AddSkillDialog @ref="AddSkillDialog" SkillAdded="@AddSkill"></AddSkillDialog>`
`10`	`10`	`}`
`11`	`11`	`</div>`
`12`		`-<div class="table-container">`
`13`		`- <table class="skill-table" id="skill-table">`
	`12`	`+<div class="aboutme-table-container">`
	`13`	`+ <table class="aboutme-skill-table" id="aboutme-skill-table">`
`14`	`14`	`<tbody>`
`15`	`15`	`<tr>`
`16`	`16`	`<th>Capability</th>`
`@@ -51,7 +51,7 @@`
`51`	`51`	`</table>`
`52`	`52`	`@if (ShowAdminActions)`
`53`	`53`	`{`
`54`		`- <small for="skill-table">You can drag and drop your skills from one proficiency to another</small>`
	`54`	`+ <small for="aboutme-skill-table">You can drag and drop your skills from one proficiency to another</small>`
`55`	`55`	`}`
`56`	`56`	`</div>`
`57`	`57`	`@code {`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`@using LinkDotNet.Blog.Domain`
`2`		`-<span class="skill-tag">`
	`2`	`+<span class="aboutme-skill-tag">`
`3`	`3`	`@if (!string.IsNullOrEmpty(Skill.IconUrl))`
`4`	`4`	`{`
`5`	`5`	`<img src="@Skill.IconUrl" alt="icon" max-width="48px"/>`