fix flash of unstyled content

This commit is contained in:
Nolan Lawson 2018-01-13 20:33:14 -08:00
parent 269d0b1953
commit c49c80305c
3 changed files with 32 additions and 10 deletions

View file

@ -1,15 +1,17 @@
<FreeTextLayout>
<div class="banner">
<svg aria-hidden="true" class="logo">
<use xlink:href="#pinafore-logo" />
</svg>
<h1>Pinafore</h1>
<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>
<p>To get started, <a href="/settings/instances/add">log in to an instance</a>.</p>
<p>Don't have an instance? <a rel="noopener" target="_blank" href="https://joinmastodon.org">Join Mastodon!</a></p>
</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>
<p>To get started, <a href="/settings/instances/add">log in to an instance</a>.</p>
<p>Don't have an instance? <a rel="noopener" target="_blank" href="https://joinmastodon.org">Join Mastodon!</a></p>
</FreeTextLayout>
<style>
.banner {
@ -38,9 +40,16 @@
</style>
<script>
import FreeTextLayout from './FreeTextLayout.html'
export default {
components: {
FreeTextLayout
},
data: () => ({
hidden: true
}),
oncreate: function () {
this.set({hidden: !process.browser})
}
}
</script>

View file

@ -24,6 +24,7 @@ main {
background: var(--main-bg);
border: 1px solid var(--main-border);
border-radius: 1px;
min-height: 50vh;
}
h1, h2, h3, h4, h5, h6 {
@ -103,6 +104,10 @@ ul, li, p {
margin: 0;
}
.hidden {
opacity: 0;
}
@media (max-width: 767px) {
main {
padding: 5px 5px;

View file

@ -15,6 +15,14 @@
}
</script>
<noscript>
<style>
.not-logged-in-home.hidden {
opacity: 1;
}
</style>
</noscript>
<!-- Sapper generates a <style> tag containing critical CSS
for the current page. CSS for the rest of the app is
lazily loaded when it precaches secondary pages -->