Better heading spacings after a typography block

css/pico.classless.css

@@ -425,6 +425,84 @@ h6 {
   font-size: 1rem;
 }
 
+address ~ h1,
+blockquote ~ h1,
+dl ~ h1,
+figure ~ h1,
+form ~ h1,
+ol ~ h1,
+p ~ h1,
+pre ~ h1,
+table ~ h1,
+ul ~ h1 {
+  margin-top: 3rem;
+}
+
+address ~ h2,
+blockquote ~ h2,
+dl ~ h2,
+figure ~ h2,
+form ~ h2,
+ol ~ h2,
+p ~ h2,
+pre ~ h2,
+table ~ h2,
+ul ~ h2 {
+  margin-top: 2.625rem;
+}
+
+address ~ h3,
+blockquote ~ h3,
+dl ~ h3,
+figure ~ h3,
+form ~ h3,
+ol ~ h3,
+p ~ h3,
+pre ~ h3,
+table ~ h3,
+ul ~ h3 {
+  margin-top: 2.25rem;
+}
+
+address ~ h4,
+blockquote ~ h4,
+dl ~ h4,
+figure ~ h4,
+form ~ h4,
+ol ~ h4,
+p ~ h4,
+pre ~ h4,
+table ~ h4,
+ul ~ h4 {
+  margin-top: 1.875rem;
+}
+
+address ~ h5,
+blockquote ~ h5,
+dl ~ h5,
+figure ~ h5,
+form ~ h5,
+ol ~ h5,
+p ~ h5,
+pre ~ h5,
+table ~ h5,
+ul ~ h5 {
+  margin-top: 1.6875rem;
+}
+
+address ~ h6,
+blockquote ~ h6,
+dl ~ h6,
+figure ~ h6,
+form ~ h6,
+ol ~ h6,
+p ~ h6,
+pre ~ h6,
+table ~ h6,
+ul ~ h6 {
+  margin-top: 1.5rem;
+}
+
 hgroup {
   margin-bottom: 1.5rem;
 }
@@ -443,30 +521,6 @@ p {
   margin-bottom: 0.75rem;
 }
 
-p ~ h1 {
-  margin-top: 3rem;
-}
-
-p ~ h2 {
-  margin-top: 2.625rem;
-}
-
-p ~ h3 {
-  margin-top: 2.25rem;
-}
-
-p ~ h4 {
-  margin-top: 1.875rem;
-}
-
-p ~ h5 {
-  margin-top: 1.6875rem;
-}
-
-p ~ h6 {
-  margin-top: 1.5rem;
-}
-
 small {
   font-size: 85%;
 }

css/pico.css

@@ -508,6 +508,84 @@ h6 {
   font-size: 1rem;
 }
 
+address ~ h1,
+blockquote ~ h1,
+dl ~ h1,
+figure ~ h1,
+form ~ h1,
+ol ~ h1,
+p ~ h1,
+pre ~ h1,
+table ~ h1,
+ul ~ h1 {
+  margin-top: 3rem;
+}
+
+address ~ h2,
+blockquote ~ h2,
+dl ~ h2,
+figure ~ h2,
+form ~ h2,
+ol ~ h2,
+p ~ h2,
+pre ~ h2,
+table ~ h2,
+ul ~ h2 {
+  margin-top: 2.625rem;
+}
+
+address ~ h3,
+blockquote ~ h3,
+dl ~ h3,
+figure ~ h3,
+form ~ h3,
+ol ~ h3,
+p ~ h3,
+pre ~ h3,
+table ~ h3,
+ul ~ h3 {
+  margin-top: 2.25rem;
+}
+
+address ~ h4,
+blockquote ~ h4,
+dl ~ h4,
+figure ~ h4,
+form ~ h4,
+ol ~ h4,
+p ~ h4,
+pre ~ h4,
+table ~ h4,
+ul ~ h4 {
+  margin-top: 1.875rem;
+}
+
+address ~ h5,
+blockquote ~ h5,
+dl ~ h5,
+figure ~ h5,
+form ~ h5,
+ol ~ h5,
+p ~ h5,
+pre ~ h5,
+table ~ h5,
+ul ~ h5 {
+  margin-top: 1.6875rem;
+}
+
+address ~ h6,
+blockquote ~ h6,
+dl ~ h6,
+figure ~ h6,
+form ~ h6,
+ol ~ h6,
+p ~ h6,
+pre ~ h6,
+table ~ h6,
+ul ~ h6 {
+  margin-top: 1.5rem;
+}
+
 hgroup {
   margin-bottom: 1.5rem;
 }
@@ -526,30 +604,6 @@ p {
   margin-bottom: 0.75rem;
 }
 
-p ~ h1 {
-  margin-top: 3rem;
-}
-
-p ~ h2 {
-  margin-top: 2.625rem;
-}
-
-p ~ h3 {
-  margin-top: 2.25rem;
-}
-
-p ~ h4 {
-  margin-top: 1.875rem;
-}
-
-p ~ h5 {
-  margin-top: 1.6875rem;
-}
-
-p ~ h6 {
-  margin-top: 1.5rem;
-}
-
 small {
   font-size: 85%;
 }

css/pico.fluid.classless.css

@@ -421,6 +421,84 @@ h6 {
   font-size: 1rem;
 }
 
