From bbd0962b5ad74980d883c67cfb62fe971cfe8e77 Mon Sep 17 00:00:00 2001
From: nemanjam <nemanja.mitic.elfak@hotmail.com>
Date: Mon, 20 May 2024 20:18:54 +0200
Subject: [PATCH] improve vertical margins, reuse prose default

---
 docs/todo3.md                                        | 6 +++++-
 src/components/PostMeta.astro                        | 2 +-
 src/content/post/2024-01-17-example-article-2.mdx    | 2 +-
 src/layouts/List.astro                               | 6 ++++--
 src/layouts/Page.astro                               | 7 ++-----
 src/layouts/Post.astro                               | 3 +--
 src/pages/blog/[...page].astro                       | 4 +---
 src/pages/blog/[slug].astro                          | 4 ++--
 src/pages/blog/categories/[category]/[...page].astro | 5 +----
 src/pages/blog/tags/[tag]/[...page].astro            | 5 +----
 src/styles/my-prose.css                              | 5 ++---
 src/styles/tw-base.css                               | 5 +++--
 12 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/docs/todo3.md b/docs/todo3.md
index bf857ed..c6957f2 100644
--- a/docs/todo3.md
+++ b/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
 ```
diff --git a/src/components/PostMeta.astro b/src/components/PostMeta.astro
index 6a69d5d..1cbb7ce 100644
--- a/src/components/PostMeta.astro
+++ b/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)}>
diff --git a/src/content/post/2024-01-17-example-article-2.mdx b/src/content/post/2024-01-17-example-article-2.mdx
index 7eed854..3074b18 100644
--- a/src/content/post/2024-01-17-example-article-2.mdx
+++ b/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
diff --git a/src/layouts/List.astro b/src/layouts/List.astro
index 56b7874..c3d9e89 100644
--- a/src/layouts/List.astro
+++ b/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>
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index 7a14ad7..52f797c 100644
--- a/src/layouts/Page.astro
+++ b/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>
diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
index bbf4763..c289f68 100644
--- a/src/layouts/Post.astro
+++ b/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>
diff --git a/src/pages/blog/[...page].astro b/src/pages/blog/[...page].astro
index e2d6158..daad9b2 100644
--- a/src/pages/blog/[...page].astro
+++ b/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>
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index e6d5451..b3b3b8b 100644
--- a/src/pages/blog/[slug].astro
+++ b/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} />
diff --git a/src/pages/blog/categories/[category]/[...page].astro b/src/pages/blog/categories/[category]/[...page].astro
index 067f3ca..7e5f51a 100644
--- a/src/pages/blog/categories/[category]/[...page].astro
+++ b/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>
diff --git a/src/pages/blog/tags/[tag]/[...page].astro b/src/pages/blog/tags/[tag]/[...page].astro
index f1a356e..9a2a7d5 100644
--- a/src/pages/blog/tags/[tag]/[...page].astro
+++ b/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>
diff --git a/src/styles/my-prose.css b/src/styles/my-prose.css
index be9c58d..48d8e3c 100644
--- a/src/styles/my-prose.css
+++ b/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;
   }
 }
diff --git a/src/styles/tw-base.css b/src/styles/tw-base.css
index 0524c16..15299e3 100644
--- a/src/styles/tw-base.css
+++ b/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;
   }