Heavily improved design

sass/index.css

@@ -15,23 +15,58 @@ a {
 
 h3 {
   font-size: 250%;
+  margin: 0;
 }
 
 p {
+  margin: 0;
   font-size: 175%;
 }
 
+.divider {
+  height: 3px;
+  background-color: #ad080f;
+}
+
 .articles {
   margin: auto;
-  width: 50%;
-  padding: 10px;
+  width: 80%;
   font-family: 'Roboto', sans-serif;
 }
 
+.article {
+  padding: 2%;
+}
+
 .article:hover {
   color: white;
 }
 
+.article-body {
+  width: 60%;
+  font-size: 80%;
+  font-weight: normal;
+  margin-top: 1%;
+  font-family: 'Roboto Mono', monospace;
+}
+
+.article-description {
+  font-weight: 500;
+  font-family: 'Roboto Mono', monospace;
+  color: #D00000;
+  font-size: 75%;
+  margin-top: 0.5%;
+}
+
+.article-description p {
+  white-space: pre;
+}
+
+#logo {
+  width: 3%;
+  padding-left: 2.5%;
+}
+
 .header {
   display: flex;
   align-items: center;
@@ -40,18 +75,21 @@ p {
 }
 
 .navigation {
-  background-color: inherit;
+  background-color: black;
   color: inherit;
   font-family: 'Roboto', sans-serif;
   width: 100%;
-  height: 100px;
+  padding-top: 1%;
+  padding-bottom: 1%;
+  height: 5%;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
   
 .navigation a {
-  padding: 2%;
+  padding-left: 2%;
+  padding-right: 2%;
   font-size: 250%;
   font-weight: bolder;
   
@@ -62,13 +100,15 @@ p {
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  margin-top: 2.5%;
+  margin-bottom: 2.5%;
 }
 
 .foot a {
-  font-family: "Roboto", sans-serif;
-  font-weight: bolder;
-  padding-left: 20%;
-  padding-right: 20%;
+  font-family: 'Roboto Mono', monospace;
+  font-weight: normal;
+  padding-left: 10%;
+  padding-right: 10%;
 }
 
 /*# sourceMappingURL=index.css.map */