Tables styling

3 files changed, 43 insertions, 3 deletions

diff --git a/README.md b/README.md
index 0c76245..d10dc4e 100644
--- a/README.md
+++ b/README.md
@@ -51,5 +51,4 @@ If you use the theme or found it useful you can support me by leaving a star ⭐
 ## 5 Future Works
 
 - [ ] Bring SEO and [performance metrics](https://pagespeed.web.dev/) to 100% both on mobile and desktop;
-- [ ] Add color palettes;
-- [ ] Add tables styling.
\ No newline at end of file
+- [ ] Add color palettes.
\ No newline at end of file
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);