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

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