totole/sapper-template
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper-template.git synced 2026-01-12 10:25:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Just some finessing

Browse Source
This commit is contained in:
Robert Hall
2018-09-24 20:12:29 -06:00
parent 4d807ef43d
commit 6d0da69115
6 changed files with 93 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/super.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
assets/zod.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 312 KiB

18
routes/_private.html Normal file
View File

@@ -0,0 +1,18 @@
<h1>You are now logged in!</h1>
<figure>
{#if $user.username === 'general-zod'}
<img alt='Zod' src='zod.png'>
<figcaption>Kneel before Zod!</figcaption>
{:else}
<img alt='Super' src='super.png'>
<figcaption>Up, up, and away!</figcaption>
{/if}
</figure>
<style>
h1, figure, p {
text-align: center;
margin: 0 auto;
}
</style>

43
routes/_public.html Normal file
View File

@@ -0,0 +1,43 @@
<h1>Great success!</h1>
<figure>
<img alt='Borat' src='great-success.png'>
<figcaption>HIGH FIVE!</figcaption>
</figure>
<p><strong>Try editing this file (routes/index.html) to test live reloading.</strong></p>
<p><strong>Also, try <a href="/login">logging</a> in or <a href="/signup">signing</a> up.</strong></p>
<style>
h1, figure, p {
text-align: center;
margin: 0 auto;
}
h1 {
font-size: 2.8em;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 0.5em 0;
}
figure {
margin: 0 0 1em 0;
}
img {
width: 100%;
max-width: 400px;
margin: 0 0 1em 0;
}
p {
margin: 1em auto;
}
@media (min-width: 480px) {
h1 {
font-size: 4em;
}
}
</style>

52
routes/index.html
View File

@@ -2,45 +2,17 @@
<title>Sapper project template</title>
</svelte:head>
<h1>Great success!</h1>
{#if $user}
<Private/>
{:else}
<Public/>
{/if}
<figure>
<img alt='Borat' src='great-success.png'>
<figcaption>HIGH FIVE!</figcaption>
</figure>
<p><strong>Try editing this file (routes/index.html) to test live reloading.</strong></p>
<style>
h1, figure, p {
text-align: center;
margin: 0 auto;
<script>
export default {
components: {
Private: './_private.html',
Public: './_public.html',
},
}
h1 {
font-size: 2.8em;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 0.5em 0;
}
figure {
margin: 0 0 1em 0;
}
img {
width: 100%;
max-width: 400px;
margin: 0 0 1em 0;
}
p {
margin: 1em auto;
}
@media (min-width: 480px) {
h1 {
font-size: 4em;
}
}
</style>
</script>

20
routes/login.html
View File

@@ -14,6 +14,21 @@
</label>
</div>
<button type="submit" class="button">Log In</button>
<p><strong>Hint, if you haven't signed up, temporary usernames and passwords are:</strong></p>
<table>
<tr>
<th>Username</th>
<th>Password</th>
</tr>
<tr>
<td>general-zod</td>
<td>password</td>
</tr>
<tr>
<td>kal-el</td>
<td>password</td>
</tr>
</table>
</form>
<script>
@@ -56,4 +71,9 @@
padding: 1.2em;
font-size: 1em;
}
table th,
table td {
padding: 5px 5px 0 0;
text-align: left;
}
</style>