Improve blog layout

blog/archive.html

@@ -27,7 +27,7 @@
         <main class="blog-container" id="container">
             <header class="blog-header" id="header">...</header>
             <article class="blog-content" id="content">    
-                <h1>Blog Archive</h1>    
+                <h1 class="blog__title">Blog Archive</h1>    
                 <section class="blog-post-list" id="postlistdiv"></section>
             </article> <!-- end of article id="content" -->
             <footer class="blog-footer" id="footer"></footer>

blog/css/style-blog.css

@@ -14,20 +14,110 @@
     font-style: italic;
 }
 
+/* CSS RESET */
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+    margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+    list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+    scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+    min-height: 100vh;
+    text-rendering: optimizeSpeed;
+    line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+    text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+    max-width: 100%;
+    display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+    html:focus-within {
+        scroll-behavior: auto;
+    }
+
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
+
+/* STYLING BEGINS */
+/* General styles */
 body {
     background-color: black;
     background-image: url('../img/bg_space.png');
     background-position: center;
     background-repeat: repeat-x;
-    background-size: contain;
+    background-size: cover;
     background-attachment: fixed;
     font-size: 1.3rem;
     font-family: 'Nunito', Arial, sans-serif;
-    margin: 0;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    margin-bottom: 1.2rem;
+}
+
+h1, h2, h3, h4, h5 {
+    color: #5fc7cd;
 }
 
 p {
     line-height: 1.6em;
+    padding: 0.5rem 0;
 }
 
 strong {
@@ -79,10 +169,6 @@ a:hover {
     background-color: #34220b;
 }
 
-h1, h2, h3, h4, h5 {
-    color: #5fc7cd;
-}
-
 hr {
     border-width: 0.1rem 0 0 0;
     border-style: dotted;
@@ -91,23 +177,20 @@ hr {
 
 /* The rectangle that has contains everything but the background */
 .blog-container {
-    margin: 3em auto;
-    width: 90%;
+    width: 95%;
     max-width: 68.75rem;
     background-color: black;
     color: #dddddd;
     border-radius: 2rem;
     overflow: hidden;
     box-shadow: 0 -2px 10px 0 #c7d8f4 inset;
-}
-
-.blog-content {
-    padding: 0.5rem 5% 1rem 5%;
+    margin: 1em 0;
+    padding: 1em 2em;
 }
 
 /* HEADER STYLE */
 .blog-header {
-    padding: 0 5%;
+    margin-bottom: 0.5em;
 }
 
 .blog-header ul {
@@ -119,18 +202,19 @@ hr {
 }
 
 .blog-header li {
-    font-size: 1em;
+    font-size: 1.1em;
     display: inline-block;
     margin-right: 0.5em;
-    margin-top: 0.7em;
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
 }
 
 .blog-header li a {
     color: white;
     background-color: #1b548e;
-    border-radius: 20rem;
+    border-radius: 25px;
     border: 3px solid #7cd8ff;
-    padding: 0.4rem 2rem;
+    padding: 6px 30px;
     box-shadow: 0 -2px 12px 0 #23a4f8 inset;
     text-transform: uppercase;
     text-decoration: none;
@@ -141,12 +225,6 @@ hr {
     text-decoration: none;
 }
 
-.blog-header li a:active {
-    background-color: #8e8d74;
-    text-decoration: none;
-    box-shadow: 0 -2px 12px 0 #fe83ff inset;
-}
-
 /* POST TITLE STYLE */
 .blog__title,
 .blog-post__title {
@@ -156,9 +234,14 @@ hr {
 /* POST DATE STYLE */
 .blog-post__date {
     font-size: 1.1em;
+    margin-bottom: 1.1em;
 }
 
 /* POST LIST STYLE */
+.blog-recent-post-list {
+    margin-top: 1em;
+}
+
 .blog-post-list ul,
 .blog-recent-post-list ul {
     font-size: 1.1em;
@@ -179,7 +262,7 @@ hr {
 /*NEXT AND PREVIOUS LINKS STYLE*/
 .blog-nextprev {
     text-align: center;
-    margin-top: 1.4em;
+    margin: 1.4em 0;
 }
 
 /* DISQUS STYLE */
@@ -190,5 +273,4 @@ hr {
 /* FOOTER STYLE */
 .blog-footer {
     font-size: 0.8em;
-    padding: 0 5% 0.5rem 5%;
 }