From e8e154c535790e4f9b810f4357a3559f7a5d44ef Mon Sep 17 00:00:00 2001 From: Elias Mascheroni <6045426+EliasMasche@users.noreply.github.com> Date: Wed, 26 Mar 2025 03:51:20 +0000 Subject: [PATCH 01/10] Initial refactor of Scoped CSS --- .../Features/AboutMe/Components/Profile.razor | 8 +- .../AboutMe/Components/Profile.razor.css | 52 +---- .../AboutMe/Components/Skill/SkillTable.razor | 6 +- .../Components/Skill/SkillTable.razor.css | 26 --- .../AboutMe/Components/Skill/SkillTag.razor | 2 +- .../Components/Skill/SkillTag.razor.css | 14 -- .../Components/TabbedNavigation.razor.css | 5 - .../Components/CreateNewBlogPost.razor | 2 +- .../Components/CreateNewBlogPost.razor.css | 7 - .../Components/ConfirmDialog.razor.css | 9 - .../Components/PreviewImage.razor.css | 8 - .../Components/ShortBlogPost.razor.css | 198 +--------------- src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml | 3 + .../wwwroot/css/aboutme.css | 99 ++++++++ src/LinkDotNet.Blog.Web/wwwroot/css/admin.css | 7 + .../wwwroot/css/components.css | 216 ++++++++++++++++++ 16 files changed, 336 insertions(+), 326 deletions(-) create mode 100644 src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css create mode 100644 src/LinkDotNet.Blog.Web/wwwroot/css/admin.css create mode 100644 src/LinkDotNet.Blog.Web/wwwroot/css/components.css diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor index ce2d52d1..5f4a4264 100644 --- 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 Repository @inject ISortOrderCalculator SortOrderCalculator -
-
+
+
@ProfileInformation.Name
@ProfileInformation.Heading
-
+
Profile Picture
-
    @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 index 845d4876..5f282702 100644 --- 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; -} \ No newline at end of file + \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor index 2c88801e..8bc8265d 100644 --- 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 @@ }
