From 2fe00fa9758d3f5efcb43850b29896d5ece97675 Mon Sep 17 00:00:00 2001 From: Gene Wood Date: Sun, 7 Apr 2024 16:35:39 -0700 Subject: [PATCH] Re-Add GitHub pages style sheet This was originally added in #35 but lost in e81d71738a35ebd401d32f7afab0bd2a533a9a16 accidentally. This style sheet does a few things * Changes the table height to 75% of the size of the viewport so you can see more rows * Sticky the header row and the left-most column so you can always see the photo library name and the attribute name while you scroll horizontally or vertically This solves a few problems with the current table as viewed through GitHub's repo rendering of the `readme.md` * The horizontal scrollbar is only at the bottom of the table so you have to scroll to the bottom to scroll right and left at which point you can't see the table header showing the name of the photo library * When you scroll down the photo library name doesn't stay at the top of the table, it dissapears --- assets/css/style.scss | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 assets/css/style.scss diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..f07edca --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,38 @@ +--- +--- + +@import "{{ site.theme }}"; + +div#comparison-table { + max-height: 75vh; + overflow: auto; +} + +table { + display: table !important; + text-align: left; + position: relative; +} + +th { + background: white; + position: sticky; + top: 0; + z-index: 2; +} + +th:first-child { + left: 0; + z-index: 3; +} + +td:first-child { + background: white; + position: sticky; + left: 0; + z-index: 1; +} + +div.container-lg > h1:nth-child(1) { + display: none; +} \ No newline at end of file