chore: update styles

sturmfreico · Jul 14, 2024 · 9e65735 · 9e65735
1 parent 7e48204
commit 9e65735
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro
@@ -22,7 +22,7 @@ const image = (await findImage(post.image)) as ImageMetadata | undefined;
 const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') : '';
 ---
 
-<article class={`max-w-md mx-auto md:max-w-none grid gap-6 md:gap-8 ${image ? 'md:grid-cols-2' : ''}`}>
+<article class={`relative group max-w-md mx-auto md:max-w-none grid gap-6 md:gap-8 ${image ? 'md:grid-cols-2' : ''}`}>
   {
     image &&
       (link ? (
@@ -93,7 +93,7 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
         {
           link ? (
             <a
-              class="inline-block hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200"
+              class="inline-block group-hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200"
               href={link}
             >
               {post.title}
@@ -116,4 +116,11 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
       )
     }
   </div>
+  {
+    link && (
+      <a href={link} tabindex="0">
+        <span class="absolute inset-0" />
+      </a>
+    )
+  }
 </article>
diff --git a/src/components/blog/Tags.astro b/src/components/blog/Tags.astro
@@ -26,13 +26,13 @@ const { tags, class: className = 'text-sm', title = undefined, isCategory = fals
       </>
       <ul class={className}>
         {tags.map((tag) => (
-          <li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 rtl:mr-0 rtl:ml-2 mb-2 py-0.5 px-2 lowercase font-medium">
+          <li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 rtl:mr-0 rtl:ml-2 mb-2 lowercase font-medium">
             {!APP_BLOG?.tag?.isEnabled ? (
               tag.title
             ) : (
               <a
                 href={getPermalink(tag.slug, isCategory ? 'category' : 'tag')}
-                class="text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200"
+                class="relative inline-block z-10 text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200 py-0.5 px-2"
               >
                 {tag.title}
               </a>

diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro
@@ -89,17 +89,17 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
       >
         {
           links.map(({ text, href, links }) => (
-            <li class={links?.length ? 'dropdown' : ''}>
+            <li class={links?.length ? 'group dropdown' : 'group'}>
               {links?.length ? (
                 <>
                   <button
                     type="button"
-                    class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center whitespace-nowrap"
+                    class="hover:text-link dark:group-hover:text-white dark:md:group-hover:bg-[#11132b] px-4 py-3 flex items-center whitespace-nowrap rounded-tr rounded-tl"
                   >
                     {text}{' '}
                     <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 rtl:ml-0 rtl:mr-0.5 hidden md:inline" />
                   </button>
-                  <ul class="dropdown-menu md:backdrop-blur-md dark:md:bg-[#11132b] rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white/90 md:min-w-[200px] drop-shadow-xl dark:md:shadow-md dark:md:shadow-black/50">
+                  <ul class="dropdown-menu md:backdrop-blur-md dark:md:bg-[#11132b] rounded-bl rounded-br rounded-tr md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white/90 md:min-w-[200px] drop-shadow-xl dark:md:shadow-md dark:md:shadow-black/50">
                     {links.map(({ text: text2, href: href2 }) => (
                       <li>
                         <a
@@ -119,7 +119,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
               ) : (
                 <a
                   class:list={[
-                    'hover:text-link dark:hover:text-white px-4 py-3 flex items-center',
+                    'hover:text-link dark:hover:text-white dark:md:group-hover:bg-[#11132b] px-4 py-3 flex items-center rounded',
                     { 'aw-link-active': href === currentPath },
                   ]}
                   href={href}