More css tweaks

Author: linkdotnet

src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css

@@ -9,6 +9,8 @@
     z-index: 0;
     transform: scale(1.0);
     transition: transform 0.35s;
+    content-visibility: auto;
+    contain-intrinsic-size: 300px;
 }
 
 .blog-card:hover {
@@ -72,7 +74,7 @@
 
 .blog-card .description {
     padding: 1rem;
-    background: var(--background-gradient-start);
+    background: var(--background);
     position: relative;
     z-index: 1;
 }
@@ -147,7 +149,7 @@
     .blog-card .description:before {
         transform: skewX(-3deg);
         content: "";
-        background: var(--background-gradient-start);
+        background: var(--background);
         width: 30px;
         position: absolute;
         left: -10px;

src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css

@@ -1,5 +1,5 @@
 .blog-container {
-    background: var(--background-gradient-start);
+    background: var(--background);
     width: clamp(60%, 2vw, 90%);
     box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
     border-radius: 5px;

src/LinkDotNet.Blog.Web/wwwroot/css/basic.css

@@ -1,13 +1,16 @@
 :root {
     /* Color definitions */
-    --jaguar: #111013;
-    --shark: #28282f;
+    --jaguar: rgb(17, 16, 19);
+    --shark: rgb(40, 40, 47);
     --trout: rgba(78, 78, 93, 0.5);
 
     /* Fonts */
     --default-font: 'Calibri';
     --code-font: 'Lucida Console', 'Courier New';
 
+    /* Usages */
+    --background: var(--jaguar);
+
     --background-gradient-start: var(--jaguar);
     --background-gradient-end: var(--shark);
 }
@@ -22,7 +25,7 @@ html:focus-within {
 
 body {
     margin: 0;
-    background-image: linear-gradient(to bottom, var(--background-gradient-start) 40%, var(--background-gradient-end));
+    background-image: linear-gradient(to bottom, var(--background-gradient-start) 20%, var(--background-gradient-end));
     background-repeat: no-repeat;
     background-attachment: fixed;
     font-family: var(--default-font), sans-serif !important;