73 lines
1.5 KiB
Svelte
73 lines
1.5 KiB
Svelte
<script>
|
|
import Modal from '../context/Modal.svelte';
|
|
import NavLink from '../components/NavLink.svelte';
|
|
</script>
|
|
|
|
<Modal>
|
|
<main>
|
|
<nav data-sveltekit-preload-data="hover">
|
|
<NavLink href="/" exact>Home</NavLink>
|
|
<NavLink href="/exercices" exact>Exercices</NavLink>
|
|
<NavLink href="/settings" exact>Settings</NavLink>
|
|
</nav>
|
|
<slot />
|
|
</main>
|
|
</Modal>
|
|
|
|
<style lang="scss">
|
|
.links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
overflow: hidden;
|
|
flex-wrap: wrap;
|
|
height: 30px;
|
|
& li {
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--container-padding: 20px;
|
|
--container-width: 1330px;
|
|
}
|
|
:global(body) {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
|
|
Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
overflow: hidden;
|
|
background-color: #1d1a5a;
|
|
color: #d9d9d9;
|
|
background: linear-gradient(to bottom left, #0d0221 30%, #1a0f7a);
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
main {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding-left: calc(50% - var(--container-width) / 2);
|
|
padding-right: calc(50% - var(--container-width) / 2);
|
|
height: calc(100vh - var(--navbar-height) - 10px);
|
|
overflow: auto;
|
|
a {
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
padding: 30px 0;
|
|
border-bottom: 1px solid #181553;
|
|
width: 100%;
|
|
gap: 10px;
|
|
height: 30px;
|
|
}
|
|
</style>
|