more typography updates and initial table styles
MODIFY
src/components/docs/content-layout.svelte
src/components/docs/content-layout.svelte
@include h3;
}
+ :global(a) {
+ font-weight: 700;
+
+ &:hover {
+ color: var(--brand-ripe);
+ }
+ }
+
:global(h3 em) {
font-style: normal;
}
+ // Spacing
:global(p + h2),
:global(h2 ~ h2) {
margin-top: var(--medium);
margin-top: 8.8rem;
}
- // Video
+ :global(p + p) {
+ margin-top: var(--micro);
+ }
+
:global(p > iframe) {
margin-top: var(--medium);
}
+ :global(li + li) {
+ margin-top: var(--macro);
+ }
+
// Code blocks
:global(code) {
min-height: 3.2rem;
}
&[class*="language"] {
+ overflow: auto;
display: block;
padding: 2rem 2.4rem;
background: var(--sand-dark);
}
}
+ :global(pre) {
+ margin: var(--micro) 0;
+ }
+
:global(blockquote) {
margin: 3.2rem 0;
padding: 2.4rem;
background: var(--brand-almost-ripe);
}
}
+
+ :global(table) {
+ border-radius: 1.6rem;
+ overflow: hidden;
+ }
+
+ :global(thead) {
+ background: var(--sand-dark);
+ }
+
+ :global(tbody) {
+ background: var(--offwhite);
+ }
}
</style>

more typography updates and initial table styles