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">
|
||||
import { RouterLink, RouterView } from 'vue-router';
|
||||
import HelloWorld from './components/HelloWorld.vue';
|
||||
import { RouterLink, RouterView } from "vue-router";
|
||||
import TopBar from "./components/layout/TopBar.vue";
|
||||
import SideBar from "./components/layout/SideBar.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
|
||||
|
||||
<div class="wrapper">
|
||||
<HelloWorld msg="You did it!" />
|
||||
|
||||
<nav>
|
||||
<RouterLink to="/">Home</RouterLink>
|
||||
<RouterLink to="/about">About</RouterLink>
|
||||
</nav>
|
||||
<TopBar id="topbar" />
|
||||
<div id="wrapper">
|
||||
<SideBar />
|
||||
<div id="page"><RouterView /></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<RouterView />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<main id="content" class="pt-1">
|
||||
<div v-html="htmlContent"></div>
|
||||
<slot></slot>
|
||||
</main>
|
||||
</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
|
||||
**/
|
||||
|
||||
//@import 'custom/global';
|
||||
@import 'custom/global';
|
||||
//@import 'custom/previews';
|
||||
//@import 'custom/featured';
|
||||
//@import 'custom/article';
|
||||
|
|
@ -1,229 +1,28 @@
|
|||
/* --- 03. GLOBAL STYLING --- */
|
||||
|
||||
/*
|
||||
* 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;
|
||||
#topbar {
|
||||
position:fixed;
|
||||
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 {
|
||||
background-color: $color-background;
|
||||
padding-top:3rem;
|
||||
display:flex;
|
||||
height:100vh;
|
||||
}
|
||||
|
||||
/* ------------------ FOOTER ------------------- */
|
||||
|
||||
$color-footer-back: get-color("dark");
|
||||
$color-footer-text: get-color("light");
|
||||
|
||||
body {
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
#sidebar {
|
||||
padding-top:1rem;
|
||||
width:18rem;
|
||||
h1 {
|
||||
text-align:center;
|
||||
padding-bottom:.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.home-toast {
|
||||
#page {
|
||||
flex-grow:1;
|
||||
}
|
||||
|
||||
#content {
|
||||
max-width:800px;
|
||||
width:100%;
|
||||
margin:auto;
|
||||
}
|
||||
Loading…
Reference in a new issue