diff options
Diffstat (limited to '_includes/og-image.og.njk')
| -rw-r--r-- | _includes/og-image.og.njk | 68 |
1 files changed, 54 insertions, 14 deletions
diff --git a/_includes/og-image.og.njk b/_includes/og-image.og.njk index 7f3f7ad..64df971 100644 --- a/_includes/og-image.og.njk +++ b/_includes/og-image.og.njk @@ -2,30 +2,70 @@ .root { width: 100%; height: 100%; - display: flex; - font-family: "Kode Mono"; + position: relative; + + display: flex; flex-direction: column; justify-content: flex-end; - background: #171715; - padding: 20px 50px; - border-bottom: 20px solid #efefd2; - border-left: 20px solid #efefd2; + + font-family: "Kode Mono"; + + background: #151617; + + padding: 40px 60px; + + border-bottom: 20px solid #2a3039; + border-left: 20px solid #2a3039; + } + + .site { + position: absolute; + bottom: 40px; + left: 40px; + display: flex; + color: #7c8894; + font-size: 24px; } .title { - color: #efefd2; - font-size: 70px; + color: #d2e7ef; + font-size: 72px; + line-height: 1.1; + margin: 0; + max-width: 900px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } - .site { - color: #efefd2; - font-size: 20px; - display: contents; + + .logo { + display: flex; + position: absolute; + top: 40px; + right: 40px; + + color: #d2e7ef; + } + + .logo * { + color: #d2e7ef; + width: 88.64512px; + height: 128px; } </style> <div class="root"> - <div class="site">{{ siteTitle | safe }}</div> + <div class="logo"> + {{ "/assets/images/logo.svg" | embedSVG | safe }} + </div> + + <div class="site"> + {{ siteTitle | safe }} + </div> - <h1 class="title">{{ title | safe }}</h1> + <h1 class="title"> + {{ title | safe }} + </h1> </div> |