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.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 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))
{
- 
+
}
else
{
+
}
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.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.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css
deleted file mode 100644
index b04fd83e..00000000
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css
+++ /dev/null
@@ -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/Home/Components/IntroductionCard.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css
deleted file mode 100644
index 74028d33..00000000
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.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/Features/Home/Components/NavMenu.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css
deleted file mode 100644
index 29921cf9..00000000
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css
+++ /dev/null
@@ -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
deleted file mode 100644
index 1b83e371..00000000
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css
+++ /dev/null
@@ -1,56 +0,0 @@
-.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;
-}
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 a52a0558..00000000
--- a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css
+++ /dev/null
@@ -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 6fbea811..d0385acf 100644
--- a/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml
+++ b/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml
@@ -26,6 +26,11 @@
+
+
+
+
+
diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css
index 50085337..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';
@@ -172,3 +173,665 @@ code {
right: 0.75rem;
top: 0.5rem;
}
+
+#footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 2.5rem;
+}
+
+.barcode {
+ text-decoration: none;
+ font-weight: 400;
+ font-size: 2.5rem;
+}
+
+.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;
+}
+
+.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/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";
-}