all: make the anchor symbol position on the right side of headers

In Asciidoctor, when `:sectanchors:` is set, the default anchor symbol
position is absolute on the left side of heading text with block display
option (the symbol located outside of box area of headers).
In special case, this cause an overflow when the generated HTML are
rendered inside flex with fixed height (the body is scrollable with empty
content on bottom).

This module changes the anchor symbol position to the right side of
heading text to prevent scroll on such layout, without absolute position
and normal inline layout.

1 files changed, 15 insertions, 8 deletions

diff --git a/default.css b/default.css
index ae45f9c..8138b84 100644
--- a/default.css
+++ b/default.css
@@ -366,6 +366,18 @@ h6 {
   line-height: 1.0125em;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: start;
+  padding-bottom: 0.5em;
+}
+
 h1 small,
 h2 small,
 h3 small,
@@ -1049,15 +1061,11 @@ h3 > a.anchor,
 h4 > a.anchor,
 h5 > a.anchor,
 h6 > a.anchor {
-  position: absolute;
-  z-index: 1001;
-  width: 1.5ex;
-  margin-left: -1.5ex;
-  display: block;
+  font-weight: 400;
+  margin-left: 0.5ex;
   text-decoration: none !important;
   visibility: hidden;
-  text-align: center;
-  font-weight: 400;
+  z-index: 1001;
 }
 
 #content h1 > a.anchor::before,
@@ -1070,7 +1078,6 @@ h5 > a.anchor::before,
 h6 > a.anchor::before {
   content: "\00A7";
   font-size: 0.85em;
-  display: block;
   padding-top: 0.1em;
 }