From 40d193b330443ea074f42674ed18f463fc8e422e Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Sun, 7 Feb 2021 19:20:16 +0100 Subject: Move images and stylesheets in subfolders --- stylesheets/programmes.css | 82 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 stylesheets/programmes.css (limited to 'stylesheets/programmes.css') diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css new file mode 100644 index 0000000..98a1a4f --- /dev/null +++ b/stylesheets/programmes.css @@ -0,0 +1,82 @@ +#program-list { + max-height: 60vh; + overflow: auto; + scrollbar-width: thin; + scrollbar-color: darkblue #8ad; +} + +#program-list::-webkit-scrollbar { + width: 0.25em; + height: 0.25em; +} + +#program-list::-webkit-scrollbar-track { + background: #8ad; +} + +#program-list::-webkit-scrollbar-thumb { + background: darkblue; +} + +.programs { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr)); + grid-auto-rows: var(--cell-height); + grid-gap: 0.8em; +} + +.program { + background-color: #099; +} + +.program a { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + color: inherit; + text-decoration: none; +} + +.program .summary { + font-weight: bold; +} + +details summary .duration { + font-family: monospace; +} + +@media (min-width: 40em) { + main { + display: grid; + grid-template-columns: 50% 50%; + } + + main > div { + padding: 1em; + } + + .programs { + --cell-width: 10em; + --cell-height: 10em; + } + + .program a { + transition: color 0.5s; + } + .program:hover a { + color: white; + } + + .details.active > *:first-child { + margin-top: 0; + } +} + +@media (max-width: 40em) { + .programs { + --cell-width: 8em; + --cell-height: 4em; + } +} -- cgit v1.2.3