NEW: Make search results table header sticky (#127)

closes #127
dwhieb · Jul 13, 2024 · 9fae914 · 9fae914
1 parent 7e2af2d
commit 9fae914
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 15 deletions.
diff --git 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
@@ -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 {