|
|
html { |
|
|
font-family: Inter; |
|
|
font-size: 16px; |
|
|
font-weight: 400; |
|
|
line-height: 1.5; |
|
|
-webkit-text-size-adjust: 100%; |
|
|
background: #fff; |
|
|
color: #323232; |
|
|
-webkit-font-smoothing: antialiased; |
|
|
-moz-osx-font-smoothing: grayscale; |
|
|
text-rendering: optimizeLegibility; |
|
|
} |
|
|
|
|
|
:root { |
|
|
--space: 1; |
|
|
--vspace: calc(var(--space) * 1rem); |
|
|
--vspace-0: calc(3 * var(--space) * 1rem); |
|
|
--vspace-1: calc(2 * var(--space) * 1rem); |
|
|
--vspace-2: calc(1.5 * var(--space) * 1rem); |
|
|
--vspace-3: calc(0.5 * var(--space) * 1rem); |
|
|
} |
|
|
|
|
|
.app { |
|
|
max-width: 748px !important; |
|
|
} |
|
|
|
|
|
.prose p { |
|
|
margin: var(--vspace) 0; |
|
|
line-height: var(--vspace * 2); |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
code { |
|
|
font-family: "Inconsolata", sans-serif; |
|
|
font-size: 16px; |
|
|
} |
|
|
|
|
|
h1, |
|
|
h1 code { |
|
|
font-weight: 400; |
|
|
line-height: calc(2.5 / var(--space) * var(--vspace)); |
|
|
} |
|
|
|
|
|
h1 code { |
|
|
background: none; |
|
|
border: none; |
|
|
letter-spacing: 0.05em; |
|
|
padding-bottom: 5px; |
|
|
position: relative; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
h2 { |
|
|
margin: var(--vspace-1) 0 var(--vspace-2) 0; |
|
|
line-height: 1em; |
|
|
} |
|
|
|
|
|
h3, |
|
|
h3 code { |
|
|
margin: var(--vspace-1) 0 var(--vspace-2) 0; |
|
|
line-height: 1em; |
|
|
} |
|
|
|
|
|
h4, |
|
|
h5, |
|
|
h6 { |
|
|
margin: var(--vspace-3) 0 var(--vspace-3) 0; |
|
|
line-height: var(--vspace); |
|
|
} |
|
|
|
|
|
.bigtitle, |
|
|
h1, |
|
|
h1 code { |
|
|
font-size: calc(8px * 4.5); |
|
|
word-break: break-word; |
|
|
} |
|
|
|
|
|
.title, |
|
|
h2, |
|
|
h2 code { |
|
|
font-size: calc(8px * 3.375); |
|
|
font-weight: lighter; |
|
|
word-break: break-word; |
|
|
border: none; |
|
|
background: none; |
|
|
} |
|
|
|
|
|
.subheading1, |
|
|
h3, |
|
|
h3 code { |
|
|
font-size: calc(8px * 1.8); |
|
|
font-weight: 600; |
|
|
border: none; |
|
|
background: none; |
|
|
letter-spacing: 0.1em; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
|
|
|
h2 code { |
|
|
padding: 0; |
|
|
position: relative; |
|
|
letter-spacing: 0.05em; |
|
|
} |
|
|
|
|
|
blockquote { |
|
|
font-size: calc(8px * 1.1667); |
|
|
font-style: italic; |
|
|
line-height: calc(1.1667 * var(--vspace)); |
|
|
margin: var(--vspace-2) var(--vspace-2); |
|
|
} |
|
|
|
|
|
.subheading2, |
|
|
h4 { |
|
|
font-size: calc(8px * 1.4292); |
|
|
text-transform: uppercase; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.subheading3, |
|
|
h5 { |
|
|
font-size: calc(8px * 1.2917); |
|
|
line-height: calc(1.2917 * var(--vspace)); |
|
|
|
|
|
font-weight: lighter; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.15em; |
|
|
} |
|
|
|
|
|
h6 { |
|
|
font-size: calc(8px * 1.1667); |
|
|
font-size: 1.1667em; |
|
|
font-weight: normal; |
|
|
font-style: italic; |
|
|
font-family: "le-monde-livre-classic-byol", serif !important; |
|
|
letter-spacing: 0px !important; |
|
|
} |
|
|
|
|
|
#start .md > *:first-child { |
|
|
margin-top: 0; |
|
|
} |
|
|
|
|
|
h2 + h3 { |
|
|
margin-top: 0; |
|
|
} |
|
|
|
|
|
.md hr { |
|
|
border: none; |
|
|
border-top: 1px solid var(--block-border-color); |
|
|
margin: var(--vspace-2) 0 var(--vspace-2) 0; |
|
|
} |
|
|
.prose ul { |
|
|
margin: var(--vspace-2) 0 var(--vspace-1) 0; |
|
|
} |
|
|
|
|
|
.gap { |
|
|
gap: 0; |
|
|
} |
|
|
|
|
|
.flyout-context-area { |
|
|
position: relative; |
|
|
overflow: visible; |
|
|
} |
|
|
|
|
|
.flyout-sheet { |
|
|
position: absolute; |
|
|
width: 350px; |
|
|
z-index: 1000; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|
|
border: 1px solid #E5E7EB; |
|
|
border-radius: var(--radius-lg); |
|
|
background: var(--panel-background-fill, white); |
|
|
padding: var(--spacing-lg) !important; |
|
|
} |
|
|
|
|
|
.fake-input-container { |
|
|
border: var(--input-border-width) solid var(--border-color-primary); |
|
|
border-radius: var(--input-radius); |
|
|
background: var(--input-background-fill); |
|
|
padding: 0 !important; |
|
|
align-items: stretch !important; |
|
|
box-shadow: var(--input-shadow); |
|
|
transition: box-shadow 0.2s, border-color 0.2s; |
|
|
gap: 0 !important; |
|
|
} |
|
|
|
|
|
.fake-input-container:focus-within { |
|
|
box-shadow: var(--input-shadow-focus); |
|
|
border-color: var(--input-border-color-focus); |
|
|
} |
|
|
|
|
|
.no-border-dropdown .form { |
|
|
border: none !important; |
|
|
box-shadow: none !important; |
|
|
background: transparent !important; |
|
|
} |
|
|
|
|
|
.integrated-ear-btn { |
|
|
align-self: center; |
|
|
background: none !important; |
|
|
border: none !important; |
|
|
box-shadow: none !important; |
|
|
color: var(--body-text-color-subdued) !important; |
|
|
font-size: 1.1em; |
|
|
min-width: 28px !important; |
|
|
width: 28px !important; |
|
|
height: 100% !important; |
|
|
padding: 20px var(--spacing-sm) 0 0 !important; |
|
|
transition: color 0.2s ease-in-out; |
|
|
flex-grow: 0 !important; |
|
|
} |
|
|
|
|
|
.integrated-ear-btn:hover { |
|
|
color: var(--body-text-color) !important; |
|
|
} |
|
|
|
|
|
.flyout-close-btn { |
|
|
position: absolute; |
|
|
top: 8px; |
|
|
right: 8px; |
|
|
min-width: 24px !important; |
|
|
width: 24px !important; |
|
|
height: 24px !important; |
|
|
padding: 0 !important; |
|
|
font-size: 1.2em !important; |
|
|
line-height: 1; |
|
|
background: transparent !important; |
|
|
border: none !important; |
|
|
box-shadow: none !important; |
|
|
color: var(--body-text-color-subdued) !important; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.flyout-close-btn button:hover { |
|
|
color: var(--body-text-color) !important; |
|
|
} |
