1 files changed, 184 insertions, 0 deletions
diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index 36e7359..e15d756 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -194,7 +194,146 @@ html.theme-light {
     border-color: var(--border);
   }
 
+  /* Button component styles */
+  .btn {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded font-bold transition-all duration-200 cursor-pointer;
+    background-color: var(--accent);
+    color: #ffffff;
+    border: none;
+    outline: none;
+  }
+
+  .btn:hover:not(:disabled) {
+    opacity: 0.85;
+    transform: translateY(-1px);
+  }
+
+  .btn:focus-visible {
+    @apply ring-2 ring-offset-2;
+    ring-color: var(--accent);
+    ring-offset-color: var(--bg);
+  }
+
+  .btn:active:not(:disabled) {
+    transform: translateY(0);
+    opacity: 0.75;
+  }
+
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Button variants */
+  .btn-primary {
+    background-color: var(--accent);
+    color: #ffffff;
+  }
+
+  .btn-primary:hover:not(:disabled) {
+    background-color: var(--accent);
+  }
+
+  .btn-secondary {
+    background-color: var(--accent2);
+    color: var(--bg);
+    font-weight: 600;
+  }
+
+  .btn-secondary:hover:not(:disabled) {
+    background-color: var(--accent2);
+  }
+
+  .btn-outline {
+    background-color: transparent;
+    color: var(--accent);
+    border: 2px solid var(--accent);
+  }
+
+  .btn-outline:hover:not(:disabled) {
+    background-color: var(--accent);
+    color: #ffffff;
+  }
+
+  /* Button sizes */
+  .btn-sm {
+    @apply px-3 py-1 text-sm;
+  }
+
+  .btn-lg {
+    @apply px-6 py-3 text-lg;
+  }
+
+  /* Icon button (for icons without text) */
+  .btn-icon {
+    @apply p-2 rounded-full inline-flex items-center justify-center;
+    width: 40px;
+    height: 40px;
+  }
+
+  .btn-icon svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  /* Badge base style */
+  .badge {
+    @apply inline-flex items-center px-2.5 py-1 rounded text-sm font-mono font-semibold whitespace-nowrap transition-all duration-200;
+    border: 1px solid;
+  }
+
   /* Article type badge styles */
+  .badge-tech {
+    color: var(--type-tech);
+    background-color: rgba(168, 85, 247, 0.1);
+    border-color: rgba(168, 85, 247, 0.3);
+  }
+
+  .badge-tech:hover {
+    background-color: rgba(168, 85, 247, 0.2);
+  }
+
+  .badge-life {
+    color: var(--type-life);
+    background-color: rgba(245, 158, 11, 0.1);
+    border-color: rgba(245, 158, 11, 0.3);
+  }
+
+  .badge-life:hover {
+    background-color: rgba(245, 158, 11, 0.2);
+  }
+
+  .badge-quote {
+    color: var(--type-quote);
+    background-color: rgba(0, 255, 136, 0.1);
+    border-color: rgba(0, 255, 136, 0.3);
+  }
+
+  .badge-quote:hover {
+    background-color: rgba(0, 255, 136, 0.2);
+  }
+
+  .badge-link {
+    color: var(--type-link);
+    background-color: rgba(56, 189, 248, 0.1);
+    border-color: rgba(56, 189, 248, 0.3);
+  }
+
+  .badge-link:hover {
+    background-color: rgba(56, 189, 248, 0.2);
+  }
+
+  .badge-photo {
+    color: var(--type-photo);
+    background-color: rgba(236, 72, 153, 0.1);
+    border-color: rgba(236, 72, 153, 0.3);
+  }
+
+  .badge-photo:hover {
+    background-color: rgba(236, 72, 153, 0.2);
+  }
+
+  /* Legacy type-* classes for compatibility (with badge styling) */
   .type-tech {
     color: var(--type-tech);
     background-color: rgba(168, 85, 247, 0.1);
@@ -220,6 +359,51 @@ html.theme-light {
     background-color: rgba(236, 72, 153, 0.1);
   }
 
+  /* Card component */
+  .card {
+    @apply border border-border rounded-lg overflow-hidden transition-all duration-200;
+    box-shadow: 0 0 20px var(--accent-glow);
+  }
+
+  .card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0 30px var(--accent-glow);
+  }
+
+  .card-image {
+    @apply aspect-video object-cover w-full;
+  }
+
+  .card-body {
+    @apply p-5 md:p-6 space-y-3;
+  }
+
+  .card-title {
+    @apply text-xl font-semibold;
+  }
+
+  .card-excerpt {
+    @apply text-text-dim text-sm line-clamp-3;
+  }
+
+  .card-footer {
+    @apply flex items-center justify-between gap-4;
+  }
+
+  /* Article metadata styling (with icons) */
+  .article-meta {
+    @apply flex flex-wrap items-center gap-4 text-sm text-text-dim;
+  }
+
+  .article-meta-item {
+    @apply flex items-center gap-2;
+  }
+
+  .article-meta-item i {
+    @apply w-4 h-4 flex-shrink-0;
+    color: var(--accent2);
+  }
+
   /* Hero typography with fluid sizing */
   .hero-title {
     font-size: clamp(2rem, 5vw + 1rem, 4.5rem);