General fixes

.vscode/extensions.json

@@ -4,6 +4,8 @@
     "inlang.vs-code-extension",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "bradlc.vscode-tailwindcss"
+    "bradlc.vscode-tailwindcss",
+    "prisma.prisma",
+    "csstools.postcss"
   ]
 }

src/components/header/Dropdown.astro

@@ -6,7 +6,7 @@ import NavButton from './NavButton.astro'
   <NavButton class='dropdown-btn group relative px-0'>
     <div class='after:content-["▼"] after:text-xs'><slot /></div>
     <div
-      class='dropdown-items md:absolute flex-col bg-gray hidden md:group-hover:flex top-full left-0 py-1 min-w-36 rounded-md md:rounded-t-none mt-1.5 md:mt-0'
+      class='dropdown-items md:absolute flex-col bg-gray hidden md:group-hover:flex top-full left-0 min-w-36 rounded-md md:rounded-t-none mt-1.5 md:mt-0'
     >
       <slot name='items' />
     </div>

src/components/header/NavButton.astro

@@ -5,11 +5,11 @@ import clsx from 'clsx'
 const { class: className } = Astro.props
 ---
 
-<Button
-  className={clsx(
-    'w-full md:w-fit md:h-full bg-dark hover:bg-dark-hover py-3.5 md:py-1 px-2 rounded-none text-left md:text-center',
+<button
+  class:list={[
+    'w-full md:w-fit md:h-full bg-dark hover:bg-gray py-3.5 md:py-1 px-2 rounded-none text-left md:text-center',
     className
-  )}
+  ]}
 >
   <slot />
-</Button>
+</button>

src/components/sidebar/CommentCarousel.astro

@@ -14,14 +14,7 @@ const comments = await prismaClient.comments.findMany({
 
 <SidebarSection>
   <Looper comments={comments} client:only='react'>
-    <Icon name='arrow-right' slot='arrowRight' class='group-hover:fill-black' height={30} width={15} fill='white' />
-    <Icon
-      name='arrow-right'
-      slot='arrowLeft'
-      class='group-hover:fill-black scale-x-[-1]'
-      height={30}
-      width={15}
-      fill='white'
-    />
+    <Icon name='arrow-right' slot='arrowLeft' class='scale-x-[-1]' height={30} width={15} />
+    <Icon name='arrow-right' slot='arrowRight' height={30} width={15} />
   </Looper>
 </SidebarSection>

src/components/sidebar/CommentCarousel/Looper.tsx

@@ -37,10 +37,7 @@ export default function Looper(props: Props) {
     <div className='text-md/6 font-extralight'>
       <div>{comment.text}</div>
       <div className='mt-1'>
-        -{' '}
-        <a href={`/album/${comment.albums?.id}`} className='hover:text-hover-link hover:underline'>
-          {comment.albums?.title}
-        </a>
+        - <a href={`/album/${comment.albums?.id}`}>{comment.albums?.title}</a>
       </div>
       {isMultiple ? (
         <div className='flex mt-2.5'>

src/pages/index.astro

@@ -32,14 +32,8 @@ const lastAlbums = await prismaClient.albums.findMany({
         }
       </div>
       <div class='flex gap-x-2 py-4'>
-        <button
-          class='bg-dark uppercase rounded-md text-2xl p-1.5 font-semibold w-1/2 hover:text-hover-link hover:underline'
-          >{m.moreGameReleases}</button
-        >
-        <button
-          class='bg-dark uppercase rounded-md text-2xl p-1.5 font-semibold w-1/2 hover:text-hover-link hover:underline'
-          >{m.moreAnimReleases}</button
-        >
+        <a class='bg-dark uppercase rounded-md text-2xl p-1.5 font-semibold w-1/2'>{m.moreGameReleases}</a>
+        <a class='bg-dark uppercase rounded-md text-2xl p-1.5 font-semibold w-1/2'>{m.moreAnimReleases}</a>
       </div>
       <hr />
       <h1 class='uppercase font-medium tracking-wide text-5xl drop-shadow-2xl mt-5 mb-2 text-center'>
@@ -53,10 +47,7 @@ const lastAlbums = await prismaClient.albums.findMany({
         }
       </div>
       <div class='flex gap-x-2 py-4'>
-        <button
-          class='bg-dark uppercase rounded-md text-2xl p-1.5 font-semibold w-full hover:text-hover-link hover:underline'
-          >{m.moreLastAdded}</button
-        >
+        <a class='bg-dark uppercase rounded-md text-2xl p-1.5 font-semibold w-full'>{m.moreLastAdded}</a>
       </div>
     </div>
     <Sidebar />

src/styles/global.css

@@ -27,4 +27,19 @@
     margin-top: 1rem;
     margin-bottom: 1rem;
   }
+
+  button,
+  a {
+    cursor: pointer;
+    text-align: center;
+
+    :disabled {
+      cursor: none;
+    }
+  }
+
+  a:hover {
+    color: var(--color-hover-link);
+    text-decoration-line: underline;
+  }
 }