From 5321d5748f974661dee8786adc8c5fd355060064 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Sat, 2 Jan 2021 17:55:25 +0100 Subject: Unpin program descriptions and make grid scrollable instead Same as previous commit, for programmes.html. Also auto-fit rather than auto-fill, to close the gap between the grid and the description. --- "actualit\303\251s.css" | 2 +- programmes.css | 27 +++++++++++++++++++++++++-- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git "a/actualit\303\251s.css" "b/actualit\303\251s.css" index ea439ac..41a0a41 100644 --- "a/actualit\303\251s.css" +++ "b/actualit\303\251s.css" @@ -29,7 +29,7 @@ main > div { .events { display: grid; grid-auto-rows: 12em; - grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); grid-gap: 0.8em; } diff --git a/programmes.css b/programmes.css index 6b22e23..10f05c4 100644 --- a/programmes.css +++ b/programmes.css @@ -4,13 +4,32 @@ main { } main > div { - padding: 2%; + padding: 1em; + overflow: auto; +} + +#program-list { + max-height: 60vh; + scrollbar-width: thin; + scrollbar-color: darkblue #8ad; +} + +#program-list::-webkit-scrollbar { + width: 0.25em; +} + +#program-list::-webkit-scrollbar-track { + background: #8ad; +} + +#program-list::-webkit-scrollbar-thumb { + background: darkblue; } .programs { display: grid; grid-auto-rows: 10em; - grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); grid-gap: 0.8em; } @@ -48,3 +67,7 @@ main > div { details summary .duration { font-family: monospace; } + +.details.active > *:first-child { + margin-top: 0; +} -- cgit v1.2.3