Improved markdown formatting

Fixed pre-code breaking out of containers

app/imports/ui/components/MarkdownText.vue

@@ -24,10 +24,3 @@
     },
 	}
 </script>
-
-<style lang="css">
-  .markdown img {
-    max-width: 100%;
-    margin: 8px 0;
-  }
-</style>

app/imports/ui/styles/markdown.css

@@ -0,0 +1,90 @@
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  line-height: initial;
+  margin-bottom: 12px;
+}
+
+.markdown h1:not(:first-child),
+.markdown h2:not(:first-child),
+.markdown h3:not(:first-child),
+.markdown h4:not(:first-child),
+.markdown h5:not(:first-child),
+.markdown h6:not(:first-child) {
+  margin-top: 24px;
+}
+
+:not(:first-child) .markdown h1 {
+  font-size: 2rem;
+  letter-spacing: -.0083333333em;
+  font-weight: 300;
+}
+
+.markdown h2 {
+  font-size: 1.5rem;
+  font-weight: 400;
+}
+
+.markdown h3 {
+  font-size: 1.25rem;
+  letter-spacing: .0073529412em;
+  font-weight: 400;
+}
+
+.markdown h4 {
+  font-size: 1rem;
+  letter-spacing: .0125em;
+  font-weight: 500;
+}
+
+.markdown h5 {
+  font-size: 0.95rem;
+  letter-spacing: .0125em;
+  font-weight: 500;
+}
+
+.markdown h6 {
+  font-size: 0.875rem;
+  letter-spacing: .0125em;
+  font-weight: 500;
+}
+
+.markdown pre code {
+  display: block;
+  overflow: auto;
+}
+
+.theme--dark.v-application .markdown hr {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.markdown img {
+  max-width: 100%;
+  margin: 8px 0;
+}
+
+.markdown table {
+  min-width: 100%;
+  border-spacing: 0;
+  margin-bottom: 16px;
+}
+
+.markdown th {
+  font-weight: initial;
+  padding: 4px;
+}
+
+.markdown td {
+  padding: 2px 4px;
+}
+
+.markdown tbody>tr:nth-child(odd) {
+  background-color: rgba(0, 0, 0, 0.1)
+}
+
+.theme--dark.v-application .markdown tbody>tr:nth-child(odd) {
+  background-color: rgba(255, 255, 255, 0.1)
+}

app/imports/ui/styles/stylesIndex.js

@@ -6,5 +6,6 @@ import './fitAvatars.css';
 import './inheritBackgrounds.css';
 import './largeFormatInputs.css';
 import './lineClamp.css';
+import './markdown.css';
 import './speedDial.css';
 import './toolbarFlex.css';