sync breakpoints

nemanjam · May 21, 2024 · 5b42b12 · 5b42b12
1 parent ff6ef46
commit 5b42b12
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 5 deletions.
diff --git a/docs/todo2.md b/docs/todo2.md
@@ -141,7 +141,7 @@ https://salient.tailwindui.com/
 // linkedin blog posts, example
 https://www.linkedin.com/pulse/react-19-beta-now-available-npm-iii-amigoes-qpjke/
 
-// tailwind guy
+// tailwind guy, keystatic, very simple
 https://github.com/simonswiss/simonswiss.com
 
 -----------

diff --git a/docs/todo3.md b/docs/todo3.md
@@ -154,4 +154,5 @@ improve PostItem image and rest
 ul li PostList, ProjectList
 not-prose not working for my-prose
 not-prose fails for font-size, inherited from <main />, i za cn(proseClasses)
+keep all breakpoints in sync, prose-lg, h1 sizes, py layout
 ```
diff --git a/src/components/Prose.astro b/src/components/Prose.astro
@@ -7,7 +7,7 @@ export const proseClasses = cn(
 
   // responsive styling
   // all tags
-  'md:prose-lg xl:prose-xl',
+  'md:prose-lg lg:prose-xl',
   // limit just h1
   'prose-h1:text-3xl md:prose-h1:text-4xl lg:prose-h1:text-5xl',
 

diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
@@ -10,10 +10,10 @@ const props = Astro.props;
 
 <FullWidth {...props}>
   <article>
-    <figure class="w-full max-w-5xl md:mx-auto">
+    <figure class="not-prose w-full max-w-5xl md:mx-auto">
       <slot name="hero-image" />
     </figure>
-    <section class="w-full max-w-4xl md:mx-auto px-4 lg:px-0 py-12 md:py-16">
+    <section class="w-full max-w-4xl md:mx-auto px-4 lg:px-0 py-12 lg:py-16">
       <slot name="hero-text" />
       <slot name="content" />
     </section>

diff --git a/src/styles/my-prose.css b/src/styles/my-prose.css
@@ -5,7 +5,7 @@
 
     /* responsive styling */
     /* all tags */
-    @apply md:prose-lg xl:prose-xl;
+    @apply md:prose-lg lg:prose-xl;
     /* limit just h1 */
     @apply prose-h1:text-3xl md:prose-h1:text-4xl lg:prose-h1:text-5xl;