🔥

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;
+}
+

css/base.css

@@ -0,0 +1,55 @@
+html {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23e0e0e0' fill-opacity='0.3' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
+  color: var(--colorNearBlack);
+  font-family: var(--bodyFontFamily);
+  font-size: 16px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+figure,
+table,
+p,
+pre {
+  margin: 0;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+  user-select: none;
+  vertical-align: middle;
+}
+
+a,
+a:active,
+a:focus,
+a:hover,
+a:visited {
+  color: var(--colorNearBlack);
+  font-weight: 700;
+  outline: none;
+  text-decoration: none;
+}

css/footer.css

@@ -0,0 +1,5 @@
+/** @define Footer */
+
+.Footer {
+  text-align: center;
+}

css/grid.css

@@ -0,0 +1,30 @@
+/** @define Grid */
+
+.Grid {
+  display: grid;
+  grid-auto-flow: dense;
+  grid-gap: var(--spaceSm);
+  grid-template-columns: 1fr;
+  margin: 0 var(--spaceSm);
+}
+
+@media (--viewportLg) {
+  .Grid {
+    grid-template-columns: 224px 1fr;
+    grid-gap: var(--spaceMd);
+    margin: 0 var(--spaceMd);
+  }
+
+  .Grid-article {
+    grid-column-start: 2;
+  }
+
+  .Grid-metadata {
+    grid-column-start: 1;
+  }
+
+  .Grid-footer {
+    grid-column: 1 / -1;
+  }
+}
+

css/header.css

@@ -0,0 +1,2 @@
+/** @define Header */
+

css/icon.css

@@ -0,0 +1,20 @@
+/** @define Icon */
+
+.Icon {
+  display: inline-block;
+  height: 32px;
+  width: 32px;
+}
+
+.Icon--small {
+  height: 24px;
+  width: 24px;
+}
+
+.Icon--facebook {
+  color: var(--colorFacebook);
+}
+
+.Icon--twitter {
+  color: var(--colorTwitter);
+}

css/index.css

@@ -0,0 +1,38 @@
+/*!
+Theme Name: WindyCOYS
+Theme URI: https://danielhead.com
+Author: Dan Head
+Author URI: https://danielhead.com
+Description: Theme for windycoys.com
+Version: 2.0
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+*/
+
+@import "normalize.css";
+@import "base";
+@import "grid";
+@import "logo";
+@import "article";
+@import "metadata";
+@import "footer";
+@import "icon";
+
+:root {
+  --colorPrimaryBlue: #201f42;
+  --colorNearBlack: #333;
+  --colorGrey: #828282;
+  --colorLightGrey: #e0e0e0;
+  --colorFacebook: #3e5a98;
+  --colorTwitter: #1da1f2;
+  --colorLightBlue: #1b8eff;
+  --spaceSm: 10px;
+  --spaceMd: 30px;
+  --spaceLg: 60px;
+  --transitionMd: 300ms;
+  --headingFontFamily: 'Raleway', sans-serif;
+  --bodyFontFamily: 'Open Sans', sans-serif;
+}
+
+@custom-media --viewportMd (min-width: 640px);
+@custom-media --viewportLg (min-width: 960px);

css/logo.css

@@ -0,0 +1,28 @@
+/** @define Logo */
+
+.Logo {
+  display: flex;
+  font-size: 0;
+  justify-content: center;
+}
+
+.Logo-image {
+  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
+  max-width: 360px;
+  transition: filter var(--transitionMd) ease-in;
+}
+
+.Logo-link:focus .Logo-image {
+  filter: drop-shadow(6px 4px 4px var(--colorLightBlue));
+}
+
+@media (--viewportLg) {
+  .Logo {
+    grid-column: span 2;
+    justify-content: left;
+  }
+
+  .Logo-image {
+    max-width: 224px;
+  }
+}

css/metadata.css

@@ -0,0 +1,43 @@
+/** @define Metadata */
+
+.Metadata {
+  border-bottom: 1px solid var(--colorLightGrey);
+  font-size: 14px;
+  margin-bottom: var(--spaceMd);
+}
+
+@media (--viewportLg) {
+  .Metadata {
+    border-bottom: none;
+  }
+}
+
+.Metadata-date {
+  color: var(--colorGrey);
+  display: none;
+  margin-bottom: var(--spaceSm);
+}
+
+@media (--viewportLg) {
+  .Metadata-date {
+    display: block;
+  }
+}
+
+.Metadata-comments,
+.Metadata-categories,
+.Metadata-share {
+  margin-bottom: var(--spaceSm);
+}
+
+.Metadata-categoriesText,
+.Metadata-dateText {
+  line-height: 2.3;
+  margin-left: 10px;
+  text-transform: capitalize;
+  vertical-align: top;
+}
+
+.Metadata-shareLink {
+  margin-right: var(--spaceSm);
+}