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

feat: ✨ update og image template

Browse source
This commit is contained in:
Sebin Nyshkim 2024-10-22 22:09:23 +02:00
parent 5209eab34d
commit 514562f8e7
3 changed files with 78 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,27 +1,78 @@
<div
style="
width: 100vw;
height: 100vh;
padding: 64px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: 64px;
background-color: #0f172a;
color: #e2e8f0;
">
<div style="display: flex; flex: 0 0 256px">
<img
src="https://ref.sebin-nyshkim.net/sebin/assets/sebin-smug-icon-C3NF7g4H.png"
width="256"
height="256"
alt="Sebin"
style="border-radius: 100%; border: 8px solid currentColor" />
</div>
<style>
#top {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
height: 100%;
background-color: #0f172a;
color: #e2e8f0;
box-sizing: border-box;
background-size: 100% 100%;
}
<div style="flex: 1 1 0; display: flex; flex-flow: column nowrap">
<h1 style="font-size: 72px">{{ title | safe }}</h1>
<h2 style="margin-top: 64px; font-size: 30px; line-height: 36px">blog.sebin-nyshkim.net</h2>
#main {
flex: 1 1 0;
display: flex;
flex-flow: column nowrap;
width: 100%;
height: 100%;
background-color: rgb(15 23 42 / 0.65);
}
h1 {
flex: 1 1 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 100%;
padding: 64px 112px;
font-size: 72px;
text-wrap: balance;
}
#footer {
flex: 1 0 96px;
display: flex;
flex-flow: row nowrap;
align-items: center;
gap: 24px;
width: 100%;
padding: 0 24px;
background-color: rgb(8 47 73);
font-size: 28px;
font-weight: bold;
}
#footer #avatar {
flex: 0 0 64px;
display: flex;
width: 64px;
height: 64px;
background-size: 100% 100%;
border: 4px solid currentColor;
border-radius: 100%;
}
#footer #meta {
flex: 1 0 0;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
</style>
<div id="top" style="{% if image and image.src != '' %} background-image: url({{ image.src }}){% endif %}">
<div id="main">
<h1>{{ title | safe }}</h1>
<div id="footer">
<div id="avatar" style="{% if author and author.image != '' %} background-image: url({{ author.image }}){% endif %}"></div>
<div id="meta">
<p id="author">by {{ author.name }}</p>
<p id="blog">blog.sebin-nyshkim.net</p>
</div>
</div>
</div>
</div>