@minidocs/astro 0.0.0-stage → 0.1.0

package/src/styles/search.css

@@ -0,0 +1,202 @@
+/* Search: the trigger, the dialog, and the states around results. Options are styled by their ARIA state. */
+@layer minidocs {
+  .md-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 13rem;
+    height: 2rem;
+    padding-inline: 0.625rem 0.5rem;
+    border: 0;
+    border-radius: 0.5rem;
+    background: color-mix(in srgb, var(--md-color-heading) 4.5%, transparent);
+    color: var(--md-color-muted);
+    font: inherit;
+    font-size: 0.8125rem;
+    cursor: pointer;
+    transition:
+      color 0.15s,
+      background-color 0.15s;
+  }
+
+  .md-search-trigger:hover {
+    background: color-mix(in srgb, var(--md-color-heading) 8%, transparent);
+    color: var(--md-color-heading);
+  }
+
+  .md-search-trigger:focus-visible {
+    outline: var(--md-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* One nested kbd per key, which styles can box or join, e.g. with a "+" before every key but the first */
+  .md-search-shortcut {
+    display: inline-flex;
+    gap: 0.1875em;
+    margin-inline-start: auto;
+    color: var(--md-color-muted);
+    font-family: var(--md-font-sans);
+    font-size: 0.75rem;
+  }
+
+  .md-search-shortcut[data-platform="apple"] {
+    gap: 0.0625em;
+  }
+
+  .md-search-shortcut kbd {
+    font: inherit;
+  }
+
+  .md-search-dialog {
+    box-sizing: border-box;
+    width: min(36rem, 100vw - 1.5rem);
+    max-height: min(32rem, 100dvh - 2 * min(14vh, 7rem));
+    margin: min(14vh, 7rem) auto auto;
+    padding: 0;
+    overflow: hidden;
+    border: 1px solid var(--md-color-border);
+    border-radius: 0.875rem;
+    background: var(--md-color-bg);
+    color: var(--md-color-text);
+    box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.18);
+    /* Set here, not on [open]: closing keeps display flex until it fades out, and a row would flash meanwhile */
+    flex-direction: column;
+    opacity: 0;
+    transform: scale(0.98);
+    transition:
+      opacity 0.18s,
+      transform 0.18s cubic-bezier(0.32, 0.72, 0, 1),
+      overlay 0.18s allow-discrete,
+      display 0.18s allow-discrete;
+  }
+
+  /* Results scroll on their own, below whatever sits above them */
+  .md-search-dialog[open] {
+    display: flex;
+    opacity: 1;
+    transform: none;
+  }
+
+  /* The page behind a modal stays put, as with the sidebar drawer */
+  :root:has(.md-search-dialog[open]) {
+    overflow: hidden;
+  }
+
+  .md-search-dialog::backdrop {
+    background: transparent;
+    transition:
+      background-color 0.18s,
+      overlay 0.18s allow-discrete,
+      display 0.18s allow-discrete;
+  }
+
+  .md-search-dialog[open]::backdrop {
+    background: light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.5));
+  }
+
+  @starting-style {
+    .md-search-dialog[open] {
+      opacity: 0;
+      transform: scale(0.98);
+    }
+
+    .md-search-dialog[open]::backdrop {
+      background: transparent;
+    }
+  }
+
+  .md-search-input {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    padding: 0.875rem 1rem;
+    border: 0;
+    border-block-end: 1px solid var(--md-color-border);
+    background: transparent;
+    color: var(--md-color-heading);
+    font: inherit;
+    font-size: 0.9375rem;
+    outline: none;
+  }
+
+  .md-search-input::placeholder {
+    color: var(--md-color-muted);
+  }
+
+  .md-search-results {
+    flex: 1;
+    min-height: 0;
+    padding: 0.375rem;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-block: 0.375rem;
+  }
+
+  .md-search-results [role="group"] + [role="group"] {
+    margin-block-start: 0.5rem;
+  }
+
+  .md-search-results [role="option"] {
+    display: block;
+    padding: 0.5rem 0.625rem;
+    border-radius: 0.5rem;
+    color: var(--md-color-text);
+    font-size: 0.875rem;
+    line-height: 1.45;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .md-search-results [role="option"][aria-selected="true"] {
+    background: var(--md-color-hover);
+  }
+
+  .md-search-results mark {
+    background: none;
+    color: var(--md-color-accent);
+  }
+
+  .md-search-idle,
+  .md-search-loading,
+  .md-search-empty,
+  .md-search-error {
+    padding: 2.25rem 1.5rem;
+    color: var(--md-color-muted);
+    font-size: 0.8125rem;
+    text-align: center;
+    text-wrap: balance;
+  }
+
+  .md-search-found {
+    color: var(--md-color-muted);
+    font-size: 0.75rem;
+  }
+
+  .md-search-query {
+    color: var(--md-color-heading);
+  }
+
+  /* Local engines answer within a frame, so a loading message that appeared at once would only flash */
+  .md-search-loading {
+    animation: md-search-reveal 0.15s 0.3s backwards;
+  }
+
+  /* Over earlier results, a message would push them down on every keystroke; place a spinner there yourself */
+  .md-search:not([data-status="loading"]) .md-search-loading {
+    display: none;
+  }
+
+  @keyframes md-search-reveal {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .md-search-trigger,
+    .md-search-dialog,
+    .md-search-dialog::backdrop {
+      transition: none;
+    }
+  }
+}

