231 lines
11 KiB
Cheetah
231 lines
11 KiB
Cheetah
<DOCTYPE html>
|
|
<html>
|
|
<head><style>html, head, body { margin: 0; padding: 0; background-color: {{ .fgColor }}; } * { box-sizing: border-box; }</style></head>
|
|
<body>
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1200px" height="600px" style="border: 15px solid {{ .fgColor }}; border-radius: 20px;">
|
|
<foreignObject x="0" y="0" width="100%" height="100%">
|
|
<style>
|
|
@font-face {
|
|
font-family: "Roboto Bold";
|
|
src: url("https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmYUtfBBc4AMP6lQ.woff2") format("woff2");
|
|
font-style: normal;
|
|
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
@font-face {
|
|
font-family: "Roboto Medium";
|
|
src: url("https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2") format("woff2");
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
@font-face {
|
|
font-family: "Roboto Light";
|
|
src: url("https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2") format("woff2");
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
* {
|
|
font-family: 'Roboto Light';
|
|
}
|
|
:root {
|
|
--background-color: {{ .bgColor }};
|
|
--foreground-color: {{ .fgColor }};
|
|
}
|
|
#main {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--background-color);
|
|
color: var(--foreground-color);
|
|
}
|
|
h1 {
|
|
font-family: 'Roboto Bold';
|
|
margin: 0;
|
|
position: fixed;
|
|
top: 100px;
|
|
left: 50px;
|
|
height: 300px;
|
|
width: 780px;
|
|
font-size: 80px;
|
|
font-weight: 900;
|
|
line-height: 75px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box !important;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
white-space: normal;
|
|
}
|
|
h2 {
|
|
font-family: 'Roboto Medium';
|
|
margin: 0;
|
|
position: fixed;
|
|
top: 50px;
|
|
left: 50px;
|
|
font-size: 40px;
|
|
font-weight: 900;
|
|
width: 780px;
|
|
}
|
|
#profilePic {
|
|
position: fixed;
|
|
top: 50px;
|
|
right: 50px;
|
|
border-radius: 50px;
|
|
width: 300px;
|
|
}
|
|
|
|
.tags {
|
|
position: fixed;
|
|
left: 50px;
|
|
top: 420px;
|
|
width: 800px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
font-size: 25px;
|
|
font-weight: 200;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.tags span {
|
|
margin: 0 3px;
|
|
}
|
|
|
|
.social {
|
|
position: fixed;
|
|
left: 50px;
|
|
right: 50px;
|
|
bottom: 25px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
font-size: 20px;
|
|
font-weight: 200;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
color: var(--foreground-color);
|
|
fill: var(--foreground-color);
|
|
}
|
|
.social span {
|
|
margin: 0 5px;
|
|
}
|
|
.social svg:not(:first-of-type) {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
hr {
|
|
position: fixed;
|
|
height: 15px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 65px;
|
|
border: none;
|
|
outline: none;
|
|
background-color: var(--foreground-color);
|
|
}
|
|
</style>
|
|
<div id="main">
|
|
<h2>{{ .siteTitle }}</h2>
|
|
<h1>{{ .title }}</h1>
|
|
<img id="profilePic" src="{{ with .image }}{{ . }}{{ end }}" />
|
|
|
|
<div class="tags">
|
|
{{ with .tags }}
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon">
|
|
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
|
|
<line x1="7" y1="7" x2="7" y2="7"></line>
|
|
</svg>
|
|
{{ range (split .) }}
|
|
<span>#{{ . }}</span>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div class="social">
|
|
{{ with .twitter}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 310 310" height="25px" width="25px">
|
|
<path d="M302.973,57.388c-4.87,2.16-9.877,3.983-14.993,5.463c6.057-6.85,10.675-14.91,13.494-23.73
|
|
c0.632-1.977-0.023-4.141-1.648-5.434c-1.623-1.294-3.878-1.449-5.665-0.39c-10.865,6.444-22.587,11.075-34.878,13.783
|
|
c-12.381-12.098-29.197-18.983-46.581-18.983c-36.695,0-66.549,29.853-66.549,66.547c0,2.89,0.183,5.764,0.545,8.598
|
|
C101.163,99.244,58.83,76.863,29.76,41.204c-1.036-1.271-2.632-1.956-4.266-1.825c-1.635,0.128-3.104,1.05-3.93,2.467
|
|
c-5.896,10.117-9.013,21.688-9.013,33.461c0,16.035,5.725,31.249,15.838,43.137c-3.075-1.065-6.059-2.396-8.907-3.977
|
|
c-1.529-0.851-3.395-0.838-4.914,0.033c-1.52,0.871-2.473,2.473-2.513,4.224c-0.007,0.295-0.007,0.59-0.007,0.889
|
|
c0,23.935,12.882,45.484,32.577,57.229c-1.692-0.169-3.383-0.414-5.063-0.735c-1.732-0.331-3.513,0.276-4.681,1.597
|
|
c-1.17,1.32-1.557,3.16-1.018,4.84c7.29,22.76,26.059,39.501,48.749,44.605c-18.819,11.787-40.34,17.961-62.932,17.961
|
|
c-4.714,0-9.455-0.277-14.095-0.826c-2.305-0.274-4.509,1.087-5.294,3.279c-0.785,2.193,0.047,4.638,2.008,5.895
|
|
c29.023,18.609,62.582,28.445,97.047,28.445c67.754,0,110.139-31.95,133.764-58.753c29.46-33.421,46.356-77.658,46.356-121.367
|
|
c0-1.826-0.028-3.67-0.084-5.508c11.623-8.757,21.63-19.355,29.773-31.536c1.237-1.85,1.103-4.295-0.33-5.998
|
|
C307.394,57.037,305.009,56.486,302.973,57.388z"/>
|
|
</svg>
|
|
<span>@{{ . }}</span>
|
|
{{ end }}
|
|
|
|
{{ with .bluesky}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" height="25px" width="25px">
|
|
<path d="m0 0H512V512H0" fill="#fff"/>
|
|
<path d="M159 126c-28-22-74-38-74 14 0 11 6 88 9 101 13 43 57 54 97 48-69 11-87 50-49 89 72 75 104-18 112-42l2-5 2 5c8 24 40 117 112 42 38-39 20-78-49-89 40 6 84-5 97-48 3-13 9-90 9-101 0-52-46-36-74-14-39 29-82 89-97 121-15-32-58-92-97-121Z" />
|
|
</svg>
|
|
<span>@{{ . }}</span>
|
|
{{ end }}
|
|
|
|
{{ with .fediverse}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="25px" width="25px">
|
|
<g stroke-width="25">
|
|
<path stroke="#000" d="m106 179 31 197" />
|
|
<path stroke="#000" d="m137 375 201 32" />
|
|
<path stroke="#000" d="m423 229-90 178" />
|
|
<path stroke="#000" d="m282 88 141 141" />
|
|
<path stroke="#000" d="m105 179 178-90" />
|
|
</g>
|
|
<path fill="#000" d="m276 125h25l12 70-26-4m31 39-26-4 23 146h25" />
|
|
<path fill="#000" d="m164 347v28l136-69-4-26m36 10-4-26 67-34v28" />
|
|
<path fill="#000" d="m125 180v35l97 98 23-12m2 37 23-12 45 45v35" />
|
|
<path fill="#000" d="m254 118h28l-72 141-19-19m3 51-19-19-39 77h28" />
|
|
<path fill="#000" d="m137 171v25l66 11 12-23m24 29 12-24 140 23v25" />
|
|
<g stroke-width="3.5" stroke="#000">
|
|
<circle cx="106" cy="179" r="39" fill="#000" />
|
|
<circle cx="333" cy="406" r="39" fill="#000" />
|
|
<circle cx="137" cy="375" r="39" fill="#000" />
|
|
<circle cx="283" cy="88.5" r="39" fill="#000" />
|
|
<circle cx="423" cy="230" r="39" fill="#000" />
|
|
</g>
|
|
</svg>
|
|
<span>@{{ . }}</span>
|
|
{{ end }}
|
|
|
|
{{ with .github }}
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 291.32 291.32" height="25px" width="25px">
|
|
<path d="M145.66,0C65.219,0,0,65.219,0,145.66c0,80.45,65.219,145.66,145.66,145.66
|
|
s145.66-65.21,145.66-145.66C291.319,65.219,226.1,0,145.66,0z M186.462,256.625c-0.838-11.398-1.775-25.518-1.83-31.235
|
|
c-0.364-4.388-0.838-15.549-11.434-22.677c42.068-3.523,62.087-26.774,63.526-57.499c1.202-17.497-5.754-32.883-18.107-45.3
|
|
c0.628-13.282-0.401-29.023-1.256-35.941c-9.486-2.731-31.608,8.949-37.79,13.947c-13.037-5.062-44.945-6.837-64.336,0
|
|
c-13.747-9.668-29.396-15.64-37.926-13.974c-7.875,17.452-2.813,33.948-1.275,35.914c-10.142,9.268-24.289,20.675-20.447,44.572
|
|
c6.163,35.04,30.816,53.94,70.508,58.564c-8.466,1.73-9.896,8.048-10.606,10.788c-26.656,10.997-34.275-6.791-37.644-11.425
|
|
c-11.188-13.847-21.23-9.832-21.849-9.614c-0.601,0.218-1.056,1.092-0.992,1.511c0.564,2.986,6.655,6.018,6.955,6.263
|
|
c8.257,6.154,11.316,17.27,13.2,20.438c11.844,19.473,39.374,11.398,39.638,11.562c0.018,1.702-0.191,16.032-0.355,27.184
|
|
C64.245,245.992,27.311,200.2,27.311,145.66c0-65.365,52.984-118.348,118.348-118.348S264.008,80.295,264.008,145.66
|
|
C264.008,196.668,231.69,239.992,186.462,256.625z"/>
|
|
</svg>
|
|
<span>{{ . }}</span>
|
|
{{ end }}
|
|
|
|
{{ with .website }}
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" height="25px" width="25px">
|
|
<polygon points="478.609,55.652 478.609,155.826 33.391,155.826 33.391,55.652 0,55.652 0,456.348 33.391,456.348 33.391,189.217 478.609,189.217 478.609,456.348 512,456.348 512,55.652"/>
|
|
<rect x="33.391" y="22.261" width="445.217" height="33.391"/>
|
|
<rect x="33.391" y="456.348" width="445.217" height="33.391"/>
|
|
<rect x="411.826" y="89.044" width="33.391" height="33.391"/>
|
|
<rect x="345.043" y="89.044" width="33.391" height="33.391"/>
|
|
<rect x="77.913" y="233.739" width="356.174" height="33.391"/>
|
|
<rect x="77.913" y="311.652" width="178.087" height="33.391"/>
|
|
</svg>
|
|
<span>{{ . }}</span>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</foreignObject>
|
|
</svg>
|
|
</body>
|
|
</html>
|