style: more consistent typography styling, fix build error

vnphanquang · Nov 29, 2024 · 491a90d · 491a90d
1 parent a62e531
commit 491a90d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 25 deletions.
diff --git a/packages/ui/css/components/c-callout/c-callout.css b/packages/ui/css/components/c-callout/c-callout.css
@@ -58,17 +58,13 @@
 }
 
 @layer typography {
-	.prose .c-callout {
+	.prose .c-callout:not([class~='not-prose'], [class~='not-prose'] *) {
 		margin-block: 32px;
 
 		& ::marker {
 			color: inherit;
 		}
 
-		&p {
-			margin: 0;
-		}
-
 		& p:first-of-type {
 			margin-top: 0;
 		}

diff --git a/packages/ui/css/typography.css b/packages/ui/css/typography.css
@@ -1,7 +1,5 @@
 @plugin '@tailwindcss/typography';
 
-@custom-selector :--is-prose :not([class~='not-prose'], [class~='not-prose'] *);
-
 @layer typography {
 	:root {
 		--color-pre-fg: hsl(0deg 0% 0%);
@@ -36,21 +34,21 @@
 	}
 
 	.prose {
-		& figcaption:--is-prose {
+		& figcaption:not([class~='not-prose'], [class~='not-prose'] *) {
 			text-align: center;
 		}
 
-		& figure:--is-prose {
+		& figure:not([class~='not-prose'], [class~='not-prose'] *) {
 			margin-block: 40px;
 		}
 
-		& iframe:--is-prose {
+		& iframe:not([class~='not-prose'], [class~='not-prose'] *) {
 			max-width: 100%;
 			margin-inline: auto;
 			border: 1px solid var(--color-outline);
 		}
 
-		& a:--is-prose {
+		& a:not([class~='not-prose'], [class~='not-prose'] *) {
 			&:not(.heading-anchor) {
 				@apply c-link;
 
@@ -86,7 +84,7 @@
 			}
 		}
 
-		& :not(pre, a) > code:--is-prose {
+		& :not(pre, a) > code:not([class~='not-prose'], [class~='not-prose'] *) {
 			padding: 0.2em 0.375em;
 
 			font-weight: 400;
@@ -105,7 +103,7 @@
 		}
 
 		/* Assume shikijs integration */
-		& pre:--is-prose {
+		& pre:not([class~='not-prose'], [class~='not-prose'] *) {
 			position: relative;
 
 			padding-top: 16px;
@@ -227,8 +225,13 @@
 	}
 
 	:is(
-		.prose pre:--is-prose[data-num-lines='1']:not(:has(.line[data-line-diff])),
-		.hide-line-number
+		.hide-line-number,
+		.prose
+			pre[data-num-lines='1']:not(
+				[class~='not-prose'],
+				[class~='not-prose'] *,
+				:has(.line[data-line-diff])
+			)
 	) {
 		& .line {
 			padding-left: 2ch;

diff --git a/sites/docs/src/routes/(site)/+layout.svelte b/sites/docs/src/routes/(site)/+layout.svelte
@@ -341,7 +341,7 @@
 		}
 	}
 
-	#docs :global(:where(h1, h2, h3, h4, h5, h6)) {
+	:where(#docs) :global(:where(h1, h2, h3, h4, h5, h6)) {
 		padding-bottom: 0.5rem;
 		border-bottom: 1px solid var(--color-outline);
 	}

diff --git a/sites/docs/src/routes/(site)/docs/(package)/+layout.svelte b/sites/docs/src/routes/(site)/docs/(package)/+layout.svelte
@@ -16,15 +16,15 @@
 	const githubSourceUrl = `https://github.com/vnphanquang/svelte-put/edit/main/sites/docs/src/routes/(site)/docs/(package)/${data.package.id}/+page.md.svelte`;
 </script>
 
-<h1 class="font-fingerpaint flex items-center justify-between">
-	{data.package.name}
-	<span class="not-prose">
-		<a href={data.package.githubUrl} class="c-link-icon" data-external>
-			<svg inline-src="simpleicon/github" class="inline" height="28" width="28" />
-			<span class="sr-only">Github</span>
-		</a>
-	</span>
-</h1>
+<div class="mb-8 flex items-center justify-between border-b">
+	<h1 class="font-fingerpaint border-b-0">
+		{data.package.name}
+	</h1>
+	<a href={data.package.githubUrl} class="c-link-icon not-prose" data-external>
+		<svg inline-src="simpleicon/github" class="inline" height="28" width="28" />
+		<span class="sr-only">Github</span>
+	</a>
+</div>
 {#if data.package.description}
 	<p class="c-callout c-callout--info c-callout--icon-bulb">{data.package.description}</p>
 {/if}
@@ -85,3 +85,10 @@
 <p class="text-right text-sm">
 	<a class="c-link" href={githubSourceUrl}> Edit this page on Github </a>
 </p>
+
+<style lang="postcss">
+	h1 {
+		margin-bottom: 0;
+		border-bottom: 0;
+	}
+</style>