improve vertical margins, reuse prose default

docs/todo3.md

@@ -140,5 +140,9 @@ style tags
 procitaj transition docs
 navbar buttons to links
 add astro and fastapi in resume
-
+close mobile header on md
+prose vec ima sve stilove kako treba, samo h1 ogranici na 48px jer je prose-xl
+umotaj sve u prose u Base layout, pa samo nekoliko slotova no-prose
+add colors and gradients to h1 maybe
+fix colors for all text
 ```

src/components/PostMeta.astro

@@ -22,7 +22,7 @@ const shouldDisplay = Object.values(Astro.props).some(Boolean);
 
 {
   shouldDisplay && (
-    <p aria-label="Post meta" class="not-prose flex flex-row flex-wrap items-center gap-2">
+    <p aria-label="Post meta" class="flex flex-row flex-wrap items-center gap-2">
         {publishDate && (      
             <Icon name="mdi:access-time" />
             <time itemprop="datePublished" datetime={formatDateIso(publishDate)}>

src/content/post/2024-01-17-example-article-2.mdx

@@ -1,5 +1,5 @@
 ---
-title: Example article 2
+title: Example article 2 dolor commodo ea ipsum tempor nisi aliqua
 description: |
   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

src/layouts/List.astro

@@ -11,9 +11,11 @@ const { title, description } = Astro.props;
 ---
 
 <Centered {...props}>
-  <article>
+  <article class="my-prose">
     <h1>{title}</h1>
     {description && <p class="mb-5">{description}</p>}
-    <slot />
+    <section class="not-prose">
+      <slot />
+    </section>
   </article>
 </Centered>

src/layouts/Page.astro

@@ -1,6 +1,5 @@
 ---
 import Centered from '@/layouts/Centered.astro';
-import Prose from '@/components/Prose.astro';
 
 import type { BaseProps } from '@/layouts/Base.astro';
 
@@ -10,9 +9,7 @@ const props = Astro.props;
 ---
 
 <Centered {...props}>
-  <article>
-    <Prose>
-      <slot />
-    </Prose>
+  <article class="my-prose">
+    <slot />
   </article>
 </Centered>

src/layouts/Post.astro

@@ -1,6 +1,5 @@
 ---
 import FullWidth from '@/layouts/FullWidth.astro';
-import Prose from '@/components/Prose.astro';
 
 import type { BaseProps } from '@/layouts/Base.astro';
 
@@ -14,7 +13,7 @@ const props = Astro.props;
     <figure class="w-full max-w-5xl md:mx-auto">
       <slot name="hero-image" />
     </figure>
-    <section class="my-prose w-full max-w-4xl md:mx-auto px-4 lg:px-0 py-4 lg:py-8">
+    <section class="my-prose w-full max-w-4xl md:mx-auto px-4 lg:px-0 py-12 md:py-16">
       <slot name="hero-text" />
       <slot name="content" />
     </section>

src/pages/blog/[...page].astro

@@ -31,8 +31,6 @@ const layoutProps = {
 ---
 
 <List {...layoutProps}>
-  <section>
-    <PostList posts={page.data} />
-  </section>
+  <PostList posts={page.data} />
   <Pagination {...paginationProps} />
 </List>

src/pages/blog/[slug].astro

@@ -73,7 +73,7 @@ const postMetaProps = {
           fetchpriority="high"
           loading="eager"
           itemprop="image"
-          class="block max-w-full h-auto aspect-[16/7] object-cover"
+          class="block max-w-full h-auto aspect-[16/8] object-cover"
           widths={[320, 540, 720, 1024]}
           sizes="(max-width: 475px) 320px, (max-width: 720px) 540px, (max-width: 1280px) 720px, 1024px"
         />
@@ -89,7 +89,7 @@ const postMetaProps = {
     </h1>
 
     {/* description */}
-    {description && <h2 class="mt-0 mb-3 font-normal text-xl lg:text-2xl">{description}</h2>}
+    {description && <h2 class="font-normal text-xl lg:text-2xl tracking-tight">{description}</h2>}
 
     {/* meta */}
     <PostMeta {...postMetaProps} />

src/pages/blog/categories/[category]/[...page].astro

@@ -36,9 +36,6 @@ const layoutProps = { title: `Category: ${category}` };
 ---
 
 <List {...layoutProps}>
-  <section>
-    <PostList posts={page.data} />
-  </section>
-
+  <PostList posts={page.data} />
   <Pagination {...paginationProps} />
 </List>

src/pages/blog/tags/[tag]/[...page].astro

@@ -33,9 +33,6 @@ const layoutProps = { title: `Tag: ${tag}` };
 ---
 
 <List {...layoutProps}>
-  <section>
-    <PostList posts={page.data} />
-  </section>
-
+  <PostList posts={page.data} />
   <Pagination {...paginationProps} />
 </List>

src/styles/my-prose.css

@@ -4,12 +4,11 @@
     @apply prose prose-slate max-w-none dark:prose-invert;
 
     /* responsive styling */
-    /* base */
+    /* all tags */
     @apply lg:prose-lg xl:prose-xl;
-    /* h1 */
+    /* limit just h1 */
     @apply prose-h1:text-3xl md:prose-h1:text-4xl lg:prose-h1:text-5xl;
 
     /* h1 */
-    @apply prose-h1:mb-4;
   }
 }

src/styles/tw-base.css

@@ -8,13 +8,14 @@
 @layer base {
   body {
     /* style base font in body, not in html so rem is unaffected */
+    /* not responsive font, will affect buttons, etc, all elements */
     color: var(--content);
-    @apply text-base sm:text-lg lg:text-xl;
+    /* @apply text-base sm:text-lg lg:text-xl; */
   }
 
   h1 {
     color: var(--headings);
-    @apply text-3xl sm:text-4xl md:text-5xl lg:text-[3.5rem] xl:text-[4rem];
+    @apply text-3xl sm:text-4xl md:text-5xl;
     @apply font-extrabold;
   }