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

@@ -50,3 +50,11 @@ hr {
border-top-width: 1px;
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>
</ul>
<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>
</nav>

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

@@ -1,14 +1,14 @@
<template>
<div class="container-fluid" id="index-container">
<section class="fullpage">
<div class="px-4">
<h1 class="text-dark mb-4 font-display line-height-100 font-weight-900">"C'est magique, ta gueule."</h1>
<div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div>
<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>
</section>
</div>
<div class="container-fluid">
<section class="fullpage">
<div class="px-4">
<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>
<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>
</section>
</div>
</template>
<script>
@@ -17,21 +17,14 @@ export default {
}
</script>
<style lang="scss">
.fullpage {
min-height: calc(100vh - 56px);
display: flex;
justify-content: center;
align-items: center;
h1 {
font-size: 5rem;
}
}
@media only screen and (max-width: 600px) {
.fullpage {
h1 {
font-size: 3.5rem;
}
}
<style lang="scss" scoped>
.title {
font-size: 5rem;
font-weight: 900;
}
@media only screen and (max-width: 600px) {
.title {
font-size: 3.5rem;
}
}
</style>

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

@@ -1,15 +1,25 @@
<template>
<div class="container-fluid p-4" id="spell-container">
<h1 class="display-3 font-display mb-3">Connexion</h1>
<div class="container-fluid">
<section class="fullpage">
<div class="title font-display mb-3">Connexion</div>
</section>
</div>
</template>
<script>
export default {
name: 'login-page',
}
export default {
name: 'login-page',
}
</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>

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 Login from "~/pages/user/login-page"
import Register from "~/pages/user/register-page"
// Routes
const routes = [
@@ -32,6 +33,9 @@ const routes = [
{
path: '/connexion', component: Login,
},
{
path: '/inscription', component: Register,
},
];
export default routes;