start with my-prose class

nemanjam · May 20, 2024 · 7263bfe · 7263bfe
1 parent 21fab59
commit 7263bfe
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 32 deletions.
diff --git a/src/content/post/2024-01-16-example-article-1.mdx b/src/content/post/2024-01-16-example-article-1.mdx
@@ -1,7 +1,7 @@
 ---
 title: Example article 1
 description: |
-  Dolor velit excepteur cupidatat aute in fugiat id reprehenderit ipsum qui tempor fugiat. Excepteur tempor culpa velit duis quis enim aliquip. Et dolor tempor velit veniam incididunt irure. Aute ad tempor incididunt labore dolore incididunt in quis officia quis est. Ullamco aute et ex velit proident non.
+  Et dolor tempor velit: Aute ad tempor incididunt labore dolore incididunt in quis officia quis est. Ullamco aute et ex velit proident non.
 publishDate: 2024-01-16
 updatedDate: 2024-03-16
 slug: example-article-1

diff --git a/src/content/post/2024-01-17-example-article-2.mdx b/src/content/post/2024-01-17-example-article-2.mdx
@@ -1,7 +1,7 @@
 ---
 title: Example article 2
 description: |
-  Dolor velit excepteur cupidatat aute in fugiat id reprehenderit ipsum qui tempor fugiat. Excepteur tempor culpa velit duis quis enim aliquip. Et dolor tempor velit veniam incididunt irure. Aute ad tempor incididunt labore dolore incididunt in quis officia quis est. Ullamco aute et ex velit proident non.
+  Dolor velit excepteur cupidatat: Aute in fugiat id reprehenderit ipsum qui tempor fugiat. Excepteur tempor culpa velit duis quis enim aliquip.
 publishDate: 2024-01-17
 slug: example-article-2
 heroImage: '../../content/post/_images/2024-01-17-example-article-2/riverside1.jpg'

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

diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
@@ -88,11 +88,11 @@ const postMetaProps = {
       {draft && <sup class="text-red-400">(draft)</sup>}
     </h1>
 
+    {/* description */}
+    {description && <h2 class="mt-0 mb-3 font-normal text-xl lg:text-2xl">{description}</h2>}
+
     {/* meta */}
     <PostMeta {...postMetaProps} />
-
-    {/* description */}
-    {description && <p class=" text-lg lg:text-2xl">{description}</p>}
   </Fragment>
 
   {/* section content */}

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -6,6 +6,7 @@
 @import './themes.css';
 
 @import './tw-base.css';
+@import './my-prose.css';
 @import './code-block.css';
 /* @import './tw-components.css'; */
 @import './tw-utilities.css';
diff --git a/src/styles/my-prose.css b/src/styles/my-prose.css
@@ -0,0 +1,15 @@
+/* prose override */
+@layer base {
+  .my-prose {
+    @apply prose prose-slate max-w-none dark:prose-invert;
+
+    /* responsive styling */
+    /* base */
+    @apply lg:prose-lg xl:prose-xl;
+    /* h1 */
+    @apply prose-h1:text-3xl md:prose-h1:text-4xl lg:prose-h1:text-5xl;
+
+    /* h1 */
+    @apply prose-h1:mb-4;
+  }
+}
diff --git a/src/styles/tw-base.css b/src/styles/tw-base.css
@@ -1,34 +1,23 @@
-/* add typography styles for my components here, same as prose-slate, h1, h2, body... */
+/*------------------------------------------------------------------------
+ * add typography styles for my components here, same as prose-slate, h1, h2, body...
+ * set only: fontSize,  marginTop,  marginBottom,  lineHeight so prose can override them
+ * 
+ * most content and text is in .mdx pages and collections with prose, p, h1, h2, a...
+ *------------------------------------------------------------------------*/
 
 @layer base {
-  /* html {
-    @apply text-sm sm:text-base;
-  } */
-
-  /* most content and text is in .mdx pages and collections with prose, p, h1, h2, a... */
-
   body {
+    /* style base font in body, not in html so rem is unaffected */
     color: var(--content);
-    /* @apply text-sm sm:text-base lg:text-lg xl:text-xl 2xl:text-2xl; */
-    @apply text-sm sm:text-base;
+    @apply text-base sm:text-lg lg:text-xl;
   }
 
-  /* fontSize,  marginTop,  marginBottom,  lineHeight - needs to be set  */
-
   h1 {
     color: var(--headings);
     @apply text-3xl sm:text-4xl md:text-5xl lg:text-[3.5rem] xl:text-[4rem];
     @apply font-extrabold;
   }
 
-  /* @apply mb-8; */
-
-  /* all h2 that dont have .prose parent */
-  /* h2:not(:is(.prose *) h2) {
-    color: var(--headings);
-    @apply text-2xl font-bold mb-4;
-  } */
-
   .prose {
     /* @apply outline outline-blue-500; */
   }
@@ -37,14 +26,15 @@
   h2 {
     @apply bg-green-200;
   }
+  */
 
+  /* all h2 that dont have .prose parent */
+  /*
   h2:not(:is(.prose *) h2) {
     @apply outline outline-red-500;
   }
   */
 
-  /* h2:not(:is(.prose *) > h2 */
-
   /* 
   *:hover {
     @apply outline outline-red-500;