, ,

, etc */ /* toc | 1. variables 2. typography 3. prose elements */ /* 1. variables | - feel free to customize these variables by applying your own CSS file after this one, and setting them in `:root`. - you can set any of these to "revert" to revert customization. old browsers won't recognize it so they will use the default values anyway. */ :root { color-scheme: light dark; --sc_typography_font-serif: ui-serif, serif; --sc_typography_font-sans_serif: ui-sans-serif, system-ui, sans-serif; --sc_typography_font-mono: ui-monospace, monospace; --sc_typography_line-height: 1.5; --sc_typography_tab-size: 4; --sc_typography_body_max-width: 48rem; --sc_typography_body_margin-inline: auto; --sc_typography_body_padding-inline: 1rem; --sc_prose_background-color: rgba(0, 0, 0, 0.1); --sc_prose_border-color: rgba(0, 0, 0, 0.2); --sc_prose_border-radius: 0.25rem; } @media (prefers-color-scheme: dark) { :root { --sc_prose_background-color: rgba(255, 255, 255, 0.1); --sc_prose_border-color: rgba(255, 255, 255, 0.2); } } /* 2. typography */ html { font-family: var(--sc_typography_font-sans_serif); line-height: var(--sc_typography_line-height); tab-size: var(--sc_typography_tab-size); } body { max-width: var(--sc_typography_body_max-width); margin-inline: var(--sc_typography_body_margin-inline); padding-inline: var(--sc_typography_body_padding-inline); } code, kbd, samp, pre { font-family: var(--sc_typography_font-mono); } img, video, iframe { max-width: 100%; } @media print { body { max-width: revert; } } /* 3. prose elements | these are built-in for beautifying articles or documentation. it improves some default elements to make them more readable you can use it by applying class="prose" to a container that wraps your content, such as

, ,

, etc */ .prose table { border: 1px solid var(--sc_prose_border-color); border-collapse: collapse; } .prose th, .prose td { padding-block: 0.25rem; padding-inline: 0.5rem; } .prose thead tr, .prose tbody tr:nth-child(even) { background-color: var(--sc_prose_background-color); } .prose :not(pre) > code, .prose :not(pre) > samp, .prose :not(pre) > kbd, .prose pre { border-radius: var(--sc_prose_border-radius); background-color: var(--sc_prose_background-color); } .prose pre { overflow-x: auto; max-width: 100%; padding: 0.5rem; } .prose blockquote { border-inline-start: 0.25rem solid var(--sc_prose_border-color); border-radius: var(--sc_prose_border-radius); background-color: var(--sc_prose_background-color); padding-inline-start: 1rem; margin-inline: 0; }