feat: refactor type styles (#195)

* feat: add stack component, refactor h1 styles
* feat: complete type refactor

src/assets/styles/common/typography/_blockquotes.scss

@@ -32,6 +32,10 @@ blockquote cite::before {
 	content: "— ";
 }
 
+* + blockquote {
+	margin-top: rem(24);
+}
+
 @include breakpoint-up(sm) {
 	blockquote {
 		margin-right: rem(48);

src/assets/styles/common/typography/_headings.scss

@@ -1,96 +1,258 @@
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4 {
-	margin-bottom: 0;
-	margin-top: 0;
-}
-
-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 {
+%h2 {
 	font-family: $font-family-display;
 	font-size: rem(28);
 	font-weight: $font-weight-bold;
 	line-height: (36 / 28);
+	margin-bottom: 0;
+	margin-top: 0;
+
+	+ *,
+	+ p,
+	+ ul,
+	+ ol {
+		margin-top: rem(24);
+	}
+
+	&.screen-reader-text {
+		+ *,
+		+ p,
+		+ ul,
+		+ ol {
+			margin-top: 0;
+		}
+	}
+
+	* + & {
+		margin-top: rem(48);
+	}
+
+	h1 + & {
+		margin-top: rem(36);
+	}
+
+	@include breakpoint-up(sm) {
+		font-size: rem(28);
+		line-height: (40 / 28);
+
+		* + & {
+			margin-top: rem(56);
+		}
+
+		h1 + & {
+			margin-top: rem(44);
+		}
+	}
+
+	@include breakpoint-up(md) {
+		font-size: rem(36);
+		line-height: (48 / 36);
+
+		+ *,
+		+ p,
+		+ ul,
+		+ ol {
+			margin-top: rem(32);
+		}
+
+		* + & {
+			margin-top: rem(64);
+		}
+
+		h1 + & {
+			margin-top: rem(56);
+		}
+	}
 }
 
-h3,
-.h3 {
+%h3 {
 	font-family: $font-family-display;
 	font-size: rem(24);
 	font-weight: $font-weight-semibold;
 	line-height: (32 / 24);
-}
+	margin-bottom: 0;
+	margin-top: 0;
 
-h4,
-.h4 {
-	font-family: $font-family-sans;
-	font-size: rem(18);
-	font-weight: $font-weight-semibold;
-	line-height: (26 / 18);
-}
+	+ *,
+	+ p,
+	+ ul,
+	+ ol {
+		margin-top: rem(24);
+	}
 
-@include breakpoint-up(sm) {
-	h1,
-	.h1 {
-		font-size: rem(48);
-		line-height: (60 / 48);
+	&.screen-reader-text {
+		+ *,
+		+ p,
+		+ ul,
+		+ ol {
+			margin-top: 0;
+		}
 	}
 
-	h2,
-	.h2 {
-		font-size: rem(28);
-		line-height: (40 / 28);
+	* + & {
+		margin-top: rem(40);
 	}
 
-	h3,
-	.h3 {
+	h2 + & {
+		margin-top: rem(28);
+	}
+
+	@include breakpoint-up(sm) {
 		font-size: rem(24);
 		line-height: (36 / 24);
+
+		* + & {
+			margin-top: rem(48);
+		}
+
+		h2 + & {
+			margin-top: rem(32);
+		}
 	}
 
-	h4,
-	.h4 {
-		font-size: rem(20);
-		line-height: (32 / 20);
+	@include breakpoint-up(md) {
+		font-size: rem(28);
+		line-height: (40 / 28);
+
+		* + & {
+			margin-top: rem(56);
+		}
+
+		h2 + & {
+			margin-top: rem(44);
+		}
 	}
 }
 
-@include breakpoint-up(md) {
-	h1,
-	.h1 {
-		font-size: rem(60);
-		line-height: (72 / 60);
+%h4 {
+	font-family: $font-family-sans;
+	font-size: rem(18);
+	font-weight: $font-weight-semibold;
+	line-height: (26 / 18);
+	margin-bottom: 0;
+	margin-top: 0;
+
+	+ *,
+	+ p,
+	+ ul,
+	+ ol {
+		margin-top: rem(24);
 	}
 
-	h2,
-	.h2 {
-		font-size: rem(36);
-		line-height: (48 / 36);
+	&.screen-reader-text {
+		+ *,
+		+ p,
+		+ ul,
+		+ ol {
+			margin-top: 0;
+		}
 	}
 
-	h3,
-	.h3 {
-		font-size: rem(28);
-		line-height: (40 / 28);
+	* + & {
+		margin-top: rem(32);
+	}
+
+	h3 + & {
+		margin-top: rem(24);
 	}
 
-	h4,
-	.h4 {
+	@include breakpoint-up(sm) {
 		font-size: rem(20);
 		line-height: (32 / 20);
+
+		* + & {
+			margin-top: rem(40);
+		}
 	}
+
+	@include breakpoint-up(md) {
+		font-size: rem(20);
+		line-height: (32 / 20);
+
+		* + & {
+			margin-top: rem(48);
+		}
+
+		h3 + & {
+			margin-top: rem(32);
+		}
+	}
+}
+
+h1,
+.h1 {
+	@extend %h1;
+}
+
+h2,
+.h2 {
+	@extend %h2;
+}
+
+h3,
+.h3 {
+	@extend %h3;
+}
+
+h4,
+.h4 {
+	@extend %h4;
 }

src/assets/styles/common/typography/_lists.scss

@@ -12,3 +12,13 @@ li {
 li::marker {
 	color: $grey-600;
 }
+
+li + li {
+	margin-top: rem(16);
+}
+
+* + ul,
+* + ol {
+	margin-bottom: 0;
+	margin-top: rem(24);
+}

src/assets/styles/common/typography/_paragraphs.scss

@@ -12,3 +12,8 @@ p small {
 	font-size: rem(14);
 	line-height: (20 / 14);
 }
+
+* + p {
+	margin-bottom: 0;
+	margin-top: rem(24);
+}