feat: add stack component, refactor h1 styles

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

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,

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.',
+	}
+};

src/components/01-atoms/02-typography/05-stack/stack.njk

@@ -0,0 +1,4 @@
+<div class="stack">
+	<div>{{ paragraphOne }}</div>
+	<div>{{ paragraphTwo }}</div>
+</div>