commit c0984d2f8f8729bb76416d312c4ef4abb1f403f0 parent 1021d61504ef7f11930989b03f6d32892b33e4a3 Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Sat, 9 May 2020 17:14:35 +0700 styles: unordered, ordered, checkbox list improvements Diffstat:
| M | assets/content.scss | | | 54 | +++++++++++++++++++++++++++++++++++++++++------------- |
| M | assets/styles.scss | | | 2 | +- |
| M | layouts/_default/_markup/render-image.html | | | 20 | +++++++++++--------- |
| A | layouts/_default/_markup/render-link.html | | | 1 | + |
| M | layouts/partials/components/content.html | | | 3 | ++- |
5 files changed, 56 insertions(+), 24 deletions(-)
diff --git a/assets/content.scss b/assets/content.scss @@ -91,26 +91,54 @@ } } + ol { + margin: 1.5em 0; + padding: 0; + list-style: none; + counter-reset: my-awesome-counter; + li { + counter-increment: my-awesome-counter; + list-style-position: outside; + margin-bottom: 0.2em; + span { + position: relative; + &:before { + position: absolute; + right: 0.5em; + top: 0.25em; + content: counter(my-awesome-counter)'.'; + font-size: 0.8em; + @include themify($themes) { + color: themed('color-red'); + } + } + } + } + } + ul { + margin: 1.5em 0; padding: 0; + list-style: none; li { + margin-bottom: 0.2em; position: relative; - list-style: none; - padding-left: 20px; - margin-bottom: 10px; - &:before { - display: inline-block; - content: "- "; - position: absolute; - z-index: 1; - width: 20px; - @include themify($themes) { - color: themed('color-red'); + span { + position: relative; + &:before { + display: inline-block; + content: "– "; + position: absolute; + z-index: 1; + width: 20px; + @include themify($themes) { + color: themed('color-red'); + } + left: -1.2em; } - left: 0; } input { - margin-left: -20px; + margin-left: -1.9em; position: absolute; z-index: 2; top: 3.9px; diff --git a/assets/styles.scss b/assets/styles.scss @@ -57,7 +57,7 @@ h1 { a { text-decoration: none; - &:not(.button h2) { + &:not(.button, h2) { &:hover { outline-style: solid; outline-width: 0.3em; diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html @@ -14,15 +14,17 @@ <figure> <center> - <img - style="max-width: 100%; height: auto;" - src="{{ $thumb }}" - width="{{ $original.Width }}" - height="{{ $original.Height }}" - alt="{{ default $text "image" }}" - data-src="{{$original.RelPermalink}}" - class="lazy" - /> + <a href={{ $original.RelPermalink }} class="button"> + <img + style="max-width: 100%; height: auto;" + src="{{ $thumb }}" + width="{{ $original.Width }}" + height="{{ $original.Height }}" + alt="{{ default $text "image" }}" + data-src="{{$original.RelPermalink}}" + class="lazy" + /> + </a> {{with $text }} <figcaption>{{ . }}</figcaption> {{end}} diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html @@ -0,0 +1 @@ +<a href={{ .Destination | safeURL }}>{{ .Text | safeHTML }}</a> diff --git a/layouts/partials/components/content.html b/layouts/partials/components/content.html @@ -2,5 +2,6 @@ {{ $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" }} +{{ $list_span := $h4_hash | replaceRE "<li>" "<li><span></span>" }} +{{ $checkbox_non_disabled := $list_span | replaceRE "disabled=\"\" type=\"checkbox" "type=\"checkbox" }} {{ $checkbox_non_disabled | safeHTML }}