classes

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

@@ -1,3 +1,7 @@
+a.header-anchor {
+  text-decoration: none;
+}
+
 h1 {
   a.header-anchor {
     display: none;
@@ -7,9 +11,13 @@ h1 {
 h2, h3, h4, h5, h6 {
   padding-top: 64px;
   margin-top: -64px;
-  
+
   a.header-anchor {
     display: none;
+
+    .v-icon {
+      font-size: inherit;
+    }
   }
 
   &:hover {

docs/.vuepress/theme/styles/_blocks.scss

@@ -0,0 +1,22 @@
+.block-highlight {
+  padding: 24px;
+  border-top: 6px double;
+  border-bottom: 2px solid;
+}
+
+.hero {
+  @extend .block-highlight;
+  background-color: lighten($color-hero, 55);
+  color: $color-hero;
+  border-color: $color-hero;
+}
+
+.dragon {
+  @extend .block-highlight;
+  background-color: $color-dragon;
+  color: #fff;
+  border-color: darken($color-dragon, 10);
+  a {
+    color: #fff;
+  }
+}

docs/.vuepress/theme/styles/_breakpoints.scss

@@ -0,0 +1,4 @@
+$breakpointXS: 600;
+$breakpointSM: 960;
+$breakpointMD: 1264;
+$breakpointLG: 1904;

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

@@ -1,3 +1,5 @@
 $color-hero: #563f5a;
 $color-dragon: #9b1c47;
 $color-gray: #6f6f6f;
+$color-light-gray: #ededed;
+$color-table-header-bg: #b5aab9;

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

@@ -0,0 +1,3 @@
+.page.content {
+  padding: 0 24px;
+}

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

@@ -1,7 +1,71 @@
+.table-container {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
 .v-data-table {
   &.width-auto {
     table {
       width: auto;
     }
   }
+
+  .v-data-table__mobile-row {
+    min-height: 32px;
+
+    &:first-child {
+      background-color: $color-table-header-bg;
+      color: #fff;
+    }
+  }
+}
+
+.v-data-table-header-mobile {
+  th {
+    display: none;
+  }
+}
+
+table {
+  margin-bottom: 2rem;
+  border-collapse: collapse;
+
+  a {
+    text-decoration: none;
+  }
+
+  tr {
+
+  }
+
+  th, td {
+    padding: 6px 12px;
+    border-bottom: none !important;
+  }
+
+  thead {
+    background-color: $color-table-header-bg;
+    color: #fff;
+
+    tr {
+      th {
+        color: #fff !important;
+        i {
+          color: #fff !important;
+        }
+      }
+    }
+  }
+  tbody {
+    tr {
+      &:nth-of-type(even) {
+        background-color: $color-light-gray;
+      }
+      &:nth-of-type(odd):hover {
+        background-color: inherit !important;
+      }
+      td {
+      }
+    }
+  }
 }

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

@@ -1,3 +1,11 @@
+.srd {
+  .content {
+    a {
+      //color: #9b1c47;
+    }
+  }
+}
+
 .source {
   font-size: 0.8rem;
 }

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

@@ -1,12 +1,7 @@
+@import "breakpoints";
 @import "colors";
 @import "typography";
 @import "anchors";
 @import "tables";
-
-.srd {
-  .content {
-    a {
-      color: #9b1c47;
-    }
-  }
-}
+@import "blocks";
+@import "layout";