Intro Card Refactor process WIP

Author: EliasMasche

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

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