feat: tweak toc, headings, ...

trueberryless-org · Jan 20, 2025 · d01f201 · d01f201
1 parent 5a85c9b
commit d01f201
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 0 deletions.
diff --git a/apps/docs/src/content/docs/guides/install.mdx b/apps/docs/src/content/docs/guides/install.mdx
@@ -6,6 +6,8 @@ description: Install the template theme for Starlight.
 import { Steps } from "@astrojs/starlight/components";
 import { PackageManagers } from "starlight-package-managers";
 
+This guide will help you get started with the minimalistic theme for Starlight.
+
 <Steps>
 
 1. Install the theme package to your project with your preferred package manager:

diff --git a/apps/docs/src/content/docs/reference/components.mdx b/apps/docs/src/content/docs/reference/components.mdx
@@ -13,6 +13,8 @@ import { LinkButton } from '@astrojs/starlight/components';
 import { Steps } from '@astrojs/starlight/components';
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
+Her you can see all the components available in Starlight in order to see how the plugin visually changes them.
+
 ## Card
 <Card title="Check this out" icon="star">Interesting content you want to highlight.</Card>
 

diff --git a/packages/theme/index.ts b/packages/theme/index.ts
@@ -10,7 +10,9 @@ export default function createPlugin(): StarlightPlugin {
 					customCss: [
 						"starlight-minimalistic-theme/styles/theme.css",
 						"starlight-minimalistic-theme/styles/asides.css",
+						"starlight-minimalistic-theme/styles/markdown.css",
 						"starlight-minimalistic-theme/styles/sidebar.css",
+						"starlight-minimalistic-theme/styles/toc.css",
 						...(config.customCss ?? []),
 					],
 				});

diff --git a/packages/theme/styles/markdown.css b/packages/theme/styles/markdown.css
@@ -0,0 +1,14 @@
+.sl-markdown-content
+	:not(h1, h2, h3, h4, h5, h6)
+	+ :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+	margin-top: 2.5em;
+}
+
+.main-pane .content-panel {
+	padding: 3rem var(--sl-content-pad-x) 0.5rem;
+}
+
+.main-pane .content-panel + .content-panel {
+	padding-top: 0;
+	border-top: none;
+}
diff --git a/packages/theme/styles/theme.css b/packages/theme/styles/theme.css
@@ -3,3 +3,22 @@
 	- https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css
 	For more complex custom styles, you may need to refer to Starlight's components.
 */
+
+:root,
+::backdrop {
+	--sl-text-3xl: 1.6875rem; /* 27px */
+	--sl-text-h1: var(--sl-text-3xl);
+	--sl-text-h2: var(--sl-text-2xl);
+	--sl-text-h3: var(--sl-text-xl);
+	--sl-text-h4: var(--sl-text-lg);
+	--sl-text-h5: var(--sl-text-base);
+}
+
+@media (min-width: 50em) {
+	:root {
+		--sl-text-h1: var(--sl-text-3xl);
+		--sl-text-h2: var(--sl-text-2xl);
+		--sl-text-h3: var(--sl-text-xl);
+		--sl-text-h4: var(--sl-text-lg);
+	}
+}
diff --git a/packages/theme/styles/toc.css b/packages/theme/styles/toc.css
@@ -0,0 +1,11 @@
+.right-sidebar-panel :global(h2) {
+	font-size: var(--sl-text-sm);
+}
+
+@media (min-width: 72rem) {
+	.right-sidebar {
+		position: sticky;
+		top: -1.7rem;
+		padding-top: calc(var(--sl-nav-height) + 1.7rem);
+	}
+}