refactor

src/css/metadata.css

@@ -0,0 +1,90 @@
+.metadata {
+  font-size: var(--size-body-extra-small);
+  border-bottom: 1px solid var(--color-light-grey);
+}
+
+@media (--viewport-lg) {
+  .metadata {
+    border-bottom: none;
+  }
+}
+
+@media (--viewport-lg) and (min-height: 34rem) {
+  .is-fixed .metadata {
+    position: fixed;
+  }
+}
+
+.metadata__list {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+@media (--viewport-lg) {
+  .metadata__list {
+    flex-flow: column wrap;
+  }
+}
+
+.metadata__list-item {
+  display: flex;
+  align-items: center;
+  margin: 0 var(--space-sm) var(--space-sm) 0;
+}
+
+@media (--viewport-lg) {
+  .metadata__list-item {
+    margin-right: 0;
+  }
+}
+
+.metadata__list-item--light {
+  color: var(--color-grey);
+  display: none;
+  margin-bottom: var(--space-sm);
+}
+
+@media (--viewport-lg) {
+  .metadata__list-item--light {
+    display: block;
+  }
+}
+
+.metadata__icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.metadata__text {
+  font-style: oblique;
+  margin-left: var(--space-xs);
+  text-transform: capitalize;
+  transition: box-shadow var(--transition-md) ease-out;
+  vertical-align: middle;
+}
+
+.metadata__link {
+  display: inline-block;
+  transition: color var(--transition-md) ease-out;
+}
+
+.metadata__link:hover,
+.metadata__link:focus {
+  color: var(--color-light-blue);
+}
+
+.metadata__link:hover .metadata__text,
+.metadata__link:focus .metadata__text {
+  box-shadow: var(--link-focus);
+}
+
+.metadata__tag-link {
+  transition: box-shadow var(--transition-md) ease-out,
+    color var(--transition-md) ease-out;
+}
+
+.metadata__tag-link:hover,
+.metadata__tag-link:focus {
+  color: var(--color-light-blue);
+  box-shadow: var(--link-focus);
+}