diff options
| -rw-r--r-- | stylesheets/commun.css | 17 | ||||
| -rw-r--r-- | stylesheets/concerts.css | 4 | ||||
| -rw-r--r-- | stylesheets/contact.css | 4 | ||||
| -rw-r--r-- | stylesheets/galerie.css | 4 | ||||
| -rw-r--r-- | stylesheets/index.css | 2 | ||||
| -rw-r--r-- | stylesheets/légal.css | 2 | ||||
| -rw-r--r-- | stylesheets/membre.css | 2 | ||||
| -rw-r--r-- | stylesheets/programmes.css | 2 | ||||
| -rw-r--r-- | stylesheets/quatuor.css | 4 |
9 files changed, 21 insertions, 20 deletions
diff --git a/stylesheets/commun.css b/stylesheets/commun.css index 0c50ad3..49071bf 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -1,3 +1,6 @@ +/* TODO: use a preprocessor, if only to be able to say + "wide-layout-threshold" instead of "50em", and + "xwide-layout-threshold" instead of "80em". */ body { --gold: #BE8B00; @@ -107,7 +110,7 @@ footer.legal { font-size: 75%; } -@media (min-width: 40em) { +@media (min-width: 50em) { body { --banner-logo-height: 8.5rem; --banner-name-height: 2rem; @@ -148,14 +151,12 @@ footer.legal { padding-left: 0; } - /* I'd like to make sure the grid only ever has 1/2/4 columns. - * No idea how to do that with one single neat rule, so… + /* I'd like to make sure the grid only ever has an even number of + * columns. No idea how to do that with one single neat rule, so… * 🤖 Go Go Gadget Mediaquery 🤖 */ - @media (min-width: 50em) { - nav > ol { - grid-template-columns: repeat(2, minmax(8em, 1fr)); - } + nav > ol { + grid-template-columns: repeat(2, minmax(8em, 1fr)); } @media (min-width: 80em) { @@ -238,7 +239,7 @@ footer.legal { } } -@media (max-width: 40em) { +@media (max-width: 50em) { body { --banner-logo-height: 6rem; --banner-name-height: 1.8rem; diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css index 7b70074..4d7f952 100644 --- a/stylesheets/concerts.css +++ b/stylesheets/concerts.css @@ -111,7 +111,7 @@ a.thumbnail { opacity: 50%; } -@media (min-width: 40em) { +@media (min-width: 50em) { main { /* Define thumbnail dimension here so that we can align stuff in * #event-details. */ @@ -174,7 +174,7 @@ a.thumbnail { } } -@media (max-width: 40em) { +@media (max-width: 50em) { .events { --cell-width: 10em; --cell-height: 8em; diff --git a/stylesheets/contact.css b/stylesheets/contact.css index 95b0678..fd75a7c 100644 --- a/stylesheets/contact.css +++ b/stylesheets/contact.css @@ -18,7 +18,7 @@ main h1 { padding: 0 2em; } -@media (min-width: 40em) { +@media (min-width: 50em) { main { display: grid; grid-template-columns: 1fr 1fr; @@ -62,7 +62,7 @@ main h1 { } } -@media (max-width: 40em) { +@media (max-width: 50em) { main dl, main ul { text-align: center; } diff --git a/stylesheets/galerie.css b/stylesheets/galerie.css index a94cddb..ed09b53 100644 --- a/stylesheets/galerie.css +++ b/stylesheets/galerie.css @@ -52,7 +52,7 @@ main h1 { height: 100%; } -@media (min-width: 40em) { +@media (min-width: 50em) { .mosaic.photos { --mosaic-side: 14em; } @@ -68,7 +68,7 @@ main h1 { } } -@media (max-width: 40em) { +@media (max-width: 50em) { .mosaic.photos { --mosaic-side: 8em; } diff --git a/stylesheets/index.css b/stylesheets/index.css index dcacc72..a2f15a3 100644 --- a/stylesheets/index.css +++ b/stylesheets/index.css @@ -75,7 +75,7 @@ a#next-concert:hover { } } -@media (min-width: 40em) { +@media (min-width: 50em) { header.menu > nav { background: #0004; } diff --git a/stylesheets/légal.css b/stylesheets/légal.css index 04c8775..9040c61 100644 --- a/stylesheets/légal.css +++ b/stylesheets/légal.css @@ -12,7 +12,7 @@ main h2 { filter: brightness(0); } -@media (min-width: 40em) { +@media (min-width: 50em) { main { max-width: 55em; justify-self: center; diff --git a/stylesheets/membre.css b/stylesheets/membre.css index dc2c7e3..1fa46cd 100644 --- a/stylesheets/membre.css +++ b/stylesheets/membre.css @@ -103,7 +103,7 @@ main > img { } } -@media (max-width: 40em) +@media (max-width: 50em) { main > .bio-title > h1 { font-size: 1.2em; diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css index 7ab6d99..f1df865 100644 --- a/stylesheets/programmes.css +++ b/stylesheets/programmes.css @@ -1,4 +1,4 @@ -@media (min-width: 40em) { +@media (min-width: 50em) { main { margin: 2em 4em 0 4em; } diff --git a/stylesheets/quatuor.css b/stylesheets/quatuor.css index a731be7..8d84795 100644 --- a/stylesheets/quatuor.css +++ b/stylesheets/quatuor.css @@ -21,7 +21,7 @@ color: #483200; } -@media (min-width: 40em) { +@media (min-width: 50em) { main { max-width: 55em; justify-self: center; @@ -59,7 +59,7 @@ } } -@media (max-width: 40em) { +@media (max-width: 50em) { #photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(20%, 50%)); |