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" "extends": [ "stylelint-config-standard" ],
],
"plugins": [
"stylelint-selector-bem-pattern"
],
"rules": { "rules": {
"plugin/selector-bem-pattern": { "selector-pseudo-element-colon-notation": "single"
"preset": "suit"
}
} }
} }

133
css/article.css
View File

@@ -1,51 +1,49 @@
/** @define Article; weak */ @media (--viewport-lg) {
.article {
@media (--viewportLg) { border-bottom: 1px solid var(--color-light-grey);
.Article {
border-bottom: 1px solid var(--colorLightGrey);
} }
} }
.Article-title { .article__title {
font-family: var(--headingFontFamily); font-family: var(--heading-font-family);
color: var(--colorDarkBlue); color: var(--color-dark-blue);
margin-bottom: var(--spaceSm); margin-bottom: var(--space-sm);
} }
.Article-title a { .article__title a {
color: inherit; color: inherit;
} }
@media (--viewportLg) { @media (--viewport-lg) {
.Article-title { .article__title {
margin-bottom: var(--spaceMd); margin-bottom: var(--space-md);
} }
} }
.Article-date { .article__date {
color: var(--colorGrey); color: var(--color-grey);
margin-bottom: var(--spaceSm); margin-bottom: var(--space-sm);
} }
@media (--viewportLg) { @media (--viewport-lg) {
.Article-date { .article__date {
display: none; display: none;
} }
} }
.Article-dateText { .article__date-text {
line-height: 2; line-height: 2;
margin-left: 10px; margin-left: 10px;
vertical-align: top; vertical-align: top;
} }
.Article p { .article p {
margin-bottom: var(--spaceSm); margin-bottom: var(--space-sm);
} }
@media (--viewportLg) { @media (--viewport-lg) {
.Article p { .article p {
margin-bottom: var(--spaceMd); margin-bottom: var(--space-md);
} }
} }
@@ -53,14 +51,13 @@
* Link styles * Link styles
*/ */
.Article-content a { .article__content a {
color: var(--colorLightBlue); color: var(--color-light-blue);
position: relative; position: relative;
transition: text-shadow var(--transitionMd) ease-out;
} }
.Article-content a::after { .article__content a:after {
background-color: var(--colorLightBlue); background-color: var(--color-light-blue);
bottom: -1px; bottom: -1px;
content: ''; content: '';
left: 0; left: 0;
@@ -68,25 +65,25 @@
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: 0; right: 0;
transition: opacity var(--transitionMd) ease-out; transition: opacity var(--transition-md) ease-out;
} }
.Article-content a img { .article__content a img {
transition: transition:
box-shadow var(--transitionMd) ease-out, box-shadow var(--transition-md) ease-out,
filter var(--transitionMd) ease-out; filter var(--transition-md) ease-out;
} }
/** /**
* Focus states * Focus states
*/ */
.Article-content a:focus { .article__content a:focus:after {
text-shadow: 1px 1px 1px var(--colorLightBlue); opacity: 1;
} }
.Article-content a:focus img { .article__content a:focus img {
box-shadow: 0 0 12px var(--colorLightBlue); box-shadow: 0 0 12px var(--color-light-blue);
filter: brightness(125%); filter: brightness(125%);
} }
@@ -94,7 +91,7 @@
* Hover states * Hover states
*/ */
.Article-content a:hover::after { .article__content a:hover:after {
opacity: 1; opacity: 1;
} }
@@ -102,34 +99,64 @@
* Wordpress overrides * Wordpress overrides
*/ */
.Article .twitter-tweet, .article .twitter-tweet,
.Article .wp-caption { .article .wp-caption {
background-color: #fff; background-color: #fff;
border: 1px solid var(--colorLightGrey); border: 1px solid var(--color-light-grey);
border-radius: 4px; border-radius: 4px;
margin: 0 0 var(--spaceSm); margin: 0 0 var(--space-sm);
padding: var(--spaceSm); padding: var(--space-sm);
text-align: center; text-align: center;
} }
.Article .wp-caption a::after { .article .wp-caption a:after {
display: none; display: none;
} }
.Article [class*="wp-caption"] { .article [class*="wp-caption"] {
width: auto !important; width: auto !important;
} }
@media (--viewportLg) { @media (--viewport-lg) {
.Article .twitter-tweet, .article .twitter-tweet,
.Article .wp-caption { .article .wp-caption {
margin: 0 0 var(--spaceMd); margin: 0 0 var(--space-md);
padding: var(--spaceMd); padding: var(--space-md);
} }
} }
.Article .wp-caption-text { .article .wp-caption-text {
font-family: var(--headingFontFamily); font-family: var(--heading-font-family);
margin: var(--spaceSm) 0 0; 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 { body {
background-color: #fff; 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"); 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(--colorNearBlack); color: var(--color-near-black);
font-family: var(--bodyFontFamily); font-family: var(--body-font-family);
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
margin: 0;
} }
*, *,
*::before, *:before,
*::after { *:after {
box-sizing: inherit; box-sizing: inherit;
} }
@@ -49,7 +50,7 @@ a:active,
a:focus, a:focus,
a:hover, a:hover,
a:visited { a:visited {
color: var(--colorNearBlack); color: var(--color-near-black);
font-weight: 700; font-weight: 700;
outline: none; outline: none;
text-decoration: none; text-decoration: none;

8
css/footer.css
View File

@@ -1,10 +1,8 @@
/** @define Footer */ .footer {
.Footer {
text-align: center; text-align: center;
} }
.Footer-text { .footer__text {
font-size: 14px; 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; display: inline-block;
height: 32px; height: 32px;
width: 32px; width: 32px;
} }
.Icon--small { .icon--small {
height: 24px; height: 24px;
width: 24px; width: 24px;
} }
.Icon--large { .icon--large {
height: 48px; height: 48px;
width: 48px; width: 48px;
} }
.Icon--facebook { .icon--facebook {
color: var(--colorFacebook); color: var(--color-facebook);
} }
.Icon--twitter { .icon--twitter {
color: var(--colorTwitter); color: var(--color-twitter);
} }
.Icon--rss { .icon--rss {
color: var(--colorRss); color: var(--color-rss);
} }

54
css/index.css
View File

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

33
css/logo.css
View File

@@ -1,10 +1,8 @@
/** @define Logo */ .logo {
.Logo {
width: 100%; width: 100%;
} }
.Logo-link { .logo__link {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 320px; max-width: 320px;
@@ -12,8 +10,8 @@
position: relative; position: relative;
} }
.Logo-link::before { .logo__link:before {
background-image: var(--windySVG); background-image: var(--windy-svg);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 92%; background-size: 92%;
@@ -23,7 +21,7 @@
width: 100%; width: 100%;
} }
.Logo-image { .logo__image {
bottom: 0; bottom: 0;
display: block; display: block;
filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5)); filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
@@ -33,24 +31,11 @@
right: 0; right: 0;
top: 0; top: 0;
transition: transition:
filter var(--transitionMd) ease-in, filter var(--transition-md) ease-in,
opacity var(--transitionMd) ease-in; opacity var(--transition-md) ease-in;
width: 100%; width: 100%;
} }
.Logo-link:focus .Logo-image { .logo__link:focus .logo__image {
filter: drop-shadow(6px 4px 4px var(--colorLightBlue)); 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(--color-dark-blue);
.Menu {
background-color: var(--colorDarkBlue);
border-radius: 999px; border-radius: 999px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
cursor: pointer; cursor: pointer;
@@ -12,15 +10,15 @@
top: 5px; top: 5px;
transform: translateX(-100px); transform: translateX(-100px);
transition: transition:
filter var(--transitionMd) ease-out, filter var(--transition-md) ease-out,
opacity var(--transitionMd) ease-out, opacity var(--transition-md) ease-out,
transform var(--transitionMd) ease-out; transform var(--transition-md) ease-out;
width: 64px; width: 64px;
will-change: opacity, transition; will-change: opacity, transition;
z-index: 5; z-index: 5;
} }
.Menu-line { .menu__line {
background-color: #fff; background-color: #fff;
border-radius: 2px; border-radius: 2px;
height: 4px; height: 4px;
@@ -30,46 +28,41 @@
transform: translateY(-50%); transform: translateY(-50%);
} }
.Menu-line:nth-of-type(1) { .menu__line:nth-of-type(1) {
top: 33%; top: 33%;
} }
.Menu-line:nth-of-type(2) { .menu__line:nth-of-type(2) {
top: 50%; top: 50%;
} }
.Menu-line:nth-of-type(3) { .menu__line:nth-of-type(3) {
top: 66%; top: 66%;
} }
.Menu-text { .menu__text {
left: -10000px; left: -10000px;
position: absolute; position: absolute;
top: -10000px; top: -10000px;
} }
.Menu.is-visible { .menu.is-visible {
transform: translateX(0); transform: translateX(0);
} }
.Menu.is-minimized { .menu.is-minimized {
opacity: 0.5; opacity: 0.5;
transform: translateX(-20px) translateY(-20px); transform: translateX(-20px) translateY(-20px);
} }
/** /**
* Focus state * Hover and focus states
*/ */
.Menu:focus { .menu:focus,
.menu:hover {
outline: none; outline: none;
}
/**
* Hover state
*/
.Menu:hover {
opacity: 1; 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(--color-light-grey);
.Metadata {
border-bottom: 1px solid var(--colorLightGrey);
font-size: 14px; font-size: 14px;
margin-bottom: var(--spaceMd); margin-bottom: var(--space-md);
} }
@media (--viewportLg) { @media (--viewport-lg) {
.Metadata { .metadata {
border-bottom: none; border-bottom: none;
} }
.Metadata.is-locked { .metadata.is-locked {
position: fixed; position: fixed;
} }
} }
.Metadata-date { .metadata__date {
color: var(--colorGrey); color: var(--color-grey);
display: none; display: none;
margin-bottom: var(--spaceSm); margin-bottom: var(--space-sm);
} }
@media (--viewportLg) { @media (--viewport-lg) {
.Metadata-date { .metadata__date {
display: block; display: block;
} }
} }
.Metadata-comments, .metadata__comments,
.Metadata-categories, .metadata__categories,
.Metadata-share { .metadata__share {
margin-bottom: var(--spaceSm); margin-bottom: var(--space-sm);
} }
.Metadata-commentsText, .metadata__comments-text,
.Metadata-categoriesText, .metadata__categories-text,
.Metadata-dateText { .metadata__date-text {
line-height: 2.3; line-height: 2.3;
margin-left: 10px; margin-left: 10px;
text-transform: capitalize; text-transform: capitalize;
vertical-align: top; vertical-align: top;
} }
.Metadata-shareLink { .metadata__share-link {
margin-right: var(--spaceSm); 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 { :root {
--Nav-transitionDuration: var(--transitionMd); --nav-transition-duration: var(--transition-md);
} }
.Nav::after { .nav:after {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
bottom: 0; bottom: 0;
content: ''; content: '';
@@ -13,44 +11,49 @@
position: fixed; position: fixed;
right: 0; right: 0;
transition: transition:
opacity var(--Nav-transitionDuration) ease-out, opacity var(--nav-transition-duration) ease-out,
visibility var(--Nav-transitionDuration) ease-out; visibility var(--nav-transition-duration) ease-out;
top: 0; top: 0;
visibility: hidden; visibility: hidden;
z-index: 5; z-index: 5;
} }
.Nav-content { .nav.is-open:after {
background-color: var(--colorDarkBlue); visibility: visible;
opacity: 1;
}
.nav__content {
background-color: var(--color-dark-blue);
bottom: 0; bottom: 0;
box-shadow: 6px 0 4px rgba(0, 0, 0, 0.25); box-shadow: 6px 0 4px rgba(0, 0, 0, 0.25);
color: #fff; color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
left: 0; left: 0;
padding: var(--spaceSm); padding: var(--space-sm);
position: fixed; position: fixed;
top: 0; top: 0;
transform: translateX(-100%); transform: translateX(-100%);
transition: transform var(--Nav-transitionDuration) ease-out; transition: transform var(--nav-transition-duration) ease-out;
z-index: 10; z-index: 10;
} }
.Nav-title { .nav__title {
font-family: var(--headingFontFamily); font-family: var(--heading-font-family);
font-size: 2.5rem; font-size: 2.5rem;
margin-right: 62px; margin-right: 62px;
} }
.Nav-titleLink, .nav__title-link,
.Nav-titleLink:active, .nav__title-link:active,
.Nav-titleLink:focus, .nav__title-link:focus,
.Nav-titleLink:hover, .nav__title-link:hover,
.Nav-titleLink:visited { .nav__title-link:visited {
color: #fff; color: #fff;
} }
.Nav-close { .nav__close {
background-color: transparent; background-color: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
@@ -60,101 +63,96 @@
position: absolute; position: absolute;
right: 15px; right: 15px;
top: 15px; top: 15px;
transition: filter var(--Nav-transitionDuration) ease-out; transition: filter var(--nav-transition-duration) ease-out;
width: 32px; width: 32px;
} }
.Nav-close:active, .nav__close:active,
.Nav-close:focus, .nav__close:focus,
.Nav-close:hover { .nav__close:hover {
filter: drop-shadow(0 0 2px #fff); filter: drop-shadow(0 0 2px #fff);
outline: 0; outline: 0;
} }
.Nav-closeBar { .nav__close-bar {
background-color: #fff; background-color: #fff;
border-radius: 2px; border-radius: 2px;
height: 4px; height: 4px;
left: 4px; left: 4px;
position: absolute; 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; top: 14px;
width: 24px; width: 24px;
} }
.Nav-closeText { .nav__close-text {
left: -10000px; left: -10000px;
position: absolute; position: absolute;
top: -10000px; top: -10000px;
} }
/** /**
* Nav List * nav List
*/ */
.Nav-list { .nav__list {
flex-grow: 1; flex-grow: 1;
font-family: var(--headingFontFamily); font-family: var(--heading-font-family);
font-size: 1.5rem; 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; margin-top: 0;
} }
.Nav.is-open::after { .nav__link,
visibility: visible; .nav__link:active,
opacity: 1; .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; color: #fff;
display: inline-block; display: inline-block;
margin-bottom: var(--spaceSm); margin-bottom: var(--space-sm);
transition: text-shadow var(--Nav-transitionDuration) ease-out; transition: text-shadow var(--nav-transition-duration) ease-out;
} }
.Nav-link:focus, .nav__link:focus,
.Nav-link:hover { .nav__link:hover {
text-shadow: 0 0 2px #fff; text-shadow: 0 0 2px #fff;
} }
/** /**
* Nav Social * nav Social
*/ */
.Nav-social { .nav__social {
margin-bottom: var(--spaceSm); margin-bottom: var(--spaceSm);
} }
.Nav-socialLink, .nav__social-link,
.Nav-socialLink:active, .nav__social-link:active,
.Nav-socialLink:focus, .nav__social-link:focus,
.Nav-socialLink:hover, .nav__social-link:hover,
.Nav-socialLink:visited { .nav__social-link:visited {
display: inline-block;
color: #fff; color: #fff;
transition: filter var(--Nav-transitionDuration) ease-out; transition: filter var(--nav-transition-duration) ease-out;
} }
.Nav-socialLink:focus, .nav__social-link:focus,
.Nav-socialLink:hover { .nav__social-link:hover {
filter: drop-shadow(0 0 2px #fff); filter: drop-shadow(0 0 2px #fff);
} }
.Nav.is-open .Nav-content { .nav.is-open .nav__content {
transform: translateX(0); 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); 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); 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 */ .page {
.Grid {
display: grid; display: grid;
grid-auto-flow: dense; grid-auto-flow: dense;
grid-gap: var(--spaceSm); grid-gap: var(--space-sm);
grid-template-columns: 1fr; grid-template-columns: 1fr;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 var(--space-sm);
padding: 0 var(--spaceSm); padding: 0;
} }
.Grid-logo { .page__logo {
display: flex; display: flex;
font-size: 0; font-size: 0;
justify-content: center; justify-content: center;
} }
.Grid-banner { .page__banner {
display: none; display: none;
position: relative; position: relative;
} }
@media (--viewportLg) { @media (--viewport-lg) {
.Grid { .page {
grid-template-columns: 224px 1fr; grid-template-columns: 224px 1fr;
grid-template-rows: 60px 134px; grid-template-rows: 60px 134px;
grid-gap: var(--spaceMd); grid-gap: var(--space-md);
padding: 0 var(--spaceMd); padding: 0 var(--space-md);
} }
.Grid-logo { .page__logo {
grid-row: span 2; grid-row: span 2;
} }
.Grid-banner { .page__banner {
display: block; display: block;
grid-column-start: 2; grid-column-start: 2;
grid-row-start: 1; grid-row-start: 1;
} }
.Grid-article { .page__article {
grid-column-start: 2; grid-column-start: 2;
grid-row: span 2; grid-row: span 2;
} }
.Grid-metadata { .page__metadata {
grid-column-start: 1; grid-column-start: 1;
grid-row: span 2; grid-row: span 2;
} }
.Grid-metadata.is-first { .page__metadata.is-first {
grid-row: span 1; grid-row: span 1;
} }
.Grid-footer { .page__footer {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
} }

18
css/search.css
View File

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

20
css/social.css
View File

@@ -1,11 +1,19 @@
/** @define Social */ .social {
.Social {
position: absolute; position: absolute;
right: var(--spaceSm); right: var(--space-sm);
top: var(--spaceSm); top: var(--space-sm);
} }
.Social-link { .social__link {
display: inline-block; 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);
}

14
js/menu.spec.js
View File

@@ -3,11 +3,11 @@ import Menu from './menu';
jest.useFakeTimers(); jest.useFakeTimers();
const menuHtml = ` const menuHtml = `
<button class="Menu"> <button class="menu">
<span class="Menu-line"></span> <span class="menu__line"></span>
<span class="Menu-line"></span> <span class="menu__line"></span>
<span class="Menu-line"></span> <span class="menu__line"></span>
<span class="Menu-text">Open menu</span> <span class="menu__text">Open menu</span>
</button>`; </button>`;
describe('Menu button', () => { describe('Menu button', () => {
@@ -16,7 +16,7 @@ describe('Menu button', () => {
beforeEach(() => { beforeEach(() => {
document.body.innerHTML = menuHtml; document.body.innerHTML = menuHtml;
menu = new Menu({ menu = new Menu({
container: document.querySelector('.Menu'), container: document.querySelector('.menu'),
}); });
}); });
@@ -70,7 +70,7 @@ describe('Menu button', () => {
expect(menu.container.classList.contains('is-minimized')).toBe(true); expect(menu.container.classList.contains('is-minimized')).toBe(true);
}); });
test('The state should not change on scroll if it is hidden', () => { test('The state should not change on scroll if it is hidden', () => {
menu.init(); menu.init();
menu.hideMenu(); menu.hideMenu();
menu.updateState(10, 0); menu.updateState(10, 0);

8
js/navigation.js
View File

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

46
js/navigation.spec.js
View File

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

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

12
postcss.config.js
View File

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

8
theme/functions.php
View File

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

20
theme/header.php
View File

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

27
theme/index.php
View File

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

26
theme/page.php
View File

@@ -1,36 +1,36 @@
<?php get_header(); ?> <?php get_header(); ?>
<main class="Grid"> <main class="page">
<section class="Grid-logo"> <section class="page__logo">
<?php get_template_part('partials/logo') ?> <?php get_template_part('partials/logo') ?>
</section> </section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?> <?php if (have_posts()): while (have_posts()) : the_post(); ?>
<section class="Grid-article"> <section class="page__article">
<article class="Article"> <article class="article">
<h1 class="Article-title"> <h1 class="article__title">
<a href="<?php the_permalink(); ?>"> <a href="<?php the_permalink(); ?>">
<?php the_title(); ?> <?php the_title(); ?>
</a> </a>
</h1> </h1>
<div class="Article-content"> <div class="article__content">
<?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?> <?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
</div> </div>
</article> </article>
</section> </section>
<?php endwhile; ?> <?php endwhile; ?>
<?php else: ?> <?php else: ?>
<section class="Grid-article"> <section class="page__article">
<article class="Article"> <article class="article">
<h1 class="Article-title">Sorry, there is no article to display</h1> <h1 class="article__title">Sorry, there is no article to display</h1>
<div class="Article-content"> <div class="article__content">
<a class="Link" href="<?php get_site_url() ?>/">Go back home</a> <a class="link" href="<?php get_site_url() ?>/">Go back home</a>
</div> </div>
</article> </article>
</section> </section>
<?php endif; ?> <?php endif; ?>
<section class="Grid-banner"> <section class="page__banner">
<?php get_template_part('partials/banner') ?> <?php get_template_part('partials/banner') ?>
</section> </section>
<section class="Grid-footer"> <section class="page__footer">
<?php get_template_part('partials/footer') ?> <?php get_template_part('partials/footer') ?>
</section> </section>
</main> </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"> <div class="social">
<a class="Social-link" href="https://www.facebook.com/WindyCOYS/"> <a class="social__link" href="https://www.facebook.com/WindyCOYS/">
<svg class="Icon Icon--facebook"> <svg class="icon icon--facebook">
<use href="#icon-facebook"></use> <use href="#icon-facebook"></use>
</svg> </svg>
</a> </a>
<a class="Social-link" href="https://twitter.com/windycoys/"> <a class="social__link" href="https://twitter.com/windycoys/">
<svg class="Icon Icon--twitter"> <svg class="icon icon--twitter">
<use href="#icon-twitter"></use> <use href="#icon-twitter"></use>
</svg> </svg>
</a> </a>
<a class="Social-link" href="/feed"> <a class="social__link" href="/feed">
<svg class="Icon Icon--rss"> <svg class="icon icon--rss">
<use href="#icon-rss"></use> <use href="#icon-rss"></use>
</svg> </svg>
</a> </a>
</div> </div>

4
theme/partials/footer.php
View File

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

6
theme/partials/logo.php
View File

@@ -1,6 +1,6 @@
<div class="Logo"> <div class="logo">
<a class="Logo-link" href="<?php echo home_url(); ?>"> <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"> <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo__image">
</a> </a>
</div> </div>

33
theme/partials/metadata.php
View File

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

44
theme/partials/navigation.php
View File

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

8
theme/searchform.php
View File

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

34
theme/single.php
View File

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