morten/morten-olsen.github.io
1
0
Fork 0
mirror of https://github.com/morten-olsen/morten-olsen.github.io.git synced 2026-02-08 01:46:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

new article

Browse Source
This commit is contained in:
Morten Olsen
2022-04-15 22:45:01 +02:00
parent fdda10b52b
commit fea27d9a5f
14 changed files with 76 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
content/images/share.ejs Normal file
View File

@@ -0,0 +1,67 @@
<html>
<head>
<style>
body, html {
width: 780px;
height: 780px;
overflow: hidden;
margin: 0;
background: #f0f0f0;
}
#bg {
position: fixed;
top: 30px;
bottom: 30px;
left: 30px;
right: 30px;
background-color: #fff;
background-image: url("<%=getAsset(background)%>");
background-size: cover;
background-position: center;
opacity: 0.3;
}
#info {
position: absolute;
bottom: 20px;
left: 20px;
right: 40px;
top: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#title, #subtitle {
display: inline-block;
width: auto;
padding: 20px;
font-size: 60px;
background: #222;
color: #fff;
transform: rotate(-1deg);
text-align: center;
}
#subtitle {
transform: rotate(2deg);
font-size: 20px;
background: #fff;
border: solid 3px #222;
color: #222;
margin-left: 20px;
padding: 10px;
text-transform: uppercase;
}
</style>
</head>
<body>
<div id="bg"></div>
<div id="info">
<div id="title"><%=title%></div>
<div id="subtitle"><%=subtitle%></div>
</div>
</body>
</html>