From 66abe25f9c13bf7f1b9f6ba67d8a7e88c4b1a87c Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Sat, 13 Feb 2021 23:13:49 +0100 Subject: Make sure concert photos never take more than half the space --- "stylesheets/actualit\303\251s.css" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'stylesheets') diff --git "a/stylesheets/actualit\303\251s.css" "b/stylesheets/actualit\303\251s.css" index 25ec656..ce77f74 100644 --- "a/stylesheets/actualit\303\251s.css" +++ "b/stylesheets/actualit\303\251s.css" @@ -21,7 +21,7 @@ .events { display: grid; grid-auto-rows: var(--cell-height); - grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr)); + grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 0.5fr)); grid-gap: 0.8em; } -- cgit v1.2.3 From 0b5df2b335f8caa2cf3fb05b74659fba44670586 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Sat, 13 Feb 2021 22:34:59 +0100 Subject: Add first concert Plus some emojis. And center concert summary. --- "actualit\303\251s.html" | 246 ++++-------------------------------- images/concerts/dinard.jpg | Bin 0 -> 548213 bytes "stylesheets/actualit\303\251s.css" | 35 +++++ 3 files changed, 60 insertions(+), 221 deletions(-) create mode 100644 images/concerts/dinard.jpg (limited to 'stylesheets') diff --git "a/actualit\303\251s.html" "b/actualit\303\251s.html" index 70ccce8..81a70e3 100644 --- "a/actualit\303\251s.html" +++ "b/actualit\303\251s.html" @@ -3,235 +3,39 @@

Prochains concerts

- - -

Quelque part
À un moment

- -
-
- - -

Quelque part
À un moment

- -
-
- - -

Quelque part
À un moment

- -
-
- - -

Quelque part
À un moment

+ + +

Dinard
3 avril 2021

Concerts passés

-
- - -

Quelque part
À un moment

- -
-
- - -

Quelque part
À un moment

- -
-
- - -

Quelque part
À un moment

- -
-
- - -

Quelque part
À un moment

- -
-
-

Concert 8

-

Programme

-
    -
  1. Un morceau
    2. -
  2. Un morceau
    3. -
  3. Un morceau
    4. -
  4. Un morceau
    5. -
  5. Entracte
    6. -
  6. Un morceau
    7. -
  7. Un morceau
    8. -
  8. Un morceau
    9. -
  9. Un morceau
    10. -
-

Salle

- 42 Place de l'Endroit - 01337 La-Ville-du-Coin -

Programmation

-

Site du programmateur

-

Conditions de réservation : tenue correcte, vaccins à jour

-

Tarif 1 place : 108¤

-
-
-

Concert 7

-

Programme

-
    -
  1. Un morceau
    2. -
  2. Un morceau
    3. -
  3. Un morceau
    4. -
  4. Un morceau
    5. -
  5. Entracte
    6. -
  6. Un morceau
    7. -
  7. Un morceau
    8. -
  8. Un morceau
    9. -
  9. Un morceau
    10. -
-

Salle

- 43 Place de l'Endroit - 02337 La-Ville-du-Coin -

Programmation

-

Site du programmateur

-

Conditions de réservation : tenue correcte, vaccins à jour

-

Tarif 1 place : 107¤

-
-
-

Concert 6

-

Programme

-
    -
  1. Un morceau
    2. -
  2. Un morceau
    3. -
  3. Un morceau
    4. -
  4. Un morceau
    5. -
  5. Entracte
    6. -
  6. Un morceau
    7. -
  7. Un morceau
    8. -
  8. Un morceau
    9. -
  9. Un morceau
    10. -
-

Salle

- 44 Place de l'Endroit - 03337 La-Ville-du-Coin -

Programmation

-

Site du programmateur

-

Conditions de réservation : tenue correcte, vaccins à jour

-

Tarif 1 place : 106¤

-
-
-

Concert 5

-

Programme

-
    -
  1. Un morceau
    2. -
  2. Un morceau
    3. -
  3. Un morceau
    4. -
  4. Un morceau
    5. -
  5. Entracte
    6. -
  6. Un morceau
    7. -
  7. Un morceau
    8. -
  8. Un morceau
    9. -
  9. Un morceau
    10. -
-

Salle

- 45 Place de l'Endroit - 04337 La-Ville-du-Coin -

Programmation

-

Site du programmateur

-

Conditions de réservation : tenue correcte, vaccins à jour

-

Tarif 1 place : 105¤

-
-
-

Concert 4

-

Programme