-
- +
+
@@ -51,7 +51,7 @@
Capability
@if (ShowAdminActions) { - You can drag and drop your skills from one proficiency to another + You can drag and drop your skills from one proficiency to another }
@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 index 554cf5cc..e69de29b 100644 --- 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; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor index f5acf2ec..746e7b2c 100644 --- 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 - + @if (!string.IsNullOrEmpty(Skill.IconUrl)) { icon 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 index e833e689..e69de29b 100644 --- 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; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css index cdd5c517..e69de29b 100644 --- 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; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor index ad217d01..9674b4a7 100644 --- 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"> -
+
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 index cae14fc9..e69de29b 100644 --- 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 index dad4bcd1..e69de29b 100644 --- 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; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css index 02d3ce74..e69de29b 100644 --- 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%; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css index 23158dea..5f282702 100644 --- 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; - } -} + \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml b/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml index 6fbea811..66af813d 100644 --- a/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml +++ b/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml @@ -26,6 +26,9 @@ + + + diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css b/src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css new file mode 100644 index 00000000..e371b3c9 --- /dev/null +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css @@ -0,0 +1,99 @@ +.nav>.nav-item>button { + border: 0; + background: transparent !important; + color: var(--bs-body-color) !important; +} + +.aboutme-table-container { + overflow-x: auto; +} + +.aboutme-skill-table { + margin-top: 20px; + width: 100%; +} + +.aboutme-skill-table td:first-of-type { + width:10% +} + +.aboutme-skill-table td { + width: 30%; + border-top: 1px var(--bs-light) solid; + vertical-align: top; + min-width: 100px; +} + +.aboutme-skill-table td div { + display: inline-block; + margin-right: 8px; + margin-top: 12px; + margin-bottom: 12px; +} + +.aboutme-skill-tag { + padding: 8px; + border-radius: 5px; + background-color: var(--tag-background); + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.aboutme-skill-tag img { + padding-right: 12px; + width: 36px; +} + +.aboutme-profile-card { + display: inline-block; + box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1); + width: 100%; + border-radius: 8px; +} + +.aboutme-profile-name { + padding: 20px; + font-size: 1.25em; + line-height: 1.5em; +} + +.aboutme-profile-name:first-child { + background: var(--tag-background); +} + +.aboutme-profile-image { + padding: 30px; + background: var(--tag-background); +} + +.aboutme-profile-image img { + width: 100%; + margin: auto; + border-radius: 50vw; + display: block; +} + +.aboutme-profile-keypoints { + background-color: var(--tag-background); + padding-top: 10px; + padding-left: 2.5em; + padding-right: 1.5em; + list-style: none; + margin-bottom: 0; +} + +.aboutme-profile-keypoints li { + padding-bottom: 0.6em; + letter-spacing: 0.05em; +} + +/* As the MarkupComponent is a base class we have to use deep */ +::deep .aboutme-profile-keypoints li p { + display: inline; +} + +.item-draggable { + cursor: grab; +} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/admin.css b/src/LinkDotNet.Blog.Web/wwwroot/css/admin.css new file mode 100644 index 00000000..8bc8824b --- /dev/null +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/admin.css @@ -0,0 +1,7 @@ +.admin-extra-buttons { + opacity: 0.25; +} + +.admin-extra-buttons:hover { + opacity: 1; +} diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/components.css b/src/LinkDotNet.Blog.Web/wwwroot/css/components.css new file mode 100644 index 00000000..e8dfdb5e --- /dev/null +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/components.css @@ -0,0 +1,216 @@ +.actions { + float:right; +} + +.actions * { + margin-left: 5px; + margin-top: 25px; + width: 125px; +} + +img { + position: absolute; + top: 0; + left: 0; + object-fit: cover; + height: 100%; + width: 100%; +} + +.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; + } +} From 3a299f5b84a0e5b226f0ed987f67936b2035d636 Mon Sep 17 00:00:00 2001 From: Elias Mascheroni <6045426+EliasMasche@users.noreply.github.com> Date: Wed, 26 Mar 2025 04:19:35 +0000 Subject: [PATCH 02/10] Second stage of refactor Scoped CSS --- .../Features/Home/Components/Footer.razor.css | 6 ---- .../ShowBlogPost/ShowBlogPostPage.razor.css | 36 ------------------- src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml | 2 ++ src/LinkDotNet.Blog.Web/wwwroot/css/basic.css | 7 ++++ .../wwwroot/css/blogpost.css | 36 +++++++++++++++++++ src/LinkDotNet.Blog.Web/wwwroot/css/home.css | 0 6 files changed, 45 insertions(+), 42 deletions(-) create mode 100644 src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css create mode 100644 src/LinkDotNet.Blog.Web/wwwroot/css/home.css diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css index b04fd83e..e69de29b 100644 --- a/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css +++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css @@ -1,6 +0,0 @@ -#footer { - position: absolute; - bottom: 0; - width: 100%; - height: 2.5rem; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css index a52a0558..e69de29b 100644 --- a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css +++ b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css @@ -1,36 +0,0 @@ -.blog-container { - background: var(--background); - width: clamp(60%, 2vw, 90%); - box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1); - border-radius: 5px; - padding: 20px; -} - -.blogpost-tag:before { - font-family: 'icons'; - font-weight: 900; - content: "\e936"; -} - -.blogpost-content { - padding-top: 20px; - overflow-x: hidden; -} - -.blogpost-content img { - width: 100%; - height: 100%; - object-fit: cover; -} - -@media only screen and (max-width: 700px) { - .blog-outer-box .blog-container { - width: 90%; - } -} - -@media only screen and (min-width: 700px) and (max-width: 1024px) { - .blog-outer-box .blog-container { - width: 80%; - } -} diff --git a/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml b/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml index 66af813d..d0385acf 100644 --- a/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml +++ b/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml @@ -29,6 +29,8 @@ + + diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css index 50085337..92bc1cbd 100644 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css @@ -172,3 +172,10 @@ code { right: 0.75rem; top: 0.5rem; } + +#footer { + position: absolute; + bottom: 0; + width: 100%; + height: 2.5rem; +} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css b/src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css new file mode 100644 index 00000000..a52a0558 --- /dev/null +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css @@ -0,0 +1,36 @@ +.blog-container { + background: var(--background); + width: clamp(60%, 2vw, 90%); + box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1); + border-radius: 5px; + padding: 20px; +} + +.blogpost-tag:before { + font-family: 'icons'; + font-weight: 900; + content: "\e936"; +} + +.blogpost-content { + padding-top: 20px; + overflow-x: hidden; +} + +.blogpost-content img { + width: 100%; + height: 100%; + object-fit: cover; +} + +@media only screen and (max-width: 700px) { + .blog-outer-box .blog-container { + width: 90%; + } +} + +@media only screen and (min-width: 700px) and (max-width: 1024px) { + .blog-outer-box .blog-container { + width: 80%; + } +} diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/home.css b/src/LinkDotNet.Blog.Web/wwwroot/css/home.css new file mode 100644 index 00000000..e69de29b From 2c563c623526c0acb02f664622971cc8b29d5ade Mon Sep 17 00:00:00 2001 From: Elias Mascheroni <6045426+EliasMasche@users.noreply.github.com> Date: Wed, 26 Mar 2025 04:35:14 +0000 Subject: [PATCH 03/10] Small progress stage of Scoped CSS refactor --- .../Home/Components/NavMenu.razor.css | 10 --- .../Home/Components/SearchInput.razor.css | 57 +-------------- src/LinkDotNet.Blog.Web/wwwroot/css/basic.css | 71 ++++++++++++++++++- 3 files changed, 71 insertions(+), 67 deletions(-) diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css index 29921cf9..e69de29b 100644 --- a/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css +++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css @@ -1,10 +0,0 @@ -.barcode { - text-decoration: none; - font-weight: 400; - font-size: 2.5rem; -} - -::deep .navbar-nav li { - padding-left: 1rem; - white-space: nowrap; -} diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css index 1b83e371..5f282702 100644 --- a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css +++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css @@ -1,56 +1 @@ -.search-bar { - border: 2px solid; - display: flex; - border-radius: 100vh; - overflow: hidden; - height: 40px; - padding: 3px; - width: 40px; - position: relative; - transition: width 300ms ease-in-out; -} - -.search-bar-input { - flex-grow: 1; - padding: 0 .5em; - border: 0; - opacity: 0; - background: transparent; - position: absolute; - top: 0; - bottom: 0; - left: 0; - z-index: 2; - cursor: pointer; - font-weight: 400; - color: var(--bs-navbar-color); -} - -.search-bar-input:focus { - outline: 0; -} -.search-bar-button { - border: 0; - border-radius: 100vh; - margin-left: auto; - width: 30px; - height: 30px; - cursor: pointer; - background: transparent; - /* - TODO: That is really ugly - The problem is that every other button is behind nav- - */ - color: var(--bs-navbar-color); -} - -.search-bar:focus-within { - width: 170px; -} - -.search-bar:focus-within .search-bar-input { - cursor: initial; - opacity: 1; - z-index: initial; - max-width: 130px; -} + \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css index 92bc1cbd..b13132d9 100644 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css @@ -178,4 +178,73 @@ code { bottom: 0; width: 100%; height: 2.5rem; -} \ No newline at end of file +} + +.barcode { + text-decoration: none; + font-weight: 400; + font-size: 2.5rem; +} + +::deep .navbar-nav li { + padding-left: 1rem; + white-space: nowrap; +} + +.search-bar { + border: 2px solid; + display: flex; + border-radius: 100vh; + overflow: hidden; + height: 40px; + padding: 3px; + width: 40px; + position: relative; + transition: width 300ms ease-in-out; +} + +.search-bar-input { + flex-grow: 1; + padding: 0 .5em; + border: 0; + opacity: 0; + background: transparent; + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: 2; + cursor: pointer; + font-weight: 400; + color: var(--bs-navbar-color); +} + +.search-bar-input:focus { + outline: 0; +} +.search-bar-button { + border: 0; + border-radius: 100vh; + margin-left: auto; + width: 30px; + height: 30px; + cursor: pointer; + background: transparent; + /* + TODO: That is really ugly + The problem is that every other button is behind nav- + */ + color: var(--bs-navbar-color); +} + +.search-bar:focus-within { + width: 170px; +} + +.search-bar:focus-within .search-bar-input { + cursor: initial; + opacity: 1; + z-index: initial; + max-width: 130px; +} + From 8522dcf669cfb9e63866489d4a1c58dd8e0b450d Mon Sep 17 00:00:00 2001 From: Elias Mascheroni <6045426+EliasMasche@users.noreply.github.com> Date: Wed, 26 Mar 2025 04:38:30 +0000 Subject: [PATCH 04/10] Intro Card Refactor process WIP --- .../Components/IntroductionCard.razor.css | 41 +------------------ src/LinkDotNet.Blog.Web/wwwroot/css/home.css | 40 ++++++++++++++++++ 2 files changed, 41 insertions(+), 40 deletions(-) diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css index 74028d33..5f282702 100644 --- a/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css +++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css @@ -1,40 +1 @@ -.introduction-background { - background-repeat: no-repeat; - background-size: cover; - background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--profile-background); -} - -.introduction-container { - height: 438px; - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr; - grid-template-rows: 0.5fr 1fr 1fr 1fr; - gap: 10px; - grid-template-areas: - ". . . . ." - ". . profile-picture . ." - ". profile-text profile-text profile-text ." - ". profile-text profile-text profile-text ."; -} - -.profile-picture { - grid-area: profile-picture; - width: 175px; - height: 175px; - border-radius: 50%; - border: white; - margin: auto; - box-shadow: 0 0 0 4px white; - background-image: var(--profile-image); - background-repeat: no-repeat; - background-position: center center; - background-size: cover; -} - -.profile-text { - margin: auto; - grid-area: profile-text; - font-size: clamp(1.0rem, 0.6479rem + 1vw, 1.4rem); - line-height: clamp(1.5em, 0.6479rem + 1.1268vw, 2.25em); - text-align: center; -} \ No newline at end of file + \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/home.css b/src/LinkDotNet.Blog.Web/wwwroot/css/home.css index e69de29b..d5790a10 100644 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/home.css +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/home.css @@ -0,0 +1,40 @@ +.introduction-background { + background-repeat: no-repeat; + background-size: cover; + background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--profile-background); +} + +.introduction-container { + height: 438px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 0.5fr 1fr 1fr 1fr; + gap: 10px; + grid-template-areas: + ". . . . ." + ". . profile-picture . ." + ". profile-text profile-text profile-text ." + ". profile-text profile-text profile-text ."; +} + +.profile-picture { + grid-area: profile-picture; + width: 175px; + height: 175px; + border-radius: 50%; + border: white; + margin: auto; + box-shadow: 0 0 0 4px white; + background-image: var(--profile-image); + background-repeat: no-repeat; + background-position: center center; + background-size: cover; +} + +.profile-text { + margin: auto; + grid-area: profile-text; + font-size: clamp(1.0rem, 0.6479rem + 1vw, 1.4rem); + line-height: clamp(1.5em, 0.6479rem + 1.1268vw, 2.25em); + text-align: center; +} \ No newline at end of file From da21bc7ab0ff4df7da86310ab100801886c94e12 Mon Sep 17 00:00:00 2001 From: Elias Mascheroni Date: Wed, 26 Mar 2025 22:45:41 -0300 Subject: [PATCH 05/10] Added missed css from ReadingIndicator --- .../wwwroot/css/blogpost.css | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css b/src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css index a52a0558..4beaf1c9 100644 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css @@ -34,3 +34,48 @@ width: 80%; } } + +.progress-container { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 1000; + opacity: 0; + transition: opacity 1.5s; +} + + .progress-container.visible { + opacity: 1; + } + +@keyframes fadeOut { + to { + opacity: 0; + } +} + +.progress-circle { + width: 50px; + height: 50px; +} + +.progress-bg { + fill: none; + stroke: #f3f3f3; + stroke-width: 4; +} + +.progress-bar { + fill: none; + stroke: #4caf50; + stroke-width: 4; + stroke-linecap: round; + transform-origin: center; + transform: rotate(-90deg); + stroke-dasharray: 100, 100; + stroke-dashoffset: 100; +} + +[data-bs-theme='light'] .progress-bg { + stroke: #444444; +} From 9eb30b5b03a974e6a6048dfc495f0a159ff90cc1 Mon Sep 17 00:00:00 2001 From: Elias Mascheroni Date: Wed, 26 Mar 2025 22:46:06 -0300 Subject: [PATCH 06/10] Renamed img tag to comp-img --- src/LinkDotNet.Blog.Web/wwwroot/css/components.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/components.css b/src/LinkDotNet.Blog.Web/wwwroot/css/components.css index e8dfdb5e..d03fd755 100644 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/components.css +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/components.css @@ -8,7 +8,7 @@ width: 125px; } -img { +comp-img { position: absolute; top: 0; left: 0; @@ -47,12 +47,14 @@ img { 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; @@ -66,10 +68,12 @@ img { 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; } @@ -107,10 +111,12 @@ img { .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'; @@ -122,6 +128,7 @@ img { transition: margin 0.3s, opacity 0.3s; vertical-align: bottom; } + .blog-card .description .read-more a:hover:before { margin-right: 8px; opacity: 1; @@ -138,9 +145,11 @@ img { 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; From 9ff57190339e4ab6a7da489f4498fa822ca7f488 Mon Sep 17 00:00:00 2001 From: Elias Mascheroni Date: Wed, 26 Mar 2025 22:46:23 -0300 Subject: [PATCH 07/10] Removed razor.css empty files --- .../AboutMe/Components/Profile.razor.css | 1 - .../Components/Skill/SkillTable.razor.css | 0 .../Components/Skill/SkillTag.razor.css | 0 .../Components/TabbedNavigation.razor.css | 0 .../Components/CreateNewBlogPost.razor.css | 0 .../Components/PreviewImage.razor.css | 0 .../Components/ShortBlogPost.razor.css | 1 - .../Features/Home/Components/Footer.razor.css | 0 .../Components/IntroductionCard.razor.css | 1 - .../Home/Components/NavMenu.razor.css | 0 .../Home/Components/SearchInput.razor.css | 1 - .../Components/ReadingIndicator.razor.css | 44 ------------------- .../ShowBlogPost/ShowBlogPostPage.razor.css | 0 13 files changed, 48 deletions(-) delete mode 100644 src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css delete mode 100644 src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor.css delete mode 100644 src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css delete mode 100644 src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css delete mode 100644 src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor.css delete mode 100644 src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css delete mode 100644 src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css delete mode 100644 src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css delete mode 100644 src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css delete mode 100644 src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css delete mode 100644 src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css delete mode 100644 src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.css delete mode 100644 src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css deleted file mode 100644 index 5f282702..00000000 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file 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 deleted file mode 100644 index e69de29b..00000000 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 deleted file mode 100644 index e69de29b..00000000 diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css deleted file mode 100644 index e69de29b..00000000 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 deleted file mode 100644 index e69de29b..00000000 diff --git a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css deleted file mode 100644 index e69de29b..00000000 diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css deleted file mode 100644 index 5f282702..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css deleted file mode 100644 index e69de29b..00000000 diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css deleted file mode 100644 index 5f282702..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css deleted file mode 100644 index e69de29b..00000000 diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css deleted file mode 100644 index 5f282702..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.css b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.css deleted file mode 100644 index dbb9cfa0..00000000 --- a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.css +++ /dev/null @@ -1,44 +0,0 @@ -.progress-container { - position: fixed; - bottom: 20px; - right: 20px; - z-index: 1000; - opacity: 0; - transition: opacity 1.5s; -} - -.progress-container.visible { - opacity: 1; -} - -@keyframes fadeOut { - to { - opacity: 0; - } - } - -.progress-circle { - width: 50px; - height: 50px; -} - -.progress-bg { - fill: none; - stroke: #f3f3f3; - stroke-width: 4; -} - -.progress-bar { - fill: none; - stroke: #4caf50; - stroke-width: 4; - stroke-linecap: round; - transform-origin: center; - transform: rotate(-90deg); - stroke-dasharray: 100, 100; - stroke-dashoffset: 100; -} - -[data-bs-theme='light'] .progress-bg { - stroke: #444444; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css deleted file mode 100644 index e69de29b..00000000 From c64c902d0810741a955a7939c95c2c70785e529d Mon Sep 17 00:00:00 2001 From: Steven Giesel Date: Fri, 28 Mar 2025 22:56:34 +0100 Subject: [PATCH 08/10] Fix: Tests --- .../Web/Shared/ProfileTests.cs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/LinkDotNet.Blog.IntegrationTests/Web/Shared/ProfileTests.cs b/tests/LinkDotNet.Blog.IntegrationTests/Web/Shared/ProfileTests.cs index 881ce51c..67aafa9e 100644 --- a/tests/LinkDotNet.Blog.IntegrationTests/Web/Shared/ProfileTests.cs +++ b/tests/LinkDotNet.Blog.IntegrationTests/Web/Shared/ProfileTests.cs @@ -23,7 +23,7 @@ public void ShouldRenderAllItemsSortedByOrder() SetupGetAll(repoMock, entry1, entry2); var cut = RenderProfileWithEmptyInformation(); - var items = cut.FindAll(".profile-keypoints li"); + var items = cut.FindAll(".aboutme-profile-keypoints li"); items.Count.ShouldBe(2); items[0].TextContent.ShouldContain("key 1"); @@ -70,7 +70,7 @@ public void ShouldDeleteEntryWhenConfirmed() var (repoMock, _) = RegisterServices(); SetupGetAll(repoMock, entryToDelete); var cut = RenderProfileInAdmin(); - cut.Find(".profile-keypoints li button").Click(); + cut.Find(".aboutme-profile-keypoints li button").Click(); cut.FindComponent().Find("#ok").Click(); @@ -86,7 +86,7 @@ public void ShouldNotDeleteEntryWhenNotConfirmed() var (repoMock, _) = RegisterServices(); SetupGetAll(repoMock, entryToDelete); var cut = RenderProfileInAdmin(); - cut.Find(".profile-keypoints li button").Click(); + cut.Find(".aboutme-profile-keypoints li button").Click(); cut.FindComponent().Find("#cancel").Click(); From dbb2a5a08db79f52c37832b9f3de317719c2d351 Mon Sep 17 00:00:00 2001 From: Steven Giesel Date: Sat, 29 Mar 2025 13:32:03 +0100 Subject: [PATCH 09/10] fix: Use correct class --- .../Features/Components/PreviewImage.razor | 4 ++-- src/LinkDotNet.Blog.Web/wwwroot/css/components.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor index 19b53ec4..e0396203 100644 --- a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor +++ b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor @@ -1,13 +1,13 @@ @using Microsoft.AspNetCore.StaticFiles @if (string.IsNullOrEmpty(PreviewImageUrlFallback)) { - Preview image blogpost + Preview image blogpost } else { - Preview image blogpost + Preview image blogpost } diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/components.css b/src/LinkDotNet.Blog.Web/wwwroot/css/components.css index d03fd755..2f4d17f6 100644 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/components.css +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/components.css @@ -8,7 +8,7 @@ width: 125px; } -comp-img { +.preview-img { position: absolute; top: 0; left: 0; From 6ee3e6360359dfe153dfbffb0134d48809a9631e Mon Sep 17 00:00:00 2001 From: Steven Giesel Date: Sat, 29 Mar 2025 13:39:20 +0100 Subject: [PATCH 10/10] fix: Deep modifier not needed outside isolated css --- src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css | 5 ++--- src/LinkDotNet.Blog.Web/wwwroot/css/basic.css | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css b/src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css index e371b3c9..6fa67385 100644 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css @@ -89,11 +89,10 @@ letter-spacing: 0.05em; } -/* As the MarkupComponent is a base class we have to use deep */ -::deep .aboutme-profile-keypoints li p { +.aboutme-profile-keypoints li p { display: inline; } .item-draggable { cursor: grab; -} \ No newline at end of file +} diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css index b13132d9..74fa1ab1 100644 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css @@ -186,7 +186,7 @@ code { font-size: 2.5rem; } -::deep .navbar-nav li { +.navbar-nav li { padding-left: 1rem; white-space: nowrap; }