Add comments template

css/avatar.css

@@ -0,0 +1,8 @@
+.avatar {
+  border-radius: 5px;
+  transition: filter var(--transition-md) ease-out;
+}
+
+.avatar:hover {
+  filter: saturate(1.3) contrast(1.3);
+}

css/comment.css

@@ -0,0 +1,64 @@
+.comment__head {
+  display: flex;
+  margin-bottom: var(--space-sm);
+}
+
+.comment__avatar {
+  background-image: var(--windy-svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  margin-right: var(--space-sm);
+  height: 64px;
+  width: 64px;
+}
+
+.comment__metadata {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  margin: var(--space-xs) 0;
+}
+
+.comment__date {
+  font-size: 12px;
+}
+
+.comment__body {
+  margin-bottom: var(--space-sm);
+}
+
+.comment__reply:focus,
+.comment__reply:hover {
+  color: var(--color-light-blue);
+}
+
+.comment__reply-icon {
+  display: inline-block;
+  margin-right: var(--space-xs);
+  vertical-align: middle;
+}
+
+.comment__reply-text {
+  display: inline-block;
+  position: relative;
+  font-size: 12px;
+  vertical-align: middle;
+}
+
+.comment__reply-text:after {
+  background-color: var(--color-light-blue);
+  bottom: -1px;
+  content: '';
+  left: 0;
+  height: 2px;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  transition: opacity var(--transition-md) ease-out;
+}
+
+.comment__reply:focus .comment__reply-text:after,
+.comment__reply:hover .comment__reply-text:after {
+  opacity: 1;
+}

css/comments.css

@@ -0,0 +1,20 @@
+.comments__head {
+  border-bottom: 1px solid var(--color-light-grey);
+  margin-bottom: var(--space-md);
+}
+
+.comments__title {
+  margin-bottom: var(--space-sm);
+}
+
+.comments__item {
+  margin-bottom: var(--space-md);
+}
+
+.comments__item--depth-1 {
+  margin-left: var(--space-md);
+}
+
+.comments__item--depth-2 {
+  margin-left: calc(var(--space-md) * 2);
+}

css/icon.css

@@ -4,6 +4,11 @@
   width: 32px;
 }
 
+.icon--extra-small {
+  height: 16px;
+  width: 16px;
+}
+
 .icon--small {
   height: 24px;
   width: 24px;

css/index.css

@@ -10,6 +10,9 @@
 @import "search";
 @import "article";
 @import "footer";
+@import "comments";
+@import "comment";
+@import "avatar";
 
 :root {
   --color-black: #000;
@@ -21,6 +24,7 @@
   --color-facebook: #3e5a98;
   --color-twitter: #1da1f2;
   --color-rss: #ee802f;
+  --space-xs: 10px;
   --space-sm: 20px;
   --space-md: 30px;
   --space-lg: 60px;