[docs] improve headerlink handling (¶) (#11016)

docs/tools/website.py

@@ -20,25 +20,31 @@ def adjust_markdown_html(content):
         content,
         features='html.parser'
     )
+    for a in soup.find_all('a'):
+        a_class = a.attrs.get('class')
+        if a_class and 'headerlink' in a_class:
+            a.string = '\xa0'
     for details in soup.find_all('details'):
         for summary in details.find_all('summary'):
             if summary.parent != details:
                 summary.extract()
                 details.insert(0, summary)
     for div in soup.find_all('div'):
-        div.attrs['role'] = 'alert'
         div_class = div.attrs.get('class')
-        for a in div.find_all('a'):
-            a_class = a.attrs.get('class')
-            if a_class:
-                a.attrs['class'] = a_class + ['alert-link']
-            else:
-                a.attrs['class'] = 'alert-link'
+        is_admonition = div_class and 'admonition' in div.attrs.get('class')
+        if is_admonition:
+            for a in div.find_all('a'):
+                a_class = a.attrs.get('class')
+                if a_class:
+                    a.attrs['class'] = a_class + ['alert-link']
+                else:
+                    a.attrs['class'] = 'alert-link'
         for p in div.find_all('p'):
             p_class = p.attrs.get('class')
-            if p_class and ('admonition-title' in p_class):
-                p.attrs['class'] = p_class + ['alert-heading', 'display-5', 'mb-2']
-        if div_class and 'admonition' in div.attrs.get('class'):
+            if is_admonition and p_class and ('admonition-title' in p_class):
+                p.attrs['class'] = p_class + ['alert-heading', 'display-6', 'mb-2']
+        if is_admonition:
+            div.attrs['role'] = 'alert'
             if ('info' in div_class) or ('note' in div_class):
                 mode = 'alert-primary'
             elif ('attention' in div_class) or ('warning' in div_class):
@@ -49,7 +55,7 @@ def adjust_markdown_html(content):
                 mode = 'alert-info'
             else:
                 mode = 'alert-secondary'
-            div.attrs['class'] = div_class + ['alert', 'lead', 'pb-0', 'mb-4', mode]
+            div.attrs['class'] = div_class + ['alert', 'pb-0', 'mb-4', mode]
 
     return str(soup)
 

website/css/base.css

@@ -39,6 +39,12 @@ a:hover, a:active {
     line-height: 1.2;
 }
 
+.display-6 {
+    font-size: 1.75rem;
+    font-weight: 300;
+    line-height: 1.2;
+}
+
 .bg-dark-alt, .bg-dark-alt:focus {
     background: #36363F;
 }

website/css/docs.css

@@ -33,7 +33,6 @@ summary {
 }
 
 .headerlink {
-    display: none;
     text-decoration: none !important;
     margin-left: .5rem;
 }

website/js/docs.js

@@ -82,10 +82,10 @@ $(document).ready(function () {
 
     var headers = $('#content h1, #content h2, #content h3, #content h4, #content h5, #content h6');
     headers.mouseenter(function() {
-        $(this).find('.headerlink').show();
+        $(this).find('.headerlink').html('¶');
     });
     headers.mouseleave(function() {
-        $(this).find('.headerlink').hide();
+        $(this).find('.headerlink').html(' ');
     });
 
     if ($('#docsearch-input').length) {