From ed1d72e555e4961c174e6500b30120ac19736bb8 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Mon, 22 Feb 2021 22:46:48 +0100 Subject: Change programs layout to collapsable rows --- stylesheets/programmes.css | 85 +++++++++++----------------------------------- 1 file changed, 20 insertions(+), 65 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css index 88591c6..e4b61f2 100644 --- a/stylesheets/programmes.css +++ b/stylesheets/programmes.css @@ -1,78 +1,33 @@ -#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; +@media (min-width: 40em) { + main { + margin: 4em; + } } -.program { - background-color: #099; +details.program:first-child { + border-top: 1px solid black; } -.program a { - display: flex; - justify-content: center; - align-items: center; +details.program { + position: relative; width: 100%; - height: 100%; - color: inherit; - text-decoration: none; + border-bottom: 1px solid black; } -.program .summary { - font-weight: bold; +details.program > summary { + list-style: none; } - -details summary .duration { - font-family: monospace; +details.program > summary::-webkit-details-marker { + display: none; } -@media (min-width: 40em) { - main { - display: grid; - grid-template-columns: 50% 50%; - } - - .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; - } +details.program > summary:after { + position: absolute; + right: 1em; + content: '∨'; } -@media (max-width: 40em) { - .programs { - --cell-width: 8em; - --cell-height: 4em; - } +details.program[open] > summary:after { + content: '∧'; + bottom: 0; } -- cgit v1.2.3 From 89ad7107f853d1568896cb71954f47d0418cb2b2 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Tue, 23 Feb 2021 22:25:14 +0100 Subject: Style programs up a bit --- images/chevron-down.svg | 1 + images/chevron-up.svg | 1 + programmes.html | 28 ++++++++++++++++++++++++---- stylesheets/programmes.css | 36 ++++++++++++++++++++++++++++++------ 4 files changed, 56 insertions(+), 10 deletions(-) create mode 100644 images/chevron-down.svg create mode 100644 images/chevron-up.svg (limited to 'stylesheets') diff --git a/images/chevron-down.svg b/images/chevron-down.svg new file mode 100644 index 0000000..5f10285 --- /dev/null +++ b/images/chevron-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/chevron-up.svg b/images/chevron-up.svg new file mode 100644 index 0000000..121efdd --- /dev/null +++ b/images/chevron-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/programmes.html b/programmes.html index 13f8c4d..2670d46 100644 --- a/programmes.html +++ b/programmes.html @@ -1,6 +1,11 @@
- Programme A + +
Programme A
+
Foo, Bar, Baz
+ + +

Un programme qui est sacrément bien nommé, parce que son contenu correspond tout à fait à ce qui vient en tête @@ -26,7 +31,12 @@

- Programme B + +
Programme B
+
Foo, Bar, Baz
+ + +

Un programme qui comme son nom l'indique, rend hommage à ce à quoi il fait référence. Composé des œuvres @@ -52,7 +62,12 @@

- Programme C + +
Programme C
+
Foo, Bar, Baz
+ + +

Les morceaux de ce programme font référence à ceux à quoi on peut s'attendre en lisant son nom. En voici la liste : @@ -77,7 +92,12 @@

- Programme D + +
Programme D
+
Foo, Bar, Baz
+ + +

