fix(header): styling

styles/components/blog-list.scss

@@ -0,0 +1,90 @@
+a:hover {
+    opacity: 1;
+}
+a:hover li div.hero_image img {
+    opacity: 0.8;
+    transition: opacity 0.3s ease;
+}
+a:hover li .blog__info h2,
+a:hover li .blog__info h3,
+a:hover li .blog__info p {
+    transform: translateX(10px);
+    transition: transform 0.5s ease-out;
+}
+@media (prefers-reduced-motion) {
+    a:hover li .blog__info h2,
+    a:hover li .blog__info h3,
+    a:hover li .blog__info p {
+        transform: translateX(0px);
+    }
+}
+.hero_image {
+    width: 100%;
+    height: 33vh;
+    overflow: hidden;
+    background-color: #000;
+}
+.hero_image img {
+    object-fit: cover;
+    object-position: 50% 50%;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+    min-height: 100%;
+}
+.blog__info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 1.5rem 1.25rem;
+    transform: translateX(0px);
+    transition: transform 0.3s ease-in;
+}
+.blog__info h2,
+.blog__info h3,
+.blog__info p {
+    transform: translateX(0px);
+    transition: transform 0.5s ease-out;
+}
+li {
+    opacity: inherit;
+    display: flex;
+    flex-direction: column;
+    min-height: 38vh;
+    margin-bottom: 0;
+}
+h2 {
+    margin-bottom: 0.5rem;
+}
+h3 {
+    margin-bottom: 1rem;
+}
+p {
+    max-width: 900px;
+}
+@media (min-width: 768px) {
+    li {
+        min-height: 250px;
+        height: 33.333vh;
+        flex-direction: row;
+    }
+    .hero_image {
+        height: 100%;
+    }
+    .hero_image img {
+        min-width: 100%;
+        height: 100%;
+        width: auto;
+        min-height: 0;
+    }
+    .blog__info {
+        min-width: 70%;
+    }
+}
+@media (min-width: 1280px) {
+    .blog__info {
+        padding: 3rem;
+    }
+    h3 {
+        margin-bottom: 1.2rem;
+    }
+}

styles/components/header.scss

@@ -6,11 +6,10 @@ nav {
     a h1 {
         margin: 0;
         color: $color-text-dark;
-        text-align: center;
         padding: 24px;
         font-weight: 400;
         font-family: 'Roboto Mono', Courier, monospace;
-        font-size: 40px;
+        font-size: 24px;
 
         @media (prefers-color-scheme: light) {
             color: $color-primary-light;

styles/components/page.scss

@@ -2,10 +2,9 @@
     display: grid;
     grid-template-columns:
         1fr
-        min(650px, 85vw)
+        min(650px, 100%)
         1fr;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+    margin: 1em 24px;
     min-height: 80vh;
 }
 .page > * {