feat: add global layout
This commit is contained in:
Kazhnuz
parent
2e07fe2831
commit
047fa027fa
6 changed files with 52 additions and 237 deletions
22
src/App.vue
22
src/App.vue
|
|
@ -1,21 +1,13 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { RouterLink, RouterView } from 'vue-router';
|
import { RouterLink, RouterView } from "vue-router";
|
||||||
import HelloWorld from './components/HelloWorld.vue';
|
import TopBar from "./components/layout/TopBar.vue";
|
||||||
|
import SideBar from "./components/layout/SideBar.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header>
|
<TopBar id="topbar" />
|
||||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
|
<div id="wrapper">
|
||||||
|
<SideBar />
|
||||||
<div class="wrapper">
|
<div id="page"><RouterView /></div>
|
||||||
<HelloWorld msg="You did it!" />
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<RouterLink to="/">Home</RouterLink>
|
|
||||||
<RouterLink to="/about">About</RouterLink>
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
|
||||||
|
|
||||||
<RouterView />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,8 @@ onMounted(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<main id="content" class="pt-1">
|
||||||
<div v-html="htmlContent"></div>
|
<div v-html="htmlContent"></div>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
12
src/components/layout/SideBar.vue
Normal file
12
src/components/layout/SideBar.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<template>
|
||||||
|
<aside id="sidebar" class="bg-dark fg-light menu">
|
||||||
|
<h1 class="title-5 fg-light">Navigation</h1>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<router-link to="/jdr/core" class="menu-item"
|
||||||
|
>Règles de base</router-link
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
</template>
|
||||||
10
src/components/layout/TopBar.vue
Normal file
10
src/components/layout/TopBar.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<template>
|
||||||
|
<header class="bg-primary" id="topbar">
|
||||||
|
<div class="menu toolbar container fg-light d-block d-flex-sm">
|
||||||
|
<ul>
|
||||||
|
<li><router-link to="/" class="menu-item">Home</router-link></li>
|
||||||
|
<li><router-link to="/about" class="menu-item">About</router-link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
* Styles that are custom to this particular theme
|
* Styles that are custom to this particular theme
|
||||||
**/
|
**/
|
||||||
|
|
||||||
//@import 'custom/global';
|
@import 'custom/global';
|
||||||
//@import 'custom/previews';
|
//@import 'custom/previews';
|
||||||
//@import 'custom/featured';
|
//@import 'custom/featured';
|
||||||
//@import 'custom/article';
|
//@import 'custom/article';
|
||||||
|
|
@ -1,229 +1,28 @@
|
||||||
/* --- 03. GLOBAL STYLING --- */
|
#topbar {
|
||||||
|
position:fixed;
|
||||||
/*
|
width:100%;
|
||||||
* Les styles "globaux" touchant toute la page.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
@mixin li-no-margin() {
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin container-big() {
|
|
||||||
padding-left: $lineheight;
|
|
||||||
padding-right: $lineheight;
|
|
||||||
max-width: $container-size;
|
|
||||||
margin:auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-pills {
|
|
||||||
list-style:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.align {
|
|
||||||
&-center {text-align: center;}
|
|
||||||
&-left {text-align: left;}
|
|
||||||
&-right {text-align: right;}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ------------------ HEADERS ------------------- */
|
|
||||||
|
|
||||||
#page-header {
|
|
||||||
background: $color-primary;
|
|
||||||
margin-bottom:1.5rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
.fa {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1 {
|
|
||||||
border-style:none !important;
|
|
||||||
font-weight: $fontweight_hyper;
|
|
||||||
font-size:5.4rem;
|
|
||||||
font-style:oblique;
|
|
||||||
padding:1.5rem;
|
|
||||||
line-height: 1rem;
|
|
||||||
max-width: $container-size;
|
|
||||||
margin: auto;
|
|
||||||
text-align:center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 800px;
|
|
||||||
height: auto;
|
|
||||||
margin-top:0rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, a:visited, a:hover {
|
|
||||||
background-color:transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.osd {
|
|
||||||
background-color:rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
border-left: 0;
|
|
||||||
border-right: 0;
|
|
||||||
padding: 0.75rem;
|
|
||||||
color: $color-font-light;
|
|
||||||
a {
|
|
||||||
color: $color-font-light;
|
|
||||||
}
|
|
||||||
@include li-no-margin();
|
|
||||||
}
|
|
||||||
|
|
||||||
.categories {
|
|
||||||
font-weight:800;
|
|
||||||
font-size:0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
box-shadow: $narrow-shadow, $inset-shadow;
|
|
||||||
}
|
|
||||||
/* ------------------ CONTAINERS ------------------- */
|
|
||||||
|
|
||||||
.container-big {
|
|
||||||
@include container-big();
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-blog {
|
|
||||||
@include container-big();
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
row-gap: $lineheight;
|
|
||||||
column-gap: 3rem;
|
|
||||||
grid-template-areas:
|
|
||||||
"main"
|
|
||||||
"side";
|
|
||||||
|
|
||||||
@include lg() {
|
|
||||||
grid-template-columns: auto 360px;
|
|
||||||
grid-template-areas: "main side";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fullwidth {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
grid-area: side;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.tag-list {
|
|
||||||
display:flex;
|
|
||||||
padding-bottom:0;
|
|
||||||
overflow: hidden;
|
|
||||||
height:auto;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style: none;
|
|
||||||
margin:3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-preview {
|
|
||||||
@include container-big();
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
row-gap: $lineheight;
|
|
||||||
column-gap: 3rem;
|
|
||||||
grid-template-areas:
|
|
||||||
"main"
|
|
||||||
"side";
|
|
||||||
|
|
||||||
@include lg() {
|
|
||||||
grid-template-columns: 360px auto;
|
|
||||||
grid-template-areas: "side main";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-onecolumn {
|
|
||||||
max-width:1280px;
|
|
||||||
margin: auto;
|
|
||||||
padding-bottom: $lineheight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-personnage {
|
|
||||||
@include container-big();
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(6, 1fr);
|
|
||||||
grid-template-rows: auto;
|
|
||||||
row-gap: 3rem;
|
|
||||||
column-gap: 3rem;
|
|
||||||
|
|
||||||
grid-template-areas:
|
|
||||||
"nomp nomp nomp nomp nomp nomp"
|
|
||||||
"info info info info meta meta"
|
|
||||||
"goss goss look look look look"
|
|
||||||
"aime aime aime dete dete dete"
|
|
||||||
"hist hist hist hist hist hist";
|
|
||||||
|
|
||||||
.card {
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
padding:0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.personnage {
|
|
||||||
&-nomp {grid-area: nomp;}
|
|
||||||
&-info {grid-area: info;}
|
|
||||||
&-meta {grid-area: meta;}
|
|
||||||
&-goss {grid-area: goss;}
|
|
||||||
&-look {grid-area: look;}
|
|
||||||
&-aime {grid-area: aime;}
|
|
||||||
&-dete {grid-area: dete;}
|
|
||||||
&-hist {grid-area: hist;}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ------------------ PAGE ------------------- */
|
|
||||||
|
|
||||||
#wrapper {
|
#wrapper {
|
||||||
background-color: $color-background;
|
padding-top:3rem;
|
||||||
|
display:flex;
|
||||||
|
height:100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ------------------ FOOTER ------------------- */
|
#sidebar {
|
||||||
|
padding-top:1rem;
|
||||||
$color-footer-back: get-color("dark");
|
width:18rem;
|
||||||
$color-footer-text: get-color("light");
|
h1 {
|
||||||
|
text-align:center;
|
||||||
body {
|
padding-bottom:.5rem;
|
||||||
// On colorise le background de la page complete de la même
|
|
||||||
// couleur que le fond du footer.
|
|
||||||
background-color: $color-footer-back;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
color: $color-footer-text;
|
|
||||||
padding-bottom:1.5rem;
|
|
||||||
.columns {
|
|
||||||
font-size:0.8rem;
|
|
||||||
a,
|
|
||||||
a:visited {
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:visited {
|
|
||||||
color: $color-footer-text;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-toast {
|
#page {
|
||||||
|
flex-grow:1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
max-width:800px;
|
max-width:800px;
|
||||||
width:100%;
|
|
||||||
margin:auto;
|
margin:auto;
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue