Second stage of refactor Scoped CSS

Author: EliasMasche

src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css

@@ -1,6 +0,0 @@
-#footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 2.5rem;
-}

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%;
-    }
-}

src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml

@@ -29,6 +29,8 @@
     <link href="css/aboutme.css" rel="stylesheet" />
     <link href="css/admin.css" rel="stylesheet" />
     <link href="css/components.css" rel="stylesheet" />
+    <link href="css/home.css" rel="stylesheet" />
+    <link href="css/blogpost.css" rel="stylesheet" />
     <link rel="preload" href="LinkDotNet.Blog.Web.styles.css" as="style">
     <link href="LinkDotNet.Blog.Web.styles.css" rel="stylesheet"/>
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

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;
+}

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%;
+    }
+}