Updated TODO.

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 7eaaefd173c0a0ab4bfc67904fc5d5eee33e8b83..167a23a26ca7ccd70b53deffc66cd90d27feba10 100644 (file)
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -22,7 +22,10 @@
       "Bash(curl -s http://localhost:1313/articles/haiku-2/)",
       "Bash(curl -s http://localhost:1313/articles/)",
       "Bash(curl -s http://localhost:1313/css/main.min.css)",
-      "Bash(hugo version *)"
+      "Bash(hugo version *)",
+      "Bash(curl -s \"http://localhost:1313/articles/\")",
+      "Bash(curl -s http://localhost:1313/tags/hugo/)",
+      "Bash(curl -s http://localhost:1313/categories/)"
     ]
   }
 }

diff --git a/TODO.md b/TODO.md
index c0bf8f469a6a682c1c41bf6ed0163418db1f4aa7..d3bb6a055c4c41315ee154f09dd4649f42c1111a 100644 (file)
--- a/TODO.md
+++ b/TODO.md
@@ -17,7 +17,7 @@
 - [ ] Analytics (privacy-respecting)
 - [✅] add back-to-top button
 - [ ] Lazy loading articles in list view
-- [ ] modify articles list view to be more of a timeline (line in middle, articles on sides)
+- [✅] modify articles list view to be more of a timeline (line in middle, articles on sides)
 - [ ] Progressive enhancement (offline support)
 - [⏳] Create accessibility badges component (WCAG 2.1 AA, Keyboard Accessible, Screen Reader Compatible)
 - [ ] Add badges to footer with links to A11Y-AUDIT-REPORT.md

diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 8bd38ce3a9d403b49289492788279c394accf661..000ec85bb94eb7ecb0b1090c42fd14906e799b3b 100644 (file)
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -1533,6 +1533,63 @@ button,
 
 /* Card component */
 
+.card {
+  overflow: hidden;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-color: var(--border);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+article.card.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg {
+  border-color: var(--border);
+  box-shadow: 0 0 20px var(--accent-glow);
+}
+
+article.border.border-border\/30.card.overflow-hidden.group.bg-bg {
+  border-color: var(--border);
+  box-shadow: 0 0 20px var(--accent-glow);
+}
+
+article.border.border-border\/30.rounded-lg.card.group.bg-bg {
+  border-color: var(--border);
+  box-shadow: 0 0 20px var(--accent-glow);
+}
+
+.card {
+  box-shadow: 0 0 20px var(--accent-glow);
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 0 30px var(--accent-glow);
+}
+
+.card-image {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.card-body > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
+.card-body {
+  padding: 1.25rem;
+}
+
+@media (min-width: 768px) {
+  .card-body {
+    padding: 1.5rem;
+  }
+}
+
 /* =====================
      Timeline Layout
      ===================== */
@@ -2076,6 +2133,10 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
   right: 0px;
 }
 
+.right-3 {
+  right: 0.75rem;
+}
+
 .right-4 {
   right: 1rem;
 }
@@ -2084,6 +2145,10 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
   top: 0px;
 }
 
+.top-3 {
+  top: 0.75rem;
+}
+
 .top-4 {
   top: 1rem;
 }
@@ -2216,6 +2281,13 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
   -webkit-line-clamp: 1;
 }
 
+.line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
 .block {
   display: block;
 }
@@ -2316,6 +2388,10 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
   max-width: 42rem;
 }
 
+.max-w-3xl {
+  max-width: 48rem;
+}
+
 .max-w-4xl {
   max-width: 56rem;
 }
@@ -2621,11 +2697,21 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
   padding-right: 1.5rem;
 }
 
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
 
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
 .py-12 {
   padding-top: 3rem;
   padding-bottom: 3rem;
@@ -4043,6 +4129,10 @@ article.toast.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg {
   color: var(--text);
 }
 
+.group:hover .group-hover\:text-accent {
+  color: var(--accent);
+}
+
 @media (prefers-color-scheme: dark) {
   .dark\:prose-invert {
     --tw-prose-body: var(--tw-prose-invert-body);
@@ -4196,6 +4286,16 @@ article.toast.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg {
   opacity: 0.5;
 }
 
+.group:hover .group-hover\:scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:text-accent {
+  color: var(--accent);
+}
+
 @media (min-width: 640px) {
   .sm\:flex-row {
     flex-direction: row;