grain.social/grain

Switch repository

Loading…

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>grain share card</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&display=block"
      rel="stylesheet"
    />
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html,
      body {
        background: transparent;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      .logo {
        width: 1200px;
        height: 630px;
        background:
          url("login-bg.jpg") center/cover no-repeat,
          #1a2238;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }
      .logo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(8, 11, 18, 0) 0%, rgba(8, 11, 18, 0.35) 100%);
        pointer-events: none;
      }
      .wordmark {
        font-family: "Syne", sans-serif;
        font-weight: 800;
        font-size: 200px;
        letter-spacing: -0.035em;
        line-height: 1;
        color: #ffffff;
        position: relative;
        z-index: 1;
        text-shadow:
          0 2px 12px rgba(0, 0, 0, 0.45),
          0 1px 2px rgba(0, 0, 0, 0.35);
      }
      .tagline {
        font-family: "Syne", sans-serif;
        font-weight: 600;
        font-size: 40px;
        color: #ffffff;
        position: relative;
        z-index: 1;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="logo">
      <span class="wordmark">grain</span
      ><span class="tagline">Photo sharing on the AT Protocol</span>
    </div>
  </body>
</html>