Archive page, with list of all posts

css/archive.css

@@ -0,0 +1,19 @@
+.archive__list {
+  margin-bottom: var(--space-sm);
+}
+
+.archive__list--sub-list {
+  margin-left: var(--space-sm);
+}
+
+.archive__heading {
+  font-family: var(--heading-font-family);
+  color: var(--color-dark-blue);
+  margin-bottom: var(--space-xs);
+}
+
+.archive__date {
+  display: inline-block;
+  font-style: italic;
+  min-width: 40px;
+}

css/article.css

@@ -4,22 +4,6 @@
   }
 }
 
-.article__title {
-  font-family: var(--heading-font-family);
-  color: var(--color-dark-blue);
-  margin-bottom: var(--space-sm);
-}
-
-.article__title a {
-  color: inherit;
-}
-
-@media (--viewport-lg) {
-  .article__title {
-    margin-bottom: var(--space-md);
-  }
-}
-
 .article__date {
   color: var(--color-grey);
   margin-bottom: var(--space-sm);
@@ -81,12 +65,12 @@
  * List styles
  */
 
-.article__content li {
+.article__content ul li {
   position: relative;
   padding: 0 0 var(--space-xs) var(--space-sm);
 }
 
-.article__content li:before {
+.article__content ul li:before {
   content: '';
   position: absolute;
   left: 4px;
@@ -214,3 +198,7 @@
 .article th {
   border-width: 0 0 2px;
 }
+
+.article iframe {
+  max-width: 100%;
+}

css/content.css

@@ -0,0 +1,6 @@
+.content {
+  border-bottom: 1px solid var(--color-light-grey);
+  margin-bottom: var(--space-md);
+  padding-bottom: var(--space-md);
+}
+

css/index.css

@@ -9,6 +9,7 @@
 @import "metadata";
 @import "search";
 @import "article";
+@import "content";
 @import "footer";
 @import "comments";
 @import "comment";
@@ -16,6 +17,8 @@
 @import "avatar";
 @import "link";
 @import "pagination";
+@import "title";
+@import "archive";
 
 :root {
   --color-black: #000;

css/page.css

@@ -42,6 +42,7 @@
     grid-row-start: 1;
   }
 
+  .page__content,
   .page__article {
     grid-column-start: 2;
     grid-row: span 2;

css/title.css

@@ -0,0 +1,16 @@
+.title {
+  font-family: var(--heading-font-family);
+  color: var(--color-dark-blue);
+  margin-bottom: var(--space-sm);
+}
+
+.title a {
+  color: inherit;
+}
+
+@media (--viewport-lg) {
+  .title {
+    margin-bottom: var(--space-md);
+  }
+}
+