kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

feat: improve character sheet

Browse source
This commit is contained in:
Kazhnuz 2019-10-18 15:26:26 +02:00
parent 7b9acaab38
commit 5a71a0f467
5 changed files with 124 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
css/style.css
View file

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
* 0. Palette and global colorization
*
@ -604,6 +605,22 @@ mark {
}
/* Table elements */
table {
border-collapse: collapse;
}
table, th, td {
border: 0;
padding: 0px;
margin: 0px;
}
th, td {
vertical-align: center;
padding-top: 0.325em;
padding-bottom: 0.325em;
}
th {
font-weight: 800;
}
@ -977,6 +994,43 @@ ul.social li a:hover {
padding-bottom: 0.325rem;
}
/* CARD LIST - Make a list part of a card */
ul.card-list {
padding: 0;
margin: 0;
}
ul.card-list li.list-element {
line-height: 1.5rem;
padding-right: 0.75rem;
padding-left: 0.325rem;
padding-top: 0.325rem;
padding-bottom: 0.325rem;
margin: 0;
}
.list-check li.list-element {
list-style: none;
}
.list-check li.list-element::before {
font-family: "ForkAwesome";
content: "";
padding-right: 0.75rem;
}
.list-cross li.list-element {
list-style: none;
}
.list-cross li.list-element::before {
font-family: "ForkAwesome";
content: "";
padding-right: 0.75rem;
}
.list-danger li.list-element::before {
color: #dc322f;
}
.list-success li.list-element::before {
color: #859900;
}
.smallcard, .toast {
border-radius: 0px 0px 0px 0px;
background-color: #eee8d5;

2
css/style.css.map
View file

File diff suppressed because one or more lines are too long

20
personnage.html
View file

@ -130,21 +130,21 @@
<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 class="card-list list-success list-check">
<li class="list-element">Se balader</li>
<li class="list-element">Manger</li>
<li class="list-element">Se cacher</li>
<li class="list-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 class="card-list list-danger list-cross">
<li class="list-element">Se faire poursuivre</li>
<li class="list-element">L'empire</li>
<li class="list-element">La guerre</li>
<li class="list-element">Réussir à s'enfermer dans un coffre :<</li>
</ul>
</div>

43
scss/_cards.scss
View file

@ -119,6 +119,49 @@ $card-smallpad: 0.75rem;
}
}
/* CARD LIST - Make a list part of a card */
@mixin list-symbol($symbol) {
li.list-element {
list-style: none;
&::before {
font-family: "ForkAwesome";
content:$symbol;
padding-right:0.75rem;
}
}
}
@mixin list-color($color) {
li.list-element {
&::before {
color: $color;
}
}
}
ul.card-list {
padding:0;
margin:0;
li.list-element {
line-height:1.5rem;
padding-right:0.75rem;
padding-left:0.325rem;
padding-top:0.325rem;
padding-bottom:0.325rem;
margin:0;
}
}
.list {
&-check {@include list-symbol("\f00c");}
&-cross {@include list-symbol("\f00d");}
&-danger{@include list-color($color-danger);}
&-success{@include list-color($color-success);}
}
.smallcard, .toast {
@include card($card-smallpad);
&-header {

16
scss/_typography.scss
View file

@ -299,6 +299,22 @@ mark {
}
}
table {
border-collapse: collapse;
}
table, th, td {
border: 0;
padding:0px;
margin:0px;
}
th, td {
vertical-align:center;
padding-top: 0.325em;
padding-bottom: 0.325em;
}
th {
font-weight: $fontweight_hyper;
}