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>
      <p>Pinafore is a web client for <ExternalLink href="https://joinmastodon.org">Mastodon</ExternalLink>, designed for speed and simplicity.</p>

      <p>Read the <ExternalLink href="https://nolanlawson.com/2018/04/09/introducing-pinafore-for-mastodon/">introductory blog post</ExternalLink>, 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>
  </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 ExternalLink from './ExternalLink.html'
  import SvgIcon from './SvgIcon.html'

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