style

docs/.vuepress/config.js

@@ -19,9 +19,21 @@ module.exports = {
           },
         ],
       }
-    ]
+    ],
+    ['check-md'],
   ],
+  markdown: {
+    anchor: {
+      permalinkBefore: false,
+      permalinkSymbol: '<i class="v-icon notranslate mdi mdi-link-variant"></i>'
+    },
+    extendMarkdown: md => {
+      md.use(require('markdown-it-div'))
+    }
+  },
   themeConfig: {
+    primaryColor: '#563f5a',
+    accentColor: '#9b1c47',
     searchPlaceholder: 'Recherche',
     nav: [
       { text: 'Home', link: '/' },

docs/.vuepress/theme/components/NavDrawer.vue

@@ -14,7 +14,7 @@
       </v-treeview> -->
     <v-list dense nav>
       <template v-for="item in items">
-        <v-list-group v-if="item.children" :key="item.title" v-model="item.expanded">
+        <v-list-group v-if="item.children" :key="item.title" v-model="item.expanded" :color="$site.themeConfig.accentColor">
           <template v-slot:activator>
             <v-list-item-content>
               <v-list-item-title>
@@ -24,7 +24,7 @@
           </template>
 
           <template v-for="child in item.children">
-            <v-list-group v-if="child.children" :key="child.title" sub-group v-model="child.expanded">
+            <v-list-group v-if="child.children" :key="child.title" sub-group v-model="child.expanded" :color="$site.themeConfig.accentColor">
               <template v-slot:activator>
                 <v-list-item-content>
                   <v-list-item-title>
@@ -49,7 +49,7 @@
             </v-list-item>
           </template>
         </v-list-group>
-        <v-list-item v-else :key="item.title" link :to="{path: item.path}">
+        <v-list-item v-else :key="item.title" link :to="{path: item.path}" :color="$site.themeConfig.accentColor">
           <v-list-item-content>
             <v-list-item-title>
               {{ item.title }}
@@ -115,7 +115,7 @@ export default {
         }
       }
     }
-    
+
     .v-list--nav {
       .v-list-item {
         padding-left: 24px;

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

@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app color="blue darken-3" dark>
+  <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app :color="$site.themeConfig.primaryColor" dark>
     <v-app-bar-nav-icon @click.stop="setDrawer" />
     <v-toolbar-title class="ml-0 mr-4 pl-4">
       <v-btn class="hidden-sm-and-down site-title" text link :to="{ path: '/' }">{{ $site.title }}</v-btn>

docs/.vuepress/theme/components/Page.vue

@@ -1,7 +1,7 @@
 <template>
   <main class="page content">
 
-    <Content />
+    <Content class="content" />
 
   </main>
 </template>

docs/.vuepress/theme/components/Spell.vue

@@ -13,11 +13,5 @@ export default {
 }
 </script>
 
-<style lang="stylus">
-@require '../styles/wrapper.styl'
-
-.page
-  padding-bottom 2rem
-  display block
-
+<style lang="scss">
 </style>

docs/.vuepress/theme/enhanceApp.js

@@ -12,14 +12,17 @@ export default ({
   router,
   siteData
 }) => {
+  require('./styles/main.scss')
   Vue.use(Vuex)
   Vue.mixin({ store: store })
   Vue.use(Vuetify)
   options.vuetify = new Vuetify({
     theme: {
-      // primary: colors.red.darken1, // #E53935
-      // secondary: colors.red.lighten4, // #FFCDD2
-      // accent: colors.indigo.base // #3F51B5
+      light: {
+        primary: '#563f5a', // Héros
+        // secondary: colors.red.lighten4, // #FFCDD2
+        accent: '#9b1c47' // Dragons
+      }
     }
   })
 }

docs/.vuepress/theme/layouts/GlobalLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app class="srd">
 
     <NavDrawer />
 

docs/.vuepress/theme/styles/_anchors.scss

@@ -0,0 +1,22 @@
+h1 {
+  a.header-anchor {
+    display: none;
+  }
+}
+
+h2, h3, h4, h5, h6 {
+  a.header-anchor {
+    display: none;
+  }
+
+  &:hover {
+    a.header-anchor {
+      display: inline-block;
+      color: $color-gray;
+
+      &:hover {
+        color: $color-dragon;
+      }
+    }
+  }
+}

docs/.vuepress/theme/styles/_colors.scss

@@ -0,0 +1,3 @@
+$color-hero: #563f5a;
+$color-dragon: #9b1c47;
+$color-gray: #555;

docs/.vuepress/theme/styles/main.scss

@@ -0,0 +1,10 @@
+@import "colors";
+@import "anchors";
+
+.srd {
+  .content {
+    a {
+      color: #9b1c47;
+    }
+  }
+}

docs/.vuepress/theme/styles/wrapper.styl

@@ -1,9 +0,0 @@
-$wrapper
-  max-width $contentWidth
-  margin 0 auto
-  padding 2rem 2.5rem
-  @media (max-width: $MQNarrow)
-    padding 2rem
-  @media (max-width: $MQMobileNarrow)
-    padding 1.5rem
-