@riebeckite/honox 0.0.31 → 0.0.33

package/style.css

@@ -22,6 +22,21 @@
 
   .rb-article-body {
     min-width: 0;
+    padding-inline: var(--rb-space-2, 1rem);
+  }
+
+  .rb-article {
+    width: min(100%, var(--rb-layout-page-max, 80rem));
+    max-width: none;
+  }
+
+  :is(:root, .rb-theme-root)[data-article-layout="full-width"] .rb-article {
+    width: 100%;
+  }
+
+  :is(:root, .rb-theme-root)[data-article-layout="full-width"]
+    .rb-article-body {
+    max-width: none;
   }
 
   .rb-page-body {
@@ -80,3 +95,237 @@
     transform: translateY(0);
   }
 }
+@layer components {
+  .rb-article-header h1 {
+    word-break: auto-phrase;
+  }
+
+  .rb-article-content :where(h1, h2, h3, h4, h5, h6) {
+    font-weight: 600;
+    line-height: 1.3;
+    text-wrap: balance;
+    word-break: auto-phrase;
+  }
+
+  .rb-article-content :where(h1) {
+    margin-block: 0 1em;
+    font-size: 2.25em;
+  }
+
+  .rb-article-content :where(h2) {
+    margin-block: 2em 1em;
+    font-size: 1.5em;
+  }
+
+  .rb-article-content :where(h3) {
+    margin-block: 1.6em 0.6em;
+    font-size: 1.25em;
+  }
+
+  .rb-article-content :where(h4) {
+    margin-block: 1.5em 0.5em;
+    font-size: 1em;
+  }
+
+  .rb-article-content :where(p) {
+    margin-block: 1.25em;
+  }
+
+  .rb-article-content :where(a) {
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+  }
+
+  .rb-article-content :where(strong) {
+    font-weight: 600;
+  }
+
+  .rb-article-content :where(ul) {
+    list-style-type: disc;
+  }
+
+  .rb-article-content :where(ol) {
+    list-style-type: decimal;
+  }
+
+  .rb-article-content :where(ol[type="A"]) {
+    list-style-type: upper-alpha;
+  }
+
+  .rb-article-content :where(ol[type="a"]) {
+    list-style-type: lower-alpha;
+  }
+
+  .rb-article-content :where(ol[type="I"]) {
+    list-style-type: upper-roman;
+  }
+
+  .rb-article-content :where(ol[type="i"]) {
+    list-style-type: lower-roman;
+  }
+
+  .rb-article-content :where(ul, ol) {
+    margin-block: 1.25em;
+    padding-inline-start: 1.625em;
+  }
+
+  .rb-article-content :where(li) {
+    margin-block: 0.5em;
+  }
+
+  .rb-article-content :where(ul ul, ul ol, ol ul, ol ol) {
+    margin-block: 0.75em;
+  }
+
+  .rb-article-content :where(.task-list-item) {
+    list-style: none;
+  }
+
+  .rb-article-content :where(.task-list-item) > :where(input[type="checkbox"]) {
+    margin-inline-end: 0.5em;
+  }
+
+  .rb-article-content :where(blockquote) {
+    margin-block: 2em;
+    padding-inline-start: 1em;
+    border-inline-start: 2px solid var(--rb-color-border);
+  }
+
+  .rb-article-content :where(hr) {
+    margin-block: 3em;
+    border: 0;
+    border-block-start: 1px solid var(--rb-color-border);
+  }
+
+  .rb-article-content :where(:not(pre) > code) {
+    font-family: var(--rb-font-mono);
+    font-size: 0.875em;
+  }
+
+  .rb-article-content :where(pre):not(:where(.rr-code *)) {
+    margin-block: 1.5em;
+    padding: 0.75rem 1rem;
+    border-radius: 6px;
+    background: var(--rb-color-code-background);
+    color: var(--rb-color-ink);
+    font-family: var(--rb-font-mono);
+    font-size: 0.875em;
+    line-height: 1.7;
+    overflow-x: auto;
+  }
+
+  .rb-article-content :where(pre):not(:where(.rr-code *)) :where(code) {
+    background: none;
+    border: 0;
+    padding: 0;
+    font-size: inherit;
+  }
+
+  .rb-article-content :where(table) {
+    width: 100%;
+    max-width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+  }
+
+  .rb-article-content :where(.rb-table-scroll) {
+    max-width: 100%;
+    margin-block: 1.5em;
+    overflow-x: auto;
+  }
+
+  .rb-article-content :where(figure) {
+    margin-block: 2em;
+  }
+
+  .rb-article-content :where(figure > *) {
+    margin-block: 0;
+  }
+
+  .rb-article-content :where(figcaption) {
+    color: var(--rb-color-muted);
+    font-size: 0.875em;
+    line-height: 1.43;
+  }
+
+  .rb-source-fallback {
+    inline-size: 100%;
+    margin-block: 0.75rem 0;
+    border-block-start: 1px solid var(--rb-color-border);
+    color: var(--rb-color-muted);
+    font-size: 0.8125rem;
+    text-align: start;
+  }
+
+  figure > .rb-source-fallback {
+    margin-block: 0;
+  }
+
+  .rb-source-fallback > summary {
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+  }
+
+  .rb-source-fallback > pre {
+    overflow: auto;
+    margin: 0 0.75rem 0.75rem;
+    padding: 0.75rem;
+    border: 1px solid var(--rb-color-border);
+    border-radius: 6px;
+    background: var(--rb-color-code-background);
+    color: var(--rb-color-ink);
+    font-size: 0.8125rem;
+  }
+
+  .rb-article-content :where(dl) {
+    margin-block: 1.25em;
+  }
+
+  .rb-article-content :where(dt) {
+    margin-block-start: 1.25em;
+    font-weight: 600;
+  }
+
+  .rb-article-content :where(dd) {
+    margin-block-start: 0.5em;
+    padding-inline-start: 1.625em;
+  }
+
+  .rb-article-content :where(kbd) {
+    padding: 0.15em 0.4em;
+    border: 1px solid var(--rb-color-border);
+    border-radius: 4px;
+    background: var(--rb-color-surface);
+    color: inherit;
+    font-family: var(--rb-font-mono);
+    font-size: 0.875em;
+  }
+
+  .rb-article-content :where(img, picture, video) {
+    margin-block: 2em;
+  }
+
+  .rb-article-content :where(picture > img) {
+    margin-block: 0;
+  }
+
+  .rb-article-content > :where(:first-child) {
+    margin-block-start: 0;
+  }
+
+  .rb-article-content > :where(:last-child) {
+    margin-block-end: 0;
+  }
+
+  .rb-article-content :where(hr, h2, h3, h4) + * {
+    margin-block-start: 0;
+  }
+
+  @media (max-width: 48rem) {
+    .rb-article-content {
+      overflow-wrap: break-word;
+    }
+  }
+}