Change admonition title style/syntax (#3107)

* change style of admon titles * fix tests
elastic · Nov 7, 2024 · 4658579 · 4658579
1 parent 567b125
commit 4658579
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/resources/asciidoctor/lib/docbook_compat/convert_admonition.rb b/resources/asciidoctor/lib/docbook_compat/convert_admonition.rb
@@ -20,10 +20,10 @@ def convert_admonition_title_id(node)
       return node.id ? %(<a id="#{node.id}"></a>) : nil unless node.title
 
       [
-        '<h3>',
+        '<p class="admon_title">',
         node.title,
         node.id ? %(<a id="#{node.id}"></a>) : nil,
-        '</h3>',
+        '</p>',
       ].compact.join
     end
 

diff --git a/resources/asciidoctor/spec/change_admonition_spec.rb b/resources/asciidoctor/spec/change_admonition_spec.rb
@@ -35,7 +35,7 @@ def expect_block_admonition(body)
         end
         it "renders with Elastic's custom template" do
           expect_block_admonition <<~HTML.strip
-            <h3>#{message} in 7.0.0-beta1.</h3>
+            <p class="admon_title">#{message} in 7.0.0-beta1.</p>
             <p>words</p>
           HTML
         end
@@ -58,7 +58,7 @@ def expect_block_admonition(body)
         end
         it "renders with Elastic's custom template" do
           expect_block_admonition <<~HTML.strip
-            <h3>#{message} in 7.0.0-beta1.</h3>
+            <p class="admon_title">#{message} in 7.0.0-beta1.</p>
             <p>Like 2<sup>7</sup></p>
           HTML
         end

diff --git a/resources/asciidoctor/spec/docbook_compat_spec.rb b/resources/asciidoctor/spec/docbook_compat_spec.rb
@@ -1915,7 +1915,7 @@ def expect_block_admonition(body)
               <div class="#{admon_class} admon">
               <div class="icon"></div>
               <div class="admon_content">
-              <h3>Title</h3>
+              <p class="admon_title">Title</p>
               <p>words</p>
               </div>
               </div>
@@ -1938,7 +1938,7 @@ def expect_block_admonition(body)
                 <div class="#{admon_class} admon">
                 <div class="icon"></div>
                 <div class="admon_content">
-                <h3>Title<a id="id"></a></h3>
+                <p class="admon_title">Title<a id="id"></a></p>
                 <p>words</p>
                 </div>
                 </div>

diff --git a/resources/web/style/admonishment.pcss b/resources/web/style/admonishment.pcss
@@ -84,14 +84,14 @@
   }
 
   .admon_content {
-    margin-left: 80px;
+    margin-left: 100px;
     /* On page load, the heading level may be changed,
     but we always what to style it the same way  */
-    h2, h3, h4, h5, h6 {
-      margin: 3px 0;
-      font-size: 22px;
-      font-weight: 600;
-      a { font-weight: 600; }
+    .admon_title {
+      font-size: 16px;
+      margin-bottom: 4px;
+      font-weight: 700;
+      a { font-weight: 700; }
     }
     p:last-of-type {
       margin-bottom: 0em;