From 9e79830da22a4eac6a03e9dd8ea66daeb1631946 Mon Sep 17 00:00:00 2001
From: Xe Iaso <me@xeiaso.net>
Date: Fri, 13 Sep 2024 08:25:58 -0400
Subject: lume/src: make blogposts look better?

Signed-off-by: Xe Iaso <me@xeiaso.net>
---
 lume/src/_components/XeblogConv.tsx    | 2 +-
 lume/src/_components/XeblogPicture.tsx | 2 +-
 lume/src/_includes/blog.njk            | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/lume/src/_components/XeblogConv.tsx b/lume/src/_components/XeblogConv.tsx
index 5d783b9..66d5e10 100644
--- a/lume/src/_components/XeblogConv.tsx
+++ b/lume/src/_components/XeblogConv.tsx
@@ -19,7 +19,7 @@ const ConvSnippet = ({
 
   return (
     <>
-      <div className="my-4 flex space-x-4 rounded-md border border-solid border-fg-4 bg-bg-2 p-3 dark:border-fgDark-4 dark:bg-bgDark-2 max-w-full min-h-fit">
+      <div className="my-4 flex space-x-4 rounded-md border border-solid border-fg-4 bg-bg-2 p-3 dark:border-fgDark-4 dark:bg-bgDark-2 lg:max-w-[65ch] mx-auto min-h-fit">
         <div className="flex max-h-16 shrink-0 items-center justify-center self-center">
           <img
             style={`max-height:${standalone ? "6" : "4"}rem`}
diff --git a/lume/src/_components/XeblogPicture.tsx b/lume/src/_components/XeblogPicture.tsx
index 732b8ad..b8c7170 100644
--- a/lume/src/_components/XeblogPicture.tsx
+++ b/lume/src/_components/XeblogPicture.tsx
@@ -10,7 +10,7 @@ export default function XeblogPicture({
   className,
 }: XeblogPicture) {
   return (
-    <figure className={`max-w-3xl mx-auto ${className}`}>
+    <figure className={`max-w-3xl mx-auto not-prose w-full ${className}`}>
       <a href={`https://cdn.xeiaso.net/file/christine-static/${path}.jpg`}>
         <picture>
           <source
diff --git a/lume/src/_includes/blog.njk b/lume/src/_includes/blog.njk
index 2d8e2bb..f80d0f1 100644
--- a/lume/src/_includes/blog.njk
+++ b/lume/src/_includes/blog.njk
@@ -2,14 +2,14 @@
 layout: base.njk
 ---
 
-<article class="prose dark:prose-invert max-w-none">
+<article class="prose dark:prose-invert max-w-none lg:prose-p:max-w-[80ch] lg:prose-p:mx-auto lg:prose-headings:mx-20 lg:prose-blockquote:max-w-[70ch] lg:prose-blockquote:mx-auto">
     <h1 class="mb-2">{{title}}</h1>
-    <p class="text-sm text-fg-3 dark:text-fgDark-3 my-1">
+    <p class="text-sm text-fg-3 dark:text-fgDark-3 my-1 lg:mx-16">
         Published on <time datetime={{date | date("DATE")}}>{{date | date("DATE_US")}}</time>, {{ readingInfo.words }} words, {{ readingInfo.minutes }} minutes to read
     </p>
 
     {% if desc %}
-        <p class="text-sm font-serif text-fg-3 dark:text-fgDark-3 my-1">{{desc}}</p>
+        <p class="max-w-[60ch] lg:mx-auto text-sm font-serif text-fg-3 dark:text-fgDark-3 my-1">{{desc}}</p>
     {% endif %}
 
     {% if patronExclusive %}
-- 
cgit v1.2.3