-
    -
  1. Un morceau
    2. -
  2. Un morceau
    3. -
  3. Un morceau
    4. -
  4. Un morceau
    5. -
  5. Entracte
    6. -
  6. Un morceau
    7. -
  7. Un morceau
    8. -
  8. Un morceau
    9. -
  9. Un morceau
    10. +
    +

    Samedi 3 avril 2021

    +

    20h00

    +

    Dinard

    +
      +
    1. Haydn quatuor op.76 n°1​
      2. +
    2. Brahms quatuor n°7, op.59 n°1​
      3. +
    3. Ravel quatuor à cordes
    -

    Salle

    - 46 Place de l'Endroit - 05337 La-Ville-du-Coin -

    Programmation

    -

    Site du programmateur

    -

    Conditions de réservation : tenue correcte, vaccins à jour

    -

    Tarif 1 place : 104¤

    -
    -
    -

    Concert 3

    -

    Programme

    -
      -
    1. Un morceau
      2. -
    2. Un morceau
      3. -
    3. Un morceau
      4. -
    4. Un morceau
      5. -
    5. Entracte
      6. -
    6. Un morceau
      7. -
    7. Un morceau
      8. -
    8. Un morceau
      9. -
    9. Un morceau
      10. -
    -

    Salle

    - 47 Place de l'Endroit - 06337 La-Ville-du-Coin -

    Programmation

    -

    Site du programmateur

    -

    Conditions de réservation : tenue correcte, vaccins à jour

    -

    Tarif 1 place : 103¤

    -
    -
    -

    Concert 2

    -

    Programme

    -
      -
    1. Un morceau
      2. -
    2. Un morceau
      3. -
    3. Un morceau
      4. -
    4. Un morceau
      5. -
    5. Entracte
      6. -
    6. Un morceau
      7. -
    7. Un morceau
      8. -
    8. Un morceau
      9. -
    9. Un morceau
      10. -
    -

    Salle

    - 48 Place de l'Endroit - 07337 La-Ville-du-Coin -

    Programmation

    -

    Site du programmateur

    -

    Conditions de réservation : tenue correcte, vaccins à jour

    -

    Tarif 1 place : 102¤

    -
    -
    -

    Concert 1

    -

    Programme

    -
      -
    1. Un morceau
      2. -
    2. Un morceau
      3. -
    3. Un morceau
      4. -
    4. Un morceau
      5. -
    5. Entracte
      6. -
    6. Un morceau
      7. -
    7. Un morceau
      8. -
    8. Un morceau
      9. -
    9. Un morceau
      10. -
    -

    Salle

    - 49 Place de l'Endroit - 08337 La-Ville-du-Coin -

    Programmation

    -

    Site du programmateur

    -

    Conditions de réservation : tenue correcte, vaccins à jour

    -

    Tarif 1 place : 101¤

    +

    + Informations et réservations : + + https://weekenddemusiqueclassique.fr + +

    +

    + Photo fournie par + + Piqsels + +

