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/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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; } From 50659e5b11adac1c8db3e31da24d94b6b1525bc8 Mon Sep 17 00:00:00 2001 From: Elias Mascheroni Date: Sun, 6 Apr 2025 03:29:50 -0300 Subject: [PATCH 11/17] refact: css classes in basic.css and proper rename test css classes --- .../Features/AboutMe/Components/Profile.razor | 8 +- .../AboutMe/Components/Skill/SkillTable.razor | 6 +- .../AboutMe/Components/Skill/SkillTag.razor | 2 +- .../wwwroot/css/aboutme.css | 98 --- src/LinkDotNet.Blog.Web/wwwroot/css/admin.css | 7 - src/LinkDotNet.Blog.Web/wwwroot/css/basic.css | 589 +++++++++++++++++- .../wwwroot/css/blogpost.css | 81 --- .../wwwroot/css/components.css | 225 ------- src/LinkDotNet.Blog.Web/wwwroot/css/home.css | 40 -- src/LinkDotNet.Blog.Web/wwwroot/css/icons.css | 117 ---- .../Web/Shared/ProfileTests.cs | 6 +- 11 files changed, 599 insertions(+), 580 deletions(-) delete mode 100644 src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css delete mode 100644 src/LinkDotNet.Blog.Web/wwwroot/css/admin.css delete mode 100644 src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css delete mode 100644 src/LinkDotNet.Blog.Web/wwwroot/css/components.css delete mode 100644 src/LinkDotNet.Blog.Web/wwwroot/css/home.css delete mode 100644 src/LinkDotNet.Blog.Web/wwwroot/css/icons.css diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor index 5f4a4264..ce2d52d1 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/Skill/SkillTable.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor index 8bc8265d..2c88801e 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/SkillTag.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor index 746e7b2c..f5acf2ec 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/wwwroot/css/aboutme.css b/src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css deleted file mode 100644 index 6fa67385..00000000 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css +++ /dev/null @@ -1,98 +0,0 @@ -.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; -} - -.aboutme-profile-keypoints li p { - display: inline; -} - -.item-draggable { - cursor: grab; -} diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/admin.css b/src/LinkDotNet.Blog.Web/wwwroot/css/admin.css deleted file mode 100644 index 8bc8824b..00000000 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/admin.css +++ /dev/null @@ -1,7 +0,0 @@ -.admin-extra-buttons { - opacity: 0.25; -} - -.admin-extra-buttons:hover { - opacity: 1; -} diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css index 74fa1ab1..6599c772 100644 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css @@ -1,4 +1,5 @@ -:root, html[data-bs-theme='light'] { +/*#region Basic */ +:root, html[data-bs-theme='light'] { /* Fonts */ --default-font: 'Calibri'; --code-font: 'Lucida Console', 'Courier New'; @@ -248,3 +249,589 @@ code { max-width: 130px; } +.nav>.nav-item>button { + border: 0; + background: transparent !important; + color: var(--bs-body-color) !important; +} +/*#endregion */ + +/*#region About Me */ +.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; +} + +.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; +} + +.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; +} + +.profile-keypoints li p { + display: inline; +} + +.item-draggable { + cursor: grab; +} +/*#endregion */ + +/*#region Admin */ +.admin-extra-buttons { + opacity: 0.25; +} + +.admin-extra-buttons:hover { + opacity: 1; +} +/*#endregion */ + +/*#region Icons */ +@font-face { + font-family: 'icons'; + src: + url('fonts/icons.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +i { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icons'; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.home:before { + content: "\e900"; +} +.pencil:before { + content: "\e905"; +} +.books:before { + content: "\e920"; +} +.profile:before { + content: "\e923"; +} +.copy:before { + content: "\e92c"; +} +.price-tags:before { + content: "\e936"; +} +.clock2:before { + content: "\e94f"; +} +.calendar:before { + content: "\e953"; +} +.user-tie:before { + content: "\e976"; +} +.search:before { + content: "\e986"; +} +.lock:before { + content: "\e98f"; +} +.unlocked:before { + content: "\e990"; +} +.lab:before { + content: "\e9aa"; +} +.bin2:before { + content: "\e9ad"; +} +.contrast:before { + content: "\e9d5"; +} +.plus:before { + content: "\ea0a"; +} +.circle-right:before { + content: "\ea42"; +} +.share2:before { + content: "\ea82"; +} +.twitter:before { + content: "\ea96"; +} +.rss2:before { + content: "\ea9c"; +} +.github:before { + content: "\eab0"; +} +.linkedin:before { + content: "\eac9"; +} +.list:before { + content: "\e901"; +} +.todo:before { + content: "\e901"; +} +.bullet:before { + content: "\e901"; +} +.menu:before { + content: "\e901"; +} +.options:before { + content: "\e901"; +} +.coin-dollar:before { + content: "\e93b"; +} +.youtube:before { + content: "\ea9d"; +} +.bluesky:before { + content: "\e902"; +} +.bookmark:before { + content: "\e9d2"; +} +/*#endregion */ + +/*#region home */ +.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; +} +/*#endregion */ + +/*#region Components */ +.actions { + float:right; +} + +.actions * { + margin-left: 5px; + margin-top: 25px; + width: 125px; +} + +.preview-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; + } +} +/*#endregion */ + +/*#region Blog */ +.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%; + } +} + +.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; +} +/*#endregion */ diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css b/src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css deleted file mode 100644 index 4beaf1c9..00000000 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css +++ /dev/null @@ -1,81 +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%; - } -} - -.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; -} diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/components.css b/src/LinkDotNet.Blog.Web/wwwroot/css/components.css deleted file mode 100644 index 2f4d17f6..00000000 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/components.css +++ /dev/null @@ -1,225 +0,0 @@ -.actions { - float:right; -} - -.actions * { - margin-left: 5px; - margin-top: 25px; - width: 125px; -} - -.preview-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; - } -} diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/home.css b/src/LinkDotNet.Blog.Web/wwwroot/css/home.css deleted file mode 100644 index d5790a10..00000000 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/home.css +++ /dev/null @@ -1,40 +0,0 @@ -.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 diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/icons.css b/src/LinkDotNet.Blog.Web/wwwroot/css/icons.css deleted file mode 100644 index fca2aad1..00000000 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/icons.css +++ /dev/null @@ -1,117 +0,0 @@ -@font-face { - font-family: 'icons'; - src: - url('fonts/icons.woff') format('woff'); - font-weight: normal; - font-style: normal; - font-display: block; -} - -i { - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: 'icons'; - speak: never; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.home:before { - content: "\e900"; -} -.pencil:before { - content: "\e905"; -} -.books:before { - content: "\e920"; -} -.profile:before { - content: "\e923"; -} -.copy:before { - content: "\e92c"; -} -.price-tags:before { - content: "\e936"; -} -.clock2:before { - content: "\e94f"; -} -.calendar:before { - content: "\e953"; -} -.user-tie:before { - content: "\e976"; -} -.search:before { - content: "\e986"; -} -.lock:before { - content: "\e98f"; -} -.unlocked:before { - content: "\e990"; -} -.lab:before { - content: "\e9aa"; -} -.bin2:before { - content: "\e9ad"; -} -.contrast:before { - content: "\e9d5"; -} -.plus:before { - content: "\ea0a"; -} -.circle-right:before { - content: "\ea42"; -} -.share2:before { - content: "\ea82"; -} -.twitter:before { - content: "\ea96"; -} -.rss2:before { - content: "\ea9c"; -} -.github:before { - content: "\eab0"; -} -.linkedin:before { - content: "\eac9"; -} -.list:before { - content: "\e901"; -} -.todo:before { - content: "\e901"; -} -.bullet:before { - content: "\e901"; -} -.menu:before { - content: "\e901"; -} -.options:before { - content: "\e901"; -} -.coin-dollar:before { - content: "\e93b"; -} -.youtube:before { - content: "\ea9d"; -} -.bluesky:before { - content: "\e902"; -} -.bookmark:before { - content: "\e9d2"; -} diff --git a/tests/LinkDotNet.Blog.IntegrationTests/Web/Shared/ProfileTests.cs b/tests/LinkDotNet.Blog.IntegrationTests/Web/Shared/ProfileTests.cs index 67aafa9e..881ce51c 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(".aboutme-profile-keypoints li"); + var items = cut.FindAll(".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(".aboutme-profile-keypoints li button").Click(); + cut.Find(".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(".aboutme-profile-keypoints li button").Click(); + cut.Find(".profile-keypoints li button").Click(); cut.FindComponent().Find("#cancel").Click(); From ec724d6f3ba45d647b6fa6b15fbde0c3f90dd102 Mon Sep 17 00:00:00 2001 From: Elias Mascheroni Date: Tue, 13 May 2025 01:09:23 -0300 Subject: [PATCH 12/17] refact: initial process of CSS classes to Bootstrap 5 --- .../Features/AboutMe/Components/Profile.razor | 12 ++++--- .../AboutMe/Components/Skill/SkillTable.razor | 34 +++++++++++-------- .../AboutMe/Components/Skill/SkillTag.razor | 3 +- src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml | 6 ---- 4 files changed, 29 insertions(+), 26 deletions(-) diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor index ce2d52d1..58060391 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor @@ -4,16 +4,18 @@ @inject IRepository Repository @inject ISortOrderCalculator SortOrderCalculator -
-
+ +
+
@ProfileInformation.Name
@ProfileInformation.Heading
-
- Profile Picture +
+ Profile Picture
-
    @foreach (var entry in profileInformationEntries) { 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..45a36ea6 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor @@ -9,28 +9,33 @@ }
-
- +
+
+ + + + + + + + - - - - - - @foreach (var skillCapabilityGroup in skills.GroupBy(s => s.Capability)) { @foreach (var skillLevel in ProficiencyLevel.All) { -
CapabilityFamiliar withProficientExpert
CapabilityFamiliar withProficientExpert
@skillCapabilityGroup.Key + @foreach (var skill in skillCapabilityGroup.Where(s => s.ProficiencyLevel == skillLevel)) { - @if (ShowAdminActions) + if (ShowAdminActions) { -
+
+ @@ -38,7 +43,7 @@ } else { -
+
} @@ -49,9 +54,10 @@ }
+ @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/SkillTag.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor index f5acf2ec..0ea67739 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,6 @@ @using LinkDotNet.Blog.Domain - + @if (!string.IsNullOrEmpty(Skill.IconUrl)) { icon diff --git a/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml b/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml index d0385acf..6034a0df 100644 --- a/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml +++ b/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml @@ -25,12 +25,6 @@ - - - - - - From 68de77aa84ec539a3dfb67b903d98f2885a24f24 Mon Sep 17 00:00:00 2001 From: Elias Mascheroni Date: Tue, 13 May 2025 01:59:33 -0300 Subject: [PATCH 13/17] refact: deleted missed razor.css file --- .../Features/Components/ConfirmDialog.razor.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css deleted file mode 100644 index e69de29b..00000000 From 0cc5c127a194a1387cc358a70e0a4ad2dadf8d44 Mon Sep 17 00:00:00 2001 From: Elias Mascheroni Date: Tue, 13 May 2025 01:59:56 -0300 Subject: [PATCH 14/17] refact: revamp from custom css to bootstrap --- .../AboutMe/Components/TabbedNavigation.razor | 24 ++++++++++++------- src/LinkDotNet.Blog.Web/wwwroot/css/basic.css | 3 ++- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor index a98a1eac..5c70f2a9 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor @@ -2,14 +2,22 @@ @using LinkDotNet.Blog.Web.Features.AboutMe.Components.Talk
-
    - - -
+
    + + +
diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css index 6599c772..583372f2 100644 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css @@ -248,12 +248,13 @@ code { z-index: initial; max-width: 130px; } - +/* .nav>.nav-item>button { border: 0; background: transparent !important; color: var(--bs-body-color) !important; } + */ /*#endregion */ /*#region About Me */ From 10e84726e27e5bc4f725913612227c8f79502ad4 Mon Sep 17 00:00:00 2001 From: Elias Mascheroni Date: Tue, 13 May 2025 02:00:23 -0300 Subject: [PATCH 15/17] refact: revamp from custom css to bootstrap, is using inline-style --- .../Admin/BlogPostEditor/Components/CreateNewBlogPost.razor | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 9674b4a7..f55ca72c 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,9 @@ @bind-Value="@model.Content"> -
+
> From 49c8247e00e74a1568ed6ab5b59f25aafde25183 Mon Sep 17 00:00:00 2001 From: Elias Mascheroni Date: Tue, 13 May 2025 02:00:31 -0300 Subject: [PATCH 16/17] refact: revamp from custom css to bootstrap --- .../Features/Components/ConfirmDialog.razor | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor b/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor index a88bc106..5ee44255 100644 --- a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor +++ b/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor @@ -1,8 +1,8 @@ 

@Content

-
- - +
+ +
From 28a13652e17d2ed8d301156654d3a44a06aca650 Mon Sep 17 00:00:00 2001 From: Elias Mascheroni Date: Tue, 13 May 2025 02:00:34 -0300 Subject: [PATCH 17/17] refact: revamp from custom css to bootstrap --- .../Features/Components/PreviewImage.razor | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor index e0396203..ee324c0e 100644 --- a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor +++ b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor @@ -1,14 +1,24 @@ @using Microsoft.AspNetCore.StaticFiles @if (string.IsNullOrEmpty(PreviewImageUrlFallback)) { - Preview image blogpost + Preview image blogpost } else { - - - Preview image blogpost - + + + Preview image blogpost + } @code {