style light et dark

docs/.vuepress/theme/components/Monster.vue

@@ -22,7 +22,7 @@
         </div>
         <div class="monster-ability-scores d-flex">
           <div class="monster-ability-scores-physical d-flex">
-            <div class="ability-str text-center px-2">
+            <div class="ability-str text-center">
               <div class="ability-label">
                 <strong>For</strong>
               </div>
@@ -30,7 +30,7 @@
                 {{ displayAbilityScore(monster.abilityScores.for) }}
               </div>
             </div>
-            <div class="ability-dex text-center px-2">
+            <div class="ability-dex text-center">
               <div class="ability-label">
                 <strong>Dex</strong>
               </div>
@@ -38,7 +38,7 @@
                 {{ displayAbilityScore(monster.abilityScores.dex) }}
               </div>
             </div>
-            <div class="ability-con text-center px-2">
+            <div class="ability-con text-center">
               <div class="ability-label">
                 <strong>Con</strong>
               </div>
@@ -48,7 +48,7 @@
             </div>
           </div>
           <div class="monster-ability-scores-mental d-flex">
-            <div class="ability-int text-center px-2">
+            <div class="ability-int text-center">
               <div class="ability-label">
                 <strong>Int</strong>
               </div>
@@ -56,7 +56,7 @@
                 {{ displayAbilityScore(monster.abilityScores.int) }}
               </div>
             </div>
-            <div class="ability-wis text-center px-2">
+            <div class="ability-wis text-center">
               <div class="ability-label">
                 <strong>Sag</strong>
               </div>
@@ -64,7 +64,7 @@
                 {{ displayAbilityScore(monster.abilityScores.sag) }}
               </div>
             </div>
-            <div class="ability-cha text-center px-2">
+            <div class="ability-cha text-center">
               <div class="ability-label">
                 <strong>Cha</strong>
               </div>
@@ -428,4 +428,18 @@ export default {
 </script>
 
 <style lang="scss">
+@import '../styles/colors';
+
+.monster-ability-scores {
+  margin: 12px 0;
+  
+  .ability-label, .ability-score {
+    padding: 0 8px;
+  }
+
+  .ability-label {
+    border-bottom: 1px solid $color-dragon;
+  }
+
+}
 </style>

docs/.vuepress/theme/components/Navbar.vue

@@ -7,6 +7,7 @@
     <SRDSearchBox v-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
     <!-- <v-text-field flat solo-inverted hide-details prepend-inner-icon="mdi-magnify" label="Search" class="hidden-sm-and-down" /> -->
     <v-spacer />
+    <v-btn v-if="$vuetify.breakpoint.lgAndUp" @click.stop="$vuetify.theme.dark = !$vuetify.theme.dark" icon><v-icon v-html="$vuetify.theme.dark ? 'mdi-brightness-4' : 'mdi-brightness-7'"></v-icon></v-btn>
     <v-btn v-if="$vuetify.breakpoint.lgAndUp" @click.stop="$store.commit('setIsOpenAboutDialog', true)" icon><v-icon>mdi-information</v-icon></v-btn>
     <v-btn @click.stop="setRightDrawer" icon v-if="hasRightDrawer">
       <v-icon>{{ rightDrawerIcon }}</v-icon>

docs/.vuepress/theme/components/PageToc.vue

@@ -60,4 +60,20 @@ export default {
     }
   }
 }
+
+.theme--dark {
+  .page-toc {
+    ul {
+      li {
+        a {
+          color: lighten($color-gray, 20);
+
+          &:hover {
+            color: lighten($color-dragon, 15);
+          }
+        }
+      }
+    }
+  }
+}
 </style>

docs/.vuepress/theme/styles/_layout.scss

@@ -1,3 +1,6 @@
 .page.content {
-  //padding: 0 24px;
+  .column-count-3 {
+    column-count: 3;
+    margin-bottom: 12px;
+  }
 }

docs/.vuepress/theme/styles/_tables.scss

@@ -42,7 +42,9 @@ table {
     padding: 6px 12px;
     border-bottom: none !important;
   }
+}
 
+.theme--light {
   thead {
     background-color: $color-table-header-bg;
     color: #fff;
@@ -69,3 +71,21 @@ table {
     }
   }
 }
+
+.theme--dark {
+  thead {
+    background-color: darken($color-gray, 10);
+  }
+  tbody {
+    tr {
+      &:nth-of-type(even) {
+        background-color: darken($color-gray, 10);
+      }
+      &:nth-of-type(odd):hover {
+        background-color: inherit !important;
+      }
+      td {
+      }
+    }
+  }
+}

docs/.vuepress/theme/styles/_typography.scss

@@ -14,3 +14,25 @@
 .source {
   font-size: 0.8rem;
 }
+
+.theme--light {
+  h1, h2 {
+    color: $color-dragon;
+  }
+
+  h2 {
+    border-bottom: 1px solid $color-dragon;
+    margin-bottom: 12px;
+  }
+
+  h3, h4, h5, h6 {
+    color: $color-hero;
+  }
+}
+
+.theme--dark {
+  h2 {
+    border-bottom: 1px solid #fff;
+    margin-bottom: 12px;
+  }
+}

docs/a-propos/README.md

@@ -1,4 +0,0 @@
----
-title: À propos
----
-Maxime Moraine

docs/creation-du-personnage/README.md

@@ -3,7 +3,7 @@ title: Création du personnage
 description: Règles de création de personnage
 ---
 # Création du personnage
-<v-btn color="primary" class="mb-4" href="https://www.black-book-editions.fr/file.php?id=178" link target="_blank"><v-icon left>mdi-drama-masks</v-icon> Feuille de personnage PDF</v-btn>
+<v-btn color="primary" class="mb-4 d-print-none" href="https://www.black-book-editions.fr/file.php?id=178" link target="_blank"><v-icon left>mdi-drama-masks</v-icon> Feuille de personnage PDF</v-btn>
 
 ## 1. Choisir une race
 

docs/options-de-personnalisation/README.md

@@ -132,7 +132,7 @@ Afin de choisir un don, vous devez remplir toutes les conditions nécessaires au
 
 §§§ .table-container
 ### Liste des dons
-§§§ .column-count-3 .print-invisible
+§§§ .column-count-3 .d-print-none
 * [Acrobate](#acrobate)
 * [Ambidextre](#ambidextre)
 * [Arbalétrier](#arbaletrier)