Merge pull request #9574 from circleci/DOCSS-1904-heading-styles

Clean up heading styles

Author: rosieyohannan

ui/src/css/doc.css

@@ -17,31 +17,72 @@
   }
 }
 
+/* === HEADING STYLES === */
 .doc h1,
 .doc h2,
 .doc h3,
 .doc h4,
 .doc h5,
 .doc h6 {
   color: var(--heading-font-color);
+  font-family: var(--body-font-family);
   font-weight: var(--heading-font-weight);
   hyphens: none;
   line-height: 1.3;
-  margin: 1rem 0 0;
-  scroll-margin-top: calc(var(--navbar-height) + var(--toolbar-height) + 1rem); /* Account for sticky header height */
+  margin: 16px 0;
+  padding: 0;
+  text-align: left;
+  scroll-margin-top: calc(var(--navbar-height) + var(--toolbar-height) + 1rem);
 }
 
-.doc > h1.page:first-child {
+.doc h1 {
   font-size: 32px;
-  margin: 16px 0;
 }
 
+.doc h2 {
+  font-size: 24px;
+}
+
+.doc h3 {
+  font-size: 20px;
+}
+
+.doc h4 {
+  font-size: 18px;
+}
+
+.doc h5,
+.doc h6 {
+  font-size: 16px;
+}
+
+/* Mobile heading sizes */
+@media screen and (max-width: 1023.5px) {
+  .doc h1 {
+    font-size: 24px;
+  }
+
+  .doc h2 {
+    font-size: 20px;
+  }
+
+  .doc h3 {
+    font-size: 18px;
+  }
+
+  .doc h4 {
+    font-size: 16px;
+  }
+}
+
+/* Special case: Page title gets extra top margin on larger screens */
 @media screen and (min-width: 768px) {
   .doc > h1.page:first-child {
     margin-top: 2.5rem;
   }
 }
 
+/* Special case: Section spacing */
 .doc > h2#name + .sectionbody {
   margin-top: 1rem;
 }
@@ -51,26 +92,14 @@
   margin-top: 2rem;
 }
 
+/* Special case: Abstract section header with background */
 .doc h1.sect0 {
   background: var(--abstract-background);
   font-size: 1.8em;
   margin: 1.5rem -1rem 0;
   padding: 0.5rem 1rem;
 }
 
-.doc h2:not(.discrete) {
-  margin-left: -1rem;
-  margin-right: -1rem;
-  padding: 0.4rem 1rem 0.1rem;
-  font-weight: var(--alt-heading-font-weight);
-}
-
-.doc h3:not(.discrete),
-.doc h4:not(.discrete) {
-  font-weight: var(--alt-heading-font-weight);
-  font-size: 20px;
-}
-
 .doc h1 .anchor,
 .doc h2 .anchor,
 .doc h3 .anchor,
@@ -1321,31 +1350,6 @@
   width: 1.5em;
 }
 
-/* === custom overrides === */
-/* uniform 16px (1rem) spacing and left alignment */
-.doc h1,
-.doc h2,
-.doc h3,
-.doc h4,
-.doc h5,
-.doc h6 {
-  margin: 16px 0;
-  padding: 0;
-  text-align: left;
-  margin-left: 0;
-  margin-right: 0;
-  font-size: 24px;
-  font-weight: 500;
-}
-
-/* remove negative offsets on section headers */
-.doc h2:not(.discrete),
-.doc h3:not(.discrete),
-.doc h4:not(.discrete) {
-  margin-left: 0;
-  margin-right: 0;
-  padding: 0;
-}
 
 /* paragraphs, lists, tables, blockquotes all get 16px bottom spacing */
 .doc p,

ui/src/css/vars.css

@@ -81,7 +81,7 @@
   --doc-margin: 0 auto;
   --doc-margin--desktop: 0 2rem;
   --heading-font-color: #161616;
-  --heading-font-weight: normal;
+  --heading-font-weight: 500;
   --alt-heading-font-weight: 500;
   --section-divider-color: var(--panel-border-color);
   --link-font-color: #2152E5;