@@ -243,9 +47,9 @@ detailsStyle.sheet.insertRule('.details:not(.active) {display:none}'); var anchor = document.location.hash; - if (anchor.match(/#concert-[0-9]/)) + if (anchor.match(/#concert-/)) { document.querySelector(anchor).classList.add('active'); - + } document.querySelectorAll('.event a').forEach((link) => { link.addEventListener('click', function(click) { if (click.ctrlKey || click.shiftKey) diff --git a/images/concerts/dinard.jpg b/images/concerts/dinard.jpg new file mode 100644 index 0000000..bc46720 Binary files /dev/null and b/images/concerts/dinard.jpg differ diff --git "a/stylesheets/actualit\303\251s.css" "b/stylesheets/actualit\303\251s.css" index ce77f74..bb11e09 100644 --- "a/stylesheets/actualit\303\251s.css" +++ "b/stylesheets/actualit\303\251s.css" @@ -37,6 +37,41 @@ .event .summary { font-weight: bold; color: white; + text-align: center; +} + +.details > .detail { + display: grid; + grid-template-columns: 2em 1fr; +} + +.detail.date::before { + content: "📅"; +} +.detail.time::before { + content: "🕗"; +} +.detail.place::before { + content: "📌"; +} +.detail.program::before { + content: "🎼"; +} + +.details > .detail::before { + grid-column: 1; +} +.details > .detail > * { + grid-column: 2; +} + +.detail.program { + padding-left: 0; + list-style: none; +} + +.photo-credits { + font-size: x-small; } @media (min-width: 40em) { -- cgit v1.2.3 From 19c4d165c060de65f1912072559763c088a6a251 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Sat, 20 Feb 2021 23:38:19 +0100 Subject: Try to align event details below title --- "stylesheets/actualit\303\251s.css" | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'stylesheets') diff --git "a/stylesheets/actualit\303\251s.css" "b/stylesheets/actualit\303\251s.css" index bb11e09..2063238 100644 --- "a/stylesheets/actualit\303\251s.css" +++ "b/stylesheets/actualit\303\251s.css" @@ -40,6 +40,12 @@ text-align: center; } +#event-details { + /* Align with photos; #event-list h1 has font-size 2em and margin + * .67em; browsers default line-height to "roughly 1.2". */ + margin-top: calc(2*0.67em + 2*1.2em); +} + .details > .detail { display: grid; grid-template-columns: 2em 1fr; -- cgit v1.2.3 From 44bc0af7f094257fa7e8f268c08cad3a119bd643 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Fri, 26 Feb 2021 17:43:41 +0100 Subject: Highlight thumbnail on keyboard focus --- "stylesheets/actualit\303\251s.css" | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'stylesheets') diff --git "a/stylesheets/actualit\303\251s.css" "b/stylesheets/actualit\303\251s.css" index 2063238..9d6508e 100644 --- "a/stylesheets/actualit\303\251s.css" +++ "b/stylesheets/actualit\303\251s.css" @@ -109,7 +109,7 @@ transition: 0.5s; } - .event:hover img { + .event:hover img, .event:focus-within img { filter: grayscale(0.8) brightness(0.4); } @@ -119,7 +119,7 @@ transition: 0.5s; } - .event:hover .summary { + .event:hover .summary, .event:focus-within .summary { opacity: 1; } } -- cgit v1.2.3 From 1c8d3c6ff37892ff4092229039f886dc59619546 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Fri, 26 Feb 2021 17:50:51 +0100 Subject: Simplify thumbnail structure --- "actualit\303\251s.html" | 22 +++++++++------------- "stylesheets/actualit\303\251s.css" | 4 ++-- 2 files changed, 11 insertions(+), 15 deletions(-) (limited to 'stylesheets') diff --git "a/actualit\303\251s.html" "b/actualit\303\251s.html" index a5a85a8..99d54ae 100644 --- "a/actualit\303\251s.html" +++ "b/actualit\303\251s.html" @@ -2,18 +2,14 @@

Prochains concerts

-
- - -

Dinard
3 avril 2021

- -
-
- - -

Paris
13 juin 2021

- -
+ + +

Dinard
3 avril 2021

+ + + +

Paris
13 juin 2021

+

Concerts passés

@@ -78,7 +74,7 @@ if (anchor.match(/#concert-/)) { document.querySelector(anchor).classList.add('active'); } - document.querySelectorAll('.event a').forEach((link) => { + document.querySelectorAll('a.event').forEach((link) => { link.addEventListener('click', function(click) { if (click.ctrlKey || click.shiftKey) return; diff --git "a/stylesheets/actualit\303\251s.css" "b/stylesheets/actualit\303\251s.css" index 9d6508e..280316d 100644 --- "a/stylesheets/actualit\303\251s.css" +++ "b/stylesheets/actualit\303\251s.css" @@ -25,7 +25,7 @@ grid-gap: 0.8em; } -.event a { +a.event { display: flex; justify-content: center; align-items: center; @@ -96,7 +96,7 @@ --cell-height: 12em; } - .event a { + a.event { position: relative; } -- cgit v1.2.3 From 24ff9449a06c94c42f778f9c5d46a7c6e9accd57 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Fri, 26 Feb 2021 18:09:07 +0100 Subject: Keep thumbnail of opened concerts highlighted --- "actualit\303\251s.html" | 8 ++++++++ "stylesheets/actualit\303\251s.css" | 8 ++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) (limited to 'stylesheets') diff --git "a/actualit\303\251s.html" "b/actualit\303\251s.html" index 99d54ae..606bb74 100644 --- "a/actualit\303\251s.html" +++ "b/actualit\303\251s.html" @@ -73,6 +73,8 @@ var anchor = document.location.hash; if (anchor.match(/#concert-/)) { document.querySelector(anchor).classList.add('active'); + document.querySelector(`a[href="${document.location.hash}"]`) + .classList.add('active'); } document.querySelectorAll('a.event').forEach((link) => { link.addEventListener('click', function(click) { @@ -84,6 +86,12 @@ prev.classList.remove('active'); var id = link.attributes['href'].value; document.querySelector(id).classList.add('active'); + + prev = document.querySelector('a.event.active'); + if (prev) { + prev.classList.remove('active'); + } + link.classList.add('active'); }); }); diff --git "a/stylesheets/actualit\303\251s.css" "b/stylesheets/actualit\303\251s.css" index 280316d..ee1be86 100644 --- "a/stylesheets/actualit\303\251s.css" +++ "b/stylesheets/actualit\303\251s.css" @@ -109,7 +109,9 @@ a.event { transition: 0.5s; } - .event:hover img, .event:focus-within img { + .event:not(.active):hover img, + .event:not(.active):focus-within img, + .event.active img { filter: grayscale(0.8) brightness(0.4); } @@ -119,7 +121,9 @@ a.event { transition: 0.5s; } - .event:hover .summary, .event:focus-within .summary { + .event:not(.active):hover .summary, + .event:not(.active):focus-within .summary, + .event.active .summary { opacity: 1; } } -- cgit v1.2.3