grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
chore: add marketing logo with login-bg backdrop
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+70
+20
marketing/capture-logo.mjs
+20
marketing/capture-logo.mjs
···
1
+
import { chromium } from 'playwright';
2
+
import { fileURLToPath } from 'url';
3
+
import path from 'path';
4
+
5
+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
6
+
const file = 'file://' + path.join(__dirname, 'logo.html');
7
+
const out = path.join(__dirname, 'logo.png');
8
+
9
+
const browser = await chromium.launch();
10
+
const ctx = await browser.newContext({
11
+
viewport: { width: 512, height: 512 },
12
+
deviceScaleFactor: 2,
13
+
});
14
+
const page = await ctx.newPage();
15
+
await page.goto(file, { waitUntil: 'networkidle' });
16
+
await page.evaluate(() => document.fonts.ready);
17
+
const el = await page.locator('.logo');
18
+
await el.screenshot({ path: out, omitBackground: true });
19
+
await browser.close();
20
+
console.log('wrote', out);
marketing/login-bg.jpg
marketing/login-bg.jpg
This is a binary file and will not be displayed.
+50
marketing/logo.html
+50
marketing/logo.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="utf-8" />
5
+
<title>grain logo</title>
6
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
7
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
+
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&display=block" rel="stylesheet" />
9
+
<style>
10
+
* { box-sizing: border-box; margin: 0; padding: 0; }
11
+
html, body {
12
+
background: transparent;
13
+
-webkit-font-smoothing: antialiased;
14
+
-moz-osx-font-smoothing: grayscale;
15
+
}
16
+
.logo {
17
+
width: 512px;
18
+
height: 512px;
19
+
border-radius: 112px;
20
+
background: url("login-bg.jpg") center/cover no-repeat, #1a2238;
21
+
display: flex;
22
+
align-items: center;
23
+
justify-content: center;
24
+
position: relative;
25
+
overflow: hidden;
26
+
}
27
+
.logo::after {
28
+
content: "";
29
+
position: absolute;
30
+
inset: 0;
31
+
background: linear-gradient(180deg, rgba(8,11,18,0) 0%, rgba(8,11,18,0.35) 100%);
32
+
pointer-events: none;
33
+
}
34
+
.wordmark {
35
+
font-family: "Syne", sans-serif;
36
+
font-weight: 800;
37
+
font-size: 116px;
38
+
letter-spacing: -0.035em;
39
+
line-height: 1;
40
+
color: #ffffff;
41
+
position: relative;
42
+
z-index: 1;
43
+
text-shadow: 0 2px 12px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35);
44
+
}
45
+
</style>
46
+
</head>
47
+
<body>
48
+
<div class="logo"><span class="wordmark">grain</span></div>
49
+
</body>
50
+
</html>
marketing/logo.png
marketing/logo.png
This is a binary file and will not be displayed.