From ae00bafdf8d521a28d62b88c12e80f5eb7bfd8eb Mon Sep 17 00:00:00 2001
From: Benjamin Franzke <benjaminfranzke@googlemail.com>
Date: Sat, 21 May 2022 16:28:32 +0200
Subject: [PATCH] docs: improve table readability

Let the table span more than the default content width,
if the table contains alot of data (controlled by width: auto)
(720px is very good for continuous text, but too narrow for tables).

The container class is therefore adapted to put the
width restriction on the elements itself, allowing for
exceptions for individual elements like <table> and
<h1> (which used an offset margin before and is now
streamlined to use a max-width as well).

Also add a striped background to ease reading rows
and allow for horizontal mobile scrolling without
overflowing the entire document, only the table itself.
---
 docs/style.css | 58 +++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 55 insertions(+), 3 deletions(-)

diff --git a/docs/style.css b/docs/style.css
index 112e5457c86..56ed036603a 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -43,6 +43,8 @@
   --sd-highlight-bg: var(--sd-highlight-bg-light);
   --sd-highlight-inline-bg: var(--sd-highlight-inline-bg-light);
   --sd-link-font-weight: var(--sd-font-weight-bold);
+  --sd-table-row-bg: var(--sd-highlight-inline-bg-light);
+  --sd-table-row-hover-bg: var(--sd-gray);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -56,6 +58,8 @@
     --sd-highlight-bg: var(--sd-highlight-bg-dark);
     --sd-highlight-inline-bg: var(--sd-highlight-inline-bg-dark);
     --sd-link-font-weight: var(--sd-font-weight-normal);
+    --sd-table-row-bg: var(--sd-highlight-inline-bg-dark);
+    --sd-table-row-hover-bg: var(--sd-highlight-bg-dark);
   }
 }
 
@@ -91,8 +95,6 @@ h1 {
 }
 @media screen and (min-width: 650px) {
   h1 {
-    margin-left: 10%;
-    margin-right: 10%;
     font-size: 2.375em;
   }
 }
@@ -125,13 +127,63 @@ hr {
 }
 
 /* Layout */
-.container {
+.container > * {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   max-width: 720px;
 }
 
+.container > table {
+  max-width: 1600px;
+}
+
+.container > h1 {
+  max-width: 530px;
+}
+
+/* Tables */
+table {
+  width: auto !important;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin-top: 2em;
+  margin-bottom: 3em;
+  overflow-x: auto;
+  display: block; /* required for overflow-x auto on tables */
+}
+@media screen and (min-width: 768px) {
+  table {
+    display: table;
+    border-left: 1rem solid transparent;
+    border-right: 1rem solid transparent;
+  }
+}
+
+thead tr,
+tbody:first-child tr:nth-child(odd),
+thead + tbody tr:nth-child(even) {
+  background-color: var(--sd-table-row-bg);
+}
+
+tbody tr:hover {
+  background-color: var(--sd-table-row-hover-bg) !important;
+}
+
+th, td {
+  vertical-align: top;
+  text-align: left;
+  padding: .5rem;
+}
+
+th:first-child, td:first-child {
+  padding-left: 0.75rem;
+}
+
+th:last-child, td:last-child {
+  padding-right: 0.75rem;
+}
+
 /* Custom content */
 .intro-code-block {
   background-color: var(--sd-brand-black);