SebinNyshkim/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: 💄 work around satori not supporting background-size: cover correctly

Browse source
This commit is contained in:
Sebin Nyshkim 2024-10-23 17:28:39 +02:00
parent c70ee60df9
commit f4c50b6cad
1 changed files with 26 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/og-image.og.njk
View file

@ -4,32 +4,47 @@
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #0f172a; background-color: #0f172a;
color: #e2e8f0; color: #e2e8f0;
box-sizing: border-box; box-sizing: border-box;
background-size: 100% 100%;
} }
#main { #main {
flex: 1 1 0; flex: 1 1 100%;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgb(15 23 42 / 0.65);
} }
h1 { #heading {
flex: 1 1 100%; flex: 1 1 100%;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: center; justify-content: center;
width: 100%; 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; padding: 64px 112px;
font-size: 72px; font-size: 72px;
text-wrap: balance; text-wrap: balance;
background-color: rgb(15 23 42 / 0.65);
} }
#footer { #footer {
@ -63,9 +78,14 @@ h1 {
} }
</style> </style>
<div id="top" style="{% if image and image.src != '' %} background-image: url({{ image.src }}){% endif %}"> <div id="top">
<div id="main"> <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="footer">
<div id="avatar" style="{% if author and author.image != '' %} background-image: url({{ author.image }}){% endif %}"></div> <div id="avatar" style="{% if author and author.image != '' %} background-image: url({{ author.image }}){% endif %}"></div>