feat: initial version of character sheet
This commit is contained in:
Kazhnuz
parent
ba9e2d5003
commit
7b9acaab38
5 changed files with 272 additions and 1 deletions
|
|
@ -767,6 +767,48 @@ section.sidebar {
|
||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container-personnage {
|
||||||
|
padding-left: 4.5rem;
|
||||||
|
padding-right: 4.5rem;
|
||||||
|
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";
|
||||||
|
}
|
||||||
|
.container-personnage .card {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.container-personnage h1 {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.personnage-nomp {
|
||||||
|
grid-area: nomp;
|
||||||
|
}
|
||||||
|
.personnage-info {
|
||||||
|
grid-area: info;
|
||||||
|
}
|
||||||
|
.personnage-meta {
|
||||||
|
grid-area: meta;
|
||||||
|
}
|
||||||
|
.personnage-goss {
|
||||||
|
grid-area: goss;
|
||||||
|
}
|
||||||
|
.personnage-look {
|
||||||
|
grid-area: look;
|
||||||
|
}
|
||||||
|
.personnage-aime {
|
||||||
|
grid-area: aime;
|
||||||
|
}
|
||||||
|
.personnage-dete {
|
||||||
|
grid-area: dete;
|
||||||
|
}
|
||||||
|
.personnage-hist {
|
||||||
|
grid-area: hist;
|
||||||
|
}
|
||||||
|
|
||||||
/* ------------------ PAGE ------------------- */
|
/* ------------------ PAGE ------------------- */
|
||||||
#wrapper {
|
#wrapper {
|
||||||
background-color: #fdf6e3;
|
background-color: #fdf6e3;
|
||||||
|
|
@ -841,6 +883,7 @@ ul.social li a:hover {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-bottom: 0.75rem !important;
|
padding-bottom: 0.75rem !important;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -1.875rem;
|
left: -1.875rem;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
|
|
@ -952,6 +995,7 @@ ul.social li a:hover {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-bottom: 0.75rem !important;
|
padding-bottom: 0.75rem !important;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -1.875rem;
|
left: -1.875rem;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
|
|
@ -1816,6 +1860,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-bottom: 0.375rem !important;
|
padding-bottom: 0.375rem !important;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -0.9375rem;
|
left: -0.9375rem;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
190
personnage.html
Normal file
190
personnage.html
Normal file
|
|
@ -0,0 +1,190 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Blue Sky, by Kazhnuz</title>
|
||||||
|
|
||||||
|
<!-- meta -->
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
|
||||||
|
<!-- mon icon -->
|
||||||
|
<link rel="shortcut icon" href="img/favicon.png">
|
||||||
|
|
||||||
|
<!-- framework utilisés -->
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
||||||
|
<link href="css/spectre.min.css" rel="stylesheet">
|
||||||
|
<link href="css/fork-awesome.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<link href="css/style.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="wrapper">
|
||||||
|
|
||||||
|
<header id="page-header">
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column col-6">
|
||||||
|
<h1>Blue Sky</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column col-md-6">
|
||||||
|
<nav class="navbar">
|
||||||
|
<section class="navbar-section">
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section class="navbar-section">
|
||||||
|
<a href="..." class="btn btn-link">Blog</a>
|
||||||
|
<a href="..." class="btn btn-link">Gallerie</a>
|
||||||
|
<a href="..." class="btn btn-link">A propos</a>
|
||||||
|
</section>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container-personnage" id="page-content">
|
||||||
|
<h1 class="personnage-nomp">Katos Skelfing</h1>
|
||||||
|
<div class="card card-primary personnage-meta">
|
||||||
|
<h2 class="card-header">Méta</h2>
|
||||||
|
<img src="" />
|
||||||
|
<table class="table-primary">
|
||||||
|
<tr>
|
||||||
|
<th>Prénom</th>
|
||||||
|
<td>Katos</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Nom</th>
|
||||||
|
<td>Skelfing</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Genre</th>
|
||||||
|
<td>Garçon</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Espèce</th>
|
||||||
|
<td>Lëonth</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Âge</th>
|
||||||
|
<td>16 ans</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Anniversaire</th>
|
||||||
|
<td>18 Aout</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Univers</th>
|
||||||
|
<td>Radiant Skies</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card card-primary personnage-info">
|
||||||
|
<h2 class="card-header">Informations principales</h2>
|
||||||
|
<table class="table-primary">
|
||||||
|
<tr>
|
||||||
|
<th>Pouvoirs</th>
|
||||||
|
<td>Guilde de l'Energie (healer/dps)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Rôle/Emploi</th>
|
||||||
|
<td>Prince (en fuite) de l'Empire Skelfing</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Affiliation</th>
|
||||||
|
<td>Les Cieux Radiants</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Lieu d'habitation</th>
|
||||||
|
<td>Les grandes espaces de l'Empire</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card card-primary personnage-goss">
|
||||||
|
<h2 class="card-header">gossip</h2>
|
||||||
|
<table class="table-primary">
|
||||||
|
<tr>
|
||||||
|
<th>Orientation</th>
|
||||||
|
<td>Bisexuel</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Situation</th>
|
||||||
|
<td>Célibataire</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card card-primary personnage-look">
|
||||||
|
<h2 class="card-header">Apparence</h2>
|
||||||
|
<table class="table-primary">
|
||||||
|
<tr>
|
||||||
|
<th>Corpulence</th>
|
||||||
|
<td>Petit et trapu</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card card-success personnage-aime">
|
||||||
|
<h2 class="card-header">Aime</h2>
|
||||||
|
<ul class="card-menu">
|
||||||
|
<li class="menu-element">Se balader</li>
|
||||||
|
<li class="menu-element">Manger</li>
|
||||||
|
<li class="menu-element">Se cacher</li>
|
||||||
|
<li class="menu-element">Être happy de la vie</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card card-danger personnage-dete">
|
||||||
|
<h2 class="card-header">N'aime pas</h2>
|
||||||
|
<ul class="card-menu">
|
||||||
|
<li class="menu-element">Se faire poursuivre</li>
|
||||||
|
<li class="menu-element">L'empire</li>
|
||||||
|
<li class="menu-element">La guerre</li>
|
||||||
|
<li class="menu-element">Réussir à s'enfermer dans un coffre :<</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card card-primary personnage-hist">
|
||||||
|
<h2 class="card-header">Histoire</h2>
|
||||||
|
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, voluptate. Expedita nostrum earum soluta voluptatem, dolorum architecto necessitatibus laudantium obcaecati rerum maiores neque esse, quas corporis debitis at? Qui, rem!</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="container">
|
||||||
|
<ul class="social">
|
||||||
|
<li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li>
|
||||||
|
<li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li>
|
||||||
|
<li class="social-li"><a class="social-link" href="#" alt="Diaspora"><i class="fa fa-fw fa-diaspora"></i></a></li>
|
||||||
|
<li class="social-li"><a class="social-link" href="#" alt="DeviantART"><i class="fa fa-fw fa-deviantart"></i></a></li>
|
||||||
|
<li class="social-li"><a class="social-link" href="#" alt="Github"><i class="fa fa-fw fa-github"></i></a></li>
|
||||||
|
<li class="social-li"><a class="social-link" href="#" alt="Gitlab"><i class="fa fa-fw fa-gitlab"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column col-md-4">
|
||||||
|
<p>Ce theme est diffusé sous licence <strong>Creative Common Attribution - Partage à l'Identique 4.0</strong> - hors mention contraire.</p>
|
||||||
|
<p>Cette licence vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! <i style="color:#FF0000" class="fa fa-heart"></i></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column col-md-4">
|
||||||
|
<p>Theme réalisé avec le quadriciel <a href="https://getbootstrap.com/">Bootstrap4</a> et la banque d'icone <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column col-md-4">
|
||||||
|
<p>Lorem Ipsum.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||||
|
<script src="js/trim.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -27,6 +27,7 @@ $card-smallpad: 0.75rem;
|
||||||
padding-right:0;
|
padding-right:0;
|
||||||
padding-bottom: $size/2!important;
|
padding-bottom: $size/2!important;
|
||||||
margin-bottom:0.75rem;
|
margin-bottom:0.75rem;
|
||||||
|
line-height:1.5rem;
|
||||||
|
|
||||||
position:relative;
|
position:relative;
|
||||||
left: -$size*1.25;
|
left: -$size*1.25;
|
||||||
|
|
|
||||||
|
|
@ -109,6 +109,41 @@ section.sidebar {
|
||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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 ------------------- */
|
/* ------------------ PAGE ------------------- */
|
||||||
|
|
||||||
#wrapper {
|
#wrapper {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue