98 lines
1.8 KiB
Text
98 lines
1.8 KiB
Text
<style>
|
|
#top {
|
|
display: flex;
|
|
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;
|
|
}
|
|
|
|
#main {
|
|
flex: 1 1 100%;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#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 {
|
|
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">
|
|
<div id="main">
|
|
<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>
|
|
<div id="meta">
|
|
<p id="author">by {{ author.name }}</p>
|
|
<p id="blog">blog.sebin-nyshkim.net</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|