pinafore/src/routes/_components/NotLoggedInHome.html

<HiddenFromSSR>
  <FreeTextLayout>
    <div class="not-logged-in-home">
      <div class="banner">
        <SvgIcon className="not-logged-in-home-svg" href="#pinafore-logo" />
        <h1>Pinafore</h1>
      </div>
      <!-- Use raw HTML to make the output smaller -->
      {@html `
        <div>
          <p>
            Pinafore is a web client for
            <a rel="noopener" target="_blank" href="https://joinmastodon.org">Mastodon</a>,
            designed for speed and simplicity.
          </p>

          <p>
            Read the
            <a rel="noopener" target="_blank"
               href="https://nolanlawson.com/2018/04/09/introducing-pinafore-for-mastodon/">introductory blog post</a>,
            or get started by logging in to an instance:
          </p>

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

  @media (max-width: 767px) {
    .not-logged-in-home h1 {
      font-size: 2.7em;
    }
  }

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

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