code blocks

Author: LadyBluenotes

src/styles/expressive-code.css

@@ -1,5 +1,5 @@
 .expressive-code-overrides .expressive-code {
-	@apply my-4 font-mono;
+	@apply mb-4 font-mono;
 }
 
 .expressive-code-overrides .expressive-code .frame {
@@ -11,16 +11,20 @@
 }
 
 html .expressive-code-overrides .expressive-code pre {
-	@apply rounded-xl border-[1.5px];
+	@apply border-[1.5px];
 }
 
 /* Copy Button */
+.copy {
+	@apply mt-[0.25rem];
+}
+
 .expressive-code-overrides .expressive-code .copy button::before {
 	@apply border-blue-900 opacity-30 dark:border-slate-500;
 }
 
 .expressive-code-overrides .expressive-code .copy button {
-	@apply rounded-lg bg-transparent transition-all;
+	@apply cursor-pointer rounded-lg bg-transparent transition-all;
 }
 
 .expressive-code-overrides .expressive-code .copy button::after {
@@ -63,7 +67,7 @@ html.windows
 	.expressive-code-overrides
 	.expressive-code
 	pre::-webkit-scrollbar-track {
-	@apply bg-transparent;
+	@apply h-5 w-5 border-[6px] border-solid border-transparent bg-slate-200/80;
 }
 
 html.windows

src/ui/callout.tsx

@@ -92,7 +92,7 @@ export function Callout(props: CalloutProps) {
 
 	return (
 		<Alert.Root
-			class={`my-6 flex w-full rounded-3xl border p-4 ${
+			class={`my-6 flex w-full rounded-xl border p-4 ${
 				styles[mergedProps.type].container
 			}`}
 		>

src/ui/docs-layout.tsx

@@ -44,7 +44,7 @@ export const DocsLayout = (props: DocsLayoutProps) => {
 				<Show when={titles()?.title} fallback={<Title>SolidDocs</Title>}>
 					{(title) => <Title>{`${title()} - ${projectTitle()}`}</Title>}
 				</Show>
-				<article class="expressive-code-overrides mx-auto w-full max-w-2xl overflow-hidden pb-16">
+				<article class="mx-auto w-full max-w-2xl overflow-hidden pb-16">
 					<Show when={titles()?.parent}>
 						{(t) => (
 							<span class="my-1 text-sm font-semibold text-blue-700 dark:text-blue-300">