+address ~ h1,
+blockquote ~ h1,
+dl ~ h1,
+figure ~ h1,
+form ~ h1,
+ol ~ h1,
+p ~ h1,
+pre ~ h1,
+table ~ h1,
+ul ~ h1 {
+  margin-top: 3rem;
+}
+
+address ~ h2,
+blockquote ~ h2,
+dl ~ h2,
+figure ~ h2,
+form ~ h2,
+ol ~ h2,
+p ~ h2,
+pre ~ h2,
+table ~ h2,
+ul ~ h2 {
+  margin-top: 2.625rem;
+}
+
+address ~ h3,
+blockquote ~ h3,
+dl ~ h3,
+figure ~ h3,
+form ~ h3,
+ol ~ h3,
+p ~ h3,
+pre ~ h3,
+table ~ h3,
+ul ~ h3 {
+  margin-top: 2.25rem;
+}
+
+address ~ h4,
+blockquote ~ h4,
+dl ~ h4,
+figure ~ h4,
+form ~ h4,
+ol ~ h4,
+p ~ h4,
+pre ~ h4,
+table ~ h4,
+ul ~ h4 {
+  margin-top: 1.875rem;
+}
+
+address ~ h5,
+blockquote ~ h5,
+dl ~ h5,
+figure ~ h5,
+form ~ h5,
+ol ~ h5,
+p ~ h5,
+pre ~ h5,
+table ~ h5,
+ul ~ h5 {
+  margin-top: 1.6875rem;
+}
+
+address ~ h6,
+blockquote ~ h6,
+dl ~ h6,
+figure ~ h6,
+form ~ h6,
+ol ~ h6,
+p ~ h6,
+pre ~ h6,
+table ~ h6,
+ul ~ h6 {
+  margin-top: 1.5rem;
+}
+
 hgroup {
   margin-bottom: 1.5rem;
 }
@@ -439,30 +517,6 @@ p {
   margin-bottom: 0.75rem;
 }
 
-p ~ h1 {
-  margin-top: 3rem;
-}
-
-p ~ h2 {
-  margin-top: 2.625rem;
-}
-
-p ~ h3 {
-  margin-top: 2.25rem;
-}
-
-p ~ h4 {
-  margin-top: 1.875rem;
-}
-
-p ~ h5 {
-  margin-top: 1.6875rem;
-}
-
-p ~ h6 {
-  margin-top: 1.5rem;
-}
-
 small {
   font-size: 85%;
 }

css/pico.slim.css

@@ -446,6 +446,84 @@ h6 {
   font-size: 1rem;
 }
 
+address ~ h1,
+blockquote ~ h1,
+dl ~ h1,
+figure ~ h1,
+form ~ h1,
+ol ~ h1,
+p ~ h1,
+pre ~ h1,
+table ~ h1,
+ul ~ h1 {
+  margin-top: 3rem;
+}
+
+address ~ h2,
+blockquote ~ h2,
+dl ~ h2,
+figure ~ h2,
+form ~ h2,
+ol ~ h2,
+p ~ h2,
+pre ~ h2,
+table ~ h2,
+ul ~ h2 {
+  margin-top: 2.625rem;
+}
+
+address ~ h3,
+blockquote ~ h3,
+dl ~ h3,
+figure ~ h3,
+form ~ h3,
+ol ~ h3,
+p ~ h3,
+pre ~ h3,
+table ~ h3,
+ul ~ h3 {
+  margin-top: 2.25rem;
+}
+
+address ~ h4,
+blockquote ~ h4,
+dl ~ h4,
+figure ~ h4,
+form ~ h4,
+ol ~ h4,
+p ~ h4,
+pre ~ h4,
+table ~ h4,
+ul ~ h4 {
+  margin-top: 1.875rem;
+}
+
+address ~ h5,
+blockquote ~ h5,
+dl ~ h5,
+figure ~ h5,
+form ~ h5,
+ol ~ h5,
+p ~ h5,
+pre ~ h5,
+table ~ h5,
+ul ~ h5 {
+  margin-top: 1.6875rem;
+}
+
+address ~ h6,
+blockquote ~ h6,
+dl ~ h6,
+figure ~ h6,
+form ~ h6,
+ol ~ h6,
+p ~ h6,
+pre ~ h6,
+table ~ h6,
+ul ~ h6 {
+  margin-top: 1.5rem;
+}
+
 hgroup {
   margin-bottom: 1.5rem;
 }
@@ -464,30 +542,6 @@ p {
   margin-bottom: 0.75rem;
 }
 
-p ~ h1 {
-  margin-top: 3rem;
-}
-
-p ~ h2 {
-  margin-top: 2.625rem;
-}
-
-p ~ h3 {
-  margin-top: 2.25rem;
-}
-
-p ~ h4 {
-  margin-top: 1.875rem;
-}
-
-p ~ h5 {
-  margin-top: 1.6875rem;
-}
-
-p ~ h6 {
-  margin-top: 1.5rem;
-}
-
 small {
   font-size: 85%;
 }

scss/content/_typography.scss

@@ -180,25 +180,17 @@ h6 {
   font-size: 1rem;
 }
 
-// Multi-level heading
+// Margin-top for headings after a typography block
-hgroup {
+address,
-  margin-bottom: $spacing-typography;
+blockquote,
-
+dl,
-  *{
+figure,
-    margin-bottom: 0;
+form,
-  }
+ol,
-
+p,
-  > *:last-child {
+pre,
-    color: var(--muted-text);
+table,
-    font-size: 1.125rem;
+ul {
-    font-weight: normal;
-  }
-}
-
-// Paragraphs
-p {
-  margin-bottom: $spacing-typography/2;
-
   & ~ h1 {
     margin-top: $spacing-typography*2;
   }
@@ -224,6 +216,27 @@ p {
   }
 }
 
+
+// Multi-level heading
+hgroup {
+  margin-bottom: $spacing-typography;
+
+  *{
+    margin-bottom: 0;
+  }
+
+  > *:last-child {
+    color: var(--muted-text);
+    font-size: 1.125rem;
+    font-weight: normal;
+  }
+}
+
+// Paragraphs
+p {
+  margin-bottom: $spacing-typography/2;
+}
+
 // Small
 small {
   font-size: 85%;