From 5ea283ac1a5eb51f36bdaaf5da535583845e8257 Mon Sep 17 00:00:00 2001
From: Ben Schlegel <ben5.schlegel@gmail.com>
Date: Fri, 22 Sep 2023 16:05:52 +0200
Subject: [PATCH] feat: improve image margins, add font breakpoint

---
 quartz/components/Head.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index 359187c03..dd4ef25bd 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -24,6 +24,9 @@ async function generateSocialImage(
   colorScheme: "lightMode" | "darkMode",
 ) {
   const font = (await getTtfFromGfont(fontName)) as ArrayBuffer
+  // How many characters are allowed before switching to smaller font
+  const fontBreakPoint = 26
+  const useSmallerFont = title.length > fontBreakPoint
   const svg = await satori(
     <div
       style={{
@@ -45,12 +48,17 @@ async function generateSocialImage(
           backgroundColor: cfg.theme.colors[colorScheme].light,
           flexDirection: "column",
           gap: "2.5rem",
+          paddingTop: "2rem",
+          paddingBottom: "2rem",
         }}
       >
         <div
           style={{
             color: cfg.theme.colors[colorScheme].dark,
-            fontSize: 80,
+            fontSize: useSmallerFont ? 70 : 80,
+            marginLeft: "4rem",
+            textAlign: "center",
+            marginRight: "4rem",
           }}
         >
           {title}
@@ -58,9 +66,9 @@ async function generateSocialImage(
         <div
           style={{
             color: cfg.theme.colors[colorScheme].dark,
-            fontSize: 42,
-            marginLeft: "10rem",
-            marginRight: "10rem",
+            fontSize: 44,
+            marginLeft: "8rem",
+            marginRight: "8rem",
             lineClamp: 3,
           }}
         >
@@ -72,7 +80,7 @@ async function generateSocialImage(
           height: "100%",
           width: "2vw",
           position: "absolute",
-          backgroundColor: cfg.theme.colors[colorScheme].secondary,
+          backgroundColor: cfg.theme.colors[colorScheme].tertiary,
           opacity: 0.85,
         }}
       />