website: nxdns.sh on astro and starlight, with the docs and 0.0.24 screenshots

website/demo/gen/contact_sheet.py

@@ -13,14 +13,15 @@ PAGES = [
 ]
 
 
-def img(name, scheme):
-    with open(f"{SHOTS}/{name}-{scheme}.png", "rb") as f:
+def img(name, scheme, form=""):
+    with open(f"{SHOTS}/{name}-{scheme}{form}.png", "rb") as f:
         data = base64.b64encode(f.read()).decode()
-    return f'<figure><img alt="{name} {scheme}" src="data:image/png;base64,{data}"><figcaption>{scheme}</figcaption></figure>'
+    return f'<figure><img alt="{name} {scheme}{form}" src="data:image/png;base64,{data}"><figcaption>{scheme}{form}</figcaption></figure>'
 
 
 rows = "\n".join(
-    f'<section><h2>{html.escape(caption)}</h2><div class="pair">{img(name, "light")}{img(name, "dark")}</div></section>'
+    f'<section><h2>{html.escape(caption)}</h2><div class="pair">{img(name, "light")}{img(name, "dark")}</div>'
+    f'<div class="pair phone">{img(name, "light", "-phone")}{img(name, "dark", "-phone")}</div></section>'
     for name, caption in PAGES
 )
 page = f"""<!doctype html>
@@ -33,12 +34,13 @@ body {{ margin: 0; padding: 24px 16px; background: var(--bg); color: var(--fg);
 h1 {{ font-size: 20px; margin: 0 0 24px; }}
 h2 {{ font-size: 15px; font-weight: 500; margin: 32px 0 12px; }}
 .pair {{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }}
+.phone {{ grid-template-columns: repeat(2, minmax(0, 300px)); margin-top: 16px; }}
 @media (max-width: 800px) {{ .pair {{ grid-template-columns: 1fr; }} }}
 figure {{ margin: 0; }}
 img {{ width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; display: block; }}
 figcaption {{ color: var(--muted); font-size: 13px; margin-top: 4px; }}
 </style></head>
-<body><h1>nxdns admin — marketing screenshots (1440×900 @2x)</h1>
+<body><h1>nxdns admin — marketing screenshots (1440×900 @2x, phone 390×844 @3x)</h1>
 {rows}
 </body></html>
 """