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] 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;
   }