package/src/styles/sidebar.css

@@ -0,0 +1,162 @@
+/* Sidebar: the tree itself. Where it sits and the drawer on narrow screens belong to layout.css. */
+@layer minidocs {
+  .md-sidebar {
+    color: var(--md-color-text);
+    font-size: var(--md-sidebar-font-size);
+    line-height: 1.5;
+  }
+
+  .md-sidebar-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .md-sidebar-item + .md-sidebar-item {
+    margin-block-start: 1px;
+  }
+
+  .md-sidebar-link,
+  .md-sidebar-group-title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: var(--md-sidebar-item-padding-block) var(--md-sidebar-item-padding-inline);
+    border-radius: var(--md-radius);
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      color 0.15s,
+      background-color 0.15s;
+  }
+
+  .md-sidebar-link:hover,
+  .md-sidebar-group-title:hover {
+    background: var(--md-color-hover);
+    color: var(--md-color-heading);
+  }
+
+  .md-sidebar :is(.md-sidebar-link, .md-sidebar-group-title):focus-visible {
+    outline: var(--md-focus-ring);
+    outline-offset: -2px;
+  }
+
+  .md-sidebar [aria-current="page"] {
+    background: var(--md-color-current);
+    color: var(--md-color-accent);
+    font-weight: 500;
+  }
+
+  /* Levels inside a group hang off a hairline; the current page marks its stretch of it */
+  .md-sidebar-group .md-sidebar-list {
+    margin-block: 1px;
+    margin-inline-start: var(--md-sidebar-indent);
+    padding-inline-start: var(--md-sidebar-rail-gap);
+    border-inline-start: 1px solid var(--md-color-border);
+  }
+
+  .md-sidebar-group .md-sidebar-list [aria-current="page"] {
+    background: none;
+  }
+
+  .md-sidebar-group .md-sidebar-list [aria-current="page"]::before {
+    content: "";
+    position: absolute;
+    inset-block: 0.25rem;
+    inset-inline-start: calc(-1 * var(--md-sidebar-rail-gap) - 1.5px);
+    width: 2px;
+    border-radius: 1px;
+    background: var(--md-color-accent);
+  }
+
+  .md-sidebar-label {
+    display: block;
+    margin-block-start: 1.5rem;
+    padding: var(--md-sidebar-item-padding-block) var(--md-sidebar-item-padding-inline);
+    padding-block-end: 0.25rem;
+    color: var(--md-color-heading);
+    font-size: 0.8125rem;
+    font-weight: 600;
+  }
+
+  .md-sidebar-item:first-child > .md-sidebar-label {
+    margin-block-start: 0;
+  }
+
+  /* A labelled section lists its pages without another level of indentation */
+  .md-sidebar-label + .md-sidebar-list {
+    margin-inline-start: 0;
+    padding-inline-start: 0;
+    border: 0;
+  }
+
+  .md-sidebar-group-title {
+    list-style: none;
+  }
+
+  .md-sidebar-group-title::-webkit-details-marker {
+    display: none;
+  }
+
+  /* Native markers vary between browsers, so groups draw their own chevron */
+  .md-sidebar-group-title::after {
+    content: "";
+    flex: none;
+    width: 0.3125rem;
+    height: 0.3125rem;
+    margin-inline: auto 0.25rem;
+    border-block-end: 1.5px solid currentColor;
+    border-inline-end: 1.5px solid currentColor;
+    opacity: 0.45;
+    transform: rotate(-45deg);
+    transition: transform 0.2s;
+  }
+
+  .md-sidebar-group[data-state="open"] > .md-sidebar-group-title::after {
+    transform: rotate(45deg);
+  }
+
+  .md-sidebar-link[data-external]::after {
+    content: "";
+    flex: none;
+    width: 0.4375rem;
+    height: 0.4375rem;
+    margin-inline-start: -0.125rem;
+    border-block-start: 1.5px solid currentColor;
+    border-inline-end: 1.5px solid currentColor;
+    opacity: 0.45;
+    transform: translateY(-0.125rem);
+  }
+
+  /* Always shown here; layout.css hides it where the sidebar has its own column */
+  .md-sidebar-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--md-color-border);
+    border-radius: var(--md-radius);
+    background: transparent;
+    color: var(--md-color-heading);
+    font: inherit;
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
+
+  .md-sidebar-trigger:hover {
+    background: var(--md-color-hover);
+  }
+
+  .md-sidebar-trigger:focus-visible {
+    outline: var(--md-focus-ring);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .md-sidebar-group-title::after {
+      transition: none;
+    }
+  }
+}

