Adjust font size

Author: wiseodd

astro.config.mjs

@@ -1,65 +1,66 @@
-import { defineConfig } from 'astro/config'
-import mdx from '@astrojs/mdx'
-import tailwind from '@astrojs/tailwind'
-import sitemap from '@astrojs/sitemap'
-import { remarkReadingTime } from './src/utils/remarkReadingTime.ts'
-import remarkUnwrapImages from 'remark-unwrap-images'
-import rehypeExternalLinks from 'rehype-external-links'
-import remarkSmartypants from 'remark-smartypants'
-import remarkMath from 'remark-math'
-import rehypeMathjax from 'rehype-mathjax/chtml'
-import expressiveCode from 'astro-expressive-code'
-import { expressiveCodeOptions } from './src/site.config'
-import { mathJaxMacros } from './src/mathjax.macros'
-import icon from 'astro-icon'
+import { defineConfig } from "astro/config";
+import mdx from "@astrojs/mdx";
+import tailwind from "@astrojs/tailwind";
+import sitemap from "@astrojs/sitemap";
+import { remarkReadingTime } from "./src/utils/remarkReadingTime.ts";
+import remarkUnwrapImages from "remark-unwrap-images";
+import rehypeExternalLinks from "rehype-external-links";
+import remarkSmartypants from "remark-smartypants";
+import remarkMath from "remark-math";
+import rehypeMathjax from "rehype-mathjax/chtml";
+import expressiveCode from "astro-expressive-code";
+import { expressiveCodeOptions } from "./src/site.config";
+import { mathJaxMacros } from "./src/mathjax.macros";
+import icon from "astro-icon";
 
 // https://astro.build/config
 export default defineConfig({
-	site: 'https://agustinus.kristia.de',
-	prefetch: true,
-	redirects: {
-		'/about': '/'
-	},
-	integrations: [
-		expressiveCode(expressiveCodeOptions),
-		tailwind({
-			applyBaseStyles: false
-		}),
-		sitemap(),
-		mdx(),
-		icon()
-	],
-	markdown: {
-		remarkPlugins: [
-			[remarkSmartypants, { dashes: 'oldschool' }],
-			remarkUnwrapImages,
-			remarkReadingTime,
-			remarkMath
-		],
-		rehypePlugins: [
-			[
-				rehypeExternalLinks,
-				{
-					target: '_blank',
-					rel: ['nofollow, noopener, noreferrer']
-				}
-			],
-			[
-				rehypeMathjax,
-				{
-					chtml: {
-						fontURL: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2'
-					},
-					tex: {
-						macros: mathJaxMacros
-					}
-				}
-			]
-		],
-		remarkRehype: {
-			footnoteLabelProperties: {
-				className: ['']
-			}
-		}
-	}
-})
+  site: "https://agustinus.kristia.de",
+  prefetch: true,
+  redirects: {
+    "/about": "/",
+  },
+  integrations: [
+    expressiveCode(expressiveCodeOptions),
+    tailwind({
+      applyBaseStyles: false,
+    }),
+    sitemap(),
+    mdx(),
+    icon(),
+  ],
+  markdown: {
+    remarkPlugins: [
+      [remarkSmartypants, { dashes: "oldschool" }],
+      remarkUnwrapImages,
+      remarkReadingTime,
+      remarkMath,
+    ],
+    rehypePlugins: [
+      [
+        rehypeExternalLinks,
+        {
+          target: "_blank",
+          rel: ["nofollow, noopener, noreferrer"],
+        },
+      ],
+      [
+        rehypeMathjax,
+        {
+          chtml: {
+            fontURL:
+              "https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2",
+          },
+          tex: {
+            macros: mathJaxMacros,
+          },
+        },
+      ],
+    ],
+    remarkRehype: {
+      footnoteLabelProperties: {
+        className: [""],
+      },
+    },
+  },
+});

src/layouts/BlogPost.astro

@@ -28,7 +28,7 @@ const { headings } = await post.render();
       <article class='flex-grow break-words' data-pagefind-body>
         <div id='blog-hero'><BlogHero content={post} /></div>
         <div
-          class='prose prose-base mt-12 max-w-[50rem] font-sans leading-6 dark:prose-invert prose-headings:font-bold prose-headings:text-foreground prose-headings:before:absolute prose-headings:before:-ms-4 prose-th:before:content-none prose-inline-code:font-mono prose-inline-code:text-sm prose-inline-code:font-normal'
+          class='prose prose-base mt-12 max-w-[50rem] font-sans text-base leading-6 dark:prose-invert prose-headings:font-bold prose-headings:text-foreground prose-headings:before:absolute prose-headings:before:-ms-4 prose-th:before:content-none prose-inline-code:font-mono prose-inline-code:text-sm prose-inline-code:font-normal'
         >
           <slot />
         </div>

src/site.config.ts

@@ -63,8 +63,11 @@ export const expressiveCodeOptions: AstroExpressiveCodeOptions = {
     uiFontWeight: "500",
     codeFontSize: "0.8rem",
     codeLineHeight: "1.2rem",
-    borderRadius: "4px",
+    borderRadius: "0px",
     codePaddingInline: "1rem",
     codeFontFamily: '"Jetbrains Mono", monospace;',
+    frames: {
+      frameBoxShadowCssValue: "none",
+    },
   },
 };

tailwind.config.js

@@ -71,10 +71,13 @@ const config = {
         sm: "calc(var(--radius) - 4px)",
       },
       fontFamily: {
-        sans: ["Arimo Variable", fontFamily.sans],
+        sans: [fontFamily.sans],
         serif: ["Times", fontFamily.serif],
         mono: ["Jetbrains Mono", fontFamily.mono],
       },
+      fontSize: {
+        base: "0.95rem",
+      },
     },
   },
 };