From 6e62b55e6024bb92c627fa14481a3ef2d75edef1 Mon Sep 17 00:00:00 2001 From: Dan Head Date: Sun, 9 Dec 2018 14:52:01 +0000 Subject: [PATCH] Refactor CSS to BEM Update dependencies Improve focus and hover states --- .stylelintrc | 10 +- css/article.css | 133 +- css/base.css | 13 +- css/footer.css | 8 +- css/header.css | 2 - css/icon.css | 20 +- css/index.css | 54 +- css/logo.css | 33 +- css/menu.css | 41 +- css/metadata.css | 88 +- css/nav.css | 114 +- css/normalize.css | 2 + css/{grid.css => page.css} | 35 +- css/search.css | 18 +- css/social.css | 20 +- js/menu.spec.js | 14 +- js/navigation.js | 8 +- js/navigation.spec.js | 46 +- js/windy.js | 4 +- package-lock.json | 5374 ++++++++++++++++--------- package.json | 43 +- postcss.config.js | 12 +- theme/functions.php | 8 +- theme/header.php | 20 +- theme/index.php | 27 +- theme/page.php | 26 +- theme/partials/ad_wide_skyscraper.php | 1 + theme/partials/banner.php | 15 +- theme/partials/footer.php | 4 +- theme/partials/logo.php | 6 +- theme/partials/metadata.php | 33 +- theme/partials/navigation.php | 44 +- theme/searchform.php | 8 +- theme/single.php | 34 +- 34 files changed, 3934 insertions(+), 2384 deletions(-) delete mode 100644 css/header.css create mode 100644 css/normalize.css rename css/{grid.css => page.css} (61%) create mode 100644 theme/partials/ad_wide_skyscraper.php diff --git a/.stylelintrc b/.stylelintrc index d44c33c..9c1a2a3 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -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" } } diff --git a/css/article.css b/css/article.css index b30986e..77f5543 100644 --- a/css/article.css +++ b/css/article.css @@ -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; +} diff --git a/css/base.css b/css/base.css index 7482084..6a72643 100644 --- a/css/base.css +++ b/css/base.css @@ -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; diff --git a/css/footer.css b/css/footer.css index 32c1516..ce22071 100644 --- a/css/footer.css +++ b/css/footer.css @@ -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); } diff --git a/css/header.css b/css/header.css deleted file mode 100644 index e35606c..0000000 --- a/css/header.css +++ /dev/null @@ -1,2 +0,0 @@ -/** @define Header */ - diff --git a/css/icon.css b/css/icon.css index be168b0..0017210 100644 --- a/css/icon.css +++ b/css/icon.css @@ -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); } diff --git a/css/index.css b/css/index.css index 8b27c79..cd51a00 100644 --- a/css/index.css +++ b/css/index.css @@ -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); diff --git a/css/logo.css b/css/logo.css index 7f3ae69..aff4701 100644 --- a/css/logo.css +++ b/css/logo.css @@ -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; - } -} -*/ diff --git a/css/menu.css b/css/menu.css index 36c6072..b6672a1 100644 --- a/css/menu.css +++ b/css/menu.css @@ -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); } diff --git a/css/metadata.css b/css/metadata.css index a99b875..2fa81c1 100644 --- a/css/metadata.css +++ b/css/metadata.css @@ -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; } diff --git a/css/nav.css b/css/nav.css index 6b8c43a..54bfa85 100644 --- a/css/nav.css +++ b/css/nav.css @@ -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); } - diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..d6c25e7 --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,2 @@ +/* stylelint-disable at-rule-no-unknown */ +@import-normalize; diff --git a/css/grid.css b/css/page.css similarity index 61% rename from css/grid.css rename to css/page.css index ec2a12b..41f2799 100644 --- a/css/grid.css +++ b/css/page.css @@ -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; } } - diff --git a/css/search.css b/css/search.css index 2a4635d..e38f028 100644 --- a/css/search.css +++ b/css/search.css @@ -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; } diff --git a/css/social.css b/css/social.css index f51d935..1114a9a 100644 --- a/css/social.css +++ b/css/social.css @@ -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); +} + diff --git a/js/menu.spec.js b/js/menu.spec.js index 4e2d8b3..fcd0a66 100644 --- a/js/menu.spec.js +++ b/js/menu.spec.js @@ -3,11 +3,11 @@ import Menu from './menu'; jest.useFakeTimers(); const menuHtml = ` -`; 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'), }); }); @@ -70,7 +70,7 @@ describe('Menu button', () => { 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.hideMenu(); menu.updateState(10, 0); diff --git a/js/navigation.js b/js/navigation.js index e17cd04..17db2fc 100644 --- a/js/navigation.js +++ b/js/navigation.js @@ -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() { diff --git a/js/navigation.spec.js b/js/navigation.spec.js index 68559fb..a8f507a 100644 --- a/js/navigation.spec.js +++ b/js/navigation.spec.js @@ -1,22 +1,22 @@ import Navigation from './navigation'; const navHtml = `Test link -