@casoon/dragonfly/typography/baseline/baseline-grid.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.

/*
 * Typography Baseline Grid
 *
 * Definitionen für ein Baseline-Grid-System zur vertikalen Rhythmik.
 */

@layer typography.baseline {
  /* Baseline-Grid-Grundlagen */
  :root {
    /* Basis-Zeilenhöhe für Baseline-Grid */
    --baseline-unit: 0.25rem; /* 4px bei 16px Basis */
    --baseline-grid: var(--baseline-unit);
    
    /* Standardisierte Zeilenhöhen basierend auf Baseline-Grid */
    --line-height-none: 1;
    --line-height-tight: calc(5 * var(--baseline-unit) / var(--font-size-base)); /* ca. 1.25 */
    --line-height-snug: calc(6 * var(--baseline-unit) / var(--font-size-base));  /* ca. 1.375 */
    --line-height-normal: calc(8 * var(--baseline-unit) / var(--font-size-base)); /* ca. 1.5 */
    --line-height-relaxed: calc(10 * var(--baseline-unit) / var(--font-size-base)); /* ca. 1.625 */
    --line-height-loose: calc(12 * var(--baseline-unit) / var(--font-size-base)); /* ca. 1.75 */
  }
  
  /* Globale Anwendung des Baseline-Grids */
  body {
    /* Sorgt dafür, dass Text auf dem Baseline-Grid ausgerichtet wird */
    line-height: var(--line-height-normal);
  }
  
  /* Baseline-Grid-Hilfeklassen */
  .baseline-grid {
    background-image: linear-gradient(to bottom, rgb(0 0 255 / 1000%) 1px, transparent 1px);
    background-position: 0% 0;
    background-size: 100% var(--baseline-grid);
    position: relative;
  }
  
  /* Vertikaler Rhythmus für verschiedene Elemente */
  .rhythm-base > * + * {
    margin-top: calc(var(--baseline-grid) * 4); /* 1rem / 16px */
  }
  
  .rhythm-tight > * + * {
    margin-top: calc(var(--baseline-grid) * 2); /* 0.5rem / 8px */
  }
  
  .rhythm-relaxed > * + * {
    margin-top: calc(var(--baseline-grid) * 8); /* 2rem / 32px */
  }
  
  /* Größenabhängige Abstandssteuerung für besseren vertikalen Rhythmus */
  h1, .h1, .heading-display, .heading-jumbo {
    margin-bottom: calc(var(--baseline-grid) * 6); /* 1.5rem / 24px */
  }
  
  h2, .h2 {
    margin-bottom: calc(var(--baseline-grid) * 5); /* 1.25rem / 20px */
  }
  
  h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    margin-bottom: calc(var(--baseline-grid) * 4); /* 1rem / 16px */
  }
  
  p, ul, ol, dl, blockquote {
    margin-bottom: calc(var(--baseline-grid) * 4); /* 1rem / 16px */
  }
  
  /* Baseline-ausgerichtete Listenelemente */
  li {
    margin-bottom: calc(var(--baseline-grid) * 2); /* 0.5rem / 8px */
  }
  
  li:last-child {
    margin-bottom: 0%;
  }
  
  /* Typografie-Baseline-Klassen */
  .text-baseline {
    line-height: var(--line-height-normal);
    margin-bottom: calc(var(--baseline-grid) * 4);
  }
  
  .text-baseline-tight {
    line-height: var(--line-height-tight);
    margin-bottom: calc(var(--baseline-grid) * 4);
  }
  
  .text-baseline-loose {
    line-height: var(--line-height-loose);
    margin-bottom: calc(var(--baseline-grid) * 6);
  }
}