global.css•5.25 kB
@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%;
}
.typography {
/* BLOCK ELEMENTS */
p {
margin-bottom: 0.5rem;
}
a {
color: var(--colors-blue-9);
}
a:hover {
color: var(--colors-blue-10);
text-decoration: underline;
}
a:visited {
color: var(--colors-blue-11);
}
img {
margin-bottom: 0.5rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 1rem 0 1.38rem;
font-weight: 500;
line-height: 1.3;
font-family: var(--fonts-heading);
}
h1 {
margin-top: 0;
font-size: var(--global-font-size-h1);
font-size: var(--global-font-size-h1-variable);
font-weight: 700;
}
h2 {
font-size: var(--global-font-size-h2);
font-size: var(--global-font-size-h2-variable);
font-weight: 700;
}
h3 {
font-size: var(--global-font-size-h3);
font-size: var(--global-font-size-h3-variable);
font-weight: 700;
}
h4 {
font-size: var(--global-font-size-h4);
font-size: var(--global-font-size-h4-variable);
font-weight: 700;
}
h5 {
font-size: var(--global-font-size-h5);
font-size: var(--global-font-size-h5-variable);
font-weight: 700;
}
h6 {
font-size: var(--global-font-size-h6);
font-size: var(--global-font-size-h6-variable);
font-weight: 700;
}
small {
font-size: var(--font-size);
font-size: clamp(100%, calc(var(--font-size) / 4) + 4vw, var(--font-size));
}
ol {
list-style: decimal;
}
ul {
list-style: circle;
}
li {
margin-left: var(--spacing-4);
}
blockquote {
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 p {
display: inline;
}
pre {
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 {
font-weight: 500;
}
em {
font-style: italic;
}
u {
font-size: larger;
text-decoration: underline;
}
code {
font-family: monospace;
}
hr {
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 bug */
.menu__content {
backdrop-filter: blur(10px);
}