feat: update styles and improve mastodon link

* add new color variables for dark mode
* update mastodon link icon to use color variant
* enhance comment section styles

Signed-off-by: Charles Chin <[email protected]>

Author: eallion

.vscode/settings.json

@@ -26,6 +26,7 @@
     "friendslinks",
     "Geeker",
     "goldmark",
+    "gotosocial",
     "hasard",
     "hugomod",
     "HUGOMODS",

assets/css/main.css

@@ -7,14 +7,10 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-orange-600: oklch(64.6% 0.222 41.116);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
-    --color-green-100: oklch(96.2% 0.044 156.743);
-    --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
-    --color-green-800: oklch(44.8% 0.119 151.328);
     --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-300: oklch(80.9% 0.105 251.813);
     --color-blue-400: oklch(70.7% 0.165 254.624);
@@ -2021,6 +2017,9 @@
   .text-zinc-700 {
     color: var(--color-zinc-700);
   }
+  .text-zinc-800 {
+    color: var(--color-zinc-800);
+  }
   .text-zinc-900 {
     color: var(--color-zinc-900);
   }
@@ -2468,6 +2467,13 @@
       }
     }
   }
+  .hover\:text-zinc-950 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-zinc-950);
+      }
+    }
+  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -3177,6 +3183,11 @@
       color: #adbac7;
     }
   }
+  .dark\:text-\[\#e7e9eb\] {
+    &:where(.dark, .dark *) {
+      color: #e7e9eb;
+    }
+  }
   .dark\:text-gray-400 {
     &:where(.dark, .dark *) {
       color: var(--color-gray-400);
@@ -3295,6 +3306,24 @@
       }
     }
   }
+  .dark\:hover\:text-\[\#e7e9eb\] {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          color: #e7e9eb;
+        }
+      }
+    }
+  }
+  .dark\:hover\:text-\[\#fff\] {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          color: #fff;
+        }
+      }
+    }
+  }
   .dark\:hover\:text-zinc-800 {
     &:where(.dark, .dark *) {
       &:hover {

layouts/_default/mastodon.html

@@ -431,12 +431,12 @@ <h1 id="title" class="text-4xl font-bold leading-normal">{{ .Title }}</h1>
           </div>
           <div class="flex-1 flex flex-row items-start min-w-0">
             <div class="flex flex-col flex-wrap items-start gap-0 mb-1">
-              <span class="mt-accout-name font-semibold hover:font-extrabold text-zinc-700-700 hover:text-zinc-900">${post.reblog ? post.reblog.account.display_name : 'Charles Chin'}</span>
-              <a href="https://e5n.cc/@eallion" target="_blank" rel="noopener noreferrer" class="mt-accout-id text-base decoration-auto no-underline hover:underline">${post.reblog ? post.reblog.account.acct : '@[email protected]'}</a>
+              <span class="mt-accout-name font-semibold hover:font-extrabold text-zinc-700 dark:text-[#e7e9eb] hover:text-zinc-900 dark:hover:text-[#fff]">${post.reblog ? post.reblog.account.display_name : 'Charles Chin'}</span>
+              <a href="https://e5n.cc/@eallion" target="_blank" rel="noopener noreferrer" class="mt-accout-id text-base decoration-auto no-underline hover:underline text-zinc-800 dark:text-[#adbac7] hover:text-zinc-950 dark:hover:text-[#e7e9eb]">${post.reblog ? post.reblog.account.acct : '@[email protected]'}</a>
             </div>
             <div class="inline md:hidden px-2 py-1.5 text-zinc-700 hover:text-zinc-900 text-sm ml-auto">
               <span class="mt-footer-date" data-created-at="${post.created_at}">
-                <a href="${post.url || 'https://e5n.cc/@eallion'}" target="_blank" rel="noopener noreferrer" class="no-underline text-zinc-600 hover:text-zinc-900-700">-</a>
+                <a href="${post.url || 'https://e5n.cc/@eallion'}" target="_blank" rel="noopener noreferrer" class="no-underline text-zinc-600 hover:text-zinc-900">-</a>
               </span>
             </div>
             <div class="hidden md:flex flex-row items-center gap-1.5 ml-auto px-2 text-sm ">

layouts/partials/comments.html

@@ -12,7 +12,7 @@ <h2 class="text-xl font-semibold">评论</h2>
     <div id="load-giscus-desc" class="block md:inline-block text-sm md:text-base lowercase md:capitalize mx-4">或者</div>
     <div id="link-to-mastodon" class="flex items-center relative border dark:border-[#cdd9e51a] bg-white dark:bg-[#22272e] rounded-full px-4 py-2 hover:bg-zinc-200 dark:hover:bg-[#252a33]">
         <span class="cursor-pointer">去</span>
-        <span class="ml-2 mr-1 cursor-pointer"><span class="relative block icon">{{ partial "icon.html" (dict "name" "mastodon-purple" "class" "") }}</span></span>
+        <span class="ml-2 mr-1 cursor-pointer"><span class="relative block icon">{{ partial "icon.html" (dict "name" "mastodon-color" "class" "") }}</span></span>
         <span class='ml-1 opacity-75 hover:opacity-100 cursor-pointer duration-300 ease-in-out'>
             <a href="https://api.eallion.com/gts/{{ .Params.slug | default .File.TranslationBaseName }}" target="_blank" rel="noopener">Mastodon</a>
         </span>