jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extract content into Page component

Browse source
This commit is contained in:
Justin Edmund 2024-07-12 16:56:08 -04:00
parent 8c31d08064
commit 46c3f71404
3 changed files with 55 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/lib/components/Page.svelte Normal file
View file

@ -0,0 +1,41 @@
<script lang="ts">
</script>
<section class="page">
<header>
<slot name="header" />
</header>
<slot />
</section>
<style lang="scss">
.page {
background: var(--page-color);
border-radius: 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: $unit-4x;
margin: $unit-6x auto $unit-6x;
padding: $unit-5x;
width: 100%;
max-width: 784px;
@include breakpoint('phone') {
margin-top: $unit-2x;
margin-bottom: $unit-3x;
padding: $unit-3x;
}
@include breakpoint('small-phone') {
padding: $unit-2x;
}
header {
display: flex;
flex-direction: column;
align-items: center;
}
}
</style>

42
src/routes/+layout.svelte
View file

@ -1,6 +1,4 @@
<script lang="ts"> <script lang="ts">
import Avatar from '$components/Avatar.svelte'
import Squiggly from '$components/Squiggly.svelte'
</script> </script>
<svelte:head> <svelte:head>
@ -13,16 +11,7 @@
</svelte:head> </svelte:head>
<main> <main>
<section class="page"> <slot />
<header>
<h1 aria-label="@jedmund">
<Avatar />
</h1>
<Squiggly text="@jedmund is a software designer" />
</header>
<slot />
</section>
</main> </main>
<style lang="scss"> <style lang="scss">
@ -31,33 +20,4 @@
color: var(--text-color); color: var(--text-color);
font-family: 'cstd', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'cstd', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} }
.page {
background: var(--page-color);
border-radius: 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: $unit-4x;
margin: $unit-6x auto $unit-6x;
padding: $unit-5x;
width: 100%;
max-width: 784px;
@include breakpoint('phone') {
margin-top: $unit-2x;
margin-bottom: $unit-3x;
padding: $unit-3x;
}
@include breakpoint('small-phone') {
padding: $unit-2x;
}
header {
display: flex;
flex-direction: column;
align-items: center;
}
}
</style> </style>

14
src/routes/+page.svelte
View file

@ -1,5 +1,17 @@
<script lang="ts"> <script lang="ts">
import Avatar from '$components/Avatar.svelte'
import Page from '$components/Page.svelte'
import ProjectList from '$components/ProjectList.svelte' import ProjectList from '$components/ProjectList.svelte'
import Squiggly from '$components/Squiggly.svelte'
</script> </script>
<ProjectList /> <Page>
<svelte:fragment slot="header">
<h1 aria-label="@jedmund">
<Avatar />
</h1>
<Squiggly text="@jedmund is a software designer" />
</svelte:fragment>
<ProjectList />
</Page>