dotfiles

commit 216901c375a73178a28397073f32d1888ccc18c2
parent 18866d33e20f363718fe360118a472528cf28a3c
Author: maydayv7 <maydayv7@gmail.com>
Date:   Thu, 13 Feb 2025 02:41:59 +0530

fix(`site`): Checkboxes and pagination

Also change some emojis

Diffstat:

6 files changed, 63 insertions(+), 37 deletions(-)
diff --git a/site/content/anime.md b/site/content/anime.md
@@ -134,6 +134,6 @@ comments = true
 
 ---
 
-☐ --> Watch Status  
+☐ --> Watch Status  
 <sup>\*</sup> --> Incomplete  
 <sup>#</sup> --> Multiple Seasons
diff --git a/site/sass/_main.scss b/site/sass/_main.scss
@@ -186,8 +186,26 @@ input {
   background: var(--background);
   border-color: var(--accent-secondary);
   color: var(--color);
-  font-family: "JetBrainsMono";
+  font-family: inherit;
   padding: 0.2rem;
+
+  &[type="checkbox"] {
+    appearance: none;
+    display: inline-flex;
+    vertical-align: bottom;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--accent-secondary);
+    height: 1rem;
+    width: 1rem;
+
+    &:checked:after {
+      content: "";
+      background-color: var(--accent);
+      height: 100%;
+      width: 100%;
+    }
+  }
 }
 
 @media (max-width: $phone-max-width) {
diff --git a/site/sass/_pagination.scss b/site/sass/_pagination.scss
@@ -6,35 +6,52 @@
   input {
     align-items: center;
     height: 30px;
-    width: 35px;
-  }
-
-  input[type="number"] {
-    -moz-appearance: none;
-
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-      cursor: pointer;
-      opacity: 1 !important;
-      text-align: center;
-      -webkit-appearance: none !important;
+    width: 30px;
+    padding: 8px;
+    margin: 0 10px 0 2px;
+
+    &[type="number"] {
+      -moz-appearance: textfield;
+
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        cursor: pointer;
+        opacity: 1 !important;
+        text-align: center;
+        -webkit-appearance: none !important;
+      }
     }
   }
 
   button {
     background: var(--background);
     border-color: var(--accent-secondary);
-    border-radius: 10px;
+    border-radius: 5px;
     color: var(--color);
-    font-family: "JetBrainsMono";
-    padding: 0.2rem;
-    width: 40px;
+    font-family: inherit;
+    padding: 3px 8px;
+
+    &:active {
+      background-color: var(--accent-alpha-70);
+    }
+
+    &:focus {
+      background-color: var(--accent);
+      outline: 0;
+    }
+
+    &:hover {
+      background-color: var(--accent-alpha-20);
+      color: var(--accent-secondary);
+      cursor: pointer;
+    }
   }
 
   &__buttons {
-    align-items: center;
     display: grid;
     grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    justify-content: end;
 
     &-input {
       grid-column: 2;
@@ -42,20 +59,12 @@
 
     &-previous {
       grid-column: 1;
-      justify-self: right;
-
-      &.button__icon {
-        margin-right: 8px;
-      }
+      justify-self: left;
     }
 
     &-next {
       grid-column: 3;
-      justify-self: left;
-
-      &.button__icon {
-        margin-left: 8px;
-      }
+      justify-self: right;
     }
   }
 
diff --git a/site/static/js/clipboard.js b/site/static/js/clipboard.js
@@ -3,14 +3,14 @@ function addCopyButtons(clipboard) {
     var button = document.createElement("button");
     button.className = "copy";
     button.type = "button";
-    button.innerText = "📋 Copy";
+    button.innerText = " Copy";
     button.addEventListener("click", function () {
       clipboard.writeText(codeBlock.innerText).then(
         function () {
           button.blur();
           button.innerText = "Copied!";
           setTimeout(function () {
-            button.innerText = "📋 Copy";
+            button.innerText = " Copy";
           }, 2000);
         },
         function (error) {
diff --git a/site/templates/macros/pagination.html b/site/templates/macros/pagination.html
@@ -4,8 +4,7 @@
     {% if paginator.previous -%}
     <span class="pagination__buttons-previous">
       <a href="{{ paginator.previous }}">
-        <span class="button_icon">←</span>
-        <span class="button__text">newer</span>
+        <span class="button__text"><- newer</span>
       </a>
     </span>
     {% endif -%} {% if paginator.number_pagers > 1 -%}
@@ -22,15 +21,15 @@
           value="{{ paginator.current_index }}"
           min="1"
           max="{{ paginator.number_pagers }}"
+          oninput="this.style.width = (this.value.length + 3) + 'ch';"
           required />/ {{ paginator.number_pagers }}
-        <button class="">Go</button>
+        <button>Go</button>
       </form>
     </div>
     {% endif -%} {% if paginator.next -%}
     <span class="pagination__buttons-next">
       <a href="{{ paginator.next }}">
-        <span class="button__text">older</span>
-        <span class="button_icon">→</span>
+        <span class="button__text">older -></span>
       </a>
     </span>
     {% endif -%}
diff --git a/site/templates/macros/posts.html b/site/templates/macros/posts.html
@@ -11,7 +11,7 @@
 {% endmacro meta %} {% macro date(date, updated) %}
 <span class="post-date">
   {%- if date -%} <span class="post-icon"></span> {{ date | date(format="%d.%m.%Y") }} {%- endif -%} {%- if date and updated -%} <span class="post-icon">,</span> {%- endif -%} {%- if
-  updated -%} 🖉 {{ updated | date(format="%d.%m.%Y") }} :: {%- endif -%}
+  updated -%} <span class="post-icon"></span> {{ updated | date(format="%d.%m.%Y") }} :: {%- endif -%}
 </span>
 {% endmacro date %} {% macro taxonomies(taxonomy) %} {% if taxonomy.series -%}
 {{ posts::series(series=taxonomy.series) }} {% endif -%} {% if taxonomy.tags -%}