/* The few rules pico cannot express, and typography tuned for Japanese. Keep this file small and build on pico's variables so the theme still applies. */ /* Keep the site navigation in view. It needs a background, or the page scrolling under it would show through. */ body > header { position: sticky; top: 0; z-index: 1; background-color: var(--pico-background-color); opacity: 0.95; } /* The collection links can push the utility links onto another row. */ body > header nav { flex-wrap: wrap; column-gap: 1rem; } /* pico pads both with a full block spacing, so their gaps add up. Set the padding itself: overriding the variable would also shrink the article cards inside main. */ body > header, body > main { padding-block: calc(var(--pico-block-spacing-vertical) / 2); } nav { --pico-nav-element-spacing-vertical: 0.5rem; } /* Tune pico's typography for Japanese on narrow screens. */ /* Japanese lines are dense, so pico's 1.5 leading reads as cramped. Set it here, not through --pico-line-height, which also sizes form controls. */ article { line-height: 1.6; } /* pico's headings are sized for Latin text; Japanese titles wrap into three lines on a phone. Break them at phrases and even out the lines, so a single character is not left on the last one. */ article h1 { --pico-font-size: 1.75rem; } article h2 { --pico-font-size: 1.5rem; } article h3 { --pico-font-size: 1.25rem; } article :is(h1, h2, h3, h4, h5) { text-wrap: balance; word-break: auto-phrase; } /* pico spaces a heading from the content above it only when they are siblings, but each heading here opens its own section. Give the space back, except right after a parent heading. */ article :not(:is(h1, h2, h3, h4, h5)) + section > :is(h2, h3, h4, h5):first-child { margin-top: calc(var(--pico-typography-spacing-vertical) * 2); } /* The browser default of 40px is too deep for a narrow screen. List items are short, so they take less leading than paragraphs: at 1.6 the items drift apart instead of reading as one list. pico's small margin between items still tells them apart. */ article :is(ul, ol) { padding-inline-start: 1.25rem; } article li { line-height: 1.4; } /* Every section heading carries a permalink. It stays a small muted "#", so it can be long-pressed and copied on a phone, where nothing hovers. */ article .heading-permalink { margin-inline-start: 0.4em; font-size: 0.8em; color: var(--pico-muted-color); text-decoration: none; } /* In the list cards, the hgroup margin would double the card's bottom padding. */ article > hgroup:last-child { margin-bottom: 0; } article > hgroup h2 { --pico-font-size: 1.25rem; } /* An image in a post — an inline ```svg block or an .svg member shown with — keeps its aspect ratio and stays inside the column. They are blocks so that they do not hang on the text baseline. */ article :is(img, svg) { display: block; max-width: 100%; height: auto; } article svg { /* pico styles only, so an inline svg also needs its own margins: the same vertical rhythm as p and pre, and centered horizontally. */ margin-block: var(--pico-typography-spacing-vertical); margin-inline: auto; } /* GitHub-style alerts ("markdown-alert"): pico has no callout component, so the accents live here. A quote whose first line is a marker like "[!NOTE]" keeps pico's blockquote padding and bar; --alert-color, from GitHub's dark palette, colors the bar and the title. The title icons are @primer/octicons drawn through mask so they take the accent color. */ article blockquote.markdown-alert { border-inline-start-color: var(--alert-color, var(--pico-muted-color)); } article .markdown-alert-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; color: var(--alert-color, var(--pico-muted-color)); font-weight: 500; } article .markdown-alert-title::before { content: ""; display: inline-block; width: 1em; height: 1em; flex: none; background-color: var(--alert-color, var(--pico-muted-color)); mask: var(--alert-icon) center / contain no-repeat; } article .markdown-alert-note { --alert-color: #4493f8; --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E"); } article .markdown-alert-tip { --alert-color: #3fb950; --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'/%3E%3C/svg%3E"); } article .markdown-alert-important { --alert-color: #ab7df8; --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'/%3E%3C/svg%3E"); } article .markdown-alert-warning { --alert-color: #d29922; --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'/%3E%3C/svg%3E"); } article .markdown-alert-caution { --alert-color: #f85149; --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E"); } /* code-copy.js wraps each pre block in .code-block and pins a small "Copy" button to its top right. The button is pico's secondary outline variant — pico redefines --pico-background-color and --pico-color on button itself, so colors must come from a variant, not var()s here. */ .code-block { position: relative; } .code-copy { position: absolute; top: calc(var(--pico-spacing, 1rem) / 2); right: calc(var(--pico-spacing, 1rem) / 2); padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: normal; line-height: 1; } /* The preview page: editor and rendered output side by side on a wide screen, stacked on a phone. The tracks are minmax(0, 1fr), not 1fr: an auto/1fr minimum is the content's min-content size, so a long 
   line or a wide table would blow the column (and the textarea sharing
   it) past the viewport. */
.preview-grid {
  display: grid;
  gap: var(--pico-spacing, 1rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .preview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}
#preview-src {
  font-family: var(--pico-font-family-monospace, monospace);
  font-size: 0.875rem;
  min-height: 24rem;
}