update: show iamge at top of blog post, updated monospace font and base font size, default font for write

src/pages/Blog.tsx

@@ -54,8 +54,14 @@ export default function Blog() {
     siteConfig.footer.enabled && siteConfig.footer.showOnBlogPage;
 
   // Split featured posts: first one is hero, rest go to featured row
-  const heroPost = blogFeaturedPosts && blogFeaturedPosts.length > 0 ? blogFeaturedPosts[0] : null;
-  const featuredRowPosts = blogFeaturedPosts && blogFeaturedPosts.length > 1 ? blogFeaturedPosts.slice(1) : [];
+  const heroPost =
+    blogFeaturedPosts && blogFeaturedPosts.length > 0
+      ? blogFeaturedPosts[0]
+      : null;
+  const featuredRowPosts =
+    blogFeaturedPosts && blogFeaturedPosts.length > 1
+      ? blogFeaturedPosts.slice(1)
+      : [];
 
   // Get slugs of all featured posts for filtering
   const featuredSlugs = new Set(blogFeaturedPosts?.map((p) => p.slug) || []);
@@ -76,14 +82,12 @@ export default function Blog() {
 
   return (
     <div className={blogPageClass}>
-      {/* Navigation with back button */}
       <nav className="post-nav">
-        <button onClick={() => navigate("/")} className="back-button">
+        {/* Navigation with back button commented out  <button onClick={() => navigate("/")} className="back-button">
           <ArrowLeft size={16} />
           <span>Back</span>
-        </button>
+        </button>*/}
       </nav>
-
       {/* Blog page header */}
       <header className="blog-header">
         <div className="blog-header-top">
@@ -144,7 +148,6 @@ export default function Blog() {
             )}
         </div>
       </header>
-
       {/* Hero featured post section (only in cards view) */}
       {showPosts && hasFeaturedContent && viewMode === "cards" && heroPost && (
         <section className="blog-hero-section">
@@ -162,7 +165,6 @@ export default function Blog() {
           />
         </section>
       )}
-
       {/* Featured row: remaining featured posts in 2 columns (only in cards view) */}
       {showPosts && featuredRowPosts.length > 0 && viewMode === "cards" && (
         <section className="blog-featured-row">
@@ -174,7 +176,6 @@ export default function Blog() {
           />
         </section>
       )}
-
       {/* Regular posts section: non-featured posts in 3 columns */}
       {showPosts && (
         <section className="blog-posts">
@@ -192,7 +193,6 @@ export default function Blog() {
           )}
         </section>
       )}
-
       {/* Message when posts are disabled on blog page */}
       {!showPosts && (
         <p className="blog-disabled-message">
@@ -200,7 +200,6 @@ export default function Blog() {
           <code>postsDisplay.showOnBlogPage</code> in siteConfig to enable.
         </p>
       )}
-
       {/* Footer section */}
       {showFooter && <Footer />}
     </div>

src/pages/Post.tsx

@@ -241,6 +241,16 @@ export default function Post({
           
           {/* Main content */}
           <article className={`post-article ${hasAnySidebar ? "post-article-with-sidebar" : ""} ${hasOnlyRightSidebar ? "post-article-centered" : ""}`}>
+            {/* Display image at top if showImageAtTop is true */}
+            {page.showImageAtTop && page.image && (
+              <div className="post-header-image">
+                <img
+                  src={page.image}
+                  alt={page.title}
+                  className="post-header-image-img"
+                />
+              </div>
+            )}
             <header className="post-header">
               <div className="post-title-row">
                 <h1 className="post-title">{page.title}</h1>
@@ -374,6 +384,16 @@ export default function Post({
         )}
 
         <article className={`post-article ${hasAnySidebar ? "post-article-with-sidebar" : ""} ${hasOnlyRightSidebar ? "post-article-centered" : ""}`}>
+        {/* Display image at top if showImageAtTop is true */}
+        {post.showImageAtTop && post.image && (
+          <div className="post-header-image">
+            <img
+              src={post.image}
+              alt={post.title}
+              className="post-header-image-img"
+            />
+          </div>
+        )}
         <header className="post-header">
           <div className="post-title-row">
             <h1 className="post-title">{post.title}</h1>

src/pages/Write.tsx

@@ -32,6 +32,7 @@ const POST_FIELDS = [
   { name: "tags", required: true, example: '["tag1", "tag2"]' },
   { name: "readTime", required: false, example: '"5 min read"' },
   { name: "image", required: false, example: '"/images/my-image.png"' },
+  { name: "showImageAtTop", required: false, example: "true" },
   {
     name: "excerpt",
     required: false,
@@ -65,6 +66,7 @@ const PAGE_FIELDS = [
   { name: "showInNav", required: false, example: "true" },
   { name: "excerpt", required: false, example: '"Short description"' },
   { name: "image", required: false, example: '"/images/thumbnail.png"' },
+  { name: "showImageAtTop", required: false, example: "true" },
   { name: "featured", required: false, example: "true" },
   { name: "featuredOrder", required: false, example: "1" },
   { name: "authorName", required: false, example: '"Jane Doe"' },
@@ -180,7 +182,7 @@ export default function Write() {
   const [content, setContent] = useState("");
   const [copied, setCopied] = useState(false);
   const [copiedField, setCopiedField] = useState<string | null>(null);
-  const [font, setFont] = useState<"serif" | "sans" | "monospace">("serif");
+  const [font, setFont] = useState<"serif" | "sans" | "monospace">("sans");
   const [isAIChatMode, setIsAIChatMode] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -210,7 +212,7 @@ export default function Write() {
       setContentType(savedType);
     }
 
-    // Use saved font preference, or fall back to global font, or default to serif
+    // Use saved font preference, or fall back to global font, or default to sans
     if (
       savedFont &&
       (savedFont === "serif" ||
@@ -218,9 +220,16 @@ export default function Write() {
         savedFont === "monospace")
     ) {
       setFont(savedFont);
-    } else {
+    } else if (
+      globalFont === "serif" ||
+      globalFont === "sans" ||
+      globalFont === "monospace"
+    ) {
       // Sync with global font on first load
       setFont(globalFont);
+    } else {
+      // Default to sans if no saved preference and global font is not valid
+      setFont("sans");
     }
   }, [globalFont]);
 

src/styles/global.css

@@ -25,7 +25,7 @@
   --font-size-xs: 12px;
   --font-size-sm: 13px;
   --font-size-md: 16px;
-  --font-size-base: 18px;
+  --font-size-base: 16px;
   --font-size-lg: 17px;
   --font-size-xl: 18px;
   --font-size-2xl: 20px;
@@ -55,7 +55,7 @@
   --font-size-post-description: var(--font-size-xl);
 
   /* Blog content font sizes (article body) */
-  --font-size-blog-content: var(--font-size-lg);
+  --font-size-blog-content: var(--font-size-md);
   --font-size-blog-h1: var(--font-size-3xl);
   --font-size-blog-h2: var(--font-size-2xl);
   --font-size-blog-h3: var(--font-size-xl);
@@ -77,7 +77,7 @@
   /* Footer and tags font sizes */
   --font-size-post-tag: var(--font-size-sm);
   --font-size-share-button: var(--font-size-md);
-  --font-size-footer-text: 18px;
+  --font-size-footer-text: var(--font-size-base);
 
   /* Blog page font sizes */
   --font-size-blog-page-title: 2rem;
@@ -876,6 +876,21 @@ body {
   margin-bottom: 48px;
 }
 
+/* Header image displayed at top of post/page */
+.post-header-image {
+  width: 100%;
+  margin-bottom: 32px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.post-header-image-img {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+}
+
 /* Title row container - flex layout for title and CopyPageDropdown */
 .post-title-row {
   display: flex;