improvement: style un peu mieux

public/plugins/tabs.js

@@ -1,28 +0,0 @@
-function customTabs(hook, vm) {
-  hook.doneEach(function() {
-    // Invoked each time after the data is fully loaded, no arguments,
-    $(".contentArea :first-child").addClass("active")
-    $(".tab :first-child").addClass("active")
-    $(".tablinks").click(function(){
-      var idParent = "#" + $(this).parent().parent().attr("id")
-      var targetString = idParent + " .contentArea ." + $(this).attr("data-target")
-
-      //On fait en sorte que seule la classe visée soit active
-      $(idParent + " .contentArea .tabcontent").removeClass("active")
-      $(targetString).addClass("active")
-
-      // On fait de meme pour le bouton
-      $(idParent + " .tab button").removeClass("active")
-      $(this).addClass("active")
-
-      console.log(idParent + " .contentArea .tabcontent")
-      console.log(idParent + " .tab button")
-      console.log(targetString)
-    });
-  });
-}
-
-window.$docsify.plugins = [].concat(
-    customTabs,
-    (window.$docsify.plugins || [])
-);

public/rulebook.css

@@ -1,103 +0,0 @@
-body {
-  font-size:1em;
-}
-
-.markdown-section {
-  max-width: 1100px;
-}
-
-/* Style the tab */
-.tab {
- overflow: hidden;
- border: 1px solid #ccc;
- background-color: #f1f1f1;
-}
-
-/* Style the buttons that are used to open the tab content */
-.tab button {
- background-color: inherit;
- float: left;
- border: none;
- outline: none;
- cursor: pointer;
- padding: 14px 16px;
- transition: 0.3s;
-}
-
-/* Change background color of buttons on hover */
-.tab button:hover {
- background-color: #ddd;
-}
-
-/* Create an active/current tablink class */
-.tab button.active {
-  color:#FFF;
-  background-color: #42B983;
-}
-
-/* Style the tab content */
-.tabcontent {
- display: none;
- padding: 6px 12px;
- border: 1px solid #ccc;
- border-top: none;
-}
-
-.tabcontent.active {
-  display:block;
-}
-
-.markdown-section .table-auto table {
-  display:table;
-  width:100%;
-  table-layout: auto;
-}
-
-.markdown-section table {
-  display:table;
-  width:100%;
-  table-layout: fixed;
-}
-
-.markdown-section th {
-  height:34px;
-}
-
-.markdown-section tr:nth-child(2n) {
-  background-color:#fff;
-}
-
-.sidebar ul li a {
-  padding:3px;
-  padding-left:12px;
-  margin-right:12px;
-  border-radius:8px;
-}
-
-.sidebar ul li a:hover {
-  text-decoration: none;
-  background-color:rgba(0,0,0,0.05);
-}
-
-.sidebar ul li.active > a {
-  border-right:0px solid;
-  background-color:var(--theme-color,#42b983);
-  color:#fff;
-}
-
-.app-nav li {
-  margin: 0 0.5rem;
-}
-
-.app-nav a {
-    color: inherit;
-    padding:8px;
-    padding-left:12px;
-    padding-right:12px;
-    border-radius:8px;
-}
-
-.app-nav a:hover {
-    color: inherit;
-    background-color:rgba(0,0,0,0.05);
-}

src/components/MarkdownFile.vue

@@ -33,8 +33,8 @@ onBeforeUpdate(() => {
 </script>
 
 <template>
-  <main id="content" class="pt-1">
+  <article id="content" class="pt-1">
     <div v-html="htmlContent"></div>
     <slot></slot>
-  </main>
+  </article>
 </template>

src/styles/_global.scss

@@ -5,4 +5,4 @@
 @import 'custom/global';
 //@import 'custom/previews';
 //@import 'custom/featured';
-//@import 'custom/article';
+@import 'custom/article';

src/styles/components/_tables.scss

@@ -4,18 +4,22 @@
 
 table {
   border-collapse: collapse;
+  margin-bottom:1.5rem;
 }
 
-table, th, td {
+th, td {
-  border:0;
+  border:1px solid rgba(0,0,0,0.2);
   padding:0;
   margin:0;
 }
 
+th {
+  vertical-align: center;
+  text-align: center;
+}
+
 th, td {
-  vertical-align:center;
+  padding: 0.325em;
-  padding-top: 0.325em;
-  padding-bottom: 0.325em;
 }
 
 th  {

src/styles/custom/_article.scss

@@ -1,37 +1,60 @@
-.article {
+/* Style the tab */
-    img {
+.tab {
-        max-width:100%;
+    overflow: hidden;
-        height:auto;
+    border: 1px solid #ccc;
-        margin:auto;
+    background-color: #f1f1f1;
-    }
-
-    .thumbnail img {
-        width:100%;
-        aspect-ratio: 16 / 9;
-        border-radius: $card-radius;
-        object-fit: cover;
-    }
 }
 
-.article-meta {
+/* Style the buttons that are used to open the tab content */
-    .author-area {
+.tab button {
-        display: flex;
+    background-color: inherit;
-        align-items: center;
+    float: left;
-        margin-bottom: $lineheight / 2;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+}
 
-        img {
+/* Change background color of buttons on hover */
-            border-radius: 9999px;
+.tab button:hover {
-            width: $lineheight * 3;
+    background-color: #ddd;
-            height: auto;
+}
-            margin: 0;
-            margin-right: $lineheight / 2;
-        }
-    }
 
-    .article-category {
+/* Create an active/current tablink class */
-        .badge {
+.tab button.active {
-            display: inline-block;
+    color: #FFF;
-            margin-bottom: $lineheight / 4;
+    background-color: #42B983;
-        }
+}
-    }
+
+/* Style the tab content */
+.tabcontent {
+    display: none;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-top: none;
+}
+
+.tabcontent.active {
+    display: block;
+}
+
+article .table-auto table {
+    display: table;
+    width: 100%;
+    table-layout: auto;
+}
+
+article table {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+}
+
+article th {
+    height: 34px;
+}
+
+article tr:nth-child(2n) {
+    background-color: #fff;
 }