<HiddenFromSSR> <FreeTextLayout> <div class="not-logged-in-home"> <div class="banner"> <svg aria-hidden="true" class="not-logged-in-home-svg"> <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>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" 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; } .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; } } </style> <script> import FreeTextLayout from './FreeTextLayout.html' import HiddenFromSSR from './HiddenFromSSR.html' import ExternalLink from './ExternalLink.html' export default { components: { FreeTextLayout, HiddenFromSSR, ExternalLink } } </script>