package/src/styles/toc.css

@@ -0,0 +1,79 @@
+/* Table of contents. */
+@layer minidocs {
+  .md-toc {
+    position: relative;
+    padding-inline-start: var(--md-toc-indent);
+    color: var(--md-color-muted);
+    font-size: var(--md-toc-font-size);
+    line-height: 1.45;
+  }
+
+  /* The track the reading position moves along */
+  .md-toc::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 1px;
+    background: var(--md-color-border);
+  }
+
+  /* attachToc places the marker on the current link through these variables */
+  .md-toc::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    inset-inline-start: -0.5px;
+    width: 2px;
+    height: var(--md-toc-marker-height, 0);
+    border-radius: 1px;
+    background: var(--md-color-accent);
+    transform: translateY(var(--md-toc-marker-top, 0));
+    transition:
+      transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
+      height 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  /* attachToc sets this while the marker jumps, e.g. on a page opened half way down */
+  .md-toc[data-md-toc-instant]::after {
+    transition: none;
+  }
+
+  .md-toc-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .md-toc-list .md-toc-list {
+    padding-inline-start: var(--md-toc-indent);
+  }
+
+  .md-toc-link {
+    display: block;
+    padding-block: 0.3125rem;
+    color: inherit;
+    text-decoration: none;
+    transition: color 0.15s;
+  }
+
+  .md-toc-link:hover {
+    color: var(--md-color-heading);
+  }
+
+  .md-toc-link:focus-visible {
+    border-radius: 2px;
+    outline: var(--md-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .md-toc-link[aria-current="true"] {
+    color: var(--md-color-accent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .md-toc::after {
+      transition: none;
+    }
+  }
+}

package/src/styles.css

@@ -0,0 +1,9 @@
+/* All minidocs default styles. To leave a part unstyled, import base.css and the files you want from minidocs/styles/ instead. */
+@import "./styles/base.css";
+@import "./styles/layout.css";
+@import "./styles/sidebar.css";
+@import "./styles/toc.css";
+@import "./styles/prose.css";
+@import "./styles/pager.css";
+@import "./styles/callout.css";
+@import "./styles/search.css";