améliorations css

assets/css/style.scss

 // Bootstrap variables customisation
 // Fonts & Typo
 $link-hover-decoration: none;
-$text-muted: #a6a4b0;
+$text-muted: var(--text-secondary-color);
 $enable-responsive-font-sizes: true;
 $font-family-base: Montserrat, Helvetica, Arial, serif;
+$small-font-size: 70%;
 
 // Body
 $body-bg: var(--background-color-primary);
@@ -20,9 +21,18 @@ $breadcrumb-active-color: var(--text-primary-color);
 $breadcrumb-divider-color: var(--text-primary-color);
 
 // List-groups
-$list-group-bg: var(--background-color-primary);
+$list-group-action-hover-color: var(--text-secondary-color);
+$list-group-bg: var(--background-color-secondary);
 $list-group-action-active-bg: transparent;
 $list-group-action-color: var(--text-primary-color);
 
+// Cards
+$card-bg: var(--background-color-secondary);
+
 @import 'font';
-@import 'bootstrap';
+@import 'bootstrap';
\ No newline at end of file
+
+.card-subtitle {
+    font-style: italic;
+    font-size: 90%;
+}
\ No newline at end of file

components/navigation/Bar.vue

@@ -104,6 +104,8 @@ nav.breadcrumb {
   h1 {color: var(--text-primary-color);}
 
   .list-group-item {
+    background: var(--background-color-primary);
+    
     &-action:not(.active):hover {background: transparent;}
 
     div {

layouts/default.vue

@@ -16,7 +16,7 @@ export default {
           items : [
               {path: '/appolo',title: 'Appolo'},
               {path: '/chartjs',title: 'ChartJS'},
-              {path: '/membres',title: 'Prendre soin de ses contacts'}
+              {path: '/membres',title: 'Membres'}
           ]},
           {
           title: 'Un menu',
@@ -39,6 +39,7 @@ export default {
 /* Define styles for the default root window element */
 :root {
   --text-primary-color: var(--dark);
+  --text-secondary-color: var(--secondary);
   --background-color-primary: var(--white);
   --background-color-secondary: #e9ecef;
   --element-size: 4rem;
@@ -48,6 +49,7 @@ export default {
 /* Define styles for the root window with dark - mode preference */
 :root.dark-theme {
   --text-primary-color: var(--white);
+  --text-secondary-color: var(--secondary);
   --background-color-primary: var(--dark);
   --background-color-secondary: hsl(210, 16%, 60%);
 }

pages/membres.vue

@@ -55,7 +55,7 @@ export default {
           to: '/'
         },
         {
-          text: 'Prendre soin de ses contacts',
+          text: 'Membres',
           active: true
         }
       ],