Improve the style of #240

brefphp · Feb 14, 2019 · cb12819 · cb12819
1 parent e27a774
commit cb12819
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/website/template/default.twig b/website/template/default.twig
@@ -93,7 +93,7 @@
 
         $('article h2, article h3, article h4, article h5').each(function () {
             var url = document.URL.replace(/#.*$/, "") + '#' + $(this).attr('id');
-            $(this).prepend(' <a class="anchor inline-block mr-2" href="' + url + '">#</a>');
+            $(this).prepend(' <a class="title-anchor" href="' + url + '">#</a>');
         });
     </script>
 </body>

diff --git a/website/template/styles.css b/website/template/styles.css
@@ -90,6 +90,9 @@ article p {
     margin-top: 16px;
     line-height: 24px;
 }
+article h1, article h2, article h3, article h4, article h5, article h6 {
+    position: relative;
+}
 article h1 {
     margin-bottom: 40px;
 }
@@ -108,6 +111,19 @@ article h3 {
     margin-top: 40px;
     margin-bottom: 16px;
 }
+.title-anchor {
+    position: absolute;
+    margin-left: -30px;
+    color: var(--color-blue-lighter);
+    margin-top: 1px;
+    right: 0;
+    left: 0;
+    opacity: 0.5;
+}
+a.title-anchor:hover {
+    text-decoration: none;
+    opacity: 0.75;
+}
 article ul, article ol {
     margin-top: 8px;
     margin-left: 16px;