Joururi/spellsaurus
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Added pages for register and scoped styles

Browse Source
This commit is contained in:
Alexis
2020-07-05 21:48:49 +02:00
parent 4779e9d25e
commit 0a4a59f6e6
6 changed files with 75 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/assets/scss/_global.scss
View File

@@ -49,4 +49,12 @@ hr {
border-top-style: solid; border-top-style: solid;
border-top-width: 1px; border-top-width: 1px;
border-top-color: rgba($black, .25); border-top-color: rgba($black, .25);
}
// LAYOUTS
.fullpage {
min-height: calc(100vh - 56px);
display: flex;
justify-content: center;
align-items: center;
} }

3
client/src/components/global/navbar/navbar.vue
View File

@@ -11,7 +11,8 @@
</li> </li>
</ul> </ul>
<div class="navbar-nav"> <div class="navbar-nav">
<router-link :to="'/connexion'" class="nav-link">Connexion</router-link> <router-link :to="'/inscription'" class="nav-link">S'inscrire</router-link>
<router-link :to="'/connexion'" class="nav-link">Se connecter</router-link>
</div> </div>
</div> </div>
</nav> </nav>

45
client/src/pages/index-page.vue
View File

@@ -1,14 +1,14 @@
<template> <template>
<div class="container-fluid" id="index-container"> <div class="container-fluid">
<section class="fullpage"> <section class="fullpage">
<div class="px-4"> <div class="px-4">
<h1 class="text-dark mb-4 font-display line-height-100 font-weight-900">"C'est magique, ta gueule."</h1> <h1 class="title text-dark mb-4 font-display line-height-100">"C'est magique, ta gueule."</h1>
<div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div> <div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div>
<hr class="w-50"> <hr class="w-50">
<div class="lead"><span class="font-display" style="font-weight:700;">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Leïm</span>.</div> <div class="lead"><span class="font-display" style="font-weight:700;">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Leïm</span>.</div>
</div> </div>
</section> </section>
</div> </div>
</template> </template>
<script> <script>
@@ -17,21 +17,14 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.fullpage { .title {
min-height: calc(100vh - 56px); font-size: 5rem;
display: flex; font-weight: 900;
justify-content: center; }
align-items: center; @media only screen and (max-width: 600px) {
h1 { .title {
font-size: 5rem; font-size: 3.5rem;
}
}
@media only screen and (max-width: 600px) {
.fullpage {
h1 {
font-size: 3.5rem;
}
}
} }
}
</style> </style>

24
client/src/pages/user/login-page.vue
View File

@@ -1,15 +1,25 @@
<template> <template>
<div class="container-fluid p-4" id="spell-container"> <div class="container-fluid">
<h1 class="display-3 font-display mb-3">Connexion</h1> <section class="fullpage">
<div class="title font-display mb-3">Connexion</div>
</section>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'login-page', name: 'login-page',
} }
</script> </script>
<style> <style lang="scss" scoped>
.title {
font-size: 5rem;
font-weight: 700;
}
@media only screen and (max-width: 600px) {
.title {
font-size: 3.5rem;
}
}
</style> </style>

25
client/src/pages/user/register-page.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div class="container-fluid">
<section class="fullpage">
<div class="title font-display mb-3">Inscription</div>
</section>
</div>
</template>
<script>
export default {
name: 'register-page',
}
</script>
<style lang="scss" scoped>
.title {
font-size: 5rem;
font-weight: 700;
}
@media only screen and (max-width: 600px) {
.title {
font-size: 3.5rem;
}
}
</style>

4
client/src/routes.js
View File

@@ -8,6 +8,7 @@ import Schools from "./pages/schools/schools-page"
import SchoolSingle from "~/pages/schools/single-school-page" import SchoolSingle from "~/pages/schools/single-school-page"
import Login from "~/pages/user/login-page" import Login from "~/pages/user/login-page"
import Register from "~/pages/user/register-page"
// Routes // Routes
const routes = [ const routes = [
@@ -32,6 +33,9 @@ const routes = [
{ {
path: '/connexion', component: Login, path: '/connexion', component: Login,
}, },
{
path: '/inscription', component: Register,
},
]; ];
export default routes; export default routes;