🔥

2018-02-09 15:55:19 +00:00
commit fb5d64742c
30 changed files with 9921 additions and 0 deletions
--- a/css/article.css
+++ b/css/article.css
@@ -0,0 +1,127 @@
+/** @define Article; weak */
+
+@media (--viewportLg) {
+  .Article {
+    border-bottom: 1px solid var(--colorLightGrey);
+  }
+}
+
+.Article-title {
+  font-family: var(--headingFontFamily);
+  color: var(--colorNearBlack);
+  margin-bottom: var(--spaceSm);
+}
+
+@media (--viewportLg) {
+  .Article-title {
+    margin-bottom: var(--spaceLg);
+  }
+}
+
+.Article-date {
+  color: var(--colorGrey);
+  margin-bottom: var(--spaceSm);
+}
+
+@media (--viewportLg) {
+  .Article-date {
+    display: none;
+  }
+}
+
+.Article-dateText {
+  line-height: 2;
+  margin-left: 10px;
+  vertical-align: top;
+}
+
+.Article p {
+  margin-bottom: var(--spaceSm);
+}
+
+@media (--viewportLg) {
+  .Article p {
+    margin-bottom: var(--spaceMd);
+  }
+}
+
+/**
+ * Link styles
+ */
+
+.Article-content a {
+  color: var(--colorLightBlue);
+  position: relative;
+  transition: text-shadow var(--transitionMd) ease-out;
+}
+
+.Article-content a::after {
+  background-color: var(--colorLightBlue);
+  bottom: -1px;
+  content: '';
+  left: 0;
+  height: 2px;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  transition: opacity var(--transitionMd) ease-out;
+}
+
+.Article-content a img {
+  transition:
+    box-shadow var(--transitionMd) ease-out,
+    filter var(--transitionMd) ease-out;
+}
+
+/**
+ * Focus states
+ */
+
+.Article-content a:focus {
+  text-shadow: 1px 1px 1px var(--colorLightBlue);
+}
+
+.Article-content a:focus img {
+  box-shadow: 0 0 12px var(--colorLightBlue);
+  filter: brightness(125%);
+}
+
+/**
+ * Hover states
+ */
+
+.Article-content a:hover::after {
+  opacity: 1;
+}
+
+/**
+ * Wordpress overrides
+ */
+
+.Article .twitter-tweet,
+.Article .wp-caption {
+  background-color: #fff;
+  border: 1px solid var(--colorLightGrey);
+  border-radius: 4px;
+  margin: 0 0 var(--spaceSm);
+  padding: var(--spaceSm);
+  text-align: center;
+}
+
+.Article .wp-caption a::after {
+  display: none;
+}
+
+@media (--viewportLg) {
+  .Article .twitter-tweet,
+  .Article .wp-caption {
+    margin: 0 0 var(--spaceMd);
+    padding: var(--spaceMd);
+  }
+}
+
+.Article .wp-caption-text {
+  font-family: var(--headingFontFamily);
+  margin: var(--spaceSm) 0 0;
+}
+