Update icons

Update vertical margins

css/archive.css

@@ -2,6 +2,12 @@
   margin-bottom: var(--space-sm);
 }
 
+@media (--viewport-lg) {
+  .archive__list {
+    margin-bottom: var(--space-md);
+  }
+}
+
 .archive__list--sub-list {
   margin-left: var(--space-sm);
 }

css/article.css

@@ -1,5 +1,10 @@
+.article {
+  margin-bottom: var(--space-sm);
+}
+
 @media (--viewport-lg) {
   .article {
+    margin-bottom: var(--space-md);
     border-bottom: 1px solid var(--color-light-grey);
   }
 }

css/comments.css

@@ -1,5 +1,9 @@
-.comments__head {
+.comments {
   border-bottom: 1px solid var(--color-light-grey);
+  padding-bottom: var(--space-md);
+}
+
+.comments__head {
   margin-bottom: var(--space-md);
 }
 
@@ -18,3 +22,7 @@
 .comments__item--depth-2 {
   margin-left: calc(var(--space-md) * 2);
 }
+
+.comments__item--depth-3 {
+  margin-left: calc(var(--space-md) * 3);
+}

css/content.css

@@ -1,8 +1,3 @@
-.content {
-  border-bottom: 1px solid var(--color-light-grey);
-  padding-bottom: var(--space-md);
-}
-
 .content h1 {
   font-family: var(--heading-font-family);
   font-size: 1.8rem;

css/excerpt.css

@@ -2,6 +2,12 @@
   margin-bottom: var(--space-sm);
 }
 
+@media (--viewport-lg) {
+  .excerpt {
+    margin-bottom: var(--space-md);
+  }
+}
+
 .excerpt__head,
 .excerpt__body,
 .excerpt__title {

css/metadata.css

@@ -1,21 +1,23 @@
 .metadata {
   display: flex;
   flex-flow: row wrap;
-  border-bottom: 1px solid var(--color-light-grey);
   font-size: 14px;
-  margin-bottom: var(--space-md);
+  margin-bottom: var(--space-sm);
+  border-bottom: 1px solid var(--color-light-grey);
 }
 
 .metadata__item {
   display: flex;
   align-items: center;
   margin: 0 var(--space-sm) var(--space-sm) 0;
+  color: var(--color-dark-blue);
 }
 
 @media (--viewport-lg) {
   .metadata {
     flex-flow: column wrap;
     border-bottom: none;
+    margin-bottom: var(--space-md);
   }
 
   .metadata__item {

css/page.css

@@ -44,7 +44,8 @@
   }
 
   .page__content,
-  .page__article {
+  .page__article,
+  .page__comments {
     grid-column-start: 2;
   }