diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor index ce2d52d1..1393d314 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor @@ -4,23 +4,25 @@ @inject IRepository Repository @inject ISortOrderCalculator SortOrderCalculator -
-
+ +
+
@ProfileInformation.Name
@ProfileInformation.Heading
-
- Profile Picture +
+ Profile Picture
-
    @foreach (var entry in profileInformationEntries) { @if (ShowAdminActions) {
  • 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 845d4876..00000000 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css +++ /dev/null @@ -1,51 +0,0 @@ -.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 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/SkillTable.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor.css deleted file mode 100644 index 554cf5cc..00000000 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor.css +++ /dev/null @@ -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..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/Features/AboutMe/Components/Skill/SkillTag.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css deleted file mode 100644 index e833e689..00000000 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css +++ /dev/null @@ -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 b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor index a98a1eac..f484b5da 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/Features/AboutMe/Components/TabbedNavigation.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css deleted file mode 100644 index cdd5c517..00000000 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css +++ /dev/null @@ -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..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"> -
+
> 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 cae14fc9..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor.css +++ /dev/null @@ -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 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

-
- - +
+ +
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 dad4bcd1..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css +++ /dev/null @@ -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 b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor index 19b53ec4..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 { 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 02d3ce74..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css +++ /dev/null @@ -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 b/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor index 0be7b840..3bda946c 100644 --- a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor +++ b/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor @@ -14,11 +14,11 @@
    @if (BlogPost.IsScheduled) { -
  • Scheduled
    • +
  • Scheduled
    • } else if (!BlogPost.IsPublished) { -
  • Draft
    • +
  • Draft
    • }
  • @BlogPost.UpdatedDate.ToShortDateString()
    • @if (BlogPost.Tags.Any()) @@ -32,15 +32,18 @@
} -
  • @BlogPost.ReadingTimeInMinutes minute read
    • +
  • + + @BlogPost.ReadingTimeInMinutes minute read +
    • -

    @BlogPost.Title

    +

    @BlogPost.Title

    -

    @MarkdownConverter.ToMarkupString(BlogPost.ShortDescription)

    +

    @MarkdownConverter.ToMarkupString(BlogPost.ShortDescription)

    Read the whole article

    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 23158dea..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css +++ /dev/null @@ -1,197 +0,0 @@ -.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/Features/Home/Components/Footer.razor b/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor index 549dd9c3..5cfe539f 100644 --- a/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor +++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor @@ -4,15 +4,16 @@ @inject IOptions ProfileInformation @inject IOptions SupportConfiguration -