Fix heading counters and anchor icon presentation. Resolves #1642 (#1673)

* Reset h2 counters
* Reformat .header-enum scoped SCSS
* Show overflow .wiki-body content
* Re-scope and re-style heading `.anchor` elements
* Remove unused SCSS
* Recompile static assets

Co-authored-by: Dawa Ometto <dawa.ometto@uni-leipzig.de>

lib/gollum/public/assets/.sprockets-manifest-e3f9b0be36ac3bccc4c006a52e352500.json

@@ -1 +1 @@
-{"files":{"app-7a4bd115f4bc7ece39bc8073ca0ffad7c5e55cc5837b1464a12dead4905cefb2.js":{"logical_path":"app.js","mtime":"2021-02-13T18:12:53-08:00","size":135925,"digest":"7a4bd115f4bc7ece39bc8073ca0ffad7c5e55cc5837b1464a12dead4905cefb2","integrity":"sha256-ekvRFfS8fs45vIBzyg/618XlXMWDexRkoS3q1JBc77I="},"editor-db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf.js":{"logical_path":"editor.js","mtime":"2021-01-18T18:48:15-08:00","size":744866,"digest":"db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf","integrity":"sha256-2xDINRMG6S8ZJroiXQzZyOiGSCs7mCCoWCXsOrq18c8="},"app-851d6efb6337eb889ca3ab910b8b825110dcd80fe2538d74c6a3a5d400113a34.css":{"logical_path":"app.css","mtime":"2021-02-13T18:01:20-08:00","size":395600,"digest":"851d6efb6337eb889ca3ab910b8b825110dcd80fe2538d74c6a3a5d400113a34","integrity":"sha256-hR1u+2M364ico6uRC4uCURDc2A/iU410xqOl1AAROjQ="},"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css":{"logical_path":"criticmarkup.css","mtime":"2021-01-18T18:48:15-08:00","size":646,"digest":"31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4","integrity":"sha256-Ma5dMoK7uOe3w8mRfp+2jjMVprSnXabOxI0huIRpBcQ="},"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css":{"logical_path":"print.css","mtime":"2021-01-18T18:48:15-08:00","size":75,"digest":"512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb","integrity":"sha256-USSYw2i+DT+xuhBd+oQomuSDgOyfy++Ui9TiOwsJW/s="}},"assets":{"app.js":"app-7a4bd115f4bc7ece39bc8073ca0ffad7c5e55cc5837b1464a12dead4905cefb2.js","editor.js":"editor-db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf.js","app.css":"app-851d6efb6337eb889ca3ab910b8b825110dcd80fe2538d74c6a3a5d400113a34.css","criticmarkup.css":"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css","print.css":"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css"}}
+{"files":{"app-7a4bd115f4bc7ece39bc8073ca0ffad7c5e55cc5837b1464a12dead4905cefb2.js":{"logical_path":"app.js","mtime":"2021-02-19T21:46:58-08:00","size":135925,"digest":"7a4bd115f4bc7ece39bc8073ca0ffad7c5e55cc5837b1464a12dead4905cefb2","integrity":"sha256-ekvRFfS8fs45vIBzyg/618XlXMWDexRkoS3q1JBc77I="},"editor-db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf.js":{"logical_path":"editor.js","mtime":"2021-02-17T20:47:49-08:00","size":744866,"digest":"db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf","integrity":"sha256-2xDINRMG6S8ZJroiXQzZyOiGSCs7mCCoWCXsOrq18c8="},"app-7a0bbff2e8bad3033e7c17e0e0f886f336a9d23d3b912dcd2ae389c48b4b63e6.css":{"logical_path":"app.css","mtime":"2021-02-19T21:46:58-08:00","size":396661,"digest":"7a0bbff2e8bad3033e7c17e0e0f886f336a9d23d3b912dcd2ae389c48b4b63e6","integrity":"sha256-egu/8ui60wM+fBfg4PiG8zap0j07kS3NKuOJxItLY+Y="},"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css":{"logical_path":"criticmarkup.css","mtime":"2021-02-17T20:47:49-08:00","size":646,"digest":"31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4","integrity":"sha256-Ma5dMoK7uOe3w8mRfp+2jjMVprSnXabOxI0huIRpBcQ="},"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css":{"logical_path":"print.css","mtime":"2021-02-17T20:47:49-08:00","size":75,"digest":"512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb","integrity":"sha256-USSYw2i+DT+xuhBd+oQomuSDgOyfy++Ui9TiOwsJW/s="}},"assets":{"app.js":"app-7a4bd115f4bc7ece39bc8073ca0ffad7c5e55cc5837b1464a12dead4905cefb2.js","editor.js":"editor-db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf.js","app.css":"app-7a0bbff2e8bad3033e7c17e0e0f886f336a9d23d3b912dcd2ae389c48b4b63e6.css","criticmarkup.css":"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css","print.css":"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css"}}

