fix: ui fix
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
/**
|
||||
* OG card for a public collection (`/c/<id>`).
|
||||
*
|
||||
* Renders a 1200×630 image with the collection title as the centrepiece,
|
||||
* Renders a 1200×1200 (square) image with the collection title as the centrepiece,
|
||||
* an item-count line, and the cover image dimmed behind it when present
|
||||
* (flat cream otherwise). Matches the post/profile card aesthetic.
|
||||
*
|
||||
@@ -83,7 +83,7 @@ export async function GET(
|
||||
<div
|
||||
style={{
|
||||
width: 1200,
|
||||
height: 630,
|
||||
height: 1200,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: hasImage ? "#1a1410" : "#faf5f0",
|
||||
@@ -97,13 +97,13 @@ export async function GET(
|
||||
alt=""
|
||||
src={bgImageUrl}
|
||||
width={1200}
|
||||
height={630}
|
||||
height={1200}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 1200,
|
||||
height: 630,
|
||||
height: 1200,
|
||||
objectFit: "cover",
|
||||
filter: "brightness(0.45)",
|
||||
}}
|
||||
@@ -114,7 +114,7 @@ export async function GET(
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 1200,
|
||||
height: 630,
|
||||
height: 1200,
|
||||
background:
|
||||
"linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1))",
|
||||
}}
|
||||
@@ -130,7 +130,7 @@ export async function GET(
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: 80,
|
||||
padding: 96,
|
||||
}}
|
||||
>
|
||||
{/* Eyebrow */}
|
||||
@@ -154,9 +154,9 @@ export async function GET(
|
||||
fontSize: title.length > 48 ? 60 : 76,
|
||||
fontWeight: 700,
|
||||
color: textPrimary,
|
||||
lineHeight: 1.15,
|
||||
marginTop: 24,
|
||||
maxHeight: 320,
|
||||
lineHeight: 1.2,
|
||||
marginTop: 28,
|
||||
maxHeight: 560,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
@@ -169,9 +169,9 @@ export async function GET(
|
||||
display: "flex",
|
||||
fontSize: 28,
|
||||
color: textSecondary,
|
||||
lineHeight: 1.4,
|
||||
marginTop: 24,
|
||||
maxHeight: 120,
|
||||
lineHeight: 1.45,
|
||||
marginTop: 28,
|
||||
maxHeight: 280,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
@@ -188,6 +188,7 @@ export async function GET(
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginTop: 48,
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 24, color: textSecondary, display: "flex" }}>
|
||||
@@ -202,7 +203,7 @@ export async function GET(
|
||||
),
|
||||
{
|
||||
width: 1200,
|
||||
height: 630,
|
||||
height: 1200,
|
||||
fonts: [
|
||||
{
|
||||
name: "Noto Sans",
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
/**
|
||||
* OG card for a single post.
|
||||
*
|
||||
* Renders a 1200×630 image with:
|
||||
* Renders a 1200×1200 (square) image with:
|
||||
*
|
||||
* • The post caption (the quote) as the visual centrepiece, in
|
||||
* serif-toned weight so it reads as a passage rather than UI chrome.
|
||||
@@ -96,7 +96,7 @@ export async function GET(
|
||||
<div
|
||||
style={{
|
||||
width: 1200,
|
||||
height: 630,
|
||||
height: 1200,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: hasImage ? "#1a1410" : "#faf5f0",
|
||||
@@ -111,13 +111,13 @@ export async function GET(
|
||||
alt=""
|
||||
src={bgImageUrl}
|
||||
width={1200}
|
||||
height={630}
|
||||
height={1200}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 1200,
|
||||
height: 630,
|
||||
height: 1200,
|
||||
objectFit: "cover",
|
||||
filter: "brightness(0.45)",
|
||||
}}
|
||||
@@ -129,7 +129,7 @@ export async function GET(
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 1200,
|
||||
height: 630,
|
||||
height: 1200,
|
||||
background:
|
||||
"linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1))",
|
||||
}}
|
||||
@@ -147,19 +147,19 @@ export async function GET(
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: 80,
|
||||
padding: 96,
|
||||
}}
|
||||
>
|
||||
{/* Caption — the centrepiece */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: displayCaption.length > 160 ? 36 : 44,
|
||||
fontSize: displayCaption.length > 180 ? 42 : 52,
|
||||
fontWeight: 700,
|
||||
color: textPrimary,
|
||||
lineHeight: 1.35,
|
||||
marginTop: 20,
|
||||
maxHeight: 380,
|
||||
lineHeight: 1.4,
|
||||
marginTop: 24,
|
||||
maxHeight: 720,
|
||||
overflow: "hidden",
|
||||
zIndex: 1,
|
||||
}}
|
||||
@@ -175,8 +175,9 @@ export async function GET(
|
||||
fontWeight: 700,
|
||||
color: textSecondary,
|
||||
letterSpacing: 4,
|
||||
lineHeight: 1.35,
|
||||
textTransform: "uppercase",
|
||||
marginTop: 28,
|
||||
marginTop: 36,
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
@@ -193,6 +194,7 @@ export async function GET(
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginTop: 48,
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
@@ -271,7 +273,7 @@ export async function GET(
|
||||
),
|
||||
{
|
||||
width: 1200,
|
||||
height: 630,
|
||||
height: 1200,
|
||||
fonts: [
|
||||
{
|
||||
name: "Noto Sans",
|
||||
|
||||
@@ -459,7 +459,7 @@ export function ogForPost(p: {
|
||||
openGraph: {
|
||||
title,
|
||||
description,
|
||||
images: [{ url: imageUrl, width: 1200, height: 630, alt: reference }],
|
||||
images: [{ url: imageUrl, width: 1200, height: 1200, alt: reference }],
|
||||
siteName: "Prabhupāda Says",
|
||||
},
|
||||
twitter: {
|
||||
@@ -495,7 +495,7 @@ export function ogForCollection(c: {
|
||||
openGraph: {
|
||||
title,
|
||||
description,
|
||||
images: [{ url: imageUrl, width: 1200, height: 630, alt: title }],
|
||||
images: [{ url: imageUrl, width: 1200, height: 1200, alt: title }],
|
||||
siteName: "Prabhupāda Says",
|
||||
},
|
||||
twitter: {
|
||||
|
||||
Reference in New Issue
Block a user