ybbond

My site. The main domain
Log | Files | Refs | README | LICENSE | CC-LICENSE

commit f13216464eb93942eeabe683f646664b66d7c90f
parent 29c5342bd58dd225ed944a3f53895bf0aff89535
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Sat,  9 May 2020 02:04:58 +0700

feature: add dynamic headline hash

Diffstat:
Massets/content.scss | 27++++++++++++++++++++++++++-
Massets/styles.scss | 8+++-----
Mlayouts/_default/single.html | 2+-
Alayouts/partials/components/content.html | 6++++++
Dlayouts/partials/components/headline-hash.html | 1-

5 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/assets/content.scss b/assets/content.scss
@@ -13,6 +13,28 @@
     display: none;
   }
 
+  .headline-hash {
+    padding: 0 0.2em;
+    @media(min-width: 600px) {
+      display: none;
+    }
+  }
+
+  .before-hash {
+    position: absolute;
+    font-size: 0.9em;
+    top: 0.10em;
+    &.h2 {
+      left: -1.6em;
+    }
+    &.h3 {
+      left: -2.4em;
+    }
+    @media(max-width: 599px) {
+      display: none;
+    }
+  }
+
   pre {
     overflow: auto;
     padding: 0.5em;
@@ -20,8 +42,11 @@
 
   a {
     &:hover {
+      outline-style: solid;
+      outline-width: 0.3em;
       @include themify($themes) {
-       background-color: themed('color-background-hover');
+        outline-color: themed('color-background-hover');
+        background-color: themed('color-background-hover');
       }
     }
   }
diff --git a/assets/styles.scss b/assets/styles.scss
@@ -38,12 +38,14 @@ hr {
   }
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5 {
   @include themify($themes) {
     color: themed('color-green');
   }
   font-weight: unset;
   font-family: $font-text;
+  line-height: 1.3;
+  position: relative;
   a {
     font-family: $font-mono;
   }
@@ -53,10 +55,6 @@ h1 {
   font-size: 2rem;
 }
 
-h1, h2, h3 {
-  line-height: 1.3;
-}
-
 a {
   text-decoration: none;
   @include themify($themes) {
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -23,7 +23,7 @@
         {{ end }}
       </div>
       <div class="e-content">
-        {{ partial "components/headline-hash.html" .Content }}
+        {{ partial "components/content.html" .Content }}
       </div>
       <br>
       <br>
diff --git a/layouts/partials/components/content.html b/layouts/partials/components/content.html
@@ -0,0 +1,6 @@
+{{ $add_hash_after := . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" "${1} <a class=\"headline-hash\" href=\"#${2}\">#</a> ${3}" }} 
+{{ $h2_hash := $add_hash_after | replaceRE "(<h2 id=\"([^\"]+)\">)(.+)(</h2>)" "${1}<a class=\"before-hash h2\" href=\"#${2}\">##</a> ${3} ${4}" }} 
+{{ $h3_hash := $h2_hash | replaceRE "(<h3 id=\"([^\"]+)\">)(.+)(</h3>)" "${1}<a class=\"before-hash h3\" href=\"#${2}\">###</a> ${3} ${4}" }} 
+{{ $h4_hash := $h3_hash | replaceRE "(<h4 id=\"([^\"]+)\">)(.+)(</h4>)" "${1}<a class=\"before-hash h4\" href=\"#${2}\">####</a> ${3} ${4}" }} 
+{{ $checkbox_non_disabled := $h3_hash | replaceRE "disabled=\"\" type=\"checkbox" "type=\"checkbox" }}
+{{ $checkbox_non_disabled | safeHTML }}
diff --git a/layouts/partials/components/headline-hash.html b/layouts/partials/components/headline-hash.html
@@ -1 +0,0 @@
-{{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" "${1} <a class=\"headline-hash\" href=\"#${2}\">#</a> ${3}" | replaceRE "disabled=\"\" type=\"checkbox" "type=\"checkbox" | safeHTML }}