semaphore/src/routes/_components/NotLoggedInHome.html

63 lines
1.3 KiB
HTML

<HiddenFromSSR>
<FreeTextLayout>
<div class="not-logged-in-home">
<div class="banner">
<SvgIcon className="not-logged-in-home-svg" href="#semaphore-logo" />
<h1>{intl.appName}</h1>
</div>
<div>
{@html intl.homeDescription}
<p style="text-align: right;">
<a class="button primary" rel="prefetch" href="/settings/instances/add">{intl.logIn}</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 SvgIcon from './SvgIcon.html'
export default {
components: {
FreeTextLayout,
HiddenFromSSR,
SvgIcon
}
}
</script>