Storyden

@layer reset, base, tokens, recipes, utilities; @layer base { *, *::before, &::after { border-color: var(--colors-border-default); } } :root { --global-font-size: 1rem; --global-font-size-sm: 1rem; --global-font-size-md: 1.125rem; --global-font-size-lg: 1.2rem; --global-font-size-xl: 1.44rem; --global-font-size-2xl: 1.728rem; --global-font-size-3xl: 2.074rem; --global-font-size-4xl: 2.488rem; --global-font-size-h1: 2.488rem; --global-font-size-h2: 2.074rem; --global-font-size-h3: 1.728rem; --global-font-size-h4: 1.44rem; --global-font-size-h5: 1.2rem; --global-font-size-h6: 1.125rem; --global-font-size-h1-variable: clamp( 100%, calc(var(--global-font-size-h1) / 4) + 4vw, var(--global-font-size-h1) ); --global-font-size-h2-variable: clamp( 100%, calc(var(--global-font-size-h2) / 4) + 4vw, var(--global-font-size-h2) ); --global-font-size-h3-variable: clamp( 100%, calc(var(--global-font-size-h3) / 4) + 4vw, var(--global-font-size-h3) ); --global-font-size-h4-variable: clamp( 100%, calc(var(--global-font-size-h4) / 4) + 4vw, var(--global-font-size-h4) ); --global-font-size-h5-variable: clamp( 100%, calc(var(--global-font-size-h5) / 4) + 4vw, var(--global-font-size-h5) ); --global-font-size-h6-variable: clamp( 100%, calc(var(--global-font-size-h6) / 4) + 4vw, var(--global-font-size-h6) ); } @supports (font-size: 1cqi) { .fluid-font-size { font-size: clamp( 1rem, var(--font-size-fluid-scale, 5cqi), var(--font-size) ); text-overflow: ellipsis; } .fluid-letter-spacing { letter-spacing: clamp(-1px, -1cqi, 0px); text-overflow: ellipsis; } } html, body { background-color: var(--colors-bg-site); color: var(--colors-fg-default); font-family: var(--fonts-body); font-style: normal; } html { overflow-x: clip; } body { /* Fixes a weird Chrome bug where a overflow-x: scroll container's child div somehow bubbles up to the viewport and sets the total width to the scroll container + the navigation grid padding. Very strange but this hack fixes. */ overflow-x: clip; overflow-y: clip; } .content-viewer { width: 100%; } /** * NOTE: * We use [data-no-typography] attribute to disable typography styles on child * elements that need to opt-out of typography styling. This is used in editor * custom nodes (NodeViews.) To use, set data-no-typography on the component. */ .typography { /* BLOCK ELEMENTS */ p:not([data-no-typography] *) { margin-bottom: 0.5rem; } a:not([data-no-typography] *) { color: var(--colors-blue-9); } a:not([data-no-typography] *):hover { color: var(--colors-blue-10); text-decoration: underline; } a:not([data-no-typography] *):visited { color: var(--colors-blue-11); } img:not([data-no-typography] *) { margin-bottom: 0.5rem; } h1:not([data-no-typography] *), h2:not([data-no-typography] *), h3:not([data-no-typography] *), h4:not([data-no-typography] *), h5:not([data-no-typography] *), h6:not([data-no-typography] *) { margin: 1rem 0 1.38rem; font-weight: 500; line-height: 1.3; font-family: var(--fonts-heading); } h1:not([data-no-typography] *) { margin-top: 0; font-size: var(--global-font-size-h1); font-size: var(--global-font-size-h1-variable); font-weight: 700; } h2:not([data-no-typography] *) { font-size: var(--global-font-size-h2); font-size: var(--global-font-size-h2-variable); font-weight: 700; } h3:not([data-no-typography] *) { font-size: var(--global-font-size-h3); font-size: var(--global-font-size-h3-variable); font-weight: 700; } h4:not([data-no-typography] *) { font-size: var(--global-font-size-h4); font-size: var(--global-font-size-h4-variable); font-weight: 700; } h5:not([data-no-typography] *) { font-size: var(--global-font-size-h5); font-size: var(--global-font-size-h5-variable); font-weight: 700; } h6:not([data-no-typography] *) { font-size: var(--global-font-size-h6); font-size: var(--global-font-size-h6-variable); font-weight: 700; } small:not([data-no-typography] *) { font-size: var(--font-size); font-size: clamp(100%, calc(var(--font-size) / 4) + 4vw, var(--font-size)); } ol:not([data-no-typography] *) { list-style: decimal; } ul:not([data-no-typography] *) { list-style: circle; } li:not([data-no-typography] *) { margin-left: var(--spacing-4); } blockquote:not([data-no-typography] *) { background: var(--colors-gray-50); border-left: var(--spacing-2) solid var(--colors-gray-200); margin: var(--spacing-4) var(--spacing-2); padding: var(--spacing-2); border-radius: var(--radii-lg); } blockquote:not([data-no-typography] *) p { display: inline; } pre:not([data-no-typography] *) { font-family: monospace; overflow-x: scroll; max-width: 100%; border-radius: var(--radii-lg); padding: var(--spacing-2); background-color: var(--colors-bg-subtle); } /* LEAF ELEMENTS */ strong:not([data-no-typography] *) { font-weight: 600; } em:not([data-no-typography] *) { font-style: italic; } u:not([data-no-typography] *) { font-size: larger; text-decoration: underline; } code:not([data-no-typography] *) { font-family: monospace; } hr:not([data-no-typography] *) { border-color: var(--colors-border-default); padding-bottom: var(--spacing-2); padding-top: var(--spacing-2); } } /* Editor stuff */ .ProseMirror-focused, .ProseMirror:focus { height: 100%; outline: none; } .tiptap p.is-editor-empty:first-child::before { color: var(--colors-fg-subtle); content: attr(data-placeholder); float: left; height: 0; pointer-events: none; } /* Nice scrollbars for everything but the main browser viewport. */ body *::-webkit-scrollbar { width: var(--spacing-scroll-gutter); height: var(--spacing-scroll-gutter); } body *::-webkit-scrollbar-thumb { background-color: var(--colors-bg-muted); border-radius: var(--radii-lg); border: 0.1rem solid var(--colors-bg-subtle); } /* Fix for Panda CSS or LightningCSS bug: https://github.com/parcel-bundler/lightningcss/issues/695 Every recipe/style that uses backdrop filter must be also manually set here. */ .menu__content, .button--variant_subtle, .bkdp_auto { -webkit-backdrop-filter: var(--backdrop-blur,) var(--backdrop-brightness,) var(--backdrop-contrast,) var(--backdrop-grayscale,) var(--backdrop-hue-rotate,) var(--backdrop-invert,) var(--backdrop-opacity,) var(--backdrop-saturate,) var(--backdrop-sepia,); backdrop-filter: var(--backdrop-blur,) var(--backdrop-brightness,) var(--backdrop-contrast,) var(--backdrop-grayscale,) var(--backdrop-hue-rotate,) var(--backdrop-invert,) var(--backdrop-opacity,) var(--backdrop-saturate,) var(--backdrop-sepia,); }