feat: enhance CSS specificity and improve line-height consistency across headings and paragraphs

Author: onmax

packages/nimiq-css/src/css/static-content.css

@@ -5,40 +5,35 @@ body:not(.nq-raw) {
 
   --nq-max-width: 73rem;
 
-  &:not(:where(.nq-no-color, [nq-no-color], .nq-prose, [nq-prose])) {
+  &:not(:where(.nq-no-color, [nq-no-color], .nq-prose, [nq-prose], .nq-prose-compact, [nq-prose-compact])) {
     color: rgb(var(--nq-neutral-800));
   }
 
-  :not(:has(:is(.nq-raw, [nq-raw], .nq-prose, [nq-prose]) *)):not(:is(.nq-raw, [nq-raw], .nq-prose, [nq-prose]) *) {
+  :not(:has(:is(.nq-raw, [nq-raw], .nq-prose, [nq-prose], .nq-prose-compact, [nq-prose-compact]) *)):not(:is(.nq-raw, [nq-raw], .nq-prose, [nq-prose], .nq-prose-compact, [nq-prose-compact]) *) {
     &:where(h1) {
       font-weight: 700;
-
-      *:not(.nq-no-color):not([nq-no-color]):not(.nq-no-color *):not([nq-no-color] *) & {
-        color: rgb(var(--nq-neutral));
-      }
-
       max-width: 26ch;
       text-align: left;
       margin: 0;
+      line-height: 1.3;
 
-      --f-font-line-height: 1.2;
       --font-size-min: 40;
       --font-size-max: 48;
 
       &:where(.nq-heading-lg, [nq-heading-lg]) {
-        --font-size-min: 44;
+        --font-size-min: 36;
         --font-size-max: 64;
       }
 
       @media screen and (min-width: 768px) {
         text-align: center;
       }
 
-      & + p {
+      &+p {
         margin-top: 24px;
         max-width: 42ch;
 
-        --line-height: 1.5;
+        line-height: 1.5;
         --font-size-min: 20;
         --font-size-max: 22;
 
@@ -60,21 +55,21 @@ body:not(.nq-raw) {
 
       --font-size-min: 32;
       --font-size-max: 40;
-      --line-height: 1.3;
+      line-height: 1.3;
 
       text-align: left;
 
       @media screen and (min-width: 768px) {
         text-align: center;
       }
 
-      & + p {
+      &+p {
         margin-top: 16px;
         color: rgb(var(--nq-neutral-800) / 0.85);
 
         max-width: 70ch;
 
-        --line-height: 1.5;
+        line-height: 1.5;
         --font-size-min: 20;
         --font-size-max: 22;
 
@@ -86,26 +81,26 @@ body:not(.nq-raw) {
 
     &:where(h3) {
       font-weight: 600;
-      --line-height: 1.3;
+      line-height: 1.3;
       --font-size-min: 22;
       --font-size-max: 28;
 
       *:not(.nq-no-color):not([nq-no-color]):not(.nq-no-color *):not([nq-no-color] *) & {
         color: rgb(var(--nq-neutral));
       }
 
-      & + p {
+      &+p {
         margin-top: 16px;
 
-        --line-height: 1.5;
+        line-height: 1.5;
         --font-size-min: 18;
         --font-size-max: 20;
       }
     }
 
     &:where(h4) {
       font-weight: 600;
-      --line-height: 1.3;
+      line-height: 1.3;
       --font-size-min: 20;
       --font-size-max: 22;
 
@@ -114,11 +109,6 @@ body:not(.nq-raw) {
         color: rgb(var(--nq-neutral));
       }
     }
-
-    &:where(h1, h2, h3, h4, h1 + p, h2 + p, h3 + p, h4 + p) {
-      font-size: var(--font-size);
-      line-height: var(--line-height);
-    }
   }
 
   :where(section, [data-section]) {
@@ -173,7 +163,7 @@ body:not(.nq-raw) {
 
     padding: var(--pt, 0) var(--px, 0) var(--pb, 0) var(--px, 0);
 
-    > * {
+    >* {
       max-width: var(--nq-max-width);
     }
 
@@ -183,32 +173,14 @@ body:not(.nq-raw) {
     --f-pt-min: 160;
     --f-pt-max: 200;
 
-    :is(
-      &:where(.bg-darkblue, [bg-darkblue]):has(
-          + :where(section, [data-section]):not(:where(.nq-section-gap, [nq-section-gap])):where(
-              .bg-darkblue,
-              [bg-darkblue]
-            )
-        ),
-      &:where(.bg-darkerblue, [bg-darkerblue]):has(
-          + :where(section, [data-section]):not(:where(.nq-section-gap, [nq-section-gap])):where(
-              .bg-darkerblue,
-              [bg-darkerblue]
-            )
-        ),
-      &:where(.bg-neutral-100, [bg-neutral-100]):has(
-          + :where(section, [data-section]):not(:where(.nq-section-gap, [nq-section-gap])):where(
-              .bg-neutral-100,
-              [bg-neutral-100]
-            )
-        ),
-      &:where(.bg-neutral-0, [bg-neutral-0]):has(
-          + :where(section, [data-section]):not(:where(.nq-section-gap, [nq-section-gap])):where(
-              .bg-neutral-0,
-              [bg-neutral-0]
-            )
-        )
-    ) {
+    :is(&:where(.bg-darkblue, [bg-darkblue]):has(+ :where(section, [data-section]):not(:where(.nq-section-gap, [nq-section-gap])):where(.bg-darkblue,
+          [bg-darkblue])),
+      &:where(.bg-darkerblue, [bg-darkerblue]):has(+ :where(section, [data-section]):not(:where(.nq-section-gap, [nq-section-gap])):where(.bg-darkerblue,
+          [bg-darkerblue])),
+      &:where(.bg-neutral-100, [bg-neutral-100]):has(+ :where(section, [data-section]):not(:where(.nq-section-gap, [nq-section-gap])):where(.bg-neutral-100,
+          [bg-neutral-100])),
+      &:where(.bg-neutral-0, [bg-neutral-0]):has(+ :where(section, [data-section]):not(:where(.nq-section-gap, [nq-section-gap])):where(.bg-neutral-0,
+          [bg-neutral-0]))) {
       --f-pb-min: 36;
       --f-pb-max: 48;
 
@@ -218,56 +190,36 @@ body:not(.nq-raw) {
       }
     }
 
-    &:where(.bg-darkblue, [bg-darkblue], .bg-darkerblue, [bg-darkerblue]):has(
-        + :where(section, [data-section]):where(
-            .bg-neutral-100,
-            .bg-neutral-0,
-            [bg-neutral-100],
-            [bg-neutral-0],
-            .nq-section-gap,
-            [nq-section-gap]
-          )
-      ),
-    &:where(.bg-neutral-0, [bg-neutral-0], .bg-neutral-100, [bg-neutral-100]):has(
-        + :where(section, [data-section]):where(
-            .bg-darkblue,
-            [bg-darkblue],
-            .bg-darkerblue,
-            [bg-darkerblue],
-            .nq-section-gap,
-            [nq-section-gap]
-          )
-      ),
-    &:where(.bg-neutral-0, [bg-neutral-0]):has(
-        + :where(section, [data-section]):where(
-            .bg-neutral-100,
-            [bg-neutral-100],
-            .bg-darkblue,
-            [bg-darkblue],
-            .bg-darkerblue,
-            [bg-darkerblue],
-            .nq-section-gap,
-            [nq-section-gap]
-          )
-      ),
-    &:where(.bg-darkblue, [bg-darkblue], .bg-neutral-100, [bg-neutral-100], .bg-darkerblue, [bg-darkerblue]):has(
-        + :where(section, [data-section]):where(.bg-neutral-0, [bg-neutral-0], .nq-section-gap, [nq-section-gap])
-      ),
-    &:where(.bg-neutral-100, [bg-neutral-100]):has(
-        + :where(section, [data-section]):where(
-            .bg-darkblue,
-            [bg-darkblue],
-            .bg-neutral-0,
-            [bg-neutral-0],
-            .bg-darkerblue,
-            [bg-darkerblue],
-            .nq-section-gap,
-            [nq-section-gap]
-          )
-      ),
-    &:where(.bg-neutral-0, [bg-neutral-0], .bg-darkblue, [bg-darkblue], .bg-darkerblue, [bg-darkerblue]):has(
-        + :where(section, [data-section]):where(.bg-neutral-100, [bg-neutral-100], .nq-section-gap, [nq-section-gap])
-      ) {
+    &:where(.bg-darkblue, [bg-darkblue], .bg-darkerblue, [bg-darkerblue]):has(+ :where(section, [data-section]):where(.bg-neutral-100,
+        .bg-neutral-0,
+        [bg-neutral-100],
+        [bg-neutral-0],
+        .nq-section-gap,
+        [nq-section-gap])),
+    &:where(.bg-neutral-0, [bg-neutral-0], .bg-neutral-100, [bg-neutral-100]):has(+ :where(section, [data-section]):where(.bg-darkblue,
+        [bg-darkblue],
+        .bg-darkerblue,
+        [bg-darkerblue],
+        .nq-section-gap,
+        [nq-section-gap])),
+    &:where(.bg-neutral-0, [bg-neutral-0]):has(+ :where(section, [data-section]):where(.bg-neutral-100,
+        [bg-neutral-100],
+        .bg-darkblue,
+        [bg-darkblue],
+        .bg-darkerblue,
+        [bg-darkerblue],
+        .nq-section-gap,
+        [nq-section-gap])),
+    &:where(.bg-darkblue, [bg-darkblue], .bg-neutral-100, [bg-neutral-100], .bg-darkerblue, [bg-darkerblue]):has(+ :where(section, [data-section]):where(.bg-neutral-0, [bg-neutral-0], .nq-section-gap, [nq-section-gap])),
+    &:where(.bg-neutral-100, [bg-neutral-100]):has(+ :where(section, [data-section]):where(.bg-darkblue,
+        [bg-darkblue],
+        .bg-neutral-0,
+        [bg-neutral-0],
+        .bg-darkerblue,
+        [bg-darkerblue],
+        .nq-section-gap,
+        [nq-section-gap])),
+    &:where(.bg-neutral-0, [bg-neutral-0], .bg-darkblue, [bg-darkblue], .bg-darkerblue, [bg-darkerblue]):has(+ :where(section, [data-section]):where(.bg-neutral-100, [bg-neutral-100], .nq-section-gap, [nq-section-gap])) {
       --f-pb-min: 160;
       --f-pb-max: 200;
     }
@@ -280,7 +232,7 @@ body:not(.nq-raw) {
     &[nq-overlaps] {
       --pb: 0;
 
-      > * {
+      >* {
         position: relative;
         z-index: 2;