perf: modify checkbox icon with Liquid

Also optimize list padding start

_includes/refactor-content.html

@@ -31,11 +31,15 @@
   %}
 {% endif %}
 
-<!-- Add attribute 'hide-bullet' to the checkbox list -->
+<!-- Change the icon of checkbox -->
-
+{% if _content contains '<input type="checkbox"' %}
-{% if _content contains '<li class="task-list-item"><' %}
   {% assign _content = _content
-    | replace: '"task-list-item"><', '"task-list-item" hide-bullet><'
+    | replace:
+        '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />',
+        '<i class="fas fa-check-circle fa-fw checked"></i>'
+    | replace:
+        '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />',
+        '<i class="far fa-circle fa-fw"></i>'
   %}
 {% endif %}
 

_javascript/utils/checkbox.js

@@ -1,12 +0,0 @@
-/*
- * Create a more beautiful checkbox
- */
-
-$(function() {
-  /* hide browser default checkbox */
-  $("input[type=checkbox]").addClass("unloaded");
-  /* create checked checkbox */
-  $("input[type=checkbox][checked]").before("<i class=\"fas fa-check-circle checked\"></i>");
-  /* create normal checkbox */
-  $("input[type=checkbox]:not([checked])").before("<i class=\"far fa-circle\"></i>");
-});

_sass/addon/commons.scss

@@ -468,31 +468,39 @@ img[data-src] {
 
     li {
       margin: 0.25rem 0;
-      padding-left: 0.4rem;
+      padding-left: 0.25rem;
     }
 
     ol,
     ul {
-      -webkit-padding-start: 1.25rem;
+      -webkit-padding-start: 1rem;
-      padding-inline-start: 1.25rem;
+      padding-inline-start: 1rem;
       margin: 0.5rem 0;
     }
   }
 
-  ul {
+  ul.task-list {
-    /* attribute 'hide-bullet' was added by liquid */
+    -webkit-padding-start: 1.25rem;
-    .task-list-item[hide-bullet] {
+    padding-inline-start: 1.25rem;
+
+    li {
       list-style-type: none;
+      padding-left: 0;
 
       > i { /* checkbox icon */
-        margin: 0 0.5rem 0.2rem -1.4rem;
+        width: 2rem;
-        vertical-align: middle;
+        margin-left: -1.25rem;
         color: var(--checkbox-color);
 
         &.checked {
           color: var(--checkbox-checked-color);
         }
       }
+
+      ul {
+        -webkit-padding-start: 1.75rem;
+        padding-inline-start: 1.75rem;
+      }
     }
 
     input[type="checkbox"] {

gulpfile.js/tasks/js.js

@@ -46,7 +46,6 @@ const postJs = () => {
       `${JS_SRC}/commons/*.js`,
       `${JS_SRC}/utils/img-extra.js`,
       `${JS_SRC}/utils/locale-datetime.js`,
-      `${JS_SRC}/utils/checkbox.js`,
       `${JS_SRC}/utils/clipboard.js`,
       // 'smooth-scroll.js' must be called after ToC is ready
       `${JS_SRC}/utils/smooth-scroll.js`
@@ -65,7 +64,6 @@ const categoriesJs = () => {
 const pageJs = () => {
   return concatJs([
       `${JS_SRC}/commons/*.js`,
-      `${JS_SRC}/utils/checkbox.js`,
       `${JS_SRC}/utils/img-extra.js`,
       `${JS_SRC}/utils/clipboard.js`,
       `${JS_SRC}/utils/smooth-scroll.js`