style(aih): checklists

badass-courses · Jan 17, 2025 · 7d226d2 · 7d226d2
1 parent 63f0263
commit 7d226d2
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/apps/ai-hero/src/app/(content)/[post]/page.tsx b/apps/ai-hero/src/app/(content)/[post]/page.tsx
@@ -138,7 +138,7 @@ async function Post({ post }: { post: Post | null }) {
 	})
 
 	return (
-		<article className="prose sm:prose-lg lg:prose-xl prose-p:max-w-4xl prose-headings:max-w-4xl prose-ul:max-w-4xl prose-table:max-w-4xl prose-pre:max-w-4xl prose-p:text-foreground/80 mt-10 max-w-none [&_[data-pre]]:max-w-4xl">
+		<article className="prose sm:prose-lg lg:prose-xl prose-p:max-w-4xl prose-headings:max-w-4xl prose-ul:max-w-4xl prose-table:max-w-4xl prose-pre:max-w-4xl mt-10 max-w-none [&_[data-pre]]:max-w-4xl">
 			{content}
 		</article>
 	)

diff --git a/apps/ai-hero/src/app/(content)/lists/[slug]/_page.tsx b/apps/ai-hero/src/app/(content)/lists/[slug]/_page.tsx
@@ -212,7 +212,7 @@ export default async function ListPage(props: {
 			</header>
 			<div className="px-5 sm:px-8">
 				<div className="mx-auto mt-10 flex w-full max-w-5xl flex-col gap-10 sm:grid md:grid-cols-5 lg:gap-16">
-					<article className="prose sm:prose-lg lg:prose-xl prose-p:max-w-4xl prose-headings:max-w-4xl prose-ul:max-w-4xl prose-table:max-w-4xl prose-pre:max-w-4xl prose-p:text-foreground/80 col-span-3 max-w-none [&_[data-pre]]:max-w-4xl">
+					<article className="prose sm:prose-lg lg:prose-xl prose-p:max-w-4xl prose-headings:max-w-4xl prose-ul:max-w-4xl prose-table:max-w-4xl prose-pre:max-w-4xl col-span-3 max-w-none [&_[data-pre]]:max-w-4xl">
 						{body || 'No body found.'}
 					</article>
 					<aside className="col-span-2">

diff --git a/apps/ai-hero/src/styles/globals.css b/apps/ai-hero/src/styles/globals.css
@@ -59,7 +59,7 @@
 	.dark {
 		/* golden color scheme */
 		--background: 0 0% 0%;
-		--foreground: 32 5% 93%;
+		--foreground: 32 5% 87%;
 		--card: 32 8% 0%;
 		--card-foreground: 32 5% 90%;
 		--popover: 32 10% 5%;
@@ -144,3 +144,8 @@
 .md-editor-toolbar-warp {
 	@apply bg-background border-border border-b !important;
 }
+
+[data-checklist] {
+	@apply list-outside !pl-4;
+	list-style-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDE0IDE0Ij4KICA8cGF0aCBmaWxsPSIjRjNBRDVCIiBkPSJtMTQgMy4xNS0uNy0xLjRjLTYuMDM4IDEuNzUtOS4xIDUuNi05LjEgNS42bC0yLjgtMi4xTDAgNi42NWw0LjIgNS42YzMuMjM3LTYuMDM3IDkuOC05LjEgOS44LTkuMVoiLz4KPC9zdmc+Cg==');
+}
diff --git a/apps/ai-hero/tailwind.config.ts b/apps/ai-hero/tailwind.config.ts
@@ -1,3 +1,4 @@
+import { color } from 'framer-motion'
 import colors from 'tailwindcss/colors'
 import { fontFamily } from 'tailwindcss/defaultTheme'
 
@@ -42,7 +43,6 @@ module.exports = {
 				foreground: 'hsl(var(--foreground))',
 				primary: {
 					DEFAULT: 'hsl(var(--primary))',
-					// DEFAULT: 'oklch(var(--primary) / <alpha-value>)',
 					foreground: 'hsl(var(--primary-foreground))',
 				},
 				secondary: {
@@ -111,11 +111,23 @@ module.exports = {
 							fontWeight: 700,
 							color: theme('colors.foreground'),
 						},
+						ul: {
+							listStylePosition: 'outside',
+							listStyleImage:
+								'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEwIDEwIj4KICA8cGF0aCBzdHJva2U9IiNmZmYiIGQ9Ik0xLjE3IDIuNzg5IDUgLjU3NyA4LjgzIDIuNzl2NC40Mkw1IDkuNDIzIDEuMTcgNy4yMVYyLjc5WiIvPgo8L3N2Zz4K")',
+						},
+						'ul > li': {
+							color: theme('colors.foreground'),
+							'&::marker': {
+								listStyleImage:
+									'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEwIDEwIj4KICA8cGF0aCBmaWxsPSIjRDlEOUQ5IiBkPSJtNSAwIDQuMzMgMi41djVMNSAxMCAuNjcgNy41di01TDUgMFoiLz4KPC9zdmc+Cg==")',
+							},
+						},
 						blockquote: {
 							borderLeftColor: theme('colors.muted.DEFAULT'),
 							color: theme('colors.foreground'),
 						},
-						'li, strong': {
+						'ul, ol, li, strong': {
 							color: theme('colors.foreground'),
 						},
 						a: {