Make the first table columns sticky

2 files changed, 15 insertions, 10 deletions

diff --git a/src/templates/coins-mintages.html.tmpl b/src/templates/coins-mintages.html.tmpl
index ee8bc75..7c041f3 100644
--- a/src/templates/coins-mintages.html.tmpl
+++ b/src/templates/coins-mintages.html.tmpl
@@ -2,8 +2,13 @@
 {{ template "header-navbar" . }}
 
 <style>
-	#mintage-table #mintage-table-cc {
+	.mintage-table {
 		white-space: nowrap;
+
+        tr :is(th, td):first-child {
+            position: sticky;
+            left: 0;
+        }
 	}
 
 	label[for="country-dd"] { display: none; }
@@ -99,7 +104,7 @@
 		<div class="overflow-auto">
 			{{ if eq .FilterBy "country" }}
 
-			<table id="mintage-table-country" class="striped" role="grid">
+			<table class="mintage-table striped" role="grid">
 				<thead>
 					<th>{{ .GetC "Year" "Header/Label" }}</th>
 					<th data-numeric>{{ .Printer.Ftom 0.01 }}</th>
@@ -131,7 +136,7 @@
 
 			{{ else if eq .FilterBy "year" }}
 
-			<table id="mintage-table-year" class="striped" role="grid">
+			<table class="mintage-table striped" role="grid">
 				<thead>
 					<th>{{ .GetC "Country" "Header/Label" }}</th>
 					<th data-numeric>{{ .Printer.Ftom 0.01 }}</th>
@@ -168,7 +173,7 @@
 		{{ if ne (len .CountryMintages.Commemorative) 0 }}
 		<figure>
 			<figcaption>{{ .Get "Commemorative Coins" }}</figcaption>
-			<table id="mintage-table-cc" class="striped" role="grid">
+			<table class="mintage-table striped" role="grid">
 				<thead>
 					<th>{{ .GetC "Year" "Header/Label" }}</th>
 					<th>{{ .GetC "Commemorated Topic" "Header/Label" }}</th>
@@ -201,7 +206,7 @@
 		{{ if ne (len .YearMintages.Commemorative) 0 }}
 		<figure>
 			<figcaption>{{ .Get "Commemorative Coins" }}</figcaption>
-			<table id="mintage-table-cc" class="striped" role="grid">
+			<table class="mintage-table striped" role="grid">
 				<thead>
 					<th>{{ .GetC "Country" "Header/Label" }}</th>
 					<th>{{ .GetC "Commemorated Topic" "Header/Label" }}</th>
@@ -275,4 +280,4 @@
 {{ else }}
 	<td data-numeric>{{ $p.Itoa $v }}</td>
 {{ end }}
-{{ end }}
\ No newline at end of file
+{{ end }}
diff --git a/static/style-2.css b/static/style-2.css
index 7bdaed4..a336383 100644
--- a/static/style-2.css
+++ b/static/style-2.css
@@ -310,7 +310,7 @@ details summary[role=button]:not(.outline)::after {
   --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --pico-table-border-color: var(--pico-muted-border-color);
-  --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
+  --pico-table-row-stripped-background-color: #161b22;
   --pico-code-background-color: rgb(243, 244.5, 246.75);
   --pico-code-color: #646b79;
   --pico-code-kbd-background-color: var(--pico-color);
@@ -437,7 +437,7 @@ details summary[role=button]:not(.outline)::after {
     --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
     --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
     --pico-table-border-color: var(--pico-muted-border-color);
-    --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
+    --pico-table-row-stripped-background-color: #161b22;
     --pico-code-background-color: rgb(26, 30.5, 40.25);
     --pico-code-color: #8891a4;
     --pico-code-kbd-background-color: var(--pico-color);
@@ -572,7 +572,7 @@ details summary[role=button]:not(.outline)::after {
   --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --pico-table-border-color: var(--pico-muted-border-color);
-  --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
+  --pico-table-row-stripped-background-color: #161b22;
   --pico-code-background-color: rgb(26, 30.5, 40.25);
   --pico-code-color: #8891a4;
   --pico-code-kbd-background-color: var(--pico-color);
@@ -2948,4 +2948,4 @@ article article {
 
 figcaption {
 	text-align: center;
-}
\ No newline at end of file
+}