From b7b7b1cfd9f9276c062e2d1e2fb7138e21549d21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?George=20Ara=C3=BAjo?= <george.gcac@gmail.com>
Date: Tue, 21 Mar 2023 20:57:23 -0300
Subject: [PATCH 01/17] Added bootstrap table dependency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _includes/scripts/misc.html | 18 ++++++++++++++++++
 _sass/_base.scss            | 26 --------------------------
 assets/js/theme.js          | 10 ++++++++++
 3 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/_includes/scripts/misc.html b/_includes/scripts/misc.html
index 90360808d291..282d7aaca31a 100644
--- a/_includes/scripts/misc.html
+++ b/_includes/scripts/misc.html
@@ -10,6 +10,24 @@
   <script defer src="{{ '/assets/js/zoom.js' | relative_url }}"></script>
 {%- endif -%}
 
+  <!-- Bootstrap Table -->
+  <link defer rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.css">
+  <script defer src="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.js"></script>
+  <script>
+    $(document).ready(function() {
+      $('table').attr('data-toggle','table');
+      // $('table').addClass('table-sm');
+      $('table').addClass('table-hover');
+
+      if (document.documentElement.getAttribute("data-theme") == "dark") {
+        $('table').addClass('table-dark');
+      } else {
+        $('table').removeClass('table-dark');
+      }
+
+      });
+  </script>
+
   <!-- Load Common JS -->
   <script defer src="{{ '/assets/js/common.js' | relative_url }}"></script>
   <script defer src="{{ '/assets/js/copy_code.js' | relative_url }}" type="text/javascript"></script>
diff --git a/_sass/_base.scss b/_sass/_base.scss
index ec6a768fa713..723c1aeb322a 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -23,32 +23,6 @@ hr {
   border-top: 1px solid var(--global-divider-color);
 }
 
