some style to compensate for categories having two words now

FusionAuth · Aug 14, 2023 · 76f2773 · 76f2773
1 parent fb89a63
commit 76f2773
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/astro/src/layouts/Blog.astro b/astro/src/layouts/Blog.astro
@@ -204,7 +204,7 @@ const markdownStyles = [
         <div>
           { relatedPost.categories && relatedPost.categories.map(category =>
             <a href={ getHref(category, 'category') }>
-              <li class="mr-3 capitalize font-bold inline-block mb-3 text-base text-indigo-500">{ category }</li>
+              <li class="ease-in duration-75 hover:text-indigo-300 hover:underline mr-3 capitalize font-bold inline-block mb-3 text-base text-indigo-500">{ category }</li>
             </a>
           )}
         </div>

diff --git a/astro/src/layouts/BlogIndex.astro b/astro/src/layouts/BlogIndex.astro
@@ -67,7 +67,7 @@ const getPaginationRef = (stop) => {
             <div>
               {first.categories && first.categories.map(cat =>
                 <a href={ getHref(cat, 'category') }>
-                  <li class="capitalize font-bold inline-block mb-3 text-base text-indigo-500">{ cat }</li>
+                  <li class="ease-in duration-75 hover:text-indigo-300 hover:underline capitalize font-bold inline-block mb-3 mr-3 text-base text-indigo-500">{ cat }</li>
                 </a>
               )}
             </div>
@@ -103,7 +103,7 @@ const getPaginationRef = (stop) => {
             <div>
               {blog.categories && blog.categories.map(cat =>
                 <a href={ getHref(cat, 'category') }>
-                  <li class="capitalize font-bold inline-block mb-3 text-base text-indigo-500">{ cat }</li>
+                  <li class="ease-in duration-75 hover:text-indigo-300 hover:underline capitalize font-bold inline-block mb-3 mr-3 text-base text-indigo-500">{ cat }</li>
                 </a>
               )}
             </div>

diff --git a/astro/src/pages/blog/index.astro b/astro/src/pages/blog/index.astro
@@ -50,7 +50,7 @@ const latestPosts = blogs.filter(blog => !onThePage.includes(blog)).slice(0, 4);
           <div>
             {latestPost.categories && latestPost.categories.map(cat =>
               <a href={ getHref(cat, 'category')}>
-                <li class="capitalize font-bold inline-block mb-3 text-base text-indigo-500">{ cat }</li>
+                <li class="ease-in duration-75 hover:text-indigo-300 hover:underline capitalize font-bold inline-block mb-3 mr-3 text-base text-indigo-500">{ cat }</li>
               </a>
             )}
           </div>
@@ -90,8 +90,8 @@ const latestPosts = blogs.filter(blog => !onThePage.includes(blog)).slice(0, 4);
           </div>
           <div class="pr-6 lg:mt-0 2xl:mt-0">
             <div>
-              <a href={ getHref(pageData.categoryCallouts[idx].toLowerCase(), 'category')}>
-                <li class="capitalize font-bold inline-block mb-3 text-base text-indigo-500">{ pageData.categoryCallouts[idx] }</li>
+              <a href={ getHref(pageData.categoryCallouts[idx], 'category')}>
+                <li class="ease-in duration-75 hover:text-indigo-300 hover:underline capitalize font-bold inline-block mb-3 text-base text-indigo-500">{ pageData.categoryCallouts[idx] }</li>
               </a>
             </div>
             <h3 class="font-bold leading-6 mb-3 normal-case text-lg text-slate-900 md:font-Inter md:font-bold md:leading-7 md:text-xl">
@@ -127,7 +127,7 @@ const latestPosts = blogs.filter(blog => !onThePage.includes(blog)).slice(0, 4);
           <div>
             {pinned.categories && pinned.categories.map(cat =>
               <a href={ getHref(cat, 'category') }>
-                <li class="capitalize font-bold inline-block mb-3 text-base text-indigo-500">{ cat }</li>
+                <li class="ease-in duration-75 hover:text-indigo-300 hover:underline capitalize font-bold inline-block mb-3 mr-3 text-base text-indigo-500">{ cat }</li>
               </a>
             )}
           </div>
@@ -172,7 +172,7 @@ const latestPosts = blogs.filter(blog => !onThePage.includes(blog)).slice(0, 4);
             <div>
               {post.categories && post.categories.map(cat =>
                 <a href={ getHref(cat, 'category') }>
-                  <li class="capitalize font-bold inline-block mb-3 text-base text-indigo-500">{ cat }</li>
+                  <li class="ease-in duration-75 hover:text-indigo-300 hover:underline capitalize font-bold inline-block mb-3 mr-3 text-base text-indigo-500">{ cat }</li>
                 </a>
               )}
             </div>