semaphore/routes/_components/NotLoggedInHome.html

<FreeTextLayout>
  <div class="not-logged-in-home {{hidden ? 'hidden' : ''}}">
    <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 <a rel="noopener" target="_blank" href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p>

    <p>To get started, <a href="/settings/instances/add">log in to an instance</a>.</p>

    <p>Don't have an instance? <a rel="noopener" target="_blank" href="https://joinmastodon.org">Join Mastodon!</a></p>
  </div>
</FreeTextLayout>
<style>
  .not-logged-in-home {
    margin: 10px;
  }
  .banner {
    display: flex;
    align-items: center;
    margin: 0 0 30px;
  }
  svg {
    width: 70px;
    height: 70px;
    fill: royalblue;
    display: inline-block;
  }
  h1 {
    color: royalblue;
    display: inline-block;
    font-size: 3em;
    margin: auto 15px;
  }

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

  export default {
    components: {
      FreeTextLayout
    },
    data: () => ({
      hidden: true
    }),
    oncreate: function () {
      this.set({hidden: !process.browser})
    }
  }
</script>