Quick LinksBLK

/* -- Quick Links (website · Search & Navigation) --------------------------

   Groups shortcuts to frequently needed destinations - icon tiles with a line each, a compact list, or chips. */

@layer components {

  /* every box in the block measures border-box - the same on any page */

  :where(.mk-quick-links, .mk-quick-links *, .mk-quick-links ::before, .mk-quick-links ::after) { box-sizing: border-box; }

  .mk-quick-links { width: 100%;

    & ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }

    & a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; height: 100%; padding: 1rem 1.125rem; border: 1px solid var(--border); border-radius: var(--radius-xl); color: inherit; text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease; }

    & a:hover { border-color: color-mix(in oklch, var(--foreground) 25%, var(--border)); background: color-mix(in oklch, var(--accent) 50%, transparent); }

    & a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

    & a > svg:first-child { width: 1.25rem; height: 1.25rem; color: var(--primary); }

    & a > svg:last-child { width: 1rem; height: 1rem; color: var(--muted-foreground); transition: translate 150ms ease; }

    & a:hover > svg:last-child { translate: 0.25rem 0; color: var(--foreground); }

    & span { display: grid; }

    & strong { font-size: 0.9375rem; font-weight: 600; }

    & small { color: var(--muted-foreground); font-size: 0.8125rem; }

  }

  .mk-quick-links[data-variant="list"] {

    max-width: 28rem;

    & ul { grid-template-columns: minmax(0, 1fr); gap: 0; }

    & a { padding: 0.875rem 0.5rem; border: 0; border-block-end: 1px solid var(--border); border-radius: 0; }

  }

  .mk-quick-links[data-variant="chips"] {

    & ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }

    & a { display: inline-flex; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 999px; }

    & small, & a > svg:last-child { display: none; }

    & strong { font-size: 0.875rem; font-weight: 500; }

    & a > svg:first-child { width: 1rem; height: 1rem; }

  }

  /* -- Accessibility ------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {

    .mk-quick-links a, .mk-quick-links a > svg:last-child { transition: none; }

    .mk-quick-links a:hover > svg:last-child { translate: none; }

  }

  @media (forced-colors: active) {

    .mk-quick-links a { border-color: CanvasText; }

  }

}