v0.9.9defuss-shadcn
Theme
Design your own

defuss-shadcn / Website / Docs & Help / docs-content

Built with: CSS

Docs ContentBLK

Presents one documentation topic with explanations and examples - the trail, title, lead, prose with code, callouts and tables, and the next page. Part of the Docs & Help blocks.

On this page (2)
Component Skill — components/docs-content/component-skill.md

Native basis

An <article>: breadcrumbs, <h1>, a lead, meta (updated <time>, edit link), prose (.mk-docs-content-prose) with headings, lists, inline and block code, a table and callouts (data-tone), and previous / next links.

Built from

Breadcrumb.

Web Platform APIs

<article><time><table>text-wrap

Classes

.mk-docs-content.mk-docs-content-title.mk-docs-content-lead.mk-docs-content-meta.mk-docs-content-prose.mk-docs-content-callout.mk-docs-content-pager

Data attributes

data-tone="note|warning|tip" on callouts.

§Default

Breadcrumbs, title, lead and meta, then prose with inline and block code, a list, a table and three callouts (data-tone note / warning / tip - each says its kind in text), and previous / next.

§CSS view file

/* -- Docs Content (website · Docs & Help) ---------------------------------
   Presents one documentation topic with explanations and examples - the trail, title, lead, prose with code, callouts and tables, and the next page. */
@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-docs-content, .mk-docs-content *, .mk-docs-content ::before, .mk-docs-content ::after) {
    box-sizing: border-box;
  }
  .mk-docs-content {
    display: grid;
    gap: 1rem;
    width: 100%;
    max-width: 44rem;
  }
  .mk-docs-content-title {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  .mk-docs-content-lead {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 1.125rem;
    line-height: 1.6;
    text-wrap: pretty;
  }
  .mk-docs-content-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    & a {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      color: inherit;
    }
    & svg {
      width: 0.875rem;
      height: 0.875rem;
    }
  }
  .mk-docs-content-prose {
    line-height: 1.75;
    & > * + * {
      margin-block-start: 1rem;
    }
    & h2 {
      margin-block-start: 2.25rem;
      font-size: 1.5rem;
      font-weight: 650;
      letter-spacing: -0.02em;
    }
    & h3 {
      margin-block-start: 1.75rem;
      font-size: 1.125rem;
      font-weight: 600;
    }
    & p,
    & ul,
    & ol {
      margin-block-end: 0;
      color: color-mix(in oklch, var(--foreground) 85%, var(--muted-foreground));
    }
    & li + li {
      margin-block-start: 0.375rem;
    }
    & a {
      color: var(--primary);
      text-underline-offset: 3px;
    }
    & :not(pre) > code {
      padding: 0.125rem 0.375rem;
      border-radius: var(--radius-sm);
      background: var(--muted);
      font-family: var(--font-mono);
      font-size: 0.875em;
    }
    & pre {
      padding: 1rem 1.125rem;
      overflow-x: auto;
      border: 0;
      border-radius: var(--radius-lg);
      background: oklch(0.18 0.01 260);
      color: oklch(0.93 0 0);
      font-size: 0.8125rem;
      line-height: 1.65;
    }
    & pre code {
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      font-family: var(--font-mono);
    }
    & table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.875rem;
    }
    & th,
    & td {
      padding: 0.5rem 0.75rem;
      border-block-end: 1px solid var(--border);
      text-align: start;
    }
    & th {
      color: var(--muted-foreground);
      font-weight: 600;
    }
  }
  .mk-docs-content-callout {
    --_c: oklch(0.6 0.15 250);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border-inline-start: 3px solid var(--_c);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: color-mix(in oklab, var(--_c) 8%, var(--background));
    font-size: 0.9375rem;
    & > svg {
      width: 1.125rem;
      height: 1.125rem;
      margin-block-start: 0.2rem;
      color: var(--_c);
    }
    & p {
      margin: 0;
    }
    & strong {
      color: var(--_c);
    }
    &[data-tone="warning"] {
      --_c: oklch(0.65 0.15 70);
    }
    &[data-tone="tip"] {
      --_c: oklch(0.6 0.15 150);
    }
  }
  .mk-docs-content-pager {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 0.75rem;
    margin-block-start: 2rem;
    & a {
      display: grid;
      gap: 0.125rem;
      padding: 1rem 1.25rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      color: inherit;
      text-decoration: none;
    }
    & a:hover {
      border-color: color-mix(in oklch, var(--foreground) 30%, var(--border));
    }
    & a[rel="next"] {
      text-align: end;
    }
    & small {
      color: var(--muted-foreground);
      font-size: 0.8125rem;
    }
    & strong {
      color: var(--primary);
    }
  }
  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-docs-content-callout {
      border-inline-start-color: CanvasText;
    }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub