Themed tables,

assets/css/theme.css

@@ -99,11 +99,15 @@ ul ul, ul ol, ol ol, ol ul {
 }
 
 table {
-    display: block;
+    margin: 1rem 0;
     width: 100%;
+
+    display: block;
     overflow-x: auto;
     white-space: nowrap;
+
     border-collapse: collapse;
+    box-shadow: 0 1rem 2rem var(--grey1);
 }
 
 table tbody {
@@ -112,21 +116,23 @@ table tbody {
 }
 
 tr {
-    width: 200%;
     background-color: var(--grey3);
 }
 
 tr:nth-child(even) {
-    background-color: var(--grey4);
+    background-color: var(--grey2);
 }
 
 th {
-    border-bottom: .1rem solid var(--text);
+    font-family: 'Manrope SemiBold';
 }
 
 th, td {
     text-align: left;
+    vertical-align: middle;
+
     padding: .25rem 1rem;
+    border: 1px solid var(--grey4);
 }
 
 code {

content/pages/articles/xmpp/intro.md

@@ -91,6 +91,7 @@ If you use OMEMO, the calls will be encrypted.
 
 # Tor
 You can also connect using Tor, use the following information:
+
 | Port |                            Hostname                            |
 |------|----------------------------------------------------------------|
 | 5222 | qwikxcv6qo7ochwil3ihobsclz6ulfkszvngy6cna4rx6a6a4bedktad.onion |

libs/markedRenderer.js

@@ -18,5 +18,14 @@ export const markedRenderer = {
                 <code class="language-${lang}">${highlight(code, lang)}</code>
             </pre>
         `
+    },
+
+    table(header, body) {
+        return `
+            <table>
+                ${header}
+                ${body}
+            </table>
+        `
     }
 }