Skip to content

Commit

Permalink
Re-Add GitHub pages style sheet
Browse files Browse the repository at this point in the history
This was originally added in meichthys#35 but lost in e81d717 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
  • Loading branch information
gene1wood committed Apr 7, 2024
1 parent dda1a2f commit 742e9bc
Showing 1 changed file with 40 additions and 0 deletions.
40 changes: 40 additions & 0 deletions assets/css/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
---

@import "{{ site.theme }}";

$background-color: #fff;

.table-wrapper {
max-height: 75vh;
overflow: auto;

> table {
display: table;
position: relative;
text-align: left;
}
}

th {
background: $background-color;
position: sticky;
top: 0;
z-index: 2;
}

th:first-child {
left: 0;
z-index: 3;
}

td:first-child {
background: $background-color;
left: 0;
position: sticky;
z-index: 1;
}

.container-lg > h1:nth-child(1) {
display: none;
}

0 comments on commit 742e9bc

Please sign in to comment.