Un programme dont les morceaux ont été choisis pour des raisons en lien avec sa dénomination. Composé des œuvres diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css index e4b61f2..d21e899 100644 --- a/stylesheets/programmes.css +++ b/stylesheets/programmes.css @@ -15,19 +15,43 @@ details.program { } details.program > summary { + display: grid; + grid-template-columns: 4fr 5fr 4em; + line-height: 2em; list-style: none; + cursor: pointer; } details.program > summary::-webkit-details-marker { display: none; } -details.program > summary:after { - position: absolute; - right: 1em; - content: '∨'; +details.program > summary > .name { + margin-left: 2em; + font-weight: bold; + color: #2f5597; +} + +details.program[open] > summary > .name, +details.program[open] > summary > .composers { + color: var(--gold); } -details.program[open] > summary:after { - content: '∧'; +details.program > summary > img.button { + display: block; + width: 2em; + margin: auto 1em; +} +details.program > summary > img.button.close, +details.program[open] > summary > img.button.open { + display: none; +} +details.program[open] > summary > img.button.close { + display: block; + position: absolute; bottom: 0; + right: 0; +} + +details.program > summary ~ * { + margin-left: 2em; } -- cgit v1.2.3 From b71cacbe6db38833176ec64c54596e928547a6b8 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Tue, 23 Feb 2021 23:13:40 +0100 Subject: Tweak program styling --- stylesheets/programmes.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css index d21e899..877054b 100644 --- a/stylesheets/programmes.css +++ b/stylesheets/programmes.css @@ -1,6 +1,6 @@ @media (min-width: 40em) { main { - margin: 4em; + margin: 2em 4em 0 4em; } } @@ -28,7 +28,7 @@ details.program > summary::-webkit-details-marker { details.program > summary > .name { margin-left: 2em; font-weight: bold; - color: #2f5597; + color: #1f4e79; } details.program[open] > summary > .name, -- cgit v1.2.3 From e2faa1435b9543e241a7beaa5c729b036a297014 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Tue, 23 Feb 2021 23:46:28 +0100 Subject: Add some more style to programs --- stylesheets/programmes.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'stylesheets') diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css index 877054b..3752a2a 100644 --- a/stylesheets/programmes.css +++ b/stylesheets/programmes.css @@ -17,6 +17,7 @@ details.program { details.program > summary { display: grid; grid-template-columns: 4fr 5fr 4em; + grid-gap: 0.8em; line-height: 2em; list-style: none; cursor: pointer; @@ -55,3 +56,24 @@ details.program[open] > summary > img.button.close { details.program > summary ~ * { margin-left: 2em; } + +details.program blockquote { + color: #c55a11; +} + +details.program blockquote p::before { + content: open-quote; +} +details.program blockquote p::after { + content: close-quote; +} + +ol.pieces { + list-style: none; + padding-left: 0; +} + +ol.pieces > li.intermission { + margin-left: 4em; + font-style: italic; +} -- cgit v1.2.3 From 2310cbda8c157f345f8d754185bb0418f9284b61 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Fri, 26 Feb 2021 17:04:10 +0100 Subject: Use the same color for the first paragraph and the close button --- stylesheets/programmes.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'stylesheets') diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css index 3752a2a..e448cf1 100644 --- a/stylesheets/programmes.css +++ b/stylesheets/programmes.css @@ -58,7 +58,7 @@ details.program > summary ~ * { } details.program blockquote { - color: #c55a11; + color: #e05a00; } details.program blockquote p::before { -- cgit v1.2.3 From b7589ac47432410e3aa8ec4809acc91c48c77b2d Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Fri, 26 Feb 2021 17:10:10 +0100 Subject: Highlight first paragraph of all programs --- stylesheets/programmes.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'stylesheets') diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css index e448cf1..0ad429e 100644 --- a/stylesheets/programmes.css +++ b/stylesheets/programmes.css @@ -57,7 +57,7 @@ details.program > summary ~ * { margin-left: 2em; } -details.program blockquote { +details.program > *:nth-child(3) { color: #e05a00; } -- cgit v1.2.3 From 7722e6a2a9119527d8accc4e7deb738a7ebf44e4 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Fri, 26 Feb 2021 17:12:34 +0100 Subject: Invert colors of first paragraph and summary --- stylesheets/programmes.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css index 0ad429e..32175d4 100644 --- a/stylesheets/programmes.css +++ b/stylesheets/programmes.css @@ -34,7 +34,8 @@ details.program > summary > .name { details.program[open] > summary > .name, details.program[open] > summary > .composers { - color: var(--gold); + color: #e05a00; + font-weight: bold; } details.program > summary > img.button { @@ -58,7 +59,8 @@ details.program > summary ~ * { } details.program > *:nth-child(3) { - color: #e05a00; + color: var(--gold); + font-weight: bold; } details.program blockquote p::before { -- cgit v1.2.3 From fd5969367b4bd662bd9ff6710783a3d87f5bd06a Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Fri, 26 Feb 2021 17:23:58 +0100 Subject: Prevent Chrome from outlining focused summaries --- stylesheets/programmes.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'stylesheets') diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css index 32175d4..2da1e2c 100644 --- a/stylesheets/programmes.css +++ b/stylesheets/programmes.css @@ -25,6 +25,11 @@ details.program > summary { details.program > summary::-webkit-details-marker { display: none; } +/* Disable Chrome's outline; we already highlight this block + prominently enough IMO. */ +details.program > summary:focus { + outline: none; +} details.program > summary > .name { margin-left: 2em; -- cgit v1.2.3