From f43bf66f288c3caf323b49826eb0fa3b05724321 Mon Sep 17 00:00:00 2001
From: Djordje Atlialp <djordje@atlialp.com>
Date: Sun, 10 Jan 2021 22:57:19 +0100
Subject: [PATCH] Improve tables and blockquotes

---
 assets/scss/_main.scss      | 11 +++++++++-
 assets/scss/_tables.scss    | 44 ++++++++++++++++++++++---------------
 assets/scss/_variables.scss |  6 ++---
 3 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
index cfe5617..e1c51a3 100644
--- a/assets/scss/_main.scss
+++ b/assets/scss/_main.scss
@@ -57,6 +57,7 @@ h1 {
 
 h2 {
   font-size: 1.625rem;
+  margin-top: 2.5em;
 }
 
 h3 {
@@ -171,6 +172,14 @@ figure {
   }
 }
 
+em, i, strong {
+  color: black;
+
+  .dark-theme & {
+    color: white;
+  }
+}
+
 code {
   font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
   font-display: auto;
@@ -212,7 +221,7 @@ pre {
 }
 
 blockquote {
-  border-left: 2px solid;
+  border-left: 3px solid #3eb0ef;
   margin: 40px;
   padding: 10px 20px;
 
diff --git a/assets/scss/_tables.scss b/assets/scss/_tables.scss
index 7fc2aaa..c7a398e 100644
--- a/assets/scss/_tables.scss
+++ b/assets/scss/_tables.scss
@@ -1,33 +1,41 @@
 .post-content {
-    table {
-        display: inline-block;
-        border-collapse: collapse;
-        margin: 25px auto;
-        font-size: 0.9em;
-        min-width: 400px;
-        max-width: 100%;
-        overflow-x: auto;
+  table {
+    border-collapse: collapse;
+    margin: 25px auto;
+    font-size: 0.9em;
+    min-width: 400px;
+    max-width: 100%;
+
+    th,
+    td {
+      padding: 12px 15px;
+      border: 1px solid $light-table-color;
+
+      .dark-theme & {
+        border: 1px solid $dark-table-color;
+      }
     }
 
-    table thead tr {
+    thead {
+      tr {
         background-color: $light-table-color;
         color: $light-color;
         text-align: left;
-        
+
         .dark-theme & {
-            background-color: $dark-table-color;
-            color: $dark-color
+          background-color: $dark-table-color;
+          color: $dark-color;
         }
+      }
     }
 
-    th, td {
-        padding: 12px 15px;
-    }
-
-    tbody tr {
+    tbody {
+      tr {
         border: 1px solid $light-table-color;
         .dark-theme & {
-            border: 1px solid $dark-table-color;
+          border: 1px solid $dark-table-color;
         }
+      }
     }
+  }
 }
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 8674963..36ce221 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -11,10 +11,10 @@ $light-table-color: #dcdcdc;
 /* Dark theme colors */
 $dark-background: #232425;
 $dark-background-secondary: #3b3d42;
-$dark-color: #e2e2e2;
+$dark-color: #dfdfdf;
 $dark-color-secondary: #b3b3bd;
-$dark-border-color: #73747b;
-$dark-table-color: #73747b;
+$dark-border-color: #4e4e57;
+$dark-table-color: #4e4e57;
 
 $media-size-phone: "(max-width: 684px)";
 $media-size-tablet: "(max-width: 900px)";