generateur_v3/frontend/src/routes/+layout.svelte

105 lines
2.5 KiB
Svelte

<script lang="ts">
import Modal from '../context/Modal.svelte';
import NavLink from '../components/NavLink.svelte';
import '../app.scss';
import Alert from '../context/Alert.svelte';
import Auth from '../context/Auth.svelte';
import {QueryClient, QueryClientProvider} from '@sveltestack/svelte-query';
import {Router} from 'svelte-navigator';
import Navigation from '../context/Navigation.svelte';
import Notification from '../context/Notification.svelte';
import {getContext} from "svelte";
import type {Writable} from "svelte/store";
import NavBar from "../components/NavBar.svelte";
</script>
<svelte:head>
<title>Générateur d'exercices</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/favicon.png">
</svelte:head>
<Notification>
<Navigation>
<Auth>
<Alert>
<Modal>
<main>
<NavBar/>
<slot/>
</main>
</Modal>
</Alert>
</Auth>
</Navigation>
</Notification>
<style lang="scss">
@import '../variables';
@import "../mixins";
.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: $background;
color: #d9d9d9;
background: linear-gradient(to bottom left, $background-dark 30%, $background-light);
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;
height: 100%;
overflow-x: hidden;
a {
color: red;
}
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 30px 0;
border-bottom: 1px solid $border;
width: 100%;
gap: 10px;
height: 30px;
}
</style>