lib/gollum/public/gollum/stylesheets/template.scss.erb

@@ -53,19 +53,85 @@ a {
 /* Markdown body */
 
 .header-enum {
-  h2 {counter-reset: h3}
-  h3 {counter-reset: h4}
-  h4 {counter-reset: h5}
-  h5 {counter-reset: h6}
-
   --header-enum-style: decimal;
-  
+
-  h1:before {counter-increment: h1; content: counter(h1, var(--header-enum-style)) ". ";}
+  h1 {
-  h2:before {counter-increment: h2; content: counter(h1, var(--header-enum-style)) "."  counter(h2, var(--header-enum-style)) ". ";}
+    counter-increment: h1;
-  h3:before {counter-increment: h3; content: counter(h1, var(--header-enum-style)) "." counter(h2, var(--header-enum-style)) "." counter(h3, var(--header-enum-style)) ". ";}
+    counter-reset: h2;
-  h4:before {counter-increment: h4; content: counter(h1, var(--header-enum-style)) "." counter(h2, var(--header-enum-style)) "." counter(h3, var(--header-enum-style)) "." counter(h4, var(--header-enum-style)) ". ";}
+
-  h5:before {counter-increment: h5; content: counter(h1, var(--header-enum-style)) "." counter(h2, var(--header-enum-style)) "." counter(h3, var(--header-enum-style)) "." counter(h4, var(--header-enum-style)) "." counter(h5, var(--header-enum-style)) ". ";}
+    &:before {
-  h6:before {counter-increment: h6; content: counter(h1, var(--header-enum-style)) "." counter(h2, var(--header-enum-style)) "." counter(h3, var(--header-enum-style)) "." counter(h4, var(--header-enum-style)) "." counter(h5, var(--header-enum-style)) "." counter(h6, var(--header-enum-style)) ". ";}
+      content: counter(h1, var(--header-enum-style)) ". ";
+    }
+  }
+
+  h2 {
+    counter-increment: h2;
+    counter-reset: h3;
+
+    &:before {
+      content:
+        counter(h1, var(--header-enum-style))
+        "." counter(h2, var(--header-enum-style))
+        ". ";
+    }
+  }
+
+  h3 {
+    counter-reset: h4;
+    counter-increment: h3;
+
+    &:before {
+      content:
+        counter(h1, var(--header-enum-style))
+        "." counter(h2, var(--header-enum-style))
+        "." counter(h3, var(--header-enum-style))
+        ". ";
+    }
+  }
+
+  h4 {
+    counter-increment: h4;
+    counter-reset: h5;
+
+    &:before {
+      content:
+        counter(h1, var(--header-enum-style))
+        "." counter(h2, var(--header-enum-style))
+        "." counter(h3, var(--header-enum-style))
+        "." counter(h4, var(--header-enum-style))
+        ". ";
+    }
+  }
+
+  h5 {
+    counter-increment: h5;
+    counter-reset: h6;
+
+    &:before {
+      content:
+        counter(h1, var(--header-enum-style))
+        "." counter(h2, var(--header-enum-style))
+        "." counter(h3, var(--header-enum-style))
+        "." counter(h4, var(--header-enum-style))
+        "." counter(h5, var(--header-enum-style))
+        ". ";
+    }
+  }
+
+  h6 {
+    counter-increment: h6;
+
+    &:before {
+      content:
+        counter(h1, var(--header-enum-style))
+        "." counter(h2, var(--header-enum-style))
+        "." counter(h3, var(--header-enum-style))
+        "." counter(h4, var(--header-enum-style))
+        "." counter(h5, var(--header-enum-style))
+        "." counter(h6, var(--header-enum-style))
+        ". ";
+    }
+  }
 }
 
 #footer {
@@ -77,43 +143,58 @@ a {
   padding: 1em 1em 1em 0;
   font-size: 15px;
   line-height: 1.7;
-  overflow: hidden;
   word-wrap: break-word;
 
   /* MediaWiki's TOC table -- this does not pertain to gollum's own TOC functionality */
   table.toc {
     width: auto;
     display: inline-table;
+
     .anchor {
       display: none;
     }
   }
 
-  .anchor {
+  h1,
-    display: inline-block;
+  h2,
-    position: absolute;
+  h3,
-    opacity: 0;
+  h4,
-    background: url('data:image/svg+xml;utf8,<%= rocticon_css(:link) %>') no-repeat;
+  h5,
-    background-size: 0.6em 1.35em;
+  h6 {
-    padding-right: 0.5em;
+    $anchor-icon-size: 20px;
-    padding-top: 0.4em;
-    margin-left: -0.8em;
-    width: 1em;
-    height: 1em;
-    text-decoration: none;
-    transition-property: opacity;
-    transition: 0.1s;
-  }
 
-  *:hover > .anchor, .anchor:focus{
+    position: relative;
-    opacity: 1;
-  }
 
-  .anchor.edit {
+    .anchor {
-    margin-left: 2em !important;
+      display: inline-block;
-    margin-top: 0.5em;
+      position: absolute;
-    height: 0.5em;
+      margin-top: 0.1em;
-    background: url('data:image/svg+xml;utf8,<%= rocticon_css(:pencil) %>') no-repeat;
+      width: $anchor-icon-size;
+      text-decoration: none;
+      opacity: 0;
+      transition: opacity 0.1s ease-in-out;
+
+      &:before {
+        content: url('data:image/svg+xml;utf8,<%= rocticon_css(:link) %>');
+      }
+
+      &:not(.edit) {
+        left: -($anchor-icon-size/2);
+      }
+
+      &.edit {
+        margin-left: ($anchor-icon-size/2);
+
+        &:before {
+          content: url('data:image/svg+xml;utf8,<%= rocticon_css(:pencil) %>');
+        }
+      }
+    }
+
+    &:hover > .anchor,
+    .anchor:focus {
+      opacity: 1;
+    }
   }
 
   a {
@@ -125,13 +206,6 @@ a {
       color: inherit;
       text-decoration: none;
     }
-
-    &:first-child {
-      h1, h2, h3, h4, h5, h6 {
-        margin-top: 0;
-        padding-top: 0;
-      }
-    }
   }
 
   > *:first-child {
@@ -166,18 +240,6 @@ a {
     border-bottom: 1px solid #eee;
   }
 
-  h3 {
-  }
-
-  h4 {
-  }
-
-  h5 {
-  }
-
-  h6 {
-  }
-
   p, blockquote, ul, ol, dl, table, pre {
     margin: 15px 0;
   }

lib/gollum/templates/wiki_content.mustache

@@ -8,7 +8,7 @@
 	    {{{toc_content}}}
 	  </div>
 	  {{/has_toc}}
-	  <div id="wiki-body" class="gollum-{{format}}-content overflow-hidden">
+	  <div id="wiki-body" class="gollum-{{format}}-content">
 	    {{#has_header}}
 	    <div id="wiki-header" class="gollum-{{header_format}}-content">
 	      <div id="header-content" class="markdown-body">