fix: tags spread in index

fix: reading time for first post fix: toc contrast in post
therealzaybee · Oct 19, 2023 · 6dd23bf · 6dd23bf
1 parent 927b858
commit 6dd23bf
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git a/assets/built/index.css b/assets/built/index.css
@@ -2676,7 +2676,7 @@ body.dark {
 
 :is(.dark .toc-container ol.toc-list .toc-list-item a){
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
+  color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
 :is(.dark .toc-container ol.toc-list .toc-list-item a:hover){

diff --git a/assets/css/index.css b/assets/css/index.css
@@ -128,7 +128,7 @@ body.dark {
     margin-top: 7px;
     display:inline-block;
     word-break: break-all;
-    @apply text-gray-300 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400;
+    @apply text-gray-300 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-400;
 }
 
 .toc-container ol.toc-list .toc-list-item.is-active-li {

diff --git a/index.hbs b/index.hbs
@@ -11,15 +11,18 @@
                 <a href="{{ url }}" class="block overflow-hidden rounded">
                     {{> "picture" eager="true" picture_classes="w-full rounded aspect-[16/9] lg:aspect-[5/3] object-cover transform hover:scale-105 transition duration-500" }}
                 </a>
-                <div class="flex gap-3 mt-4">
-                    {{#foreach tags  }}
-                        <a href="{{ url }}" class="inline-flex items-center font-bold leading-sm capitalize text-indigo-500">{{ name }}</a>
+                <div class="mt-4 flex items-center gap-2 font-bold leading-sm capitalize text-indigo-500 flex-wrap">
+                    {{#foreach tags }}
+                        {{#if @index }}
+                            <span class="" aria-hidden="true">&bull;</span>
+                        {{/if}}
+                            <a href="{{url}}" class="line-clamp max-w-[150px] xl:max-w-[170px]">{{name}}</a>
                     {{/foreach }}
                 </div>
                 <div class="flex flex-col gap-3">
                     <a href="{{ url }}" class="text-xl lg:text-3xl font-semibold mt-4 inline-block">{{ title }}</a>
                     <a href="{{ url }}" class="text-lg text-gray-500 dark:text-gray-400 line-clamp-2">{{ excerpt }}</a>
-                    <p class="mt-4 text-sm text-gray-400 dark:text-gray-500 tracking-tight flex items-center gap-2"> {{date}} <span class="h-1 w-1 rounded-full bg-gray-400 dark:bg-gray-600"></span> {{plural featured.[0].reading_time empty="" singular="% min" plural="% mins"}}</p>
+                    <p class="text-sm text-gray-400 dark:text-gray-500 tracking-tight flex items-center gap-2 mt-4"> {{date}} <span class="h-1 w-1 rounded-full bg-gray-400 dark:bg-gray-600"></span> {{reading_time minute="1 min" minutes="% mins"}}</p>
                 </div>
             </div>
         {{/match}}
@@ -35,9 +38,12 @@
                             {{> "picture" picture_classes="block object-cover lg:min-w-48 lg:h-40 w-full aspect-[16/9] rounded transform hover:scale-105 transition duration-500" }}
                         </a>
                         <div class="sm:w-[60%] mt-4 sm:mt-0">
-                            <div class="flex gap-3">
-                                {{#foreach tags  }}
-                                    <a href="{{ url }}" class="inline-flex items-center font-bold leading-sm capitalize text-indigo-500">{{ name }}</a>
+                            <div class="mt-4 flex items-center gap-2 font-bold leading-sm capitalize text-indigo-500 flex-wrap">
+                                {{#foreach tags }}
+                                    {{#if @index }}
+                                        <span class="" aria-hidden="true">&bull;</span>
+                                    {{/if}}
+                                        <a href="{{url}}" class="line-clamp max-w-[150px] xl:max-w-[170px]">{{name}}</a>
                                 {{/foreach }}
                             </div>
                             <a href="{{ url }}" class="mt-4 inline-block text-xl font-semibold">{{ title }}</a>

diff --git a/partials/card.hbs b/partials/card.hbs
@@ -2,14 +2,16 @@
     <a class="block overflow-hidden rounded cursor-pointer" href="{{url}}">
         {{> "picture" picture_classes="w-full rounded aspect-[16/9] object-cover cursor-pointer transform hover:scale-105 transition duration-500" }}
     </a>
-    {{!-- <p class="mt-4 text-sm text-gray-400 dark:text-gray-600 tracking-tight flex items-center gap-2"> {{date}} <span class="h-1 w-1 rounded-full bg-gray-400 dark:bg-gray-600"></span> {{reading_time minute="1 min" minutes="% mins"}}</p> --}}
-    {{#if primary_tag}}
-        <div class="mt-4 flex gap-3">
-            {{#foreach tags}}
-                <a href="{{ url }}" class="inline-flex items-center font-bold leading-sm capitalize text-indigo-500">{{ name }}</a>
-            {{/foreach}}
-        </div>
-    {{/if}}
+    <div class="mt-4 flex items-center gap-2 font-bold leading-sm capitalize text-indigo-500 flex-wrap">
+        {{#if primary_tag}}
+            {{#foreach tags }}
+                {{#if @index }}
+                    <span class="" aria-hidden="true">&bull;</span>
+                {{/if}}
+                <a href="{{url}}" class="line-clamp max-w-[150px] xl:max-w-[170px]">{{name}}</a>
+            {{/foreach }}
+        {{/if}}
+    </div>
     <a href="{{ url }}" class="{{#if title_classes }} {{ title_classes }} {{ else }} mt-4 inline-block text-2xl font-bold {{/if}}" style="letter-spacing: -0.5px;">{{ title }}</a>
     {{#unless no_excerpt }}
         <p class="text-gray-500 dark:text-gray-400 mt-2 line-clamp-2">{{ excerpt }}</p>