From f4c50b6cad621d2a60885d5c5c0c63b756d25733 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Wed, 23 Oct 2024 17:28:39 +0200
Subject: [PATCH] fix: :lipstick: work around satori not supporting
 background-size: cover correctly

---
 src/og-image.og.njk | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/og-image.og.njk b/src/og-image.og.njk
index 45fcac0..ebf6ff1 100644
--- a/src/og-image.og.njk
+++ b/src/og-image.og.njk
@@ -4,32 +4,47 @@
   flex-flow: column nowrap;
   justify-content: flex-start;
   align-items: flex-start;
+  position: relative;
   width: 100%;
   height: 100%;
   background-color: #0f172a;
   color: #e2e8f0;
   box-sizing: border-box;
-  background-size: 100% 100%;
 }
 
 #main {
-  flex: 1 1 0;
+  flex: 1 1 100%;
   display: flex;
   flex-flow: column nowrap;
   width: 100%;
   height: 100%;
-  background-color: rgb(15 23 42 / 0.65);
 }
 
-h1 {
+#heading {
   flex: 1 1 100%;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   width: 100%;
+}
+
+#background {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+h1 {
+  flex: 1 0 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
   padding: 64px 112px;
   font-size: 72px;
   text-wrap: balance;
+  background-color: rgb(15 23 42 / 0.65);
 }
 
 #footer {
@@ -63,9 +78,14 @@ h1 {
 }
 </style>
 
-<div id="top" style="{% if image and image.src != '' %} background-image: url({{ image.src }}){% endif %}">
+<div id="top">
   <div id="main">
-    <h1>{{ title | safe }}</h1>
+    <div id="heading">
+      {% if image and image.src != '' %}
+        <img id="background" src="{{ image.src }}" alt="{{ image.alt }}">
+      {% endif %}
+      <h1>{{ title | safe }}</h1>
+    </div>
 
     <div id="footer">
       <div id="avatar" style="{% if author and author.image != '' %} background-image: url({{ author.image }}){% endif %}"></div>