Refactor CSS a bit, use variables for shared colors

assets/css/layout.css

@@ -1,4 +1,3 @@
-@import url("/assets/css/fonts/merriweather.css");
 
 html {
   font-size: 16px;
@@ -6,22 +5,6 @@ html {
 
 body {
   font-size: 1.125rem;
-  font-family: "Merriweather", serif;
-}
-
-img {
-  max-width: 100%;
-}
-
-img.avatar {
-  height: 3rem;
-  width: 3rem;
-  border-radius: 50%;
-}
-
-.profile-page img.avatar {
-  height: 8rem;
-  width: 8rem;
 }
 
 h1 {
@@ -59,6 +42,16 @@ pre code {
   padding: 0.6rem 1rem;
 }
 
+img {
+  max-width: 100%;
+}
+
+img.avatar {
+  height: 3rem;
+  width: 3rem;
+  border-radius: 50%;
+}
+
 dl dt {
   font-weight: bold;
   margin: 0 0 0.5rem 0;
@@ -68,6 +61,10 @@ dl dd {
   margin: 0 0 1.6rem 0;
 }
 
+hr {
+  border: 1px solid;
+}
+
 main {
   display: block;
   max-width: 44rem;
@@ -112,6 +109,15 @@ main.profile-page {
   margin-top: 6rem;
 }
 
+main.profile-page header {
+  margin-bottom: 2rem;
+}
+
+main.profile-page img.avatar {
+  height: 8rem;
+  width: 8rem;
+}
+
 main .article-list .item h3 {
   margin-bottom: 0.5rem;
 }
@@ -128,10 +134,6 @@ main article footer {
   margin-top: 5rem;
 }
 
-.profile-page header {
-  margin-bottom: 2rem;
-}
-
 /* Dropdown menu */
 
 .dropdown {
@@ -140,7 +142,6 @@ main article footer {
 }
 
 .dropdown-button {
-  font-family: "Merriweather", serif;
   font-size: 0.875rem;
   padding: 0.6rem 1rem;
   border: 1px solid;