pinafore/routes/_components/NotLoggedInHome.html

<HiddenFromSSR>
  <FreeTextLayout>
    <div class="not-logged-in-home">
      <div class="banner">
        <svg aria-hidden="true" class="logo">
          <use xlink:href="#pinafore-logo" />
        </svg>
        <h1>Pinafore</h1>
      </div>
      <p>Pinafore is a web client for <ExternalLink href="https://joinmastodon.org">Mastodon</ExternalLink>, designed for speed and simplicity.</p>

      <p>To get started, log in to an instance:</p>

      <p style="text-align: right;"><a class="button primary" href="/settings/instances/add">Add an instance</a></p>
    </div>
  </FreeTextLayout>
</HiddenFromSSR>
<style>
  .not-logged-in-home {
    margin: 10px;
  }
  .not-logged-in-home .banner {
    display: flex;
    align-items: center;
    margin: 0 0 30px;
  }
  .not-logged-in-home svg {
    width: 70px;
    height: 70px;
    fill: royalblue;
    display: inline-block;
  }
  .not-logged-in-home h1 {
    color: royalblue;
    display: inline-block;
    font-size: 3em;
    margin: auto 15px;
  }

  @media (max-width: 767px) {
    .not-logged-in-home h1 {
      font-size: 2.7em;
    }
  }
</style>
<script>
  import FreeTextLayout from './FreeTextLayout.html'
  import HiddenFromSSR from './HiddenFromSSR.html'
  import ExternalLink from './ExternalLink.html'

  export default {
    components: {
      FreeTextLayout,
      HiddenFromSSR,
      ExternalLink
    }
  }
</script>