From f7d9c599cf5a14719600faefea41159b248f632c Mon Sep 17 00:00:00 2001
From: Matthijs Groen <matthijs.groen@gmail.com>
Date: Tue, 13 Aug 2024 11:26:23 +0200
Subject: [PATCH 1/2] Improve readability of sticky header in appendix

The header of the appendix table was transparent, making the text in the header hard to read when scrolling

Fixes #1110
---
 appendix.md                 | 2 +-
 assets/css/application.scss | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/appendix.md b/appendix.md
index a6bce70..209107d 100644
--- a/appendix.md
+++ b/appendix.md
@@ -11,7 +11,7 @@ If you're here to choose a license, **[start from the home page](/)** to see a f
 
 <table border style="font-size: xx-small; position: relative">
 {% assign types = "permissions|conditions|limitations" | split: "|" %}
-<tr style="position: sticky; top: 0">
+<tr style="position: sticky; top: 0; background: color-mix(in srgb, var(--backgroundColor) 70%, transparent);">
   <th scope="col" style="text-align: center">License</th>
   {% assign seen_tags = '' %}
   {% for type in types %}
diff --git a/assets/css/application.scss b/assets/css/application.scss
index 3c6cda5..c080893 100644
--- a/assets/css/application.scss
+++ b/assets/css/application.scss
@@ -6,6 +6,7 @@
 
 body {
   background: #fafafa;
+  --backgroundColor: #fafafa;
   color: #5c5855;
   font: 0.875rem/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
@@ -13,6 +14,7 @@ body {
 @media (prefers-color-scheme: dark) {
   body {
     background: #212121;
+    --backgroundColor: #212121;
     color: #d0c8c1;
   }
 

From 70c9a4a8ae7060f059dec77b404fe0ee73e1ae27 Mon Sep 17 00:00:00 2001
From: Matthijs Groen <matthijs.groen@gmail.com>
Date: Fri, 30 Aug 2024 09:59:05 +0200
Subject: [PATCH 2/2] Add z-index value

It needs to be the same (or higher) than the one used in the hint.css, to have the dots in the table slide under the header.
---
 appendix.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/appendix.md b/appendix.md
index 209107d..ee56ffb 100644
--- a/appendix.md
+++ b/appendix.md
@@ -11,7 +11,7 @@ If you're here to choose a license, **[start from the home page](/)** to see a f
 
 <table border style="font-size: xx-small; position: relative">
 {% assign types = "permissions|conditions|limitations" | split: "|" %}
-<tr style="position: sticky; top: 0; background: color-mix(in srgb, var(--backgroundColor) 70%, transparent);">
+<tr style="position: sticky; top: 0; z-index: 1000001; background: color-mix(in srgb, var(--backgroundColor) 70%, transparent);">
   <th scope="col" style="text-align: center">License</th>
   {% assign seen_tags = '' %}
   {% for type in types %}