Date: 2026-02-14
Status: Redesigned articles listing + custom Streamdown markdown styling

---

1. Articles Listing Page (/articles)

Before

• Basic grid layout
• Simple card design
• No featured article
• Generic styling

After (Matches /blog design)

• ✅ Featured Article Card (first article)

  • Split layout: icon + content
  • Matrix background pattern
  • Hover effects (glow, scale, translate)
  • Category badge + date

• ✅ Grid Layout (remaining articles)

  • 2-column responsive grid
  • Card hover states (border color change, shadow)
  • Icon + category badge
  • Read time + date metadata
  • Arrow animation on hover

• ✅ Header Section

  • Badge: "VOLATILITY RESEARCH"
  • Large title: "Crypto Articles"
  • Subtitle description

• ✅ CTA Section

  • Gradient background
  • Call-to-action button
  • Links to main platform

Design Elements:

• nexus-neon accent color (#00ff41)
• nexus-card dark background
• Matrix grid pattern (featured card)
• Font: Space Mono (mono) + Space Grotesk (sans)

---

2. Custom Streamdown Markdown Styling

Typography Hierarchy

Headings:

• H1: 4xl, bottom border, uppercase, mono font
• H2: 3xl, left green border (4px), padding-left, uppercase
• H3: 2xl, standard spacing
• H4: xl, smaller spacing

Paragraphs:

• Color: gray-700 (light) / gray-300 (dark)
• Leading: relaxed
• Bottom margin: 6

Code & Syntax

Inline Code:

Background: gray-100 (light) / white/5 (dark)
Color: nexus-neon
Padding: 1.5px x 0.5px y
Border-radius: rounded
Font: mono, text-sm
No backticks (removed with :before/:after)

Code Blocks (Shiki):

Background: gray-900 (light) / black/40 (dark)
Border: gray-700 / white/10
Padding: 4
Border-radius: lg
Overflow: x-auto
Margin: 6

Tables

Structure:

• Full width
• Collapsed borders
• Rounded corners
• Overflow: hidden

Header (<th>):

Background: gray-100 / white/5
Border: all sides
Padding: 4px x 3px y
Text: uppercase, mono, bold
Alignment: left

Cells (<td>):

Border: all sides
Padding: 4px x 3px y
Color: gray-700 / gray-300

Rows:

• Hover: background changes (gray-50 / white/5)
• Divide lines between rows

Blockquotes

Border-left: 4px nexus-neon
Background: nexus-neon/5 (subtle green tint)
Padding-left: 6
Padding-y: 4
Rounded-right: lg
Italic text
Color: gray-700 / gray-300

Example rendering:

"The January drop wasn't a bear market signal..."
(Green left border + faint green background)

Lists

Unordered (<ul>):

• Disc bullets
• Margin-left: 6
• Margin-y: 6

Ordered (<ol>):

• Decimal numbers
• Same spacing as ul

List Items:

• Color: gray-700 / gray-300
• Bottom margin: 2

Links

Color: nexus-neon
No underline (default)
Font-weight: medium
Hover: underline + color opacity 80%

Images

Border-radius: lg
Border: gray-200 / white/10
Margin-y: 8
Shadow: lg (drop shadow)

Horizontal Rules

Border-color: gray-200 / white/10
Margin-y: 12 (large spacing)

---

3. Article Detail Page Improvements

Header Section

• ✅ Category badge (green accent + background)
• ✅ Large responsive heading (4xl → 5xl → 6xl)
• ✅ Metadata row (date + read time with icons)
• ✅ Bottom border separator

Navigation

• ✅ Back button: "BACK TO ARTICLES" (not "RETURN TO INDEX")
• ✅ Hover effect on back link

Footer CTA

• ✅ Gradient background (nexus-neon/5 → blue-500/5)
• ✅ Border + rounded corners
• ✅ Platform link button
• ✅ Disclaimer text

Spacing

• Container: max-w-4xl (readable width)
• Sections: space-y-12 (large gaps)
• Padding: py-12

---

4. Mermaid Diagram Styling

Theme: Dark
Colors:

• Primary: #10b981 (emerald green)
• Line: #6ee7b7 (light green)
• Background: #1a1a1a (dark)
• Text: #e5e7eb (light gray)

Example:

graph LR
    A[Bitcoin] --> B[Altcoins]
    B --> C[Volatility]

Renders with green accents matching the LiveVolatile brand.

---

5. Before/After Comparison

Screenshot Issues (FIXED)

Before:

• ❌ Plain code blocks (no background)
• ❌ Unstyled tables (no borders)
• ❌ Blockquotes with basic green border only
• ❌ Generic typography

After:

• ✅ Code blocks: dark background, borders, proper padding
• ✅ Tables: full borders, hover effects, monospace headers
• ✅ Blockquotes: green border + subtle background tint
• ✅ Custom typography hierarchy with proper spacing

---

6. Responsive Design

Mobile (<768px):

• Featured article: stacks vertically
• Grid: 1 column
• Heading: 4xl (smaller on mobile)

Desktop (>768px):

• Featured article: 1/3 icon + 2/3 content
• Grid: 2 columns
• Heading: 6xl (large)

---

7. Color Palette

---

Testing Checklist

After deployment (2-3 min):

• Visit /articles → Featured article displays correctly
• Grid layout responsive (2 cols desktop, 1 col mobile)
• Click article → Markdown renders with custom styles
• Code blocks have dark background + syntax highlighting
• Tables have borders + hover effects
• Blockquotes have green border + background
• Links are nexus-neon color
• Images have rounded corners + shadows
• Mermaid diagrams render with dark theme

---

Files Changed

1. app/articles/page.tsx (listing page - 8.3 KB)
2. components/article-content.tsx (markdown styling - 3.8 KB)
3. app/articles/[slug]/page.tsx (detail page - 4.3 KB)

Total: 3 files, 157 lines changed

---

Next Steps:

• Monitor build logs → Should succeed
• Test on production after deploy
• Optional: Add article filtering/categories
• Optional: Add search functionality

Migration complete! 🚀

You May Also Like

LiveVolatile Home
Crypto Market Analysis
FAQ
All Blog Posts
LiveVolatile Home