lume/src: make blogposts look better?

Signed-off-by: Xe Iaso <me@xeiaso.net>
Xe · Sep 13, 2024 · 9e79830 · 9e79830
1 parent c0e86a6
commit 9e79830
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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 %}