initial style pass of docs content
MODIFY
src/components/docs/content-layout.svelte
src/components/docs/content-layout.svelte
$: $docsCurrentSectionStore = section;
</script>
-<style>
- .content :global(blockquote) {
- @apply my-14 p-8 rounded-lg bg-orange-700;
+<style lang="scss">
+ @mixin h3 {
+ font-size: var(--p-large);
+ line-height: 3.2rem;
}
- .content :global(blockquote code) {
- @apply p-2 rounded-lg bg-orange-900;
+ .content {
+ // Typography
+ :global(h1),
+ :global(h2),
+ :global(h3) {
+ margin-bottom: var(--xx-small);
+ font-weight: 700;
}
- .content :global(code) {
- @apply p-2 rounded-lg bg-orange-700;
+ :global(h1) {
+ font-size: 4.8rem;
+ line-height: 5.6rem;
}
- .content :global(pre) {
- @apply p-8 rounded-lg bg-gray-300 overflow-x-scroll;
- }
+ :global(h2) {
+ font-size: var(--h4);
+ line-height: 4rem;
- .content :global(pre code) {
- @apply bg-transparent;
+ &.h3 {
+ @include h3;
+ }
}
- .content :global(h1) {
- @apply text-h1;
+ :global(h3) {
+ @include h3;
}
- .content :global(h2) {
- @apply text-h2;
+ :global(h3 em) {
+ font-style: normal;
}
- .content :global(h3) {
- @apply text-h3;
+ :global(p + h3),
+ :global(p + .h3) {
+ margin-top: 8.8rem;
}
- .content :global(h4) {
- @apply text-h4;
+ // Video
+ :global(p > iframe) {
+ margin: var(--medium) 0;
}
- .content :global(h5) {
- @apply text-h5;
+ // Code blocks
+ :global(code) {
+ min-height: 3.2rem;
+ padding: 0 0.8rem;
+ border-radius: 1.2rem;
+ background: var(--brand-light);
+
+ &:not([class]) {
+ display: inline-flex;
+ align-items: center;
}
- .content :global(h6) {
- @apply text-h6;
+ &.language-null {
+ display: block;
+ padding: 2rem 2.4rem;
+ background: var(--sand-dark);
+ }
}
- .content :global(p) {
- @apply my-8;
+ :global(blockquote) {
+ margin: 3.2rem 0;
+ padding: 2.4rem;
+ border-radius: 1.2rem;
+ background: var(--brand-light);
+
+ :global(code) {
+ background: var(--brand-almost-ripe);
+ }
+ }
}
</style>

initial style pass of docs content