Various style updates

src/components/PostCard.astro

@@ -10,10 +10,8 @@ const { title, description: blurb, pubDate } = post.data;
 const { slug } = post;
 ---
 
-<div
-    class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink"
->
-    <div class="card-body p-6 break-words">
+<div class="card bg-accent w-full max-w-sm shrink shadow-md">
+    <div class="card-body break-words">
         <h2
             class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words text-base-100"
         >
@@ -52,10 +50,10 @@ const { slug } = post;
             )
         }
 
-        <div class="card-actions justify-end mt-4">
+        <div class="card-actions justify-end">
             <a
                 href={`/post/${slug}`}
-                class="btn btn-sm bg-base-100 hover:bg-secondary text-accent"
+                class="btn btn-circle text-accent"
                 aria-label={`Read more about ${title}`}
             >
                 <Icon name="mdi:arrow-right" class="text-lg" />

src/components/ProjectCard.astro

@@ -9,26 +9,24 @@ interface Props {
 const { project } = Astro.props;
 ---
 
-<div
-    class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink"
->
-    <div class="card-body p-6 break-words">
+<div class="card bg-accent w-full max-w-sm shrink shadow-md">
+    <div class="card-body break-words">
         <h2
             class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words text-base-100"
         >
             {project.name}
         </h2>
 
-        <p class="text-center break-words my-4 text-base-100">
+        <p class="text-center break-words text-base-100">
             {project.description}
         </p>
 
-        <div class="card-actions justify-end mt-4">
+        <div class="card-actions justify-end">
             <a
                 href={project.link}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="btn btn-sm bg-base-100 hover:bg-secondary text-accent"
+                class="btn btn-circle text-accent"
                 aria-label={`Visit ${project.name}`}
             >
                 <Icon name="mdi:link" class="text-lg" />

src/components/ResumeDownloadButton.tsx

@@ -49,7 +49,7 @@ export default function ResumeDownloadButton({
       <button
         onClick={handleDownload}
         disabled={isLoading}
-        class={`btn btn-primary rounded-full inline-flex items-center gap-2 text-sm sm:text-base ${className}`}
+        class={`btn bg-primary rounded-full inline-flex items-center gap-2 text-sm sm:text-base ${className}`}
       >
         {isLoading ? (
           <>

src/components/ResumeSettingsModal.tsx

@@ -1,6 +1,6 @@
 import { useState } from "preact/hooks";
 import { useSignal } from "@preact/signals";
-import { Settings } from "lucide-preact";
+import { Settings, X } from "lucide-preact";
 
 interface ResumeSettingsModalProps {
   className?: string;
@@ -162,7 +162,7 @@ export default function ResumeSettingsModal({
       {/* Floating Settings Button */}
       <button
         onClick={openModal}
-        class={`fixed top-4 right-4 z-20 btn btn-square btn-secondary hover:bg-primary opacity-100 translate-y-0 min-h-[44px] min-w-[44px] ${className}`}
+        class={`fixed top-4 right-4 z-20 bg-secondary hover:bg-primary btn btn-circle ${className}`}
         aria-label="Resume Settings"
       >
         <Settings class="text-lg" />
@@ -175,9 +175,9 @@ export default function ResumeSettingsModal({
             <h3 class="font-bold text-lg">Resume Generator</h3>
             <button
               onClick={closeModal}
-              class="btn btn-sm btn-circle btn-ghost"
+              class="btn btn-circle bg-secondary hover:bg-primary"
             >
-              ✕
+              <X className="text-lg" />
             </button>
           </div>
 
@@ -189,10 +189,10 @@ export default function ResumeSettingsModal({
 
             {/* Action Buttons */}
             <div class="flex flex-wrap gap-2 mb-6">
-              <button onClick={downloadTemplate} class="btn btn-primary btn-sm">
+              <button onClick={downloadTemplate} class="btn bg-primary btn-sm">
                 Download Template
               </button>
-              <button onClick={loadTemplate} class="btn btn-secondary btn-sm">
+              <button onClick={loadTemplate} class="btn bg-secondary btn-sm">
                 Load Template in Editor
               </button>
             </div>

src/components/ScrollUpButton.tsx

@@ -28,10 +28,9 @@ export default function ScrollUpButton() {
 
   return (
     <button
-      type="button"
       onClick={scrollToTop}
-      class={`fixed bottom-20 right-4 z-20 bg-secondary hover:bg-primary
-            p-3 rounded-full transition-all duration-300 min-h-[44px] min-w-[44px] inline-flex items-center justify-center
+      class={`fixed bottom-4 right-4 z-20 bg-secondary hover:bg-primary
+            btn btn-circle transition-all duration-300
             ${
               isVisible.value
                 ? "opacity-100 translate-y-0"

src/components/TalkCard.astro

@@ -39,7 +39,7 @@ const { talk } = Astro.props;
                 href={talk.link}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
+                class="btn btn-circle text-accent"
                 aria-label={`Visit ${talk.name}`}
             >
                 <Icon name="mdi:link" class="text-lg" />