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:
| M | assets/content.scss | | | 27 | ++++++++++++++++++++++++++- |
| M | assets/styles.scss | | | 8 | +++----- |
| M | layouts/_default/single.html | | | 2 | +- |
| A | layouts/partials/components/content.html | | | 6 | ++++++ |
| D | layouts/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 }}