Add comments template

2018-12-10 22:31:59 +00:00
parent 907f4f4f3e
commit bc0e10dee5
10 changed files with 172 additions and 6 deletions
--- a/css/comment.css
+++ b/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;
+}