feat: basic layout setup
This commit is contained in:
Alexander Daichendt
parent
04be6b2c2d
commit
0cac6145a2
6 changed files with 237 additions and 2 deletions
|
|
@ -28,5 +28,9 @@
|
|||
"tslib": "^2.3.1",
|
||||
"typescript": "^4.7.2"
|
||||
},
|
||||
"type": "module"
|
||||
}
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@svelteuidev/composables": "0.6.5",
|
||||
"@svelteuidev/core": "0.6.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
93
src/routes/__layout.svelte
Normal file
93
src/routes/__layout.svelte
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<script context="module">
|
||||
export const prerender = true;
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { Button, Switch, Container, createStyles, SvelteUIProvider } from '@svelteuidev/core';
|
||||
import type { SvelteUIProviderProps } from '@svelteuidev/core';
|
||||
|
||||
const config: SvelteUIProviderProps['config'] = {
|
||||
light: { bg: 'White', color: 'Black' },
|
||||
dark: { bg: '#373737', color: '#C1C2C5' }
|
||||
};
|
||||
|
||||
const MENU_ITEMS = [
|
||||
{ label: 'Blog', href: '/blog' },
|
||||
{ label: 'Projects', href: '/projects' }
|
||||
];
|
||||
// current y coordinate of the scroll bar
|
||||
let y: number;
|
||||
let isDark = false;
|
||||
function toggleTheme() {
|
||||
isDark = !isDark;
|
||||
}
|
||||
|
||||
const useStyles = createStyles((theme) => {
|
||||
return {
|
||||
root: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
padding: theme.space[4],
|
||||
'&.scrolled': {
|
||||
[`${theme.dark} &`]: {
|
||||
// using of SvelteUI utilities
|
||||
// bc === backgroundColor
|
||||
bc: theme.colors['dark500'].value
|
||||
},
|
||||
bc: theme.colors['gray700'].value,
|
||||
color: 'rgb(223 223 223);',
|
||||
boxShadow: theme.shadows.lg
|
||||
}
|
||||
},
|
||||
list: {
|
||||
listStyle: 'none',
|
||||
display: 'flex',
|
||||
marginBlock: '0px',
|
||||
gap: theme.space[2]
|
||||
},
|
||||
menuItem: {
|
||||
fontWeight: theme.fontWeights.bold
|
||||
}
|
||||
};
|
||||
});
|
||||
$: ({ classes, getStyles, cx } = useStyles());
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY={y} />
|
||||
|
||||
<SvelteUIProvider
|
||||
{config}
|
||||
themeObserver={isDark ? 'dark' : 'light'}
|
||||
withNormalizeCSS
|
||||
withGlobalStyles
|
||||
ssr
|
||||
>
|
||||
<div class={cx(getStyles(), { scrolled: y > 0 })}>
|
||||
<h1>Alex' Website</h1>
|
||||
<nav>
|
||||
<ul class={classes.list}>
|
||||
{#each MENU_ITEMS as menuItem}
|
||||
<li>
|
||||
<Button variant="subtle" color="cyan" radius="xl" uppercase ripple>
|
||||
<a class={classes.menuItem} href={menuItem.href}>{menuItem.label}</a>
|
||||
</Button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
<Switch offLabel="Dark" size="lg" color="yellow" on:change={toggleTheme} />
|
||||
</div>
|
||||
<Container>
|
||||
<slot />
|
||||
</Container>
|
||||
</SvelteUIProvider>
|
||||
|
||||
<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
0
src/routes/blog/index.svelte
Normal file
0
src/routes/blog/index.svelte
Normal file
|
|
@ -1,2 +1,123 @@
|
|||
<script context="module">
|
||||
export const prerender = true;
|
||||
</script>
|
||||
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Facilisis magna etiam tempor orci eu lobortis. Posuere lorem ipsum dolor sit amet
|
||||
consectetur adipiscing elit. Suspendisse potenti nullam ac tortor vitae purus. Cum sociis natoque penatibus
|
||||
et magnis. Adipiscing vitae proin sagittis nisl rhoncus. Accumsan lacus vel facilisis volutpat est velit.
|
||||
Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Nibh mauris cursus mattis molestie.
|
||||
Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ipsum suspendisse ultrices
|
||||
gravida dictum fusce ut. Tellus cras adipiscing enim eu. Commodo viverra maecenas accumsan lacus vel
|
||||
facilisis volutpat est. Quis vel eros donec ac odio tempor. Orci ac auctor augue mauris augue neque.
|
||||
Rhoncus mattis rhoncus urna neque viverra justo nec. Ultricies mi eget mauris pharetra et ultrices neque
|
||||
ornare aenean. Consectetur adipiscing elit ut aliquam purus sit. Eu volutpat odio facilisis mauris. Scelerisque
|
||||
eu ultrices vitae auctor. Massa tincidunt nunc pulvinar sapien et. Commodo odio aenean sed adipiscing
|
||||
diam. Purus faucibus ornare suspendisse sed nisi. Pretium viverra suspendisse potenti nullam ac tortor.
|
||||
Curabitur vitae nunc sed velit dignissim sodales. Mattis pellentesque id nibh tortor id. Scelerisque
|
||||
felis imperdiet proin fermentum leo. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi.
|
||||
Sit amet facilisis magna etiam tempor orci. Amet purus gravida quis blandit. Tempus egestas sed sed risus
|
||||
pretium. Diam vulputate ut pharetra sit amet. Mauris augue neque gravida in fermentum. Non odio euismod
|
||||
lacinia at quis risus. Sem fringilla ut morbi tincidunt augue interdum velit. Amet massa vitae tortor
|
||||
condimentum lacinia quis vel eros donec. Hac habitasse platea dictumst quisque sagittis purus. Magna
|
||||
ac placerat vestibulum lectus mauris ultrices eros in. Diam vel quam elementum pulvinar. Viverra aliquet
|
||||
eget sit amet tellus cras. Quis eleifend quam adipiscing vitae proin sagittis nisl. Sem et tortor consequat
|
||||
id porta. Odio morbi quis commodo odio. Eu augue ut lectus arcu bibendum at varius. Morbi tristique senectus
|
||||
et netus. Non tellus orci ac auctor augue. Luctus venenatis lectus magna fringilla urna. Velit dignissim
|
||||
sodales ut eu sem integer vitae. Sagittis purus sit amet volutpat consequat mauris nunc. Arcu non odio
|
||||
euismod lacinia at quis. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper.
|
||||
Diam ut venenatis tellus in metus. Pulvinar pellentesque habitant morbi tristique senectus et. Vel orci
|
||||
porta non pulvinar neque laoreet suspendisse. Tempus iaculis urna id volutpat lacus laoreet. Amet venenatis
|
||||
urna cursus eget nunc scelerisque viverra mauris in. Hac habitasse platea dictumst vestibulum rhoncus
|
||||
est pellentesque elit ullamcorper. Facilisis gravida neque convallis a. Urna duis convallis convallis
|
||||
tellus id interdum. Eu augue ut lectus arcu bibendum at varius. Ac turpis egestas maecenas pharetra convallis
|
||||
posuere morbi.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
|
||||
ut labore et dolore magna aliqua. Facilisis magna etiam tempor orci eu lobortis. Posuere lorem ipsum
|
||||
dolor sit amet consectetur adipiscing elit. Suspendisse potenti nullam ac tortor vitae purus. Cum sociis
|
||||
natoque penatibus et magnis. Adipiscing vitae proin sagittis nisl rhoncus. Accumsan lacus vel facilisis
|
||||
volutpat est velit. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Nibh mauris cursus
|
||||
mattis molestie. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ipsum suspendisse
|
||||
ultrices gravida dictum fusce ut. Tellus cras adipiscing enim eu. Commodo viverra maecenas accumsan lacus
|
||||
vel facilisis volutpat est. Quis vel eros donec ac odio tempor. Orci ac auctor augue mauris augue neque.
|
||||
Rhoncus mattis rhoncus urna neque viverra justo nec. Ultricies mi eget mauris pharetra et ultrices neque
|
||||
ornare aenean. Consectetur adipiscing elit ut aliquam purus sit. Eu volutpat odio facilisis mauris. Scelerisque
|
||||
eu ultrices vitae auctor. Massa tincidunt nunc pulvinar sapien et. Commodo odio aenean sed adipiscing
|
||||
diam. Purus faucibus ornare suspendisse sed nisi. Pretium viverra suspendisse potenti nullam ac tortor.
|
||||
Curabitur vitae nunc sed velit dignissim sodales. Mattis pellentesque id nibh tortor id. Scelerisque
|
||||
felis imperdiet proin fermentum leo. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi.
|
||||
Sit amet facilisis magna etiam tempor orci. Amet purus gravida quis blandit. Tempus egestas sed sed risus
|
||||
pretium. Diam vulputate ut pharetra sit amet. Mauris augue neque gravida in fermentum. Non odio euismod
|
||||
lacinia at quis risus. Sem fringilla ut morbi tincidunt augue interdum velit. Amet massa vitae tortor
|
||||
condimentum lacinia quis vel eros donec. Hac habitasse platea dictumst quisque sagittis purus. Magna
|
||||
ac placerat vestibulum lectus mauris ultrices eros in. Diam vel quam elementum pulvinar. Viverra aliquet
|
||||
eget sit amet tellus cras. Quis eleifend quam adipiscing vitae proin sagittis nisl. Sem et tortor consequat
|
||||
id porta. Odio morbi quis commodo odio. Eu augue ut lectus arcu bibendum at varius. Morbi tristique senectus
|
||||
et netus. Non tellus orci ac auctor augue. Luctus venenatis lectus magna fringilla urna. Velit dignissim
|
||||
sodales ut eu sem integer vitae. Sagittis purus sit amet volutpat consequat mauris nunc. Arcu non odio
|
||||
euismod lacinia at quis. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper.
|
||||
Diam ut venenatis tellus in metus. Pulvinar pellentesque habitant morbi tristique senectus et. Vel orci
|
||||
porta non pulvinar neque laoreet suspendisse. Tempus iaculis urna id volutpat lacus laoreet. Amet venenatis
|
||||
urna cursus eget nunc scelerisque viverra mauris in. Hac habitasse platea dictumst vestibulum rhoncus
|
||||
est pellentesque elit ullamcorper. Facilisis gravida neque convallis a. Urna duis convallis convallis
|
||||
tellus id interdum. Eu augue ut lectus arcu bibendum at varius. Ac turpis egestas maecenas pharetra convallis
|
||||
posuere morbi.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
|
||||
ut labore et dolore magna aliqua. Facilisis magna etiam tempor orci eu lobortis. Posuere lorem ipsum
|
||||
dolor sit amet consectetur adipiscing elit. Suspendisse potenti nullam ac tortor vitae purus. Cum sociis
|
||||
natoque penatibus et magnis. Adipiscing vitae proin sagittis nisl rhoncus. Accumsan lacus vel facilisis
|
||||
volutpat est velit. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Nibh mauris cursus
|
||||
mattis molestie. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ipsum suspendisse
|
||||
ultrices gravida dictum fusce ut. Tellus cras adipiscing enim eu. Commodo viverra maecenas accumsan lacus
|
||||
vel facilisis volutpat est. Quis vel eros donec ac odio tempor. Orci ac auctor augue mauris augue neque.
|
||||
Rhoncus mattis rhoncus urna neque viverra justo nec. Ultricies mi eget mauris pharetra et ultrices neque
|
||||
ornare aenean. Consectetur adipiscing elit ut aliquam purus sit. Eu volutpat odio facilisis mauris. Scelerisque
|
||||
eu ultrices vitae auctor. Massa tincidunt nunc pulvinar sapien et. Commodo odio aenean sed adipiscing
|
||||
diam. Purus faucibus ornare suspendisse sed nisi. Pretium viverra suspendisse potenti nullam ac tortor.
|
||||
Curabitur vitae nunc sed velit dignissim sodales. Mattis pellentesque id nibh tortor id. Scelerisque
|
||||
felis imperdiet proin fermentum leo. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi.
|
||||
Sit amet facilisis magna etiam tempor orci. Amet purus gravida quis blandit. Tempus egestas sed sed risus
|
||||
pretium. Diam vulputate ut pharetra sit amet. Mauris augue neque gravida in fermentum. Non odio euismod
|
||||
lacinia at quis risus. Sem fringilla ut morbi tincidunt augue interdum velit. Amet massa vitae tortor
|
||||
condimentum lacinia quis vel eros donec. Hac habitasse platea dictumst quisque sagittis purus. Magna
|
||||
ac placerat vestibulum lectus mauris ultrices eros in. Diam vel quam elementum pulvinar. Viverra aliquet
|
||||
eget sit amet tellus cras. Quis eleifend quam adipiscing vitae proin sagittis nisl. Sem et tortor consequat
|
||||
id porta. Odio morbi quis commodo odio. Eu augue ut lectus arcu bibendum at varius. Morbi tristique senectus
|
||||
et netus. Non tellus orci ac auctor augue. Luctus venenatis lectus magna fringilla urna. Velit dignissim
|
||||
sodales ut eu sem integer vitae. Sagittis purus sit amet volutpat consequat mauris nunc. Arcu non odio
|
||||
euismod lacinia at quis. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper.
|
||||
Diam ut venenatis tellus in metus. Pulvinar pellentesque habitant morbi tristique senectus et. Vel orci
|
||||
porta non pulvinar neque laoreet suspendisse. Tempus iaculis urna id volutpat lacus laoreet. Amet venenatis
|
||||
urna cursus eget nunc scelerisque viverra mauris in. Hac habitasse platea dictumst vestibulum rhoncus
|
||||
est pellentesque elit ullamcorper. Facilisis gravida neque convallis a. Urna duis convallis convallis
|
||||
tellus id interdum. Eu augue ut lectus arcu bibendum at varius. Ac turpis egestas maecenas pharetra convallis
|
||||
posuere morbi.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
|
||||
ut labore et dolore magna aliqua. Facilisis magna etiam tempor orci eu lobortis. Posuere lorem ipsum
|
||||
dolor sit amet consectetur adipiscing elit. Suspendisse potenti nullam ac tortor vitae purus. Cum sociis
|
||||
natoque penatibus et magnis. Adipiscing vitae proin sagittis nisl rhoncus. Accumsan lacus vel facilisis
|
||||
volutpat est velit. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Nibh mauris cursus
|
||||
mattis molestie. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ipsum suspendisse
|
||||
ultrices gravida dictum fusce ut. Tellus cras adipiscing enim eu. Commodo viverra maecenas accumsan lacus
|
||||
vel facilisis volutpat est. Quis vel eros donec ac odio tempor. Orci ac auctor augue mauris augue neque.
|
||||
Rhoncus mattis rhoncus urna neque viverra justo nec. Ultricies mi eget mauris pharetra et ultrices neque
|
||||
ornare aenean. Consectetur adipiscing elit ut aliquam purus sit. Eu volutpat odio facilisis mauris. Scelerisque
|
||||
eu ultrices vitae auctor. Massa tincidunt nunc pulvinar sapien et. Commodo odio aenean sed adipiscing
|
||||
diam. Purus faucibus ornare suspendisse sed nisi. Pretium viverra suspendisse potenti nullam ac tortor.
|
||||
Curabitur vitae nunc sed velit dignissim sodales. Mattis pellentesque id nibh tortor id. Scelerisque
|
||||
felis imperdiet proin fermentum leo. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi.
|
||||
Sit amet facilisis magna etiam tempor orci. Amet purus gravida quis blandit. Tempus egestas sed sed risus
|
||||
pretium. Diam vulputate ut pharetra sit amet. Mauris augue neque gravida in fermentum. Non odio euismod
|
||||
lacinia at quis risus. Sem fringilla ut morbi tincidunt augue interdum velit. Amet massa vitae tortor
|
||||
condimentum lacinia quis vel eros donec. Hac habitasse platea dictumst quisque sagittis purus. Magna
|
||||
ac placerat vestibulum lectus mauris ultrices eros in. Diam vel quam elementum pulvinar. Viverra aliquet
|
||||
eget sit amet tellus cras. Quis eleifend quam adipiscing vitae proin sagittis nisl. Sem et tortor consequat
|
||||
id porta. Odio morbi quis commodo odio. Eu augue ut lectus arcu bibendum at varius. Morbi tristique senectus
|
||||
et netus. Non tellus orci ac auctor augue. Luctus venenatis lectus magna fringilla urna. Velit dignissim
|
||||
sodales ut eu sem integer vitae. Sagittis purus sit amet volutpat consequat mauris nunc. Arcu non odio
|
||||
euismod lacinia at quis. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper.
|
||||
Diam ut venenatis tellus in metus. Pulvinar pellentesque habitant morbi tristique senectus et. Vel orci
|
||||
porta non pulvinar neque laoreet suspendisse. Tempus iaculis urna id volutpat lacus laoreet. Amet venenatis
|
||||
urna cursus eget nunc scelerisque viverra mauris in. Hac habitasse platea dictumst vestibulum rhoncus
|
||||
est pellentesque elit ullamcorper. Facilisis gravida neque convallis a. Urna duis convallis convallis
|
||||
tellus id interdum. Eu augue ut lectus arcu bibendum at varius. Ac turpis egestas maecenas pharetra convallis
|
||||
posuere morbi.
|
||||
|
|
|
|||
0
src/routes/projects/index.svelte
Normal file
0
src/routes/projects/index.svelte
Normal file
17
yarn.lock
17
yarn.lock
|
|
@ -98,6 +98,11 @@
|
|||
estree-walker "^2.0.1"
|
||||
picomatch "^2.2.2"
|
||||
|
||||
"@stitches/core@1.2.8":
|
||||
version "1.2.8"
|
||||
resolved "https://registry.yarnpkg.com/@stitches/core/-/core-1.2.8.tgz#dce3b8fdc764fbc6dbea30c83b73bfb52cf96173"
|
||||
integrity sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==
|
||||
|
||||
"@sveltejs/adapter-auto@next":
|
||||
version "1.0.0-next.50"
|
||||
resolved "https://registry.yarnpkg.com/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.50.tgz#b072dd95210d1e6a0cef54106a3efc138a147362"
|
||||
|
|
@ -155,6 +160,18 @@
|
|||
magic-string "^0.26.2"
|
||||
svelte-hmr "^0.14.12"
|
||||
|
||||
"@svelteuidev/composables@0.6.5":
|
||||
version "0.6.5"
|
||||
resolved "https://registry.yarnpkg.com/@svelteuidev/composables/-/composables-0.6.5.tgz#993f1cc2c888137c2ba8c48d68fe64c58b32ceee"
|
||||
integrity sha512-aFhNLGkf4067nK7522LIEUbzfKDHJUxFjNX4JMOPkPyuv7iNyMeWvMAqZgqvyUKZ+EKi1qMZJUFevIB4IsQzEw==
|
||||
|
||||
"@svelteuidev/core@0.6.5":
|
||||
version "0.6.5"
|
||||
resolved "https://registry.yarnpkg.com/@svelteuidev/core/-/core-0.6.5.tgz#1503251b71b6748c4ebf8d6c18cb945e3938b6e6"
|
||||
integrity sha512-H3PnmYmfYaQEowQsE3J2UULlStcIrAaiht2eO1QDNrZ7H2PIXKkBBZdpdoNYrGZg0AP/t5ovU/+q4lOOCTNVWA==
|
||||
dependencies:
|
||||
"@stitches/core" "1.2.8"
|
||||
|
||||
"@types/json-schema@^7.0.9":
|
||||
version "7.0.11"
|
||||
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue