data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix flash of unstyled content

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

29
routes/_components/NotLoggedInHome.html
View file

@ -1,15 +1,17 @@
<FreeTextLayout> <FreeTextLayout>
<div class="banner"> <div class="not-logged-in-home {{hidden ? 'hidden' : ''}}">
<svg aria-hidden="true" class="logo"> <div class="banner">
<use xlink:href="#pinafore-logo" /> <svg aria-hidden="true" class="logo">
</svg> <use xlink:href="#pinafore-logo" />
<h1>Pinafore</h1> </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> </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> </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>

5
scss/global.scss
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;

8
templates/2xx.html
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 -->