Tables styling

2 files changed, 42 insertions, 1 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 9c0ca9d..405dc65 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -4,7 +4,6 @@ html {
 
 body {
   font-family: "Literata";
-  color: var(--content-primary);
   margin: auto;
   max-width: var(--main-width);
   padding-left: var(--main-padding);
@@ -421,4 +420,41 @@ figcaption {
   font-size: small;
   margin-bottom: 2rem;
   margin-top: -3rem;
+}
+
+/* Code in paragraphs */
+
+p code {
+  background-color: var(--code-background);
+  border-radius: 3px;
+  padding: 2px;
+}
+
+/* Tables */
+
+table {
+  border-collapse: collapse;
+  margin-top: var(--table-margin-top);
+  margin-bottom: var(--table-margin-bottom);
+  font-size: var(--p-font-size);
+  line-height: var(--p-line-height);
+  color: var(--content-primary);
+}
+
+th,
+td {
+  padding: var(--table-cell-padding);
+  border: 1px solid var(--code-border);
+  text-align: left;
+}
+
+th {
+  background-color: var(--code-background);
+  font-weight: bold;
+}
+
+table code {
+  background-color: var(--code-background);
+  border-radius: 3px;
+  padding: 2px;
 }
\ No newline at end of file
diff --git a/assets/css/vars.css b/assets/css/vars.css
index 5e4625a..e950a41 100644
--- a/assets/css/vars.css
+++ b/assets/css/vars.css
@@ -51,6 +51,11 @@
     /* Content */
     --content-height: calc(100vh - var(--footer-height));
 
+    /* Tables */
+    --table-cell-padding: .5rem;
+    --table-margin-top: 1.5rem;
+    --table-margin-bottom: 1.5rem;
+
     /* Theme */
     --content-primary: rgb(36, 36, 36);
     --content-secondary: rgb(117, 117, 117);