dan/windycoys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor CSS to BEM

Browse Source 
Update dependencies
Improve focus and hover states
This commit is contained in:
Dan Head
2018-12-09 14:52:01 +00:00
parent e9f1f6e2fa
commit 6e62b55e60
34 changed files with 3934 additions and 2384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.stylelintrc
View File

@@ -1,12 +1,6 @@
{
"extends": [ "stylelint-config-standard"
],
"plugins": [
"stylelint-selector-bem-pattern"
],
"extends": [ "stylelint-config-standard" ],
"rules": {
"plugin/selector-bem-pattern": {
"preset": "suit"
}
"selector-pseudo-element-colon-notation": "single"
}
}

133
css/article.css
View File

@@ -1,51 +1,49 @@
/** @define Article; weak */
@media (--viewportLg) {
.Article {
border-bottom: 1px solid var(--colorLightGrey);
@media (--viewport-lg) {
.article {
border-bottom: 1px solid var(--color-light-grey);
}
}
.Article-title {
font-family: var(--headingFontFamily);
color: var(--colorDarkBlue);
margin-bottom: var(--spaceSm);
.article__title {
font-family: var(--heading-font-family);
color: var(--color-dark-blue);
margin-bottom: var(--space-sm);
}
.Article-title a {
.article__title a {
color: inherit;
}
@media (--viewportLg) {
.Article-title {
margin-bottom: var(--spaceMd);
@media (--viewport-lg) {
.article__title {
margin-bottom: var(--space-md);
}
}
.Article-date {
color: var(--colorGrey);
margin-bottom: var(--spaceSm);
.article__date {
color: var(--color-grey);
margin-bottom: var(--space-sm);
}
@media (--viewportLg) {
.Article-date {
@media (--viewport-lg) {
.article__date {
display: none;
}
}
.Article-dateText {
.article__date-text {
line-height: 2;
margin-left: 10px;
vertical-align: top;
}
.Article p {
margin-bottom: var(--spaceSm);
.article p {
margin-bottom: var(--space-sm);
}
@media (--viewportLg) {
.Article p {
margin-bottom: var(--spaceMd);
@media (--viewport-lg) {
.article p {
margin-bottom: var(--space-md);
}
}
@@ -53,14 +51,13 @@
* Link styles
*/
.Article-content a {
color: var(--colorLightBlue);
.article__content a {
color: var(--color-light-blue);
position: relative;
transition: text-shadow var(--transitionMd) ease-out;
}
.Article-content a::after {
background-color: var(--colorLightBlue);
.article__content a:after {
background-color: var(--color-light-blue);
bottom: -1px;
content: '';
left: 0;
@@ -68,25 +65,25 @@
opacity: 0;
position: absolute;
right: 0;
transition: opacity var(--transitionMd) ease-out;
transition: opacity var(--transition-md) ease-out;
}
.Article-content a img {
.article__content a img {
transition:
box-shadow var(--transitionMd) ease-out,
filter var(--transitionMd) ease-out;
box-shadow var(--transition-md) ease-out,
filter var(--transition-md) ease-out;
}
/**
* Focus states
*/
.Article-content a:focus {
text-shadow: 1px 1px 1px var(--colorLightBlue);
.article__content a:focus:after {
opacity: 1;
}
.Article-content a:focus img {
box-shadow: 0 0 12px var(--colorLightBlue);
.article__content a:focus img {
box-shadow: 0 0 12px var(--color-light-blue);
filter: brightness(125%);
}
@@ -94,7 +91,7 @@
* Hover states
*/
.Article-content a:hover::after {
.article__content a:hover:after {
opacity: 1;
}
@@ -102,34 +99,64 @@
* Wordpress overrides
*/
.Article .twitter-tweet,
.Article .wp-caption {
.article .twitter-tweet,
.article .wp-caption {
background-color: #fff;
border: 1px solid var(--colorLightGrey);
border: 1px solid var(--color-light-grey);
border-radius: 4px;
margin: 0 0 var(--spaceSm);
padding: var(--spaceSm);
margin: 0 0 var(--space-sm);
padding: var(--space-sm);
text-align: center;
}
.Article .wp-caption a::after {
.article .wp-caption a:after {
display: none;
}
.Article [class*="wp-caption"] {
.article [class*="wp-caption"] {
width: auto !important;
}
@media (--viewportLg) {
.Article .twitter-tweet,
.Article .wp-caption {
margin: 0 0 var(--spaceMd);
padding: var(--spaceMd);
@media (--viewport-lg) {
.article .twitter-tweet,
.article .wp-caption {
margin: 0 0 var(--space-md);
padding: var(--space-md);
}
}
.Article .wp-caption-text {
font-family: var(--headingFontFamily);
margin: var(--spaceSm) 0 0;
.article .wp-caption-text {
font-family: var(--heading-font-family);
margin: var(--space-sm) 0 0;
}
.article table {
border-collapse: collapse;
table-layout: fixed;
display: block;
overflow-x: auto;
height: auto !important;
max-width: 85vw;
white-space: nowrap;
margin-bottom: var(--space-md);
width: auto !important;
}
@media (--viewport-lg) {
.article table {
max-width: 100%;
}
}
.article th,
.article tr,
.article td {
border-width: 0 0 1px;
border-style: solid;
border-color: var(--color-dark-blue);
padding: 5px;
}
.article th {
border-width: 0 0 2px;
}

13
css/base.css
View File

@@ -4,16 +4,17 @@ html {
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.45' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
color: var(--colorNearBlack);
font-family: var(--bodyFontFamily);
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.55' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
color: var(--color-near-black);
font-family: var(--body-font-family);
font-size: 16px;
line-height: 1.5;
margin: 0;
}
*,
*::before,
*::after {
*:before,
*:after {
box-sizing: inherit;
}
@@ -49,7 +50,7 @@ a:active,
a:focus,
a:hover,
a:visited {
color: var(--colorNearBlack);
color: var(--color-near-black);
font-weight: 700;
outline: none;
text-decoration: none;

8
css/footer.css
View File

@@ -1,10 +1,8 @@
/** @define Footer */
.Footer {
.footer {
text-align: center;
}
.Footer-text {
.footer__text {
font-size: 14px;
margin-bottom: var(--spaceSm);
margin-bottom: var(--space-sm);
}

2
css/header.css
View File

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

20
css/icon.css
View File

@@ -1,29 +1,27 @@
/** @define Icon */
.Icon {
.icon {
display: inline-block;
height: 32px;
width: 32px;
}
.Icon--small {
.icon--small {
height: 24px;
width: 24px;
}
.Icon--large {
.icon--large {
height: 48px;
width: 48px;
}
.Icon--facebook {
color: var(--colorFacebook);
.icon--facebook {
color: var(--color-facebook);
}
.Icon--twitter {
color: var(--colorTwitter);
.icon--twitter {
color: var(--color-twitter);
}
.Icon--rss {
color: var(--colorRss);
.icon--rss {
color: var(--color-rss);
}

54
css/index.css
View File

@@ -1,35 +1,35 @@
@import "normalize.css";
@import "normalize";
@import "base";
@import "grid";
@import "logo";
@import "article";
@import "metadata";
@import "footer";
@import "menu";
@import "page";
@import "nav";
@import "search";
@import "menu";
@import "logo";
@import "social";
@import "icon";
@import "metadata";
@import "search";
@import "article";
@import "footer";
:root {
--colorBlack: #000;
--colorNearBlack: #333;
--colorDarkBlue: #201f42;
--colorLightBlue: #1b8eff;
--colorGrey: #828282;
--colorLightGrey: #e0e0e0;
--colorFacebook: #3e5a98;
--colorTwitter: #1da1f2;
--colorRss: #ee802f;
--spaceSm: 10px;
--spaceMd: 30px;
--spaceLg: 60px;
--transitionMd: 300ms;
--transitionSl: 600ms;
--headingFontFamily: 'Raleway', sans-serif;
--bodyFontFamily: 'Open Sans', sans-serif;
--windySVG: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQxNXB4IiBoZWlnaHQ9IjQxNXB4IiB2aWV3Qm94PSIwIDAgNDE1IDQxNSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0MTUpIHNjYWxlKDAuMSwtMC4xKSIgZmlsbD0iI2NjYyIgc3Ryb2tlPSJub25lIj48cGF0aCBkPSJNMTc4MCA0MTM0IGMtNTAzIC03MyAtOTc0IC0zMzMgLTEyOTEgLTcxMyBsLTgwIC05NiAtNzMgMCBjLTQ2IDAgLTc5IC01IC04OSAtMTMgLTE0IC0xMiAtMTIgLTE5IDIzIC02NCAyMiAtMjcgNDAgLTU0IDQwIC01OSAwIC00IC0yNSAtNTIgLTU1IC0xMDYgLTExNiAtMjA5IC0xOTkgLTQ1MyAtMjM1IC02OTggLTI1IC0xNjQgLTI3IC00MzYgLTQgLTU5NyAxMjggLTkyMyA4NDkgLTE2NDQgMTc3MyAtMTc3MiAxNjAgLTIzIDQzMiAtMjEgNTk2IDQgOTExIDEzNiAxNjIyIDg1NCAxNzQ5IDE3NjggMjEgMTQ4IDIxIDQyNiAwIDU3NCAtMzggMjc0IC0xMzkgNTYzIC0yNzQgNzg0IC0yMiAzNSAtNDAgNzEgLTQwIDc5IDAgOCAtMTYgMzMgLTM3IDU2IGwtMzYgNDAgMzMgOTcgYzI5IDg1IDM0IDExMyAzOCAyMjMgNyAyMDkgLTMxIDI4OSAtMTYzIDMzOCAtMTM0IDUxIC0yNTIgLTQgLTI4NSAtMTMxIC02IC0yMSAtMTUgLTU2IC0yMCAtNzggbC0xMSAtNDAgLTc3IDU0IGMtMjU3IDE4MCAtNTgzIDMwNyAtOTAwIDM1MSAtMTM5IDE5IC00NDggMTggLTU4MiAtMXogbTQ5OCAtMTE1IGMyMzUgLTI1IDQ2MCAtOTEgNjY3IC0xOTQgMTc4IC04OSAyNjkgLTE1MiAyNzMgLTE4NyAyIC0xNiAxIC0yOCAtMiAtMjggLTMgMCAtMzEgMTggLTYzIDQxIC0yMjIgMTU2IC01MTggMjcyIC04MDMgMzE1IC0xNDEgMjEgLTQxMyAyMCAtNTUwIC0xIC0yMTEgLTMzIC0zOTkgLTkzIC01ODEgLTE4NiAtMjEzIC0xMDggLTM2MSAtMjE5IC01MzEgLTM5OCAtOTggLTEwNCAtMTI4IC0xMjUgLTE0MyAtMTAyIC03IDEzIDEwMyAxMzggMTk3IDIyNiA0MTUgMzg1IDk4MiA1NzUgMTUzNiA1MTR6IG0tNTM5IC02MDEgYy00IC0yNCAtMTMgLTY5IC0xOSAtMTAwIC0xMSAtNTYgLTEyIC01OCAtNDMgLTU4IC01NCAwIC0yMjcgLTQ4IC0yNzQgLTc2IC0xMDkgLTYzIC0xNTcgLTEzNSAtMTMzIC0xOTUgMjAgLTQ3IDEwMyAtMTE0IDE4MyAtMTQ4IDQwIC0xNyA3MSAtMzYgNzEgLTQzIC0xIC03IC05IC00MCAtMTggLTczIC0yNyAtMTAwIC0zMiAtMjE3IC0xMiAtMjcwIDEwIC0yNSAyNyAtNTIgMzkgLTYwIDI1IC0xNyAxMTQgLTIwIDE2OSAtNSAzNiAxMCAzOSA5IDEwNyAtNDYgNjUgLTUyIDcwIC01OCA2NSAtODcgLTEzIC04MSAtMTIgLTc4IC00OSAtNzEgLTI5IDUgLTM5IDIgLTY1IC0yNCAtMzIgLTMzIC0zNyAtNjAgLTE5IC0xMTEgNiAtMTggOSAtMzUgNiAtMzggLTQgLTMgLTI4IDAgLTU0IDYgLTExNSAyOSAtMjA5IDkyIC0yNjQgMTgwIC0xNiAyNCAtNDkgOTggLTc1IDE2MyAtODIgMjEwIC0xOTggNDEzIC0zMjIgNTYzIGwtNTAgNTkgMzAgMzggYzgyIDEwNCAyNzMgMjUwIDQzMSAzMjkgNzIgMzcgMjY2IDEwOCAyOTMgMTA5IDggMCA5IC0xMyAzIC00MnogbTgzMyAtNyBjMTk3IC03NiAzODEgLTE5NSA1MTYgLTMzNCBsNTMgLTU0IC0xNiAtNjIgYy04MSAtMzEzIC0yMzEgLTU4MSAtNDU0IC04MTQgLTcwIC03MiAtODkgLTg3IC0xMDcgLTgzIC0xMyA0IC0yNSAyIC0yOCAtMyAtNyAtMTEgLTgzIC01MSAtOTcgLTUxIC01IDAgLTI3IDEyIC00OSAyNiAtMjggMTkgLTQwIDM0IC00MCA1MSAwIDM4IC0yNiA3NyAtNjQgOTggLTIwIDExIC0zNiAyNCAtMzYgMzAgMCA1IC0zIDIwIC02IDMyIC01IDE4IDEgMjUgMzggNDQgMjMgMTIgNjAgMzUgODEgNTEgMzYgMjkgNDAgMzAgODIgMTkgNjEgLTE1IDEwMSAtMTQgMTQxIDUgNjcgMzIgOTIgMTA3IDk2IDI5MiBsMyAxMTMgNjkgMjQgYzMyMSAxMTIgMjM0IDI5OSAtMTk2IDQxOSAtNDggMTQgLTU3IDIwIC02MiA0NCAtNiAyNyAtMjUgMTYwIC0yNiAxNzUgMCAxMyAyNCA4IDEwMiAtMjJ6IG0tMjIwNyAtNDkyIGMtMTkxIC0zNzggLTI0NiAtODYzIC0xNDYgLTEyODAgODkgLTM3NCAzMDkgLTc0MCA1OTQgLTk5MCA3NjIgLTY2OCAxODk1IC02MzMgMjYwOCA4MCAyODAgMjgwIDQ2MiA2MjcgNTM0IDEwMTggMjMgMTE5IDMxIDQyNSAxNiA1NTAgLTI0IDE5NSAtOTIgNDM2IC0xNjAgNTcyIC0zMCA1OCAtNDEgMTI0IC0yMiAxMzUgMTIgOCA5OCAtMTgxIDE0MSAtMzE0IDIwMyAtNjE4IDkyIC0xMjgyIC0zMDIgLTE4MDMgLTgwIC0xMDYgLTI2MCAtMjg2IC0zNjcgLTM2NiAtNzA2IC01MzQgLTE2NjcgLTUzMyAtMjM3NCAxIC0xMDYgODAgLTI4NiAyNjAgLTM2NiAzNjcgLTE4OSAyNDkgLTMxNiA1MzkgLTM3MyA4NTEgLTMxIDE2NiAtMzEgNTA0IDAgNjcwIDM3IDIwNCAxMjUgNDU3IDIwOCA1OTcgbDI4IDQ4IDkgLTMxIGM4IC0yNiAzIC00MiAtMjggLTEwNXogbTUyNCAtNTcwIGM5MyAtNDYgMTMwIC0xMTcgMTMxIC0yNDYgMCAtNzAgMTggLTE0OCA0NSAtMjAzIDIyIC00MyAxMDMgLTEyOCAxNTMgLTE2MCAyNCAtMTUgMjMgLTE2IC03MiAtNzggLTEwNCAtNjkgLTE5MyAtMTM5IC0yNzIgLTIxNCBsLTUxIC00OSAtNDAgODggYy01MSAxMTAgLTg5IDIyOCAtMTEwIDM0NyAtMjEgMTE0IC0yMyAzNTIgLTQgNDY0IGwxMyA4MiA3MyAwIGM2MCAwIDgyIC01IDEzNCAtMzF6IG0yNjA4IC0zMDMgYy0xNCAtMzUyIC0xMjIgLTYzNCAtMzQzIC04OTYgLTkzIC0xMTAgLTI1NyAtMjUxIC0yNzQgLTIzNCAtNSA1IC0yOCA3NyAtNTAgMTU5IC0yMyA4MyAtNTIgMTg0IC02NCAyMjUgLTEzIDQxIC0yNiA5NSAtMjkgMTIwIGwtNiA0NiA1OSAzMyBjMTk3IDEwOCA1NTIgNDU5IDY3NiA2NjkgMzEgNTMgMzcgMjcgMzEgLTEyMnoiLz48L2c+PC9zdmc+Cg==");
--color-black: #000;
--color-near-black: #333;
--color-dark-blue: #201f42;
--color-light-blue: #1574d2;
--color-grey: #757575;
--color-light-grey: #e0e0e0;
--color-facebook: #3e5a98;
--color-twitter: #1da1f2;
--color-rss: #ee802f;
--space-sm: 20px;
--space-md: 30px;
--space-lg: 60px;
--transition-md: 300ms;
--transition-sl: 600ms;
--heading-font-family: 'Raleway', sans-serif;
--body-font-family: 'Open Sans', sans-serif;
--windy-svg: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQxNXB4IiBoZWlnaHQ9IjQxNXB4IiB2aWV3Qm94PSIwIDAgNDE1IDQxNSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0MTUpIHNjYWxlKDAuMSwtMC4xKSIgZmlsbD0iI2NjYyIgc3Ryb2tlPSJub25lIj48cGF0aCBkPSJNMTc4MCA0MTM0IGMtNTAzIC03MyAtOTc0IC0zMzMgLTEyOTEgLTcxMyBsLTgwIC05NiAtNzMgMCBjLTQ2IDAgLTc5IC01IC04OSAtMTMgLTE0IC0xMiAtMTIgLTE5IDIzIC02NCAyMiAtMjcgNDAgLTU0IDQwIC01OSAwIC00IC0yNSAtNTIgLTU1IC0xMDYgLTExNiAtMjA5IC0xOTkgLTQ1MyAtMjM1IC02OTggLTI1IC0xNjQgLTI3IC00MzYgLTQgLTU5NyAxMjggLTkyMyA4NDkgLTE2NDQgMTc3MyAtMTc3MiAxNjAgLTIzIDQzMiAtMjEgNTk2IDQgOTExIDEzNiAxNjIyIDg1NCAxNzQ5IDE3NjggMjEgMTQ4IDIxIDQyNiAwIDU3NCAtMzggMjc0IC0xMzkgNTYzIC0yNzQgNzg0IC0yMiAzNSAtNDAgNzEgLTQwIDc5IDAgOCAtMTYgMzMgLTM3IDU2IGwtMzYgNDAgMzMgOTcgYzI5IDg1IDM0IDExMyAzOCAyMjMgNyAyMDkgLTMxIDI4OSAtMTYzIDMzOCAtMTM0IDUxIC0yNTIgLTQgLTI4NSAtMTMxIC02IC0yMSAtMTUgLTU2IC0yMCAtNzggbC0xMSAtNDAgLTc3IDU0IGMtMjU3IDE4MCAtNTgzIDMwNyAtOTAwIDM1MSAtMTM5IDE5IC00NDggMTggLTU4MiAtMXogbTQ5OCAtMTE1IGMyMzUgLTI1IDQ2MCAtOTEgNjY3IC0xOTQgMTc4IC04OSAyNjkgLTE1MiAyNzMgLTE4NyAyIC0xNiAxIC0yOCAtMiAtMjggLTMgMCAtMzEgMTggLTYzIDQxIC0yMjIgMTU2IC01MTggMjcyIC04MDMgMzE1IC0xNDEgMjEgLTQxMyAyMCAtNTUwIC0xIC0yMTEgLTMzIC0zOTkgLTkzIC01ODEgLTE4NiAtMjEzIC0xMDggLTM2MSAtMjE5IC01MzEgLTM5OCAtOTggLTEwNCAtMTI4IC0xMjUgLTE0MyAtMTAyIC03IDEzIDEwMyAxMzggMTk3IDIyNiA0MTUgMzg1IDk4MiA1NzUgMTUzNiA1MTR6IG0tNTM5IC02MDEgYy00IC0yNCAtMTMgLTY5IC0xOSAtMTAwIC0xMSAtNTYgLTEyIC01OCAtNDMgLTU4IC01NCAwIC0yMjcgLTQ4IC0yNzQgLTc2IC0xMDkgLTYzIC0xNTcgLTEzNSAtMTMzIC0xOTUgMjAgLTQ3IDEwMyAtMTE0IDE4MyAtMTQ4IDQwIC0xNyA3MSAtMzYgNzEgLTQzIC0xIC03IC05IC00MCAtMTggLTczIC0yNyAtMTAwIC0zMiAtMjE3IC0xMiAtMjcwIDEwIC0yNSAyNyAtNTIgMzkgLTYwIDI1IC0xNyAxMTQgLTIwIDE2OSAtNSAzNiAxMCAzOSA5IDEwNyAtNDYgNjUgLTUyIDcwIC01OCA2NSAtODcgLTEzIC04MSAtMTIgLTc4IC00OSAtNzEgLTI5IDUgLTM5IDIgLTY1IC0yNCAtMzIgLTMzIC0zNyAtNjAgLTE5IC0xMTEgNiAtMTggOSAtMzUgNiAtMzggLTQgLTMgLTI4IDAgLTU0IDYgLTExNSAyOSAtMjA5IDkyIC0yNjQgMTgwIC0xNiAyNCAtNDkgOTggLTc1IDE2MyAtODIgMjEwIC0xOTggNDEzIC0zMjIgNTYzIGwtNTAgNTkgMzAgMzggYzgyIDEwNCAyNzMgMjUwIDQzMSAzMjkgNzIgMzcgMjY2IDEwOCAyOTMgMTA5IDggMCA5IC0xMyAzIC00MnogbTgzMyAtNyBjMTk3IC03NiAzODEgLTE5NSA1MTYgLTMzNCBsNTMgLTU0IC0xNiAtNjIgYy04MSAtMzEzIC0yMzEgLTU4MSAtNDU0IC04MTQgLTcwIC03MiAtODkgLTg3IC0xMDcgLTgzIC0xMyA0IC0yNSAyIC0yOCAtMyAtNyAtMTEgLTgzIC01MSAtOTcgLTUxIC01IDAgLTI3IDEyIC00OSAyNiAtMjggMTkgLTQwIDM0IC00MCA1MSAwIDM4IC0yNiA3NyAtNjQgOTggLTIwIDExIC0zNiAyNCAtMzYgMzAgMCA1IC0zIDIwIC02IDMyIC01IDE4IDEgMjUgMzggNDQgMjMgMTIgNjAgMzUgODEgNTEgMzYgMjkgNDAgMzAgODIgMTkgNjEgLTE1IDEwMSAtMTQgMTQxIDUgNjcgMzIgOTIgMTA3IDk2IDI5MiBsMyAxMTMgNjkgMjQgYzMyMSAxMTIgMjM0IDI5OSAtMTk2IDQxOSAtNDggMTQgLTU3IDIwIC02MiA0NCAtNiAyNyAtMjUgMTYwIC0yNiAxNzUgMCAxMyAyNCA4IDEwMiAtMjJ6IG0tMjIwNyAtNDkyIGMtMTkxIC0zNzggLTI0NiAtODYzIC0xNDYgLTEyODAgODkgLTM3NCAzMDkgLTc0MCA1OTQgLTk5MCA3NjIgLTY2OCAxODk1IC02MzMgMjYwOCA4MCAyODAgMjgwIDQ2MiA2MjcgNTM0IDEwMTggMjMgMTE5IDMxIDQyNSAxNiA1NTAgLTI0IDE5NSAtOTIgNDM2IC0xNjAgNTcyIC0zMCA1OCAtNDEgMTI0IC0yMiAxMzUgMTIgOCA5OCAtMTgxIDE0MSAtMzE0IDIwMyAtNjE4IDkyIC0xMjgyIC0zMDIgLTE4MDMgLTgwIC0xMDYgLTI2MCAtMjg2IC0zNjcgLTM2NiAtNzA2IC01MzQgLTE2NjcgLTUzMyAtMjM3NCAxIC0xMDYgODAgLTI4NiAyNjAgLTM2NiAzNjcgLTE4OSAyNDkgLTMxNiA1MzkgLTM3MyA4NTEgLTMxIDE2NiAtMzEgNTA0IDAgNjcwIDM3IDIwNCAxMjUgNDU3IDIwOCA1OTcgbDI4IDQ4IDkgLTMxIGM4IC0yNiAzIC00MiAtMjggLTEwNXogbTUyNCAtNTcwIGM5MyAtNDYgMTMwIC0xMTcgMTMxIC0yNDYgMCAtNzAgMTggLTE0OCA0NSAtMjAzIDIyIC00MyAxMDMgLTEyOCAxNTMgLTE2MCAyNCAtMTUgMjMgLTE2IC03MiAtNzggLTEwNCAtNjkgLTE5MyAtMTM5IC0yNzIgLTIxNCBsLTUxIC00OSAtNDAgODggYy01MSAxMTAgLTg5IDIyOCAtMTEwIDM0NyAtMjEgMTE0IC0yMyAzNTIgLTQgNDY0IGwxMyA4MiA3MyAwIGM2MCAwIDgyIC01IDEzNCAtMzF6IG0yNjA4IC0zMDMgYy0xNCAtMzUyIC0xMjIgLTYzNCAtMzQzIC04OTYgLTkzIC0xMTAgLTI1NyAtMjUxIC0yNzQgLTIzNCAtNSA1IC0yOCA3NyAtNTAgMTU5IC0yMyA4MyAtNTIgMTg0IC02NCAyMjUgLTEzIDQxIC0yNiA5NSAtMjkgMTIwIGwtNiA0NiA1OSAzMyBjMTk3IDEwOCA1NTIgNDU5IDY3NiA2NjkgMzEgNTMgMzcgMjcgMzEgLTEyMnoiLz48L2c+PC9zdmc+Cg==");
}
@custom-media --viewportMd (min-width: 640px);
@custom-media --viewportLg (min-width: 960px);
@custom-media --viewport-md (min-width: 640px);
@custom-media --viewport-lg (min-width: 960px);

33
css/logo.css
View File

@@ -1,10 +1,8 @@
/** @define Logo */
.Logo {
.logo {
width: 100%;
}
.Logo-link {
.logo__link {
display: block;
margin: 0 auto;
max-width: 320px;
@@ -12,8 +10,8 @@
position: relative;
}
.Logo-link::before {
background-image: var(--windySVG);
.logo__link:before {
background-image: var(--windy-svg);
background-position: center;
background-repeat: no-repeat;
background-size: 92%;
@@ -23,7 +21,7 @@
width: 100%;
}
.Logo-image {
.logo__image {
bottom: 0;
display: block;
filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
@@ -33,24 +31,11 @@
right: 0;
top: 0;
transition:
filter var(--transitionMd) ease-in,
opacity var(--transitionMd) ease-in;
filter var(--transition-md) ease-in,
opacity var(--transition-md) ease-in;
width: 100%;
}
.Logo-link:focus .Logo-image {
filter: drop-shadow(6px 4px 4px var(--colorLightBlue));
.logo__link:focus .logo__image {
filter: drop-shadow(6px 4px 4px var(--color-light-blue));
}
/*
@media (--viewportLg) {
.Logo {
grid-column: span 2;
justify-content: left;
}
.Logo-image {
max-width: 224px;
}
}
*/

41
css/menu.css
View File

@@ -1,7 +1,5 @@
/** @define Menu */
.Menu {
background-color: var(--colorDarkBlue);
.menu {
background-color: var(--color-dark-blue);
border-radius: 999px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
cursor: pointer;
@@ -12,15 +10,15 @@
top: 5px;
transform: translateX(-100px);
transition:
filter var(--transitionMd) ease-out,
opacity var(--transitionMd) ease-out,
transform var(--transitionMd) ease-out;
filter var(--transition-md) ease-out,
opacity var(--transition-md) ease-out,
transform var(--transition-md) ease-out;
width: 64px;
will-change: opacity, transition;
z-index: 5;
}
.Menu-line {
.menu__line {
background-color: #fff;
border-radius: 2px;
height: 4px;
@@ -30,46 +28,41 @@
transform: translateY(-50%);
}
.Menu-line:nth-of-type(1) {
.menu__line:nth-of-type(1) {
top: 33%;
}
.Menu-line:nth-of-type(2) {
.menu__line:nth-of-type(2) {
top: 50%;
}
.Menu-line:nth-of-type(3) {
.menu__line:nth-of-type(3) {
top: 66%;
}
.Menu-text {
.menu__text {
left: -10000px;
position: absolute;
top: -10000px;
}
.Menu.is-visible {
.menu.is-visible {
transform: translateX(0);
}
.Menu.is-minimized {
.menu.is-minimized {
opacity: 0.5;
transform: translateX(-20px) translateY(-20px);
}
/**
* Focus state
* Hover and focus states
*/
.Menu:focus {
.menu:focus,
.menu:hover {
outline: none;
}
/**
* Hover state
*/
.Menu:hover {
opacity: 1;
filter: brightness(125%);
filter: saturate(1.5) contrast(1.5);
transform: scale(1.1);
}

88
css/metadata.css
View File

@@ -1,48 +1,92 @@
/** @define Metadata */
.Metadata {
border-bottom: 1px solid var(--colorLightGrey);
.metadata {
border-bottom: 1px solid var(--color-light-grey);
font-size: 14px;
margin-bottom: var(--spaceMd);
margin-bottom: var(--space-md);
}
@media (--viewportLg) {
.Metadata {
@media (--viewport-lg) {
.metadata {
border-bottom: none;
}
.Metadata.is-locked {
.metadata.is-locked {
position: fixed;
}
}
.Metadata-date {
color: var(--colorGrey);
.metadata__date {
color: var(--color-grey);
display: none;
margin-bottom: var(--spaceSm);
margin-bottom: var(--space-sm);
}
@media (--viewportLg) {
.Metadata-date {
@media (--viewport-lg) {
.metadata__date {
display: block;
}
}
.Metadata-comments,
.Metadata-categories,
.Metadata-share {
margin-bottom: var(--spaceSm);
.metadata__comments,
.metadata__categories,
.metadata__share {
margin-bottom: var(--space-sm);
}
.Metadata-commentsText,
.Metadata-categoriesText,
.Metadata-dateText {
.metadata__comments-text,
.metadata__categories-text,
.metadata__date-text {
line-height: 2.3;
margin-left: 10px;
text-transform: capitalize;
vertical-align: top;
}
.Metadata-shareLink {
margin-right: var(--spaceSm);
.metadata__share-link {
display: inline-block;
margin-right: var(--space-sm);
transition:
filter var(--transition-md) ease-out,
transform var(--transition-md) ease-out;
}
.metadata__share-link:focus,
.metadata__share-link:hover {
filter: saturate(1.5) contrast(1.5);
transform: scale(1.2);
}
/**
* Link styles
*/
.metadata__comments-text,
.metadata__categories-link {
position: relative;
}
.metadata__comments-text:after,
.metadata__categories-link: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;
}
.metadata__comments-link:focus,
.metadata__comments-link:hover,
.metadata__categories-link:focus,
.metadata__categories-link:hover {
color: var(--color-light-blue);
}
.metadata__comments-link:focus .metadata__comments-text:after,
.metadata__comments-link:hover .metadata__comments-text:after,
.metadata__categories-link:focus:after,
.metadata__categories-link:hover:after {
opacity: 1;
}

114
css/nav.css
View File

@@ -1,10 +1,8 @@
/** @define Nav */
:root {
--Nav-transitionDuration: var(--transitionMd);
--nav-transition-duration: var(--transition-md);
}
.Nav::after {
.nav:after {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
content: '';
@@ -13,44 +11,49 @@
position: fixed;
right: 0;
transition:
opacity var(--Nav-transitionDuration) ease-out,
visibility var(--Nav-transitionDuration) ease-out;
opacity var(--nav-transition-duration) ease-out,
visibility var(--nav-transition-duration) ease-out;
top: 0;
visibility: hidden;
z-index: 5;
}
.Nav-content {
background-color: var(--colorDarkBlue);
.nav.is-open:after {
visibility: visible;
opacity: 1;
}
.nav__content {
background-color: var(--color-dark-blue);
bottom: 0;
box-shadow: 6px 0 4px rgba(0, 0, 0, 0.25);
color: #fff;
display: flex;
flex-direction: column;
left: 0;
padding: var(--spaceSm);
padding: var(--space-sm);
position: fixed;
top: 0;
transform: translateX(-100%);
transition: transform var(--Nav-transitionDuration) ease-out;
transition: transform var(--nav-transition-duration) ease-out;
z-index: 10;
}
.Nav-title {
font-family: var(--headingFontFamily);
.nav__title {
font-family: var(--heading-font-family);
font-size: 2.5rem;
margin-right: 62px;
}
.Nav-titleLink,
.Nav-titleLink:active,
.Nav-titleLink:focus,
.Nav-titleLink:hover,
.Nav-titleLink:visited {
.nav__title-link,
.nav__title-link:active,
.nav__title-link:focus,
.nav__title-link:hover,
.nav__title-link:visited {
color: #fff;
}
.Nav-close {
.nav__close {
background-color: transparent;
border: none;
cursor: pointer;
@@ -60,101 +63,96 @@
position: absolute;
right: 15px;
top: 15px;
transition: filter var(--Nav-transitionDuration) ease-out;
transition: filter var(--nav-transition-duration) ease-out;
width: 32px;
}
.Nav-close:active,
.Nav-close:focus,
.Nav-close:hover {
.nav__close:active,
.nav__close:focus,
.nav__close:hover {
filter: drop-shadow(0 0 2px #fff);
outline: 0;
}
.Nav-closeBar {
.nav__close-bar {
background-color: #fff;
border-radius: 2px;
height: 4px;
left: 4px;
position: absolute;
transition: transform var(--Nav-transitionDuration) ease-out var(--Nav-transitionDuration);
transition: transform var(--nav-transition-duration) ease-out var(--nav-transitionDuration);
top: 14px;
width: 24px;
}
.Nav-closeText {
.nav__close-text {
left: -10000px;
position: absolute;
top: -10000px;
}
/**
* Nav List
* nav List
*/
.Nav-list {
.nav__list {
flex-grow: 1;
font-family: var(--headingFontFamily);
font-family: var(--heading-font-family);
font-size: 1.5rem;
margin: var(--spaceMd) 0 0 var(--spaceMd);
margin: var(--spaceMd) 0 0 var(--space-md);
}
.Nav--subList {
.nav__list--sub-list {
margin-top: 0;
}
.Nav.is-open::after {
visibility: visible;
opacity: 1;
}
.Nav-link,
.Nav-link:active,
.Nav-link:focus,
.Nav-link:hover,
.Nav-link:visited {
.nav__link,
.nav__link:active,
.nav__link:focus,
.nav__link:hover,
.nav__link:visited {
color: #fff;
display: inline-block;
margin-bottom: var(--spaceSm);
transition: text-shadow var(--Nav-transitionDuration) ease-out;
margin-bottom: var(--space-sm);
transition: text-shadow var(--nav-transition-duration) ease-out;
}
.Nav-link:focus,
.Nav-link:hover {
.nav__link:focus,
.nav__link:hover {
text-shadow: 0 0 2px #fff;
}
/**
* Nav Social
* nav Social
*/
.Nav-social {
.nav__social {
margin-bottom: var(--spaceSm);
}
.Nav-socialLink,
.Nav-socialLink:active,
.Nav-socialLink:focus,
.Nav-socialLink:hover,
.Nav-socialLink:visited {
.nav__social-link,
.nav__social-link:active,
.nav__social-link:focus,
.nav__social-link:hover,
.nav__social-link:visited {
display: inline-block;
color: #fff;
transition: filter var(--Nav-transitionDuration) ease-out;
transition: filter var(--nav-transition-duration) ease-out;
}
.Nav-socialLink:focus,
.Nav-socialLink:hover {
.nav__social-link:focus,
.nav__social-link:hover {
filter: drop-shadow(0 0 2px #fff);
}
.Nav.is-open .Nav-content {
.nav.is-open .nav__content {
transform: translateX(0);
}
.Nav.is-open .Nav-closeBar:nth-of-type(1) {
.nav.is-open .nav__close-bar:nth-of-type(1) {
transform: rotate(45deg);
}
.Nav.is-open .Nav-closeBar:nth-of-type(2) {
.nav.is-open .nav__close-bar:nth-of-type(2) {
transform: rotate(-45deg);
}

2
css/normalize.css vendored Normal file
View File

@@ -0,0 +1,2 @@
/* stylelint-disable at-rule-no-unknown */
@import-normalize;

35
css/grid.css → css/page.css
View File

@@ -1,60 +1,57 @@
/** @define Grid */
.Grid {
.page {
display: grid;
grid-auto-flow: dense;
grid-gap: var(--spaceSm);
grid-gap: var(--space-sm);
grid-template-columns: 1fr;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spaceSm);
margin: 0 var(--space-sm);
padding: 0;
}
.Grid-logo {
.page__logo {
display: flex;
font-size: 0;
justify-content: center;
}
.Grid-banner {
.page__banner {
display: none;
position: relative;
}
@media (--viewportLg) {
.Grid {
@media (--viewport-lg) {
.page {
grid-template-columns: 224px 1fr;
grid-template-rows: 60px 134px;
grid-gap: var(--spaceMd);
padding: 0 var(--spaceMd);
grid-gap: var(--space-md);
padding: 0 var(--space-md);
}
.Grid-logo {
.page__logo {
grid-row: span 2;
}
.Grid-banner {
.page__banner {
display: block;
grid-column-start: 2;
grid-row-start: 1;
}
.Grid-article {
.page__article {
grid-column-start: 2;
grid-row: span 2;
}
.Grid-metadata {
.page__metadata {
grid-column-start: 1;
grid-row: span 2;
}
.Grid-metadata.is-first {
.page__metadata.is-first {
grid-row: span 1;
}
.Grid-footer {
.page__footer {
grid-column: 1 / -1;
}
}

18
css/search.css
View File

@@ -1,28 +1,26 @@
/** @define Search */
.Search {
.search {
display: flex;
}
.Search-label {
.search__label {
left: -10000px;
position: absolute;
top: -10000px;
}
.Search-input {
.search__input {
border: none;
border-radius: 0;
color: var(--colorNearBlack);
font-family: var(--headingFontFamily);
color: var(--color-near-black);
font-family: var(--heading-font-family);
max-width: 200px;
padding: 10px;
}
.Search-submit {
background-color: var(--colorLightBlue);
.search__submit {
background-color: var(--color-light-blue);
border: none;
color: #fff;
font-family: var(--headingFontFamily);
font-family: var(--heading-font-family);
min-width: 100px;
}

20
css/social.css
View File

@@ -1,11 +1,19 @@
/** @define Social */
.Social {
.social {
position: absolute;
right: var(--spaceSm);
top: var(--spaceSm);
right: var(--space-sm);
top: var(--space-sm);
}
.Social-link {
.social__link {
display: inline-block;
transition:
filter var(--transition-md) ease-out,
transform var(--transition-md) ease-out;
}
.social__link:focus,
.social__link:hover {
filter: saturate(1.5) contrast(1.5);
transform: scale(1.2);
}

12
js/menu.spec.js
View File

@@ -3,11 +3,11 @@ import Menu from './menu';
jest.useFakeTimers();
const menuHtml = `
<button class="Menu">
<span class="Menu-line"></span>
<span class="Menu-line"></span>
<span class="Menu-line"></span>
<span class="Menu-text">Open menu</span>
<button class="menu">
<span class="menu__line"></span>
<span class="menu__line"></span>
<span class="menu__line"></span>
<span class="menu__text">Open menu</span>
</button>`;
describe('Menu button', () => {
@@ -16,7 +16,7 @@ describe('Menu button', () => {
beforeEach(() => {
document.body.innerHTML = menuHtml;
menu = new Menu({
container: document.querySelector('.Menu'),
container: document.querySelector('.menu'),
});
});

8
js/navigation.js
View File

@@ -28,14 +28,14 @@ export default class Navigation {
this.menu.container.addEventListener('click', () => {
this.openNav();
});
this.container.querySelector('.Nav-close').addEventListener('click', () => {
this.container.querySelector('.nav__close').addEventListener('click', () => {
this.closeNav();
});
}
attachKeyEvents() {
const first = this.container.querySelector('.Nav-link');
const last = this.container.querySelector('.Nav-close');
const first = this.container.querySelector('.nav__link');
const last = this.container.querySelector('.nav__close');
this.container.addEventListener('keydown', (e) => {
if (e.keyCode === 27) {
this.closeNav();
@@ -61,7 +61,7 @@ export default class Navigation {
this.menu.hideMenu();
this.container.classList.add(STATES.open);
this.container.setAttribute('aria-hidden', false);
this.container.querySelector('.Nav-titleLink').focus();
this.container.querySelector('.nav__title-link').focus();
}
closeNav() {

46
js/navigation.spec.js
View File

@@ -1,22 +1,22 @@
import Navigation from './navigation';
const navHtml = `<a href="/test">Test link</a>
<nav class="Nav">
<button class="Menu">Menu</button>
<div class="Nav-content">
<h2 class="Nav-title">
<a class="Nav-titleLink" href="/">WindyCOYS</a>
<nav class="nav">
<button class="menu">Menu</button>
<div class="nav__content">
<h2 class="nav__title">
<a class="nav__title-link" href="/">WindyCOYS</a>
</h2>
<ul class="Nav-list">
<li class="Nav-listItem">
<a class="Nav-link" href="/">Home</a>
<ul class="nav__list">
<li class="nav__list-item">
<a class="nav__link" href="/">Home</a>
</li>
<li class="Nav-listItem">
<a class="Nav-link" href="/about">About</a>
<li class="nav__list-item">
<a class="nav__link" href="/about">About</a>
</li>
</ul>
</div>
<button class="Nav-close">close</button>
<button class="nav__close">close</button>
</nav>
<a href="/another-test">Another test link</a>`;
@@ -26,12 +26,12 @@ beforeEach(() => {
document.body.innerHTML = navHtml;
// Mock Menu
const menu = {
container: document.querySelector('.Menu'),
container: document.querySelector('.menu'),
showMenu: jest.fn(),
hideMenu: jest.fn(),
};
nav = new Navigation({
container: document.querySelector('.Nav'),
container: document.querySelector('.nav'),
menu,
});
});
@@ -49,7 +49,7 @@ describe('Navigation', () => {
it('Should fail to initialise if the menu is not provided', () => {
const noMenu = new Navigation({
container: document.querySelector('.Nav'),
container: document.querySelector('.nav'),
});
noMenu.init();
expect(noMenu.state).toBeUndefined();
@@ -60,7 +60,7 @@ describe('Navigation', () => {
expect(nav.container.classList.contains('is-open')).toBe(false);
});
it('Should close when the .Nav element is clicked', () => {
it('Should close when the .nav element is clicked', () => {
nav.init();
nav.openNav();
const event = new Event('click');
@@ -77,11 +77,11 @@ describe('Navigation', () => {
expect(nav.state).toBe('hidden');
});
it('Should not close when the .Nav-content element is clicked', () => {
it('Should not close when the .nav__content element is clicked', () => {
nav.init();
nav.openNav();
const event = new Event('click');
nav.container.querySelector('.Nav-content').dispatchEvent(event);
nav.container.querySelector('.nav__content').dispatchEvent(event);
expect(nav.state).toBe('visible');
});
@@ -118,7 +118,7 @@ describe('Navigation close button', () => {
nav.init();
nav.openNav();
const event = new Event('click');
nav.container.querySelector('.Nav-close').dispatchEvent(event);
nav.container.querySelector('.nav__close').dispatchEvent(event);
expect(nav.state).toBe('hidden');
});
});
@@ -129,16 +129,16 @@ describe('Navigation focus behaviour', () => {
let menu;
beforeEach(() => {
menu = nav.container.querySelector('.Menu');
first = nav.container.querySelector('.Nav-link');
last = nav.container.querySelector('.Nav-close');
menu = nav.container.querySelector('.menu');
first = nav.container.querySelector('.nav__link');
last = nav.container.querySelector('.nav__close');
menu.focus();
nav.init();
nav.openNav();
});
it('Should apply focus to .Nav-titleLink when opened', () => {
const link = nav.container.querySelector('.Nav-titleLink');
it('Should apply focus to .nav__title-link when opened', () => {
const link = nav.container.querySelector('.nav__title-link');
expect(document.activeElement).toBe(link);
});

4
js/windy.js
View File

@@ -13,10 +13,10 @@ export default function init() {
windy.images.push(img);
});
windy.menu = new Menu({
container: document.querySelector('.Menu'),
container: document.querySelector('.menu'),
});
windy.navigation = new Navigation({
container: document.querySelector('.Nav'),
container: document.querySelector('.nav'),
menu: windy.menu,
});
windy.menu.init();

5376
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

43
package.json
View File

@@ -10,7 +10,7 @@
},
"scripts": {
"build": "npm run css:compile && npm run js:compile",
"css": "run-p css:*",
"css": "run-p -c css:*",
"css:compile": "postcss -o theme/style.css css/index.css",
"css:lint": "stylelint --config .stylelintrc \"css/**/*.css\"",
"jest": "jest",
@@ -27,49 +27,42 @@
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^22.4.3",
"browser-sync": "^2.24.1",
"babel-jest": "^22.4.4",
"browser-sync": "^2.26.3",
"eslint": "^4.19.1",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-import": "^2.11.0",
"jest": "^22.4.3",
"nodemon": "^1.17.3",
"npm-run-all": "^4.1.2",
"eslint-plugin-import": "^2.14.0",
"jest": "^22.4.4",
"nodemon": "^1.18.7",
"npm-run-all": "^4.1.5",
"pre-commit": "^1.2.2",
"stylelint": "^8.4.0",
"stylelint-config-standard": "^18.0.0",
"stylelint-selector-bem-pattern": "^2.0.0"
"stylelint-config-standard": "^18.0.0"
},
"dependencies": {
"@babel/cli": "^7.0.0-beta.46",
"@babel/core": "^7.0.0-beta.46",
"@babel/preset-env": "^7.0.0-beta.46",
"autoprefixer": "^7.2.5",
"@babel/cli": "^7.2.0",
"@babel/core": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"cssnano": "^3.10.0",
"normalize.css": "^8.0.0",
"postcss-banner": "^3.0.0",
"postcss-cli": "^4.1.1",
"postcss-custom-media": "^6.0.0",
"postcss-custom-properties": "^6.2.0",
"postcss-import": "^11.0.0",
"postcss-normalize": "^7.0.1",
"postcss-preset-env": "^6.4.0",
"rollup": "^0.58.2",
"rollup-plugin-babel": "^4.0.0-beta.4",
"rollup-plugin-babel": "^4.0.3",
"rollup-plugin-uglify": "^3.0.0"
},
"pre-commit": [
"test"
],
"browserslist": [
"Chrome >= 58",
"Firefox >= 52",
"Edge >= 12",
"Explorer >= 11",
"iOS >= 10",
"Safari >= 10",
"Android >= 62",
"Opera >= 44"
"last 1 version",
"not dead",
"> 2% in GB"
],
"jest": {
"testURL": "http://localhost:3000",
"collectCoverage": true,
"collectCoverageFrom": [
"js/**/*.js"

12
postcss.config.js
View File

@@ -18,9 +18,15 @@ module.exports = ctx => ({
map: ctx.env !== 'production',
plugins: {
'postcss-import': {},
'postcss-custom-media': {},
'postcss-custom-properties': {},
autoprefixer: {},
'postcss-normalize': {},
'postcss-preset-env': {
stage: 0,
features: {
'custom-properties': {
preserve: false,
},
},
},
cssnano: ctx.env === 'production' ? {} : false,
'postcss-banner': {
banner,

8
theme/functions.php
View File

@@ -5,8 +5,8 @@ class Windycoys_Walker extends Walker_Nav_Menu {
$title = $item->post_title;
$uri = get_site_url() . '/' . $item->post_name;
$output .= '<li class="Nav-listItem" role="none">';
$output .= '<a class="Nav-link" href="' . $uri .'" role="menuitem">';
$output .= '<li class="nav__item" role="none">';
$output .= '<a class="nav__link" href="' . $uri .'" role="menuitem">';
$output .= $title . '</a></li>';
}
}
@@ -14,7 +14,7 @@ class Windycoys_Walker extends Walker_Nav_Menu {
function windycoys_nav() {
wp_nav_menu(array(
'container' => 'ul',
'menu_class' => 'Nav-list Nav--subList',
'menu_class' => 'nav__list nav__list--sub-list',
'walker' => new Windycoys_Walker()
));
}
@@ -30,7 +30,7 @@ function windycoys_the_tags() {
}
if ($tags) {
foreach($tags as $key=>$tag) {
echo '<a class="Metadata-categoriesLink" href="' .
echo '<a class="metadata__categories-link" href="' .
home_url() . '/tags/' . $tag->name . '" rel="tag">' .
$tag->name . '</a>';
if ($key < count($tags) - 1) {

6
theme/header.php
View File

@@ -2,8 +2,8 @@
<html <?php language_attributes(); ?>>
<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">
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' by'; } ?> <?php bloginfo('name'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#4b88b6">
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php wp_head(); ?>
@@ -11,4 +11,6 @@
<link href="//fonts.googleapis.com/css?family=Open+Sans|Raleway:700" rel="stylesheet">
</head>
<body>
<header>
<?php get_template_part('icons') ?>
</header>

27
theme/index.php
View File

@@ -1,37 +1,40 @@
<?php get_header() ?>
<main class="Grid">
<section class="Grid-logo">
<main class="page">
<section class="page__logo">
<?php get_template_part('partials/logo') ?>
</section>
<?php while ( have_posts() ) : the_post(); $index++; ?>
<section class="Grid-article">
<article class="Article">
<div class="Article-date">
<svg class="Icon">
<section class="page__article">
<article class="article">
<div class="article__date">
<svg class="icon">
<use href="#icon-calendar"></use>
</svg>
<span class="Article-dateText">
<span class="article__date-text">
<?php the_time(get_option('date_format')) ?>
</span>
</div>
<h1 class="Article-title">
<h1 class="article__title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h1>
<div class="Article-content">
<div class="article__content">
<?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
</div>
</article>
</section>
<section class="Grid-metadata<?php echo ($index === 1 ? ' is-first' : '') ?>">
<section class="page__metadata<?php echo ($index === 1 ? ' is-first' : '') ?>">
<?php get_template_part('partials/metadata') ?>
<div class="page__advert">
<?php get_template_part('partials/ad_wide_skyscraper') ?>
</div>
</section>
<?php endwhile; ?>
<section class="Grid-banner">
<section class="page__banner">
<?php get_template_part('partials/banner') ?>
</section>
<section class="Grid-footer">
<section class="page__footer">
<?php get_template_part('partials/footer') ?>
</section>
</main>

26
theme/page.php
View File

@@ -1,36 +1,36 @@
<?php get_header(); ?>
<main class="Grid">
<section class="Grid-logo">
<main class="page">
<section class="page__logo">
<?php get_template_part('partials/logo') ?>
</section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<section class="Grid-article">
<article class="Article">
<h1 class="Article-title">
<section class="page__article">
<article class="article">
<h1 class="article__title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h1>
<div class="Article-content">
<div class="article__content">
<?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
</div>
</article>
</section>
<?php endwhile; ?>
<?php else: ?>
<section class="Grid-article">
<article class="Article">
<h1 class="Article-title">Sorry, there is no article to display</h1>
<div class="Article-content">
<a class="Link" href="<?php get_site_url() ?>/">Go back home</a>
<section class="page__article">
<article class="article">
<h1 class="article__title">Sorry, there is no article to display</h1>
<div class="article__content">
<a class="link" href="<?php get_site_url() ?>/">Go back home</a>
</div>
</article>
</section>
<?php endif; ?>
<section class="Grid-banner">
<section class="page__banner">
<?php get_template_part('partials/banner') ?>
</section>
<section class="Grid-footer">
<section class="page__footer">
<?php get_template_part('partials/footer') ?>
</section>
</main>

1
theme/partials/ad_wide_skyscraper.php Normal file
View File

@@ -0,0 +1 @@
<img src="http://via.placeholder.com/160x600" alt="advert">

15
theme/partials/banner.php
View File

@@ -1,18 +1,17 @@
<div class="Social">
<a class="Social-link" href="https://www.facebook.com/WindyCOYS/">
<svg class="Icon Icon--facebook">
<div class="social">
<a class="social__link" href="https://www.facebook.com/WindyCOYS/">
<svg class="icon icon--facebook">
<use href="#icon-facebook"></use>
</svg>
</a>
<a class="Social-link" href="https://twitter.com/windycoys/">
<svg class="Icon Icon--twitter">
<a class="social__link" href="https://twitter.com/windycoys/">
<svg class="icon icon--twitter">
<use href="#icon-twitter"></use>
</svg>
</a>
<a class="Social-link" href="/feed">
<svg class="Icon Icon--rss">
<a class="social__link" href="/feed">
<svg class="icon icon--rss">
<use href="#icon-rss"></use>
</svg>
</a>
</div>

4
theme/partials/footer.php
View File

@@ -1,3 +1,3 @@
<footer class="Footer">
<p class="Footer-text">&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
<footer class="footer">
<p class="footer__text">&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>

6
theme/partials/logo.php
View File

@@ -1,6 +1,6 @@
<div 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">
<div 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>
</div>

33
theme/partials/metadata.php
View File

@@ -1,41 +1,40 @@
<section class="Metadata">
<div class="Metadata-date">
<svg class="Icon">
<section class="metadata">
<div class="metadata__date">
<svg class="icon">
<use href="#icon-calendar"></use>
</svg>
<span class="Metadata-dateText">
<span class="metadata__date-text">
<?php the_time(get_option('date_format')) ?>
</span>
</div>
<div class="Metadata-comments">
<a class="Metadata-commentsLink" href="<?php the_permalink() ?>">
<svg class="Icon">
<div class="metadata__comments">
<a class="metadata__comments-link" href="<?php the_permalink() ?>">
<svg class="icon">
<use href="#icon-comments"></use>
</svg>
<span class="Metadata-commentsText">
<span class="metadata__comments-text">
<?php comments_number(); ?>
</span>
</a>
</div>
<div class="Metadata-categories">
<svg class="Icon">
<div class="metadata__categories">
<svg class="icon">
<use href="#icon-hash"></use>
</svg>
<span class="Metadata-categoriesText">
<span class="metadata__categories-text">
<?php windycoys_the_tags() ?>
</span>
</div>
<div class="Metadata-share">
<a class="Metadata-shareLink" href="#">
<svg class="Icon Icon--facebook">
<div class="metadata__share">
<a class="metadata__share-link" href="#" aria-label="Facebook">
<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">
<a class="metadata__share-link" href="<?php windycoys_share_twitter_url() ?>" aria-label="Twitter">
<svg class="icon icon--twitter">
<use href="#icon-twitter"></use>
</svg>
</a>
</div>
</section>

44
theme/partials/navigation.php
View File

@@ -1,41 +1,41 @@
<nav class="Nav" aria-label="Main Navigation">
<button class="Menu">
<span class="Menu-line"></span>
<span class="Menu-line"></span>
<span class="Menu-line"></span>
<span class="Menu-text">Open menu</span>
<nav class="nav" aria-label="Main Navigation">
<button class="menu">
<span class="menu__line"></span>
<span class="menu__line"></span>
<span class="menu__line"></span>
<span class="menu__text">Open menu</span>
</button>
<div class="Nav-content">
<h2 class="Nav-title">
<a class="Nav-titleLink" href="<?php get_site_url() ?>/" aria-label="Navigation title" tabindex="-1">
<div class="nav__content">
<h2 class="nav__title">
<a class="nav__title-link" href="<?php get_site_url() ?>/" aria-label="Navigation title" tabindex="-1">
<?php bloginfo('name') ?>
</a>
</h2>
<ul class="Nav-list" role="menubar">
<li class="Nav-listItem" role="none">
<a class="Nav-link" href="<?php get_site_url() ?>/" role="menuitem">Home</a>
<ul class="nav__list" role="menubar">
<li class="nav__list-item" role="none">
<a class="nav__link" href="<?php get_site_url() ?>/" role="menuitem">Home</a>
<?php windycoys_nav() ?>
</li>
</ul>
<div class="Nav-social">
<a class="Nav-socialLink" href="https://www.facebook.com/WindyCOYS/">
<svg class="Icon Icon--large">
<div class="nav__social">
<a class="nav__social-link" href="https://www.facebook.com/WindyCOYS/">
<svg class="icon icon--large">
<use href="#icon-facebook"></use>
</svg>
</a>
<a class="Nav-socialLink" href="https://twitter.com/windycoys/">
<svg class="Icon Icon--large">
<a class="nav__social-link" href="https://twitter.com/windycoys/">
<svg class="icon icon--large">
<use href="#icon-twitter"></use>
</svg>
</a>
</div>
<div class="Nav-search">
<div class="nav__search">
<?php get_search_form() ?>
</div>
<button class="Nav-close">
<span class="Nav-closeBar"></span>
<span class="Nav-closeBar"></span>
<span class="Nav-closeText">Close menu</span>
<button class="nav__close">
<span class="nav__close-bar"></span>
<span class="nav__close-bar"></span>
<span class="nav__close-text">Close menu</span>
</button>
</div>
</nav>

8
theme/searchform.php
View File

@@ -1,9 +1,9 @@
<form id="searchform" role="search" method="get" action="<?php get_site_url()?>">
<div class="Search">
<label class="Search-label" for="searchinput">
<div class="search">
<label class="search__label" for="searchinput">
Search
</label>
<input id="searchinput" class="Search-input" name="s" type="text" placeholder="Search">
<input id="searchsubmit" class="Search-submit" value="Search" type="submit">
<input id="searchinput" class="search__input" name="s" type="text" placeholder="Search">
<input id="searchsubmit" class="search__submit" value="Search" type="submit">
</div>
</form>

34
theme/single.php
View File

@@ -1,47 +1,47 @@
<?php get_header(); ?>
<main class="Grid">
<section class="Grid-logo">
<main class="page">
<section class="page__logo">
<?php get_template_part('partials/logo') ?>
</section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<section class="Grid-article">
<article class="Article">
<div class="Article-date">
<svg class="Icon">
<section class="page__article">
<article class="article">
<div class="article__date">
<svg class="icon">
<use href="#icon-calendar"></use>
</svg>
<span class="Article-dateText">
<span class="article__date-text">
<?php the_time(get_option('date_format')) ?>
</span>
</div>
<h1 class="Article-title">
<h1 class="article__title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h1>
<div class="Article-content">
<div class="article__content">
<?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
</div>
</article>
</section>
<section class="Grid-metadata is-first">
<section class="page__metadata is-first">
<?php get_template_part('partials/metadata') ?>
</section>
<?php endwhile; ?>
<?php else: ?>
<section class="Grid-article">
<article class="Article">
<h1 class="Article-title">Sorry, there is no article to display</h1>
<div class="Article-content">
<a class="Link" href="<?php get_site_url() ?>/">Go back home</a>
<section class="page__article">
<article class="article">
<h1 class="article__title">Sorry, there is no article to display</h1>
<div class="article__content">
<a class="link" href="<?php get_site_url() ?>/">Go back home</a>
</div>
</article>
</section>
<?php endif; ?>
<section class="Grid-banner">
<section class="page__banner">
<?php get_template_part('partials/banner') ?>
</section>
<section class="Grid-footer">
<section class="page__footer">
<?php get_template_part('partials/footer') ?>
</section>
</main>