feat: spruce up design
This commit is contained in:
parent
2614dff452
commit
94e28067f9
51 changed files with 480 additions and 202 deletions
|
@ -7,8 +7,7 @@ permalink: '/assets/img/social-preview/{{ preview.data.title | slugify }}-previe
|
|||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="1200" height="628" viewBox="0 0 1200 628" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<svg width="1200" height="630" viewBox="0 0 1200 630" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
{% assign titleInLines = preview.data.title | splitLines: 40 %}
|
||||
{% assign numberOfLines = titleInLines.length %}
|
||||
{% if numberOfLines == 1 %}
|
||||
|
@ -23,15 +22,14 @@ eleventyExcludeFromCollections: true
|
|||
{% assign verticalStartingPoint = 170 %}
|
||||
{% endif %}
|
||||
|
||||
<!-- background -->
|
||||
<svg height="628" viewBox="0 0 1200 628" width="1200" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h1200v628h-1200z"/><path d="m0 482 33.3-3.2c33.4-3.1 100-9.5 166.7-9.6 66.7-.2 133.3 5.8 200 14.3s133.3 19.5 200 30.5 133.3 22 200 20 133.3-17 200-30.2c66.7-13.1 133.3-24.5 166.7-30.1l33.3-5.7v161h-33.3c-33.4 0-100 0-166.7 0s-133.3 0-200 0-133.3 0-200 0-133.3 0-200 0-133.3 0-200 0-133.3 0-166.7 0h-33.3z" fill="#3b82f6" stroke-linecap="round"/></svg>
|
||||
<svg id="visual" viewBox="0 0 1200 630" width="1200" height="630" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="1200" height="630" fill="#191919"></rect></svg>
|
||||
|
||||
<!-- date -->
|
||||
<text
|
||||
font-family="-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif"
|
||||
font-family="MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace"
|
||||
font-size="24"
|
||||
font-weight="bold"
|
||||
fill="#fff"
|
||||
font-weight="800"
|
||||
fill="#fafafa"
|
||||
>
|
||||
<tspan x="80" y="{{ verticalStartingPoint | minus: 120 }}">
|
||||
{{ preview.date | date: "%B %e, %Y" }}
|
||||
|
@ -41,14 +39,14 @@ eleventyExcludeFromCollections: true
|
|||
<!-- title -->
|
||||
<text
|
||||
id="text"
|
||||
font-family="-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif"
|
||||
font-family="MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace"
|
||||
font-size="40"
|
||||
font-weight="900"
|
||||
fill="#fff"
|
||||
font-weight="800"
|
||||
fill="#fafafa"
|
||||
>
|
||||
{% for line in titleInLines %}
|
||||
{% capture spacing %}{{ forloop.index0 | times: 50 }}{% endcapture %}
|
||||
<tspan x="80" y="{{ verticalStartingPoint | minus: 20 | plus: spacing }}">
|
||||
<tspan x="80" y="{{ verticalStartingPoint | plus: spacing }}">
|
||||
{{ line }}
|
||||
</tspan>
|
||||
{% endfor %}
|
||||
|
|
Reference in a new issue