ybbond

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

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:
Massets/content.scss | 54+++++++++++++++++++++++++++++++++++++++++-------------
Massets/styles.scss | 2+-
Mlayouts/_default/_markup/render-image.html | 20+++++++++++---------
Alayouts/_default/_markup/render-link.html | 1+
Mlayouts/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 }}