From 5b4535197014bd3dc87eb6f59ce88b963efed037 Mon Sep 17 00:00:00 2001
From: welpo <welpo@users.noreply.github.com>
Date: Sat, 11 Feb 2023 20:49:03 +0100
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20style:=20center=20tables;=20?=
 =?UTF-8?q?colour=20headers;=20round=20borders?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sass/main.scss        |  7 ++++---
 sass/parts/_misc.scss | 31 +++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/sass/main.scss b/sass/main.scss
index a05da44..1a2ca17 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -41,7 +41,7 @@
 
   --code-font: 'Cascadia Code';
 
-  --bg-0: #fff;
+  --bg-0: #f0f0f0;
   --bg-1: #e7e7e7;
   --bg-2: #fefefe;
   --hover-color: white;
@@ -58,16 +58,16 @@
   --input-color: #e0a615;
   --meta-color: rgb(53, 53, 53);
   --accent-color: #aacb73;
+  --table-header-color: #91bf47;
 }
 [data-theme='dark'] {
-  --bg-0: #818181;
+  --bg-0: #2f2f2f;
   --bg-1: rgba(133, 133, 133, 0.5);
   --bg-2: rgba(23, 23, 23, 100%);
   --primary-color: #ef5350;
   --hover-color: white;
   --background-color: #1f1f1f;
   --secondary-color: #696969;
-  --highlights: #b35a5a;
   --links: #d35d6e;
   --text-color: #e1e1e1;
   --code: #ef476f;
@@ -77,6 +77,7 @@
   --input-color: #294797;
   --meta-color: rgb(198, 197, 197);
   --accent-color: #ff9a8c;
+  --table-header-color: #554994;
 
   .invertable-image {
     filter: invert(.88);
diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss
index 737e7b5..0bffe3c 100644
--- a/sass/parts/_misc.scss
+++ b/sass/parts/_misc.scss
@@ -60,3 +60,34 @@ a:hover {
     padding: 0;
   }
 }
+
+table {
+  justify-self: center;
+  font: inherit;
+  overflow: hidden;
+  border-style : hidden!important;
+  margin: 2rem 0;
+  font-family: sans-serif;
+  min-width: 400px;
+  border-radius: 0.8rem;
+  border: none;
+  margin-left: auto;
+  margin-right: auto;
+  min-width: 13rem;
+}
+
+table thead tr {
+  background-color: var(--table-header-color);
+  color: white;
+  text-align: left;
+}
+
+table th,
+table td {
+    padding: 0.5em 0.7em;
+    font-family: 'Source Serif Pro', serif;
+}
+
+table tbody tr:nth-child(even) {
+  background-color: var(--bg-0);
+}

From 394479d777bcf0c03052521fbe4c9fafe437cf6c Mon Sep 17 00:00:00 2001
From: welpo <welpo@users.noreply.github.com>
Date: Sat, 11 Feb 2023 20:55:27 +0100
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=93=9D=20style:=20showcase=20tables?=
 =?UTF-8?q?=20&=20invertable=20images?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/markdown.md | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/content/markdown.md b/content/markdown.md
index 891fa22..3524775 100644
--- a/content/markdown.md
+++ b/content/markdown.md
@@ -5,6 +5,23 @@ date = "2023-01-31"
 tags = ["markdown", "test"]
 +++
 
+## Table
+
+Here's an example of a table. Its header colour changes depending on the current theme.
+
+| Symbol  | Element | Atomic Number |
+|---------|---------|---------------|
+| H       | Hydrogen| 1             |
+| C       | Carbon  | 6             |
+| Fe      | Iron    | 26            |
+| Au      | Gold    | 79            |
+
+## Invertable image
+
+This image inverts when switching to dark mode. This isn't very useful for photographs, but works great for diagrams, line drawings, graphs…
+
+{{ invertable_image(src="$BASE_URL/img/graph.png", alt="Invertable graph") }}
+
 ## Code Block
 
 ```rust
@@ -23,8 +40,3 @@ fn main() {
 Lorem ipsum `dolor` sit amet, `consectetur adipiscing` elit.
 `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`
 
-## Invertable image
-
-This image inverts when switching to dark mode. This isn't very useful for photographs, but works great for diagrams, line drawings, graphs…
-
-{{ invertable_image(src="$BASE_URL/img/graph.png", alt="Invertable graph") }}