Pinafore-Web-Client-Frontend/routes/_components/NotLoggedInHome.html

58 lines
1.4 KiB
HTML
Raw Normal View History

2018-01-13 03:57:50 +01:00
<FreeTextLayout>
2018-01-14 05:33:14 +01:00
<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>
2018-01-09 03:14:21 +01:00
2018-01-14 05:33:14 +01:00
<p>To get started, <a href="/settings/instances/add">log in to an instance</a>.</p>
2018-01-09 03:14:21 +01:00
2018-01-14 05:33:14 +01:00
<p>Don't have an instance? <a rel="noopener" target="_blank" href="https://joinmastodon.org">Join Mastodon!</a></p>
</div>
2018-01-13 03:57:50 +01:00
</FreeTextLayout>
2018-01-09 03:14:21 +01:00
<style>
2018-01-16 06:58:31 +01:00
.not-logged-in-home {
margin: 10px;
}
.not-logged-in-home .banner {
2018-01-09 03:14:21 +01:00
display: flex;
align-items: center;
2018-01-13 19:53:25 +01:00
margin: 0 0 30px;
2018-01-09 03:14:21 +01:00
}
.not-logged-in-home svg {
2018-01-09 03:14:21 +01:00
width: 70px;
height: 70px;
fill: royalblue;
display: inline-block;
}
.not-logged-in-home h1 {
2018-01-09 03:14:21 +01:00
color: royalblue;
display: inline-block;
font-size: 3em;
margin: auto 15px;
}
@media (max-width: 767px) {
.not-logged-in-home h1 {
2018-01-09 03:14:21 +01:00
font-size: 2.7em;
}
}
2018-01-13 03:57:50 +01:00
</style>
<script>
import FreeTextLayout from './FreeTextLayout.html'
2018-01-14 05:33:14 +01:00
2018-01-13 03:57:50 +01:00
export default {
components: {
FreeTextLayout
2018-01-14 05:33:14 +01:00
},
data: () => ({
hidden: true
}),
oncreate: function () {
this.set({hidden: !process.browser})
2018-01-13 03:57:50 +01:00
}
}
</script>