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

Previously, 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, 4 deletions

diff --git a/_static/ciigo.css b/_static/ciigo.css
index 1f7d7f1..fda78c0 100644
--- a/_static/ciigo.css
+++ b/_static/ciigo.css
@@ -67,6 +67,19 @@ li {
 /* Heading */
 /*{{{*/
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  /* Make the anchor position on the right to fix overflow */
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: start;
+  padding-bottom: 0.5em;
+}
+
 h2 {
   border-bottom: 1px solid gray;
   margin-top: 4rem;
@@ -216,12 +229,10 @@ h3 > a.anchor,
 h4 > a.anchor,
 h5 > a.anchor,
 h6 > a.anchor {
-  display: block;
-  margin-left: -1.5ex;
-  position: absolute;
+  font-size: 14pt;
+  margin-left: 1.5ex;
   text-decoration: none !important;
   visibility: hidden;
-  width: 1.5ex;
   z-index: 1001;
 }