Better differentiate headings/sections (#2164)

Author: DavidOliver

assets/css/_html.css

@@ -25,7 +25,7 @@
 @import "keyboard-shortcuts.css";
 @import "quick-switch.css";
 @import "autocomplete.css";
-@import "tooltips.css";
+@import "tooltips.css"; /* must remain below functions */
 @import "copy-button.css";
 @import "settings.css";
 @import "toast.css";

assets/css/content/cheatsheet.css

@@ -23,6 +23,7 @@
 /* h2 */
 
 .page-cheatmd .content-inner h2 {
+  font-size: 1.6rem;
   margin: var(--vertical-space) 0;
   column-span: all;
   color: var(--gray700);
@@ -36,6 +37,7 @@
 /* h3 */
 
 .page-cheatmd .content-inner h3 {
+  font-size: 1.375rem;
   margin: 0 0 1em;
   font-weight: 400;
 }
@@ -66,6 +68,7 @@
 /* h4 */
 
 .page-cheatmd .content-inner h4 {
+  font-size: 1rem;
   display: block;
   margin: 0;
   padding: 0.25em var(--horizontal-space);

assets/css/content/functions.css

@@ -25,11 +25,14 @@
   position: relative;
 }
 
+/* !important used in order to beat main heading styles (which use #id selectors),
+in both HTML and ePub. */
 .content-inner .detail-header .signature {
   font-family: var(--monoFontFamily);
-  font-size: 13px;
   font-weight: 700;
-  line-height: 2em;
+  font-size: 13px !important;
+  line-height: 2em !important;
+  margin: 0 !important;
 }
 
 .content-inner .detail-header:hover a.detail-link,

assets/css/content/general.css

@@ -62,15 +62,6 @@
   color: var(--textHeaders);
 }
 
-.content-inner h1 {
-  font-size: 2em;
-  margin: 0.5em 0;
-}
-
-.content-inner h1.section-heading {
-  margin: 1.5em 0 0.5em;
-}
-
 .content-inner div.group-description {
   margin: 0 0 3em;
 }
@@ -79,15 +70,43 @@
   font-weight: 400;
 }
 
-.content-inner h2 {
-  font-size: 1.6em;
-  padding-top: 1em;
-  margin-bottom: 0.5em;
-}
+/* Headings
+Summary, Callbacks and Functions sections output h1 and h2,
+which we style as h2 and h3. */
+
+.content-inner {
+  & h1 {
+    font-size: 2rem;
+    margin-top: 1.75em;
+  }
+
+  & h2,
+  & :is(#summary, #callbacks, #functions) h1 {
+    font-size: 1.75rem;
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+  }
+
+  & h3,
+  & :is(#summary, #callbacks, #functions) h2 {
+    font-size: 1.45rem;
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+  }
 
-.content-inner h3 {
-  font-size: 1.375em;
-  margin: 1em 0 0.5em;
+  & :is(h4, h5, h6) {
+    font-size: 1.15rem;
+    margin-top: 1.25em;
+    margin-bottom: 0.5em;
+  }
+
+  & :is(h5, h6) {
+    font-weight: normal;
+  }
+
+  & h6 {
+    font-size: 1rem;
+  }
 }
 
 .content-inner li + li {
@@ -140,6 +159,18 @@
     overflow: auto;
     border-radius: var(--borderRadius-base);
 
+    & :is(h1, h2, h3, h4, h5, h6) {
+      margin: 1.25rem 0;
+    }
+
+    & :is(h1, h2, h3) {
+      font-size: 1.375rem;
+    }
+
+    & :is(h4, h5, h6) {
+      font-size: 1rem;
+    }
+
     & :is(code, pre code) {
       background-color: var(--admCodeBackground);
       border: 1px solid var(--admCodeBorder);
@@ -151,7 +182,7 @@
     }
 
     & :is(h1, h2, h3, h4, h5, h6):first-child {
-      padding-bottom: 1em;
+      padding-bottom: 1rem;
       border-bottom: 2px solid hsl(from currentColor h s l / 15%);
     }
 

assets/css/tooltips.css

@@ -33,10 +33,12 @@ as it has absolute positioning, so doesn't impact the layout and click events pa
   overflow: auto;
 }
 
+/* !important used in order to beat main heading and functions signature styles. */
 .tooltip .tooltip-body .signature {
   min-width: 320px;
   width: 100%;
-  line-height: 1em;
+  line-height: 1em !important;
+  margin: .75em 0 !important;
 }
 
 .tooltip .tooltip-body .detail-header {