demote headings on index, but retain styling (#4065)

Co-authored-by: John Jediny <JJediny@users.noreply.github.com>
18F · Feb 7, 2025 · 98e4ead · 98e4ead
1 parent 47c178d
commit 98e4ead
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -2,7 +2,11 @@
   {% for item in nav %}
     <li>
       {% if item.children %}
-        <h{{ level }} id="{{ item.text | slugify }}">
+        {% if viz-promote %}
+          {% assign cssLevel = level | minus: 1 %}
+          {% assign cssClass = "handbook-visual-h" | append: cssLevel %}
+        {% endif %}
+        <h{{ level }} id="{{ item.text | slugify }}" class="{{ cssClass }}">
           {% include "nav-link.html" child:item %}
         </h{{ level }}>
         {% if item.blurb %}

diff --git a/pages/index.html b/pages/index.html
@@ -23,6 +23,6 @@ <h2 class="font-heading-xl margin-top-0 tablet:margin-bottom-0">
 </section>
 <div class="layout-table-of-contents">
   <div class="wrapper usa-prose">
-    {% render "nav.html", level:1 nav:navigation.primary %}
+    {% render "nav.html", level:2 nav:navigation.primary viz-promote:true %}
   </div>
 </div>
diff --git a/styles/custom/toc.scss b/styles/custom/toc.scss
@@ -14,7 +14,8 @@
     margin-bottom: units(2);
   }
 
-  h1 {
+  h1,
+  h2.handbook-visual-h1 {
     @include u-font("heading", "xl");
     font-weight: fw("bold");
     padding-top: units(3);
@@ -29,14 +30,16 @@
     margin-top: 0;
   }
 
-  h2 {
+  h2,
+  h3.handbook-visual-h2 {
     @include u-font("heading", "lg");
     font-weight: fw("bold");
     margin-top: units(4);
     color: color("blue-60");
   }
 
-  h3 {
+  h3,
+  h4.handbook-visual-h3 {
     @include typeset("heading", "md", 3);
     font-weight: fw("bold");
     margin: 0 0 units(0.5);
@@ -63,7 +66,7 @@
     }
 
     // third-level nav
-    h2 + ol {
+    h3 + ol {
       @include at-media("tablet") {
         column-count: 2;
 
@@ -75,7 +78,7 @@
     }
 
     // fourth-level nav
-    h3 + ol {
+    h4 + ol {
       margin: units(1) 0 units(3) 0;
 
       // fifth+ level nav