@casoon/dragonfly/ui/content.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/* Content Module */

@layer elements {
  a {
    color: var(--color-primary, #3b82f6);
  }

  a:hover {
    color: var(--color-primary-hover, #2563eb);
    text-decoration: underline;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 1.5rem 0 1rem;
  }

  p {
    margin: 1rem 0;
  }
}

@layer components {
  .content {
    color: var(--color-gray-900, #111827);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.6;
    max-width: 65ch;
  }

  .content h1 {
    font-size: var(--font-size-4xl, 2.25rem);
  }

  .content h2 {
    font-size: var(--font-size-3xl, 1.875rem);
  }

  .content p {
    line-height: 1.6;
    margin-bottom: var(--space-4);
    margin-top: 0;
  }

  .content a {
    color: var(--color-primary, #3b82f6);
    text-decoration: underline;
  }

  .content a:hover {
    color: var(--color-primary-dark, #1e40af);
  }
}