diff --git a/src/assets/styles/common/typography/_headings.scss b/src/assets/styles/common/typography/_headings.scss index 3bf33f8f..181fed35 100644 --- a/src/assets/styles/common/typography/_headings.scss +++ b/src/assets/styles/common/typography/_headings.scss @@ -1,5 +1,62 @@ -h1, -.h1, +%h1 { + font-family: $font-family-serif; + font-size: rem(36); + font-weight: $font-weight-black; + letter-spacing: rem(-0.16); + line-height: (44 / 36); + margin-bottom: 0; + margin-top: 0; + + + *, + + p, + + ul, + + ol { + margin-top: rem(32); + } + + &.screen-reader-text { + + *, + + p, + + ul, + + ol { + margin-top: 0; + } + } + + * + & { + margin-top: rem(68); + } + + @include breakpoint-up(sm) { + font-size: rem(48); + line-height: (60 / 48); + + * + & { + margin-top: rem(100); + } + } + + @include breakpoint-up(md) { + font-size: rem(60); + line-height: (72 / 60); + + * + & { + margin-top: rem(128); + } + + + *, + + p, + + ul, + + ol { + margin-top: rem(44); + } + + + .subhead { + margin-top: rem(24); + } + } +} + h2, .h2, h3, @@ -12,11 +69,7 @@ h4, h1, .h1 { - font-family: $font-family-serif; - font-size: rem(36); - font-weight: $font-weight-black; - letter-spacing: rem(-0.16); - line-height: (44 / 36); + @extend %h1; } h2, @@ -44,12 +97,6 @@ h4, } @include breakpoint-up(sm) { - h1, - .h1 { - font-size: rem(48); - line-height: (60 / 48); - } - h2, .h2 { font-size: rem(28); @@ -70,12 +117,6 @@ h4, } @include breakpoint-up(md) { - h1, - .h1 { - font-size: rem(60); - line-height: (72 / 60); - } - h2, .h2 { font-size: rem(36); diff --git a/src/assets/styles/common/typography/_vertical-rhythm.scss b/src/assets/styles/common/typography/_vertical-rhythm.scss index 9d6e24b3..901ddf7f 100644 --- a/src/assets/styles/common/typography/_vertical-rhythm.scss +++ b/src/assets/styles/common/typography/_vertical-rhythm.scss @@ -1,8 +1,3 @@ -* + h1, -* + .h1 { - margin-top: rem(68); -} - * + h2, * + .h2 { margin-top: rem(48); @@ -37,13 +32,6 @@ h3 + h4 { margin-top: rem(24); } -h1 + *, -h1 + p, -h1 + ul, -h1 + ol { - margin-top: rem(32); -} - h2 + *, h2 + p, h2 + ul, @@ -73,13 +61,6 @@ li + li { margin-top: rem(16); } -.h1 + *, -.h1 + p, -.h1 + ul, -.h1 + ol { - margin-top: rem(32); -} - .h2 + *, .h2 + p, .h2 + ul, @@ -95,7 +76,11 @@ li + li { margin-top: rem(24); } -h1.screen-reader-text, +.stack > * + * { + margin-bottom: 0; + margin-top: rem(24); +} + h2.screen-reader-text, h3.screen-reader-text, h4.screen-reader-text, @@ -112,11 +97,6 @@ h4.screen-reader-text, } @include breakpoint-up(sm) { - * + h1, - * + .h1 { - margin-top: rem(100); - } - * + h2, * + .h2 { margin-top: rem(56); @@ -142,11 +122,6 @@ h4.screen-reader-text, } @include breakpoint-up(md) { - * + h1, - * + .h1 { - margin-top: rem(128); - } - * + h2, * + .h2 { margin-top: rem(64); @@ -174,17 +149,6 @@ h4.screen-reader-text, margin-top: rem(32); } - h1 + *, - h1 + p, - h1 + ul, - h1 + ol { - margin-top: rem(44); - } - - h1 + .subhead { - margin-top: rem(24); - } - h2 + *, h2 + p, h2 + ul, @@ -203,17 +167,6 @@ h4.screen-reader-text, margin-top: rem(24); } - .h1 + *, - .h1 + p, - .h1 + ul, - .h1 + ol { - margin-top: rem(44); - } - - .h1 + .subhead { - margin-top: rem(24); - } - .h2 + *, .h2 + p, .h2 + ul, diff --git a/src/components/01-atoms/02-typography/05-stack/stack.config.js b/src/components/01-atoms/02-typography/05-stack/stack.config.js new file mode 100644 index 00000000..16d32b8c --- /dev/null +++ b/src/components/01-atoms/02-typography/05-stack/stack.config.js @@ -0,0 +1,8 @@ +module.exports = { + status: 'wip', + title: 'Stack', + context: { + paragraphOne: 'In the face of widespread dissatisfaction with capitalism, it is time to ask, “What kind of new economy do we want to create?”', + paragraphTwo: 'Instead of optimizing the online economy for growth and short-term profits for the few, we need to optimize the digital economy for all people. Platform co-ops offer a near-future, alternative to platform capitalism based on cooperative principles such as democratic ownership and governance.', + } +}; diff --git a/src/components/01-atoms/02-typography/05-stack/stack.njk b/src/components/01-atoms/02-typography/05-stack/stack.njk new file mode 100644 index 00000000..7cf3f786 --- /dev/null +++ b/src/components/01-atoms/02-typography/05-stack/stack.njk @@ -0,0 +1,4 @@ +
+
{{ paragraphOne }}
+
{{ paragraphTwo }}
+
diff --git a/src/components/01-atoms/02-typography/05-repertoire/repertoire.config.js b/src/components/01-atoms/02-typography/06-repertoire/repertoire.config.js similarity index 100% rename from src/components/01-atoms/02-typography/05-repertoire/repertoire.config.js rename to src/components/01-atoms/02-typography/06-repertoire/repertoire.config.js diff --git a/src/components/01-atoms/02-typography/05-repertoire/repertoire.njk b/src/components/01-atoms/02-typography/06-repertoire/repertoire.njk similarity index 100% rename from src/components/01-atoms/02-typography/05-repertoire/repertoire.njk rename to src/components/01-atoms/02-typography/06-repertoire/repertoire.njk