Merge pull request #31 from welpo/style/tables

💄 style: center tables; colour headers; round borders

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") }}

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);

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);
+}