-table {
-
-  td,
-  th {
-    color: var(--global-text-color);
-  }
-
-  td {
-    font-size: 1rem;
-  }
-}
-
-a,
-table.table a {
-  color: var(--global-theme-color);
-
-  &:hover {
-    color: var(--global-theme-color);
-    text-decoration: underline;
-  }
-
-  &:hover:after :not(.nav-item.dropdown) {
-    width: 100%;
-  }
-}
-
 figure,
 img {
   max-width: 90vw;
diff --git a/assets/js/theme.js b/assets/js/theme.js
index 8cd515105b97..7f39cecea290 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -16,6 +16,16 @@ let setTheme = (theme) =>  {
 
   if (theme) {
     document.documentElement.setAttribute("data-theme", theme);
+
+    // Add class to tables.
+    let tables = document.getElementsByTagName('table');
+    tables.forEach(element => {
+      if (theme == "dark") {
+        element.classList.add('table-dark');
+      } else {
+        element.classList.remove('table-dark');
+      }
+    });
   }
   else {
     document.documentElement.removeAttribute("data-theme");

From fa2db9d1ce280799d06236893bfc210c8aa06e2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?George=20Ara=C3=BAjo?= <george.gcac@gmail.com>
Date: Tue, 21 Mar 2023 20:57:51 -0300
Subject: [PATCH 02/17] Created a post with table examples
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _posts/2023-03-21-tables.md | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 _posts/2023-03-21-tables.md

diff --git a/_posts/2023-03-21-tables.md b/_posts/2023-03-21-tables.md
new file mode 100644
index 000000000000..c46cd46eb925
--- /dev/null
+++ b/_posts/2023-03-21-tables.md
@@ -0,0 +1,28 @@
+---
+layout: post
+title: displaying beatiful tables with Bootstrap Tables
+date: 2023-03-20 14:37:00-0400
+description: an example of how to use Bootstrap Tables
+categories: sample-posts
+giscus_comments: true
+related_posts: true
+datatable: true
+---
+
+Displaying table:
+
+| Left aligned | Center aligned | Right aligned |
+| :------- | :------: | -------: |
+| col 3 is     | some wordy text | $1600         |
+| col 2 is     | centered        | $12           |
+| zebra stripes| are neat        | $1            |
+
+---
+
+Displaying table:
+
+| Left aligned | Center aligned | Right aligned |
+| :------- | :------: | -------: |
+| col 3 is     | some wordy text | $1600         |
+| col 2 is     | centered        | $12           |
+| zebra stripes| are neat        | $1            |

From d5cdce91466285638dd88fefa14445c3e45f9293 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?George=20Ara=C3=BAjo?= <george.gcac@gmail.com>
Date: Wed, 22 Mar 2023 00:48:06 -0300
Subject: [PATCH 03/17] Added missing json file with data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 assets/json/table_data.json | 128 ++++++++++++++++++++++++++++++++++++
 1 file changed, 128 insertions(+)
 create mode 100644 assets/json/table_data.json

diff --git a/assets/json/table_data.json b/assets/json/table_data.json
new file mode 100644
index 000000000000..29369e88a870
--- /dev/null
+++ b/assets/json/table_data.json
@@ -0,0 +1,128 @@
+[
+    {
+        "id": 0,
+        "name": "Item 0",
+        "price": "$0",
+        "amount": 3
+    },
+    {
+        "id": 1,
+        "name": "Item 1",
+        "price": "$1",
+        "amount": 4
+    },
+    {
+        "id": 2,
+        "name": "Item 2",
+        "price": "$2",
+        "amount": 8
+    },
+    {
+        "id": 3,
+        "name": "Item 3",
+        "price": "$3",
+        "amount": 2
+    },
+    {
+        "id": 4,
+        "name": "Item 4",
+        "price": "$4",
+        "amount": 90
+    },
+    {
+        "id": 5,
+        "name": "Item 5",
+        "price": "$5",
+        "amount": 2
+    },
+    {
+        "id": 6,
+        "name": "Item 6",
+        "price": "$6",
+        "amount": 3
+    },
+    {
+        "id": 7,
+        "name": "Item 7",
+        "price": "$7",
+        "amount": 7
+    },
+    {
+        "id": 8,
+        "name": "Item 8",
+        "price": "$8",
+        "amount": 39
+    },
+    {
+        "id": 9,
+        "name": "Item 9",
+        "price": "$9",
+        "amount": 78
+    },
+    {
+        "id": 10,
+        "name": "Item 10",
+        "price": "$10",
+        "amount": 30
+    },
+    {
+        "id": 11,
+        "name": "Item 11",
+        "price": "$11",
+        "amount": 32
+    },
+    {
+        "id": 12,
+        "name": "Item 12",
+        "price": "$12",
+        "amount": 12
+    },
+    {
+        "id": 13,
+        "name": "Item 13",
+        "price": "$13",
+        "amount": 76
+    },
+    {
+        "id": 14,
+        "name": "Item 14",
+        "price": "$14",
+        "amount": 10
+    },
+    {
+        "id": 15,
+        "name": "Item 15",
+        "price": "$15",
+        "amount": 9
+    },
+    {
+        "id": 16,
+        "name": "Item 16",
+        "price": "$16",
+        "amount": 8
+    },
+    {
+        "id": 17,
+        "name": "Item 17",
+        "price": "$17",
+        "amount": 1
+    },
+    {
+        "id": 18,
+        "name": "Item 18",
+        "price": "$18",
+        "amount": 99
+    },
+    {
+        "id": 19,
+        "name": "Item 19",
+        "price": "$19",
+        "amount": 100
+    },
+    {
+        "id": 20,
+        "name": "Item 20",
+        "price": "$20",
+        "amount": 109
+    }
+]
\ No newline at end of file

From d96af65aa04b4c41c35f01176d4465dc8839b956 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?George=20Ara=C3=BAjo?= <george.gcac@gmail.com>
Date: Wed, 22 Mar 2023 00:48:52 -0300
Subject: [PATCH 04/17] Added comments about using bootstrap table
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _includes/scripts/misc.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/_includes/scripts/misc.html b/_includes/scripts/misc.html
index 282d7aaca31a..2a20d568d13b 100644
--- a/_includes/scripts/misc.html
+++ b/_includes/scripts/misc.html
@@ -15,7 +15,9 @@
   <script defer src="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.js"></script>
   <script>
     $(document).ready(function() {
+      // make all tables use bootstrap-table
       $('table').attr('data-toggle','table');
+      // add some classes to make the table look better
       // $('table').addClass('table-sm');
       $('table').addClass('table-hover');
 

From e69fa890243d7e38e6470214a8c4bd626dd458aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?George=20Ara=C3=BAjo?= <george.gcac@gmail.com>
Date: Wed, 22 Mar 2023 00:49:26 -0300
Subject: [PATCH 05/17] Fixed function to change tables theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 assets/js/theme.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/assets/js/theme.js b/assets/js/theme.js
index 7f39cecea290..d247e4ad8e76 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -19,15 +19,14 @@ let setTheme = (theme) =>  {
 
     // Add class to tables.
     let tables = document.getElementsByTagName('table');
-    tables.forEach(element => {
+    for(let i = 0; i < tables.length; i++) {
       if (theme == "dark") {
-        element.classList.add('table-dark');
+        tables[i].classList.add('table-dark');
       } else {
-        element.classList.remove('table-dark');
+        tables[i].classList.remove('table-dark');
       }
-    });
-  }
-  else {
+    }
+  } else {
     document.documentElement.removeAttribute("data-theme");
   }
   localStorage.setItem("theme", theme);

From 40906ea54c69679c4fe77b3f6e4b8a2e0222c0f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?George=20Ara=C3=BAjo?= <george.gcac@gmail.com>
Date: Wed, 22 Mar 2023 00:49:39 -0300
Subject: [PATCH 06/17] Updated tables post with more complex example
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _posts/2023-03-21-tables.md | 101 +++++++++++++++++++++++++++++++-----
 1 file changed, 89 insertions(+), 12 deletions(-)

diff --git a/_posts/2023-03-21-tables.md b/_posts/2023-03-21-tables.md
index c46cd46eb925..a2b8327ea13a 100644
--- a/_posts/2023-03-21-tables.md
+++ b/_posts/2023-03-21-tables.md
@@ -7,22 +7,99 @@ categories: sample-posts
 giscus_comments: true
 related_posts: true
 datatable: true
+# TODO: fix spacing below table
+# TODO: stylize table a little bit (e.g. header)
 ---
 
-Displaying table:
+Using markdown to display tables is easy. Just use the following syntax:
 
+```markdown
 | Left aligned | Center aligned | Right aligned |
-| :------- | :------: | -------: |
-| col 3 is     | some wordy text | $1600         |
-| col 2 is     | centered        | $12           |
-| zebra stripes| are neat        | $1            |
+| :----------- | :------------: | ------------: |
+| Left 1       | center 1       | right 1       |
+| Left 2       | center 2       | right 2       |
+| Left 3       | center 3       | right 3       |
+```
 
----
-
-Displaying table:
+That will generate:
 
 | Left aligned | Center aligned | Right aligned |
-| :------- | :------: | -------: |
-| col 3 is     | some wordy text | $1600         |
-| col 2 is     | centered        | $12           |
-| zebra stripes| are neat        | $1            |
+| :----------- | :------------: | ------------: |
+| Left 1       | center 1       | right 1       |
+| Left 2       | center 2       | right 2       |
+| Left 3       | center 3       | right 3       |
+
+<p></p>
+
+It is also possible to use HTML to display tables. For example, the following HTML code will display a table with [Bootstrap Table](https://bootstrap-table.com/), loaded from a JSON file:
+
+{% raw  %}
+```html
+<table
+  id="table"
+  data-toggle="table"
+  data-url="{{ '/assets/json/table_data.json' | relative_url }}">
+  <thead>
+    <tr>
+      <th data-field="id">ID</th>
+      <th data-field="name">Item Name</th>
+      <th data-field="price">Item Price</th>
+    </tr>
+  </thead>
+</table>
+```
+{% endraw  %}
+
+<table
+  data-toggle="table"
+  data-url="{{ '/assets/json/table_data.json' | relative_url }}">
+  <thead>
+    <tr>
+      <th data-field="id">ID</th>
+      <th data-field="name">Item Name</th>
+      <th data-field="price">Item Price</th>
+    </tr>
+  </thead>
+</table>
+
+<p></p>
+
+By using [Bootstrap Table](https://bootstrap-table.com/) it is possible to create pretty complex tables, with pagination, search, and more. For example, the following HTML code will display a table, loaded from a JSON file, with pagination, search, checkboxes, and header/content alignment. For more information, check the [documentation](https://examples.bootstrap-table.com/index.html).
+
+{% raw  %}
+```html
+<table
+  data-click-to-select="true"
+  data-height="460"
+  data-pagination="true"
+  data-search="true"
+  data-toggle="table"
+  data-url="{{ '/assets/json/table_data.json' | relative_url }}">
+  <thead>
+    <tr>
+      <th data-checkbox="true"></th>
+      <th data-field="id" data-halign="left" data-align="center" data-sortable="true">ID</th>
+      <th data-field="name" data-halign="center" data-align="right" data-sortable="true">Item Name</th>
+      <th data-field="price" data-halign="right" data-align="left" data-sortable="true">Item Price</th>
+    </tr>
+  </thead>
+</table>
+```
+{% endraw  %}
+
+<table
+  data-click-to-select="true"
+  data-height="460"
+  data-pagination="true"
+  data-search="true"
+  data-toggle="table"
+  data-url="{{ '/assets/json/table_data.json' | relative_url }}">
+  <thead>
+    <tr>
+      <th data-checkbox="true"></th>
+      <th data-field="id" data-halign="left" data-align="center" data-sortable="true">ID</th>
+      <th data-field="name" data-halign="center" data-align="right" data-sortable="true">Item Name</th>
+      <th data-field="price" data-halign="right" data-align="left" data-sortable="true">Item Price</th>
+    </tr>
+  </thead>
+</table>

From 4cfa3e37c29fc544fdda38e2b715620144da6346 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?George=20Ara=C3=BAjo?= <george.gcac@gmail.com>
Date: Wed, 22 Mar 2023 16:17:08 -0300
Subject: [PATCH 07/17] Added global-hover-text-color variable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _sass/_themes.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/_sass/_themes.scss b/_sass/_themes.scss
index ddab07fdaf3f..5370a8ee26cb 100644
--- a/_sass/_themes.scss
+++ b/_sass/_themes.scss
@@ -1,7 +1,7 @@
 /*******************************************************************************
  * Themes
  ******************************************************************************/
- 
+
 :root {
   --global-bg-color: #{$white-color};
   --global-code-bg-color: #{$code-bg-color-light};
@@ -9,6 +9,7 @@
   --global-text-color-light: #{$grey-color};
   --global-theme-color: #{$purple-color};
   --global-hover-color: #{$purple-color};
+  --global-hover-text-color: #{$white-color};
   --global-footer-bg-color: #{$grey-color-dark};
   --global-footer-text-color: #{$grey-color-light};
   --global-footer-link-color: #{$white-color};
@@ -40,6 +41,7 @@ html[data-theme='dark'] {
   --global-text-color-light: #{$grey-color-light};
   --global-theme-color: #{$cyan-color};
   --global-hover-color: #{$cyan-color};
+  --global-hover-text-color: #{$white-color};
   --global-footer-bg-color: #{$grey-color-light};
   --global-footer-text-color: #{$grey-color-dark};
   --global-footer-link-color: #{$black-color};

From 81b3174b70e6f5dcef1e16c6471f60356f2629ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?George=20Ara=C3=BAjo?= <george.gcac@gmail.com>
Date: Wed, 22 Mar 2023 16:17:34 -0300
Subject: [PATCH 08/17] Updated select rows per page button css
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _sass/_base.scss | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index 723c1aeb322a..705c20c734de 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -830,3 +830,46 @@ pre {
     opacity: 1;
   }
 }
+
+.btn-group.dropdown {
+  .btn-secondary.dropdown-toggle {
+    background-color: var(--global-bg-color);
+    border: 1px solid var(--global-divider-color);
+
+    .page-size {
+      color: inherit;
+    }
+
+    &:not(.active) {
+      background-color: var(--global-bg-color) !important;
+      color: var(--global-text-color) !important;
+    }
+
+    &:hover {
+      background-color: var(--global-hover-color) !important;
+      color: var(--global-hover-text-color) !important;
+    }
+  }
+
+  .dropdown-menu {
+    background-color: var(--global-bg-color);
+  }
+
+  .dropdown-item {
+    background-color: var(--global-bg-color);
+    color: var(--global-text-color);
+
+    &:hover {
+      color: var(--global-hover-color) !important;
+    }
+  }
+
+  .dropdown-item.active, .dropdown-item:active {
+    background-color: var(--global-hover-color);
+    color: var(--global-hover-text-color) !important;
+
+    &:hover {
+      color: var(--global-hover-text-color) !important;
+    }
+  }
+}

From 128fd979865deb68f4c03b6714455cb6339c03ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?George=20Ara=C3=BAjo?= <george.gcac@gmail.com>
Date: Wed, 22 Mar 2023 16:31:56 -0300
Subject: [PATCH 09/17] Removed unnecessary important, box-shadow of button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _sass/_base.scss | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index 705c20c734de..bd731db7401f 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -832,8 +832,11 @@ pre {
 }
 
 .btn-group.dropdown {
+  .btn {
+    box-shadow: none;
+    -webkit-box-shadow: none;
+  }
   .btn-secondary.dropdown-toggle {
-    background-color: var(--global-bg-color);
     border: 1px solid var(--global-divider-color);
 
     .page-size {
@@ -842,7 +845,7 @@ pre {
 
     &:not(.active) {
       background-color: var(--global-bg-color) !important;
-      color: var(--global-text-color) !important;
+      color: var(--global-text-color);
     }
 
     &:hover {
@@ -860,7 +863,7 @@ pre {
     color: var(--global-text-color);
 
     &:hover {
-      color: var(--global-hover-color) !important;
+      color: var(--global-hover-color);
     }
   }
 
@@ -869,7 +872,7 @@ pre {
     color: var(--global-hover-text-color) !important;
 
     &:hover {
-      color: var(--global-hover-text-color) !important;
+      color: var(--global-hover-text-color);
     }
   }
 }

From 0aa9339cc5cf2c1ba16a6fc04e3eca7b972c4395 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?George=20Ara=C3=BAjo?= <george.gcac@gmail.com>
Date: Wed, 22 Mar 2023 16:46:34 -0300
Subject: [PATCH 10/17] Added spacing in _base.scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _sass/_base.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index bd731db7401f..d96c39cee8f3 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -836,6 +836,7 @@ pre {
     box-shadow: none;
     -webkit-box-shadow: none;
   }
+
   .btn-secondary.dropdown-toggle {
     border: 1px solid var(--global-divider-color);
 

From 957012ac9ea5c1d9d0f6290e6be599cdb1243526 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?George=20Ara=C3=BAjo?= <george.gcac@gmail.com>
Date: Wed, 29 Mar 2023 13:40:12 -0300
Subject: [PATCH 11/17] Re-added link styling in _base.scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _sass/_base.scss | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index d96c39cee8f3..a9b6da374f5c 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -23,6 +23,20 @@ hr {
   border-top: 1px solid var(--global-divider-color);
 }
 
+a,
+table.table a {
+  color: var(--global-theme-color);
+
+  &:hover {
+    color: var(--global-theme-color);
+    text-decoration: underline;
+  }
+
+  &:hover:after :not(.nav-item.dropdown) {
+    width: 100%;
+  }
+}
+
 figure,
 img {
   max-width: 90vw;

From 2fd37e20de93d7ed2b326924e58884779e6b4f98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?George=20Ara=C3=BAjo?= <george.gcac@gmail.com>
Date: Wed, 29 Mar 2023 14:32:39 -0300
Subject: [PATCH 12/17] Re-added table code since it is used in news and cv
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _sass/_base.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index a9b6da374f5c..21cb7963ffbe 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -23,6 +23,17 @@ hr {
   border-top: 1px solid var(--global-divider-color);
 }
 
+table {
+  td,
+  th {
+    color: var(--global-text-color);
+  }
+
+  td {
+    font-size: 1rem;
+  }
+}
+
 a,
 table.table a {
   color: var(--global-theme-color);

From 90041b43ce77c42d5e51d55dacce52d8e95cf927 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?George=20Ara=C3=BAjo?= <george.gcac@gmail.com>
Date: Wed, 29 Mar 2023 14:33:06 -0300
Subject: [PATCH 13/17] Only using bootstrap table when not in about and cv
 pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _includes/scripts/misc.html | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/_includes/scripts/misc.html b/_includes/scripts/misc.html
index 2a20d568d13b..9085878185f2 100644
--- a/_includes/scripts/misc.html
+++ b/_includes/scripts/misc.html
@@ -15,19 +15,23 @@
   <script defer src="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.js"></script>
   <script>
     $(document).ready(function() {
-      // make all tables use bootstrap-table
-      $('table').attr('data-toggle','table');
-      // add some classes to make the table look better
-      // $('table').addClass('table-sm');
-      $('table').addClass('table-hover');
+      $('table').each(function() {
+        // only select tables that are not inside an element with "news" (about page) or "card" (cv page) class
+        if($(this).parents('[class*="news"]').length==0 && $(this).parents('[class*="card"]').length==0 ) {
+          // make table use bootstrap-table
+          $(this).attr('data-toggle','table');
+          // add some classes to make the table look better
+          // $(this).addClass('table-sm');
+          $(this).addClass('table-hover');
 
-      if (document.documentElement.getAttribute("data-theme") == "dark") {
-        $('table').addClass('table-dark');
-      } else {
-        $('table').removeClass('table-dark');
-      }
-
-      });
+          if (document.documentElement.getAttribute("data-theme") == "dark") {
+            $(this).addClass('table-dark');
+          } else {
+            $(this).removeClass('table-dark');
+          }
+        }
+      })
+    });
   </script>
 
   <!-- Load Common JS -->

From 584ef410b416a61e073d7cd7ca7b745e1d2522e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?George=20Ara=C3=BAjo?= <george.gcac@gmail.com>
Date: Wed, 29 Mar 2023 20:09:33 -0300
Subject: [PATCH 14/17] Added exception for when table is inside <code>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _includes/scripts/misc.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/_includes/scripts/misc.html b/_includes/scripts/misc.html
index 9085878185f2..b25b4adfb3d6 100644
--- a/_includes/scripts/misc.html
+++ b/_includes/scripts/misc.html
@@ -17,7 +17,9 @@
     $(document).ready(function() {
       $('table').each(function() {
         // only select tables that are not inside an element with "news" (about page) or "card" (cv page) class
-        if($(this).parents('[class*="news"]').length==0 && $(this).parents('[class*="card"]').length==0 ) {
+        if($(this).parents('[class*="news"]').length==0 &&
+            $(this).parents('[class*="card"]').length==0 &&
+            $(this).parents('code').length == 0) {
           // make table use bootstrap-table
           $(this).attr('data-toggle','table');
           // add some classes to make the table look better

From d71c1104e5fa08980842b4488004b56b966e42c4 Mon Sep 17 00:00:00 2001
From: George Araujo <george.gcac@gmail.com>
Date: Mon, 24 Apr 2023 19:16:18 -0300
Subject: [PATCH 15/17] Removed TODOs from tables post

Signed-off-by: George Araujo <george.gcac@gmail.com>
---
 _posts/2023-03-21-tables.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/_posts/2023-03-21-tables.md b/_posts/2023-03-21-tables.md
index a2b8327ea13a..cd56f71b75f2 100644
--- a/_posts/2023-03-21-tables.md
+++ b/_posts/2023-03-21-tables.md
@@ -7,8 +7,6 @@ categories: sample-posts
 giscus_comments: true
 related_posts: true
 datatable: true
-# TODO: fix spacing below table
-# TODO: stylize table a little bit (e.g. header)
 ---
 
 Using markdown to display tables is easy. Just use the following syntax:

From f8c24f6f76d68fecf3b55e1b44b423325220a2dc Mon Sep 17 00:00:00 2001
From: Maruan Al-Shedivat <maruan@genesistherapeutics.ai>
Date: Sun, 30 Apr 2023 19:47:49 -0700
Subject: [PATCH 16/17] Minor fixes

---
 _includes/scripts/misc.html | 24 +-----------------------
 assets/js/common.js         | 24 ++++++++++++++++++++++++
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/_includes/scripts/misc.html b/_includes/scripts/misc.html
index b25b4adfb3d6..cce290e806dc 100644
--- a/_includes/scripts/misc.html
+++ b/_includes/scripts/misc.html
@@ -13,29 +13,7 @@
   <!-- Bootstrap Table -->
   <link defer rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.css">
   <script defer src="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.js"></script>
-  <script>
-    $(document).ready(function() {
-      $('table').each(function() {
-        // only select tables that are not inside an element with "news" (about page) or "card" (cv page) class
-        if($(this).parents('[class*="news"]').length==0 &&
-            $(this).parents('[class*="card"]').length==0 &&
-            $(this).parents('code').length == 0) {
-          // make table use bootstrap-table
-          $(this).attr('data-toggle','table');
-          // add some classes to make the table look better
-          // $(this).addClass('table-sm');
-          $(this).addClass('table-hover');
-
-          if (document.documentElement.getAttribute("data-theme") == "dark") {
-            $(this).addClass('table-dark');
-          } else {
-            $(this).removeClass('table-dark');
-          }
-        }
-      })
-    });
-  </script>
 
   <!-- Load Common JS -->
-  <script defer src="{{ '/assets/js/common.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/common.js' | relative_url }}"></script>
   <script defer src="{{ '/assets/js/copy_code.js' | relative_url }}" type="text/javascript"></script>
diff --git a/assets/js/common.js b/assets/js/common.js
index 5ffcb5010904..f9a6e84275f5 100644
--- a/assets/js/common.js
+++ b/assets/js/common.js
@@ -1,3 +1,4 @@
+// add toggle functionality to abstract and bibtex buttons
 $(document).ready(function() {
     $('a.abstract').click(function() {
         $(this).parent().parent().find(".abstract.hidden").toggleClass('open');
@@ -9,3 +10,26 @@ $(document).ready(function() {
     });
     $('a').removeClass('waves-effect waves-light');
 });
+
+// add bootstrap classes to tables
+$(document).ready(function() {
+  $('table').each(function() {
+    // only select tables that are not inside an element with "news" (about page) or "card" (cv page) class
+    if($(this).parents('[class*="news"]').length==0 &&
+        $(this).parents('[class*="card"]').length==0 &&
+        $(this).parents('code').length == 0) {
+      // make table use bootstrap-table
+      $(this).attr('data-toggle','table');
+      // add some classes to make the table look better
+      // $(this).addClass('table-sm');
+      $(this).addClass('table-hover');
+
+      if (document.documentElement.getAttribute("data-theme") == "dark") {
+        $(this).addClass('table-dark');
+      } else {
+        $(this).removeClass('table-dark');
+      }
+    }
+  })
+});
+

From 39d3c3671faefe333c3de62eefd4c9a5966b2609 Mon Sep 17 00:00:00 2001
From: Maruan Al-Shedivat <maruan@genesistherapeutics.ai>
Date: Sun, 30 Apr 2023 20:04:00 -0700
Subject: [PATCH 17/17] A few more small fixes

---
 _includes/scripts/misc.html |  3 ++-
 _sass/_base.scss            |  4 ++--
 assets/js/common.js         | 24 +-----------------------
 assets/js/no_defer.js       | 22 ++++++++++++++++++++++
 4 files changed, 27 insertions(+), 26 deletions(-)
 create mode 100644 assets/js/no_defer.js

diff --git a/_includes/scripts/misc.html b/_includes/scripts/misc.html
index d4d4a4ff4e89..305c06210372 100644
--- a/_includes/scripts/misc.html
+++ b/_includes/scripts/misc.html
@@ -21,5 +21,6 @@
   <script defer src="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.js"></script>
 
   <!-- Load Common JS -->
-  <script src="{{ '/assets/js/common.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/no_defer.js' | relative_url }}"></script>
+  <script defer src="{{ '/assets/js/common.js' | relative_url }}"></script>
   <script defer src="{{ '/assets/js/copy_code.js' | relative_url }}" type="text/javascript"></script>
diff --git a/_sass/_base.scss b/_sass/_base.scss
index bb6301d9893b..5455dbed6ba0 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -848,8 +848,8 @@ progress::-moz-progress-bar {
     font-size: medium;
     opacity: 0;
     position: absolute;
-    right: .15rem;
-    top: .15rem;
+    right: .5rem;
+    top: .5rem;
   }
 
   &:active .copy,
diff --git a/assets/js/common.js b/assets/js/common.js
index 135297bc18f9..c6d60d4a985f 100644
--- a/assets/js/common.js
+++ b/assets/js/common.js
@@ -11,30 +11,8 @@ $(document).ready(function() {
     $('a').removeClass('waves-effect waves-light');
 });
 
-// add bootstrap classes to tables
-$(document).ready(function() {
-  $('table').each(function() {
-    // only select tables that are not inside an element with "news" (about page) or "card" (cv page) class
-    if($(this).parents('[class*="news"]').length==0 &&
-        $(this).parents('[class*="card"]').length==0 &&
-        $(this).parents('code').length == 0) {
-      // make table use bootstrap-table
-      $(this).attr('data-toggle','table');
-      // add some classes to make the table look better
-      // $(this).addClass('table-sm');
-      $(this).addClass('table-hover');
-
-      if (document.documentElement.getAttribute("data-theme") == "dark") {
-        $(this).addClass('table-dark');
-      } else {
-        $(this).removeClass('table-dark');
-      }
-    }
-  })
-});
-
 // bootstrap-toc
-$(function () {
+$(document).ready(function () {
     if($('#toc-sidebar').length){
         var navSelector = "#toc-sidebar";
         var $myNav = $(navSelector);
diff --git a/assets/js/no_defer.js b/assets/js/no_defer.js
new file mode 100644
index 000000000000..95e8b2eb635f
--- /dev/null
+++ b/assets/js/no_defer.js
@@ -0,0 +1,22 @@
+// add bootstrap classes to tables
+$(document).ready(function() {
+  $('table').each(function() {
+    // only select tables that are not inside an element with "news" (about page) or "card" (cv page) class
+    if($(this).parents('[class*="news"]').length==0 &&
+        $(this).parents('[class*="card"]').length==0 &&
+        $(this).parents('code').length == 0) {
+      // make table use bootstrap-table
+      $(this).attr('data-toggle','table');
+      // add some classes to make the table look better
+      // $(this).addClass('table-sm');
+      $(this).addClass('table-hover');
+
+      if (document.documentElement.getAttribute("data-theme") == "dark") {
+        $(this).addClass('table-dark');
+      } else {
+        $(this).removeClass('table-dark');
+      }
+    }
+  })
+});
+