AppStore/header.html

 1<!doctype html>
 2<!-- Product page header, after the krz.sh hero: three iPhones fanned over the app's indigo (#4338ca).
 3     header.html renders the 21:9 header (3840x1646), header.html#wide the 16:9 one (5244x2950),
 4     with headless Chromium, then the alpha channel is removed:
 5     Chromium --headless --hide-scrollbars --force-device-scale-factor=1 --window-size=3840,1646 --screenshot=header-21x9.png header.html
 6     Chromium --headless --hide-scrollbars --force-device-scale-factor=1 --window-size=5244,2950 --screenshot=header-16x9.png "file://$PWD/header.html#wide"
 7     magick header-21x9.png -alpha off PNG24:header-21x9.png -->
 8<html>
 9<head>
10<meta charset="utf-8">
11<style>
12  :root { --u: 1px; --top: 180px; }
13  * { box-sizing: border-box; }
14  html, body { margin: 0; width: 3840px; height: 1646px; overflow: hidden; }
15  body {
16    position: relative;
17    background:
18      radial-gradient(ellipse 55% 75% at 50% 30%, #6d64e8 0%, #4338ca 35%, #272080 70%, #120f3d 100%);
19  }
20  .iphone {
21    position: absolute; left: 50%; top: var(--top);
22    width: calc(860 * var(--u)); height: calc(1868 * var(--u));
23    padding: calc(24 * var(--u)); border-radius: calc(140 * var(--u)); background: #0c0c12;
24    box-shadow: 0 calc(50 * var(--u)) calc(120 * var(--u)) rgba(0, 0, 0, 0.5);
25  }
26  .iphone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(116 * var(--u)); }
27  .center { transform: translateX(-50%); z-index: 2; }
28  .left { transform: translate(calc(-50% - 760 * var(--u)), calc(120 * var(--u))) rotate(-8deg); }
29  .right { transform: translate(calc(-50% + 760 * var(--u)), calc(120 * var(--u))) rotate(8deg); }
30
31  /* 16:9, 5244x2950. */
32  html.wide { --u: 1.6px; --top: 420px; }
33  html.wide, .wide body { width: 5244px; height: 2950px; }
34</style>
35<script>if (location.hash === "#wide") document.documentElement.className = "wide";</script>
36</head>
37<body>
38  <div class="iphone left"><img src="screenshots/iphone-6.9/02-repo.png"></div>
39  <div class="iphone right"><img src="screenshots/iphone-6.9/03-mr-list.png"></div>
40  <div class="iphone center"><img src="screenshots/iphone-6.9/01-dashboard.png"></div>
41</body>
42</html>