harbormaster/docs/og-card.html at main · ghzhost/harbormaster · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html><html><head><meta charset="utf-8"><style>
  *{margin:0;box-sizing:border-box}
  html,body{width:1200px;height:630px;overflow:hidden}
  .card{width:1200px;height:630px;display:flex;align-items:center;
    background:linear-gradient(135deg,#16232b 0%,#0f1a20 60%,#1e2e37 100%);
    font-family:"Iowan Old Style",Palatino,Georgia,serif;color:#e8e4d8;position:relative}
  .left{width:560px;padding:64px 40px 64px 68px;display:flex;flex-direction:column;gap:22px}
  .brand{font-size:74px;font-weight:700;letter-spacing:-.5px;line-height:1}
  .brand .a{color:#d9a83c}
  .tag{font-family:system-ui,sans-serif;font-size:27px;line-height:1.4;color:#cdd6da;font-weight:500}
  .tag b{color:#8fbf6a;font-weight:700}
  .dots{display:flex;gap:12px;margin-top:6px}
  .dots i{width:26px;height:26px;border-radius:7px;display:block;box-shadow:0 2px 6px rgba(0,0,0,.4)}
  .url{font-family:ui-monospace,Menlo,monospace;font-size:24px;color:#f6ecd4;
    margin-top:12px;font-weight:600}
  .url::before{content:"▶ ";color:#c94f38}
  .right{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:660px}
  .right img{width:100%;display:block;filter:drop-shadow(0 12px 40px rgba(0,0,0,.5))}
  .pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
    font-family:system-ui,sans-serif;font-size:19px;font-weight:700;color:#7fbf85;
    background:rgba(127,191,133,.14);padding:7px 15px;border-radius:99px}
</style></head><body>
  <div class="card">
    <div class="left">
      <div class="pill">⚓ FREE &amp; OPEN SOURCE</div>
      <div class="brand"><span class="a">⚓</span> Harbormaster</div>
      <div class="tag">The Catan generator that deals <b>fair starting settlements</b> to every player, not just a board.</div>
      <div class="dots">
        <i style="background:#3e7a45"></i><i style="background:#b5643c"></i>
        <i style="background:#d9a83c"></i><i style="background:#8fbf6a"></i>
        <i style="background:#7d8494"></i>
      </div>
      <div class="url">harbormaster.vercel.app</div>
    </div>
    <div class="right"><img src="assets/board-dark.png" alt=""></div>
  </div>
</body></html>