From 9fae914d7a01799aee0eab3f5c28641b3b40de50 Mon Sep 17 00:00:00 2001
From: "Daniel W. Hieber" <dwhieb@gmail.com>
Date: Sat, 13 Jul 2024 10:44:54 -0500
Subject: [PATCH] NEW: Make search results table header sticky (#127)

closes #127
---
 layouts/main/styles/utilities.css | 28 ++++++++++++++--------------
 pages/Search/Search.css           | 24 +++++++++++++++++++++++-
 2 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/layouts/main/styles/utilities.css b/layouts/main/styles/utilities.css
index 365ad09e..e3ba2ae8 100644
--- a/layouts/main/styles/utilities.css
+++ b/layouts/main/styles/utilities.css
@@ -2,22 +2,22 @@
 /* https://lea.verou.me/blog/2012/04/background-attachment-local/ */
 .scroll-shadow {
   background: linear-gradient(to right, white 30%, rgb(255 255 255 / 0%)),
-  linear-gradient(to right, rgb(255 255 255 / 0%), white 70%) 0 100%,
-  radial-gradient(
-    farthest-side at 0% 50%,
-    rgb(0 0 0 / 20%),
-    rgb(0 0 0 / 0%)
-  ),
-  radial-gradient(
-      farthest-side at 100% 50%,
+    linear-gradient(to right, rgb(255 255 255 / 0%), white 70%) 0 100%,
+    radial-gradient(
+      farthest-side at 0% 50%,
       rgb(0 0 0 / 20%),
       rgb(0 0 0 / 0%)
-    )
-    0 100%;
-  background-repeat: no-repeat;
-  background-color: white;
-  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
-  background-position: 0 0, 100%, 0 0, 100%;
+    ),
+    radial-gradient(
+        farthest-side at 100% 50%,
+        rgb(0 0 0 / 20%),
+        rgb(0 0 0 / 0%)
+      )
+      0 100%;
+  background-repeat:     no-repeat;
+  background-color:      white;
+  background-size:       40px 100%, 40px 100%, 14px 100%, 14px 100%;
+  background-position:   0 0, 100%, 0 0, 100%;
   background-attachment: local, local, scroll, scroll;
 }
 
diff --git a/pages/Search/Search.css b/pages/Search/Search.css
index cb540ef8..9431fa74 100644
--- a/pages/Search/Search.css
+++ b/pages/Search/Search.css
@@ -101,11 +101,12 @@ h2 {
 
 .results {
 
+  border-collapse: separate; /* This is necessary for borders to stay fixed with position: sticky */
   margin:          0;
   min-inline-size: 100%;
 
   & td {
-    border-block: var(--cell-border)
+    border-block-end: var(--cell-border);
   }
 
   & th {
@@ -117,6 +118,27 @@ h2 {
     padding:    var(--text-padding);
   }
 
+  & thead {
+
+    background-color: white;
+    position:         sticky;
+    top:              0;
+    z-index:          2;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--off-black);
+    }
+
+  }
+
+  & thead tr:last-child {
+    box-shadow: 0px 5px 5px -5px rgb(0 0 0 / 50%);
+  }
+
+  & thead tr:last-child th {
+    border-block-end: 1px solid black;
+  }
+
 }
 
 .results-info {