feat: improve character sheet

css/style.css

@@ -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;

personnage.html

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

scss/_cards.scss

@@ -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 {

scss/_typography.scss

@@ -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;
 }