Simplify the use of the numbered headings in Markdown files

AUTHORING.md

@@ -115,8 +115,8 @@ Optional parameters:
 ```markdown
 ---
 header_type: fixed-header
-body_class: privacy
-customjs: js/pages/privacy.js
+body_class: faq
+customjs: js/pages/faq.js
 ---
 ```
 

site/assets/scss/main.scss

@@ -45,6 +45,7 @@
 @import "modules/forms";
 @import "modules/result-panel";
 @import "modules/message-modal";
+@import "modules/numbered-headings";
 
 @import "pages/landing";
 @import "pages/release-notes/release-notes";

site/assets/scss/modules/_numbered-headings.scss

@@ -0,0 +1,163 @@
+/*!
+ * Copyright 2026, TeamDev. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Redistribution and use in source and/or binary forms, with or without
+ * modification, must retain the above copyright notice and the following
+ * disclaimer.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/*
+  Automatically generates numbered headings and numbered Table of Contents.
+
+  Usage:
+  ```html
+  <div class="numbered-headings">
+     <h2>First section title</h2>
+     <ol>
+         <li>First item</li>
+         <li>Second item</li>
+     </ol>
+     <h2>Another section title</h2>
+  </div>
+  ```
+
+  Markdown:
+  ```
+  ---
+  has_numbered_headings: true
+  ---
+
+  ## First section title
+  1. First item
+  2. Second item
+
+  ## Another section title
+  1. First item
+  2. Second item
+  ```
+
+  Result:
+  1. First section title
+    1.1. First item
+    1.2. Second item
+  2. Another section title
+    2.1. First item
+    2.2. Second item
+ */
+.numbered-headings {
+  counter-reset: section toc;
+
+  h2 {
+    counter-increment: section;
+    counter-reset: item;
+
+    &:before {
+      content: counter(section) ". ";
+    }
+  }
+
+  h2 ~ ol {
+    counter-reset: item;
+    list-style: none;
+    padding-left: 1.4em;
+
+    > li {
+      display: table;
+      counter-increment: item;
+      margin-left: 0;
+
+      &:before {
+        display: table-cell;
+        content: counter(section) "." counter(item) ". ";
+        padding-right: .6em;
+
+        @include breakpoint(lg-phone) {
+          padding-right: .36em;
+        }
+      }
+    }
+  }
+
+  ol {
+    li {
+      ul, ol {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  // Shows list as: a. b. c. ...
+  // To use it, add the `lower-alpha-type` class to the `<ol>` tag.
+  ol {
+    &.lower-alpha-type {
+      counter-reset: letter;
+      list-style-type: none;
+
+      > li {
+        display: table;
+        counter-increment: letter;
+        margin-left: 0;
+        padding-left: 0;
+
+        &:before {
+          display: table-cell;
+          content: counter(letter, lower-alpha) ". ";
+          padding-right: .6em;
+
+          @include breakpoint(lg-phone) {
+            padding-right: .36em;
+          }
+        }
+      }
+    }
+  }
+
+  #TableOfContents {
+    ul {
+      li {
+        display: flex;
+
+        $counter-width: 30px;
+        &:before {
+          display: block;
+          counter-increment: toc;
+          content: counter(toc) ".";
+          top: 0;
+          left: 0;
+          width: $counter-width;
+          height: auto;
+          text-align: right;
+          background: none;
+          color: rgba($text-color, .54);
+        }
+
+        a {
+          padding-left: $counter-width + 12px;
+        }
+
+        /* Hides the internal list with h3 and h4 tags. */
+        ul {
+          display: none;
+        }
+      }
+    }
+  }
+}

site/assets/scss/pages/_privacy.scss

@@ -58,12 +58,13 @@
   .table-container {
     overflow-x: auto;
     border: 1px solid $table-border-color;
-    margin-bottom: 16px;
+    margin-bottom: 24px;
 
     table {
       width: 100%;
       padding: 0;
       border: none;
+      margin: 0;
 
       tr {
         border-bottom: 1px solid $table-border-color;
@@ -91,83 +92,14 @@
   }
 
   .date {
-    margin: -20px 0 32px;
+    margin: -16px 0 32px;
 
     @include breakpoint(lg-phone) {
       margin-top: 0;
     }
-  }
-
-  $title-size-mobile: 24px;
-  %title-as-h2 {
-    font-family: $main-font;
-    font-size: 27px;
-    font-weight: bold;
-
-    @include breakpoint(lg-phone) {
-      font-size: $title-size-mobile - 2px;
-    }
-  }
-
-  &.development-support-agreement {
-    .article-container {
-      @include breakpoint(lg-phone) {
-        h2 {
-          font-size: $title-size-mobile;
-        }
-      }
-
-      ol {
-        list-style-type: none;
-        counter-reset: item;
-        margin: 0;
-        padding: 0;
-
-        > li {
-          display: table;
-          counter-increment: item;
-          margin: 0;
-
-          &:before {
-            content: counters(item, ".") ". ";
-            display: table-cell;
-            padding-right: .6em;
-
-            @include breakpoint(lg-phone) {
-              padding-right: .36em;
-            }
-          }
-        }
-      }
-
-      // Shows list as: a. b. c. ...
-      // To use it, add the `lower-alpha-type` class to the `<ol>` tag.
-      ol.lower-alpha-type > li:before {
-        content: counter(item, lower-alpha) ". ";
-      }
-
-      // Makes list numbers the same style as h2 titles.
-      // The `.title-list-item` class is applied in the `common.js` file.
-      .title-list-item {
-        &:before {
-          @extend %title-as-h2;
-        }
-      }
-    }
-  }
 
-  &.cvd-policy,
-  &.contributor-agreement {
-    .date {
+    &:has(+ h2) {
       margin-bottom: 0;
     }
-
-    .article-container {
-      // Makes list numbers the same style as h2 titles.
-      // The `.title-list-item` class is applied in the `common.js` file.
-      .title-list-item {
-        @extend %title-as-h2;
-      }
-    }
   }
 }