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

View file

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

View file

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