fix: add type-color CSS variants for timeline elements

2 files changed, 79 insertions, 0 deletions

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index f71f4ec..89c3fda 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -701,6 +701,73 @@ html.theme-light picture img[src="/images/default_thumbnail_dark.png"] {
     @apply inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold;
   }
 
+  /* ---- Type-color variants (node, connector, card) ---- */
+
+  /* Tech (purple) */
+  .timeline-node--tech {
+    background-color: var(--type-tech);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--type-tech) 40%, transparent);
+  }
+  .timeline-connector--tech {
+    background-color: var(--type-tech);
+  }
+  .timeline-card--tech {
+    border-color: color-mix(in srgb, var(--type-tech) 25%, transparent);
+    box-shadow: 0 0 18px color-mix(in srgb, var(--type-tech) 10%, transparent);
+  }
+
+  /* Life (amber) */
+  .timeline-node--life {
+    background-color: var(--type-life);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--type-life) 40%, transparent);
+  }
+  .timeline-connector--life {
+    background-color: var(--type-life);
+  }
+  .timeline-card--life {
+    border-color: color-mix(in srgb, var(--type-life) 25%, transparent);
+    box-shadow: 0 0 18px color-mix(in srgb, var(--type-life) 10%, transparent);
+  }
+
+  /* Quote (green) */
+  .timeline-node--quote {
+    background-color: var(--type-quote);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--type-quote) 40%, transparent);
+  }
+  .timeline-connector--quote {
+    background-color: var(--type-quote);
+  }
+  .timeline-card--quote {
+    border-color: color-mix(in srgb, var(--type-quote) 25%, transparent);
+    box-shadow: 0 0 18px color-mix(in srgb, var(--type-quote) 10%, transparent);
+  }
+
+  /* Link (cyan) */
+  .timeline-node--link {
+    background-color: var(--type-link);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--type-link) 40%, transparent);
+  }
+  .timeline-connector--link {
+    background-color: var(--type-link);
+  }
+  .timeline-card--link {
+    border-color: color-mix(in srgb, var(--type-link) 25%, transparent);
+    box-shadow: 0 0 18px color-mix(in srgb, var(--type-link) 10%, transparent);
+  }
+
+  /* Photo (pink) */
+  .timeline-node--photo {
+    background-color: var(--type-photo);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--type-photo) 40%, transparent);
+  }
+  .timeline-connector--photo {
+    background-color: var(--type-photo);
+  }
+  .timeline-card--photo {
+    border-color: color-mix(in srgb, var(--type-photo) 25%, transparent);
+    box-shadow: 0 0 18px color-mix(in srgb, var(--type-photo) 10%, transparent);
+  }
+
   /* Header navigation styling */
   .header {
     @apply fixed top-0 left-0 right-0 z-40;
diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 5c299ff..e703b9f 100644
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -1620,6 +1620,18 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
 
 /* ---- Pinned badge ---- */
 
+/* ---- Type-color variants (node, connector, card) ---- */
+
+/* Tech (purple) */
+
+/* Life (amber) */
+
+/* Quote (green) */
+
+/* Link (cyan) */
+
+/* Photo (pink) */
+
 /* Header navigation styling */
 
 .header {