🔥

.browser-sync.js

@@ -0,0 +1,7 @@
+module.exports = {
+  proxy: '172.17.0.3',
+  files: [
+    'theme/**/*',
+  ],
+  watchTask: true,
+};

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 80

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+theme/style.css

.stylelintrc

@@ -0,0 +1,12 @@
+{
+  "extends": [ "stylelint-config-standard" 
+  ],
+  "plugins": [
+    "stylelint-selector-bem-pattern"
+  ],
+  "rules": {
+    "plugin/selector-bem-pattern": {
+      "preset": "suit"
+    }  
+  }
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Dan Head
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,41 @@
+# WindyCOYS Wordpress Theme
+
+A modern Wordpress theme written for [WindyCOYS.com](http://windycoys.com).
+
+Built using:
+
+* [PostCSS](https://postcss.org)
+
+## Requirements
+
+* Docker + Docker Compose
+* Node.js
+
+## Building
+
+At the moment, the only step of the build process is to compile `styles.css`,
+this is done by running:
+
+```
+npm run css:compile
+```
+
+*Note: CSS will only be minified if NODE_ENV='production'*
+
+## Developing
+
+Use `docker-compose` to start the Wordpress and MySQL containers:
+
+```
+docker-compose -up
+```
+
+To build and watch the theme files for changes, run:
+
+```
+npm start
+```
+
+## License
+
+The WindyCOYS theme is licensed under the [MIT license](http://opensource.org/licenses/MIT)

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

docker-compose.yml

@@ -0,0 +1,15 @@
+web:
+  image: wordpress
+  links:
+    - mysql
+  environment:
+    - WORDPRESS_DB_PASSWORD=myPass
+  volumes:
+    - ./theme:/var/www/html/wp-content/themes/windycoys
+  ports:
+    - "80:80"
+mysql:
+  image: tutum/mysql
+  environment:
+    - MYSQL_PASS=myPass
+    - MYSQL_DATABASE=wordpress

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "windycoys",
+  "version": "0.1.0",
+  "description": "Wordpress theme for windycoys.com",
+  "scripts": {
+    "css": "run-s css:*",
+    "css:compile": "postcss -o theme/style.css css/index.css",
+    "css:lint": "stylelint --config .stylelintrc \"css/**/*.css\"",
+    "serve": "browser-sync start --config .browser-sync.js",
+    "start": "run-p watch serve",
+    "watch": "npm-watch"
+  },
+  "author": "Dan Head <me@danielhead.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "browser-sync": "^2.23.6",
+    "npm-run-all": "^4.1.2",
+    "npm-watch": "^0.3.0",
+    "stylelint": "^8.4.0",
+    "stylelint-config-standard": "^18.0.0",
+    "stylelint-selector-bem-pattern": "^2.0.0"
+  },
+  "dependencies": {
+    "autoprefixer": "^7.2.5",
+    "cssnano": "^3.10.0",
+    "normalize.css": "^7.0.0",
+    "postcss-cli": "^4.1.1",
+    "postcss-custom-media": "^6.0.0",
+    "postcss-custom-properties": "^6.2.0",
+    "postcss-import": "^11.0.0"
+  },
+  "watch": {
+    "css": {
+      "patterns": [
+        "css"
+      ],
+      "extensions": "css"
+    }
+  }
+}

postcss.config.js

@@ -0,0 +1,10 @@
+module.exports = ctx => ({
+  map: ctx.env !== 'production',
+  plugins: {
+    'postcss-import': {},
+    'postcss-custom-media': {},
+    'postcss-custom-properties': {},
+    'autoprefixer': {},
+    'cssnano': ctx.env === 'production' ? {} : false,
+  },
+});

theme/404.php

@@ -0,0 +1,3 @@
+<main>
+  <h1>404</h1>
+</main>

theme/functions.php

@@ -0,0 +1,22 @@
+<?php
+
+function windycoys_the_tags() {
+  $tags = get_the_tags();
+  if ($tags) {
+    foreach($tags as $key=>$tag) {
+      echo '<a class="Metadata-categoriesLink" href="' .
+        home_url() . '/tags/' . $tag->name . '" rel="tag">' .
+        $tag->name . '</a>';
+      if ($key < count($tags) - 1) {
+        echo ', ';
+      }
+    }
+  }
+}
+
+function windycoys_share_twitter_url() {
+  $url = 'https://twitter.com/intent/tweet?text=';
+  $title = get_the_title();
+  $link = get_the_permalink();
+  echo $url . urlencode($title . ': ' . $link . ' by @WindyCOYS');
+}

theme/header.php

@@ -0,0 +1,14 @@
+<!doctype html>
+<html <?php language_attributes(); ?> class="no-js">
+	<head>
+		<meta charset="<?php bloginfo('charset'); ?>">
+		<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
+    <meta name="theme-color" content="#4b88b6">
+		<meta name="description" content="<?php bloginfo('description'); ?>">
+		<?php wp_head(); ?>
+    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway:700" rel="stylesheet">
+	</head>
+	<body>
+  <?php get_template_part('icons') ?>

theme/icons.php

@@ -0,0 +1,53 @@
+<svg style="position: absolute;width: 0;height: 0;overflow: hidden;">
+<symbol id="icon-calendar" viewBox="0 0 448 512">
+<path fill="currentColor" d="M148 288h-40c-6.6
+  0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12
+  12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12
+  12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12
+  12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96
+  96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0
+  12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4
+  12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12
+  5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5
+  48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12
+  12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12
+  12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0
+  6-2.7 6-6z"></path>
+</symbol>
+<symbol id="icon-facebook" viewBox="0 0 512 512">
+<path fill="currentColor" d="M448 56.7v398.5c0
+  13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9
+  33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87
+  89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32
+  24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"></path>
+</symbol>
+<symbol id="icon-hash" viewBox="0 0 448 512">
+<path fill="currentColor" d="M440.667
+  182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123
+  38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175
+  128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0
+  0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163
+  185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813
+  9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877
+  473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826
+  384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0
+  0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0
+  11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12
+  12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857
+  128z"></path>
+</symbol>
+<symbol id="icon-twitter" viewBox="0 0 512 512">
+<path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0
+  138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106
+  8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568
+  130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624
+  19.818 1.624 9.421 0 18.843-1.3
+  27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797
+  30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492
+  5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365
+  109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934
+  104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32
+  66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273
+  41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
+</symbol>
+</svg>

theme/index.php

@@ -0,0 +1,31 @@
+<?php get_header() ?>
+  <main class="Grid">
+    <?php get_template_part('partials/logo') ?>
+    <?php while ( have_posts() ) : the_post() ?>
+    <section class="Grid-article">
+      <article class="Article">
+        <div class="Article-date">
+          <svg class="Icon">
+            <use href="#icon-calendar"></use>
+          </svg>
+          <span class="Article-dateText">
+            <?php the_time(get_option('date_format')) ?>
+          </span>
+        </div>
+        <h1 class="Article-title">
+          <a href="<?php the_permalink(); ?>">
+            <?php the_title(); ?>
+          </a>
+        </h1>
+        <div class="Article-content">
+          <?php the_content( __( 'Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys' )  ); ?>
+        </div>
+      </article>
+    </section>
+    <section class="Grid-metadata">
+      <?php get_template_part('partials/metadata') ?>
+    </section>
+    <?php endwhile; ?>
+    <section class="Grid-footer">
+      <?php get_template_part('partials/footer') ?>
+    </section>

theme/partials/footer.php

@@ -0,0 +1,3 @@
+<footer class="Footer">
+  <p>This is the footer</p>
+</footer>

theme/partials/logo.php

@@ -0,0 +1,6 @@
+<section class="Logo">
+  <a class="Logo-link" href="<?php echo home_url(); ?>">
+	  <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="Logo-image">
+	</a>
+</section>
+

theme/partials/metadata.php

@@ -0,0 +1,36 @@
+<section class="Metadata">
+  <div class="Metadata-date">
+    <svg class="Icon">
+      <use href="#icon-calendar"></use>
+    </svg>
+    <span class="Metadata-dateText">
+      <?php the_time(get_option('date_format')) ?>
+    </span>
+  </div>
+  <div class="Metadata-comments">
+    <a class="Metadata-commentsLink" href="<?php the_permalink() ?>">
+      <?php comments_number(); ?>
+    </a>
+  </div>
+  <div class="Metadata-categories">
+    <svg class="Icon">
+      <use href="#icon-hash"></use>
+    </svg>
+    <span class="Metadata-categoriesText">
+      <?php windycoys_the_tags() ?>
+    </span>
+  </div>
+  <div class="Metadata-share">
+    <a class="Metadata-shareLink" href="#">
+      <svg class="Icon Icon--facebook">
+        <use href="#icon-facebook"></use>
+      </svg>
+    </a>
+    <a class="Metadata-shareLink" href="<?php windycoys_share_twitter_url() ?>">
+      <svg class="Icon Icon--twitter">
+        <use href="#icon-twitter"></use>
+      </svg>
+    </a>
+  </div>
+</section>
+

theme/partials/nav.php

@@ -0,0 +1,14 @@
+<header class="Header">
+  <div class="Header-logo">
+	  <a href="<?php echo home_url(); ?>">
+			<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo-img">
+		</a>
+  </div>
+  <nav class="Nav">
+    <ul class="Nav-list">
+      <li class="Nav-item">
+        <a class="Nav-link" href="#">About</a>
+      </li>
+    </ul>
+  </nav>
+</header>

theme/single.php

@@ -0,0 +1,14 @@
+<?php get_header(); ?>
+<main>
+  <?php if (have_posts()): while (have_posts()) : the_post(); ?>
+    <article>
+      <h1><?php the_title(); ?></h1>
+    </article>
+  <?php endwhile; ?>
+
+  <?php else: ?>
+    <article>
+      <h1>Sorry, nothing to display</h1>
+    </article>
+  <?php endif; ?>
+</main>