commit 476d314bb48a643a6123e9dcb11943dbd00048db
parent 3b781d3c8e12750a4dd771f193b473abe6ab3b55
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Mon, 22 Mar 2021 22:27:33 +0100
Try to fix breakpoints in CSS media queries
(min-width: XXem) and (max-width: XXem) mean ≥XXem and ≤XXem,
respectively. So we get a bunch of bugs when <body> is *exactly*
XXem:
- in individual portraits, the image keeps hovering over the text,
- sometimes the menu bar disappears, and no menu button shows up,
- etc.
not all and (min-width: XXem) is the closest thing I've found to
<XXem.
Diffstat:
6 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/stylesheets/commun.css b/stylesheets/commun.css
@@ -244,7 +244,7 @@ footer.legal {
}
}
-@media (max-width: 50em) {
+@media not all and (min-width: 50em) {
body {
--banner-logo-height: 6rem;
--banner-name-height: 1.8rem;
diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css
@@ -178,7 +178,7 @@ a.thumbnail {
}
}
-@media (max-width: 50em) {
+@media not all and (min-width: 50em) {
.events {
--cell-width: 10em;
--cell-height: 8em;
diff --git a/stylesheets/contact.css b/stylesheets/contact.css
@@ -62,7 +62,7 @@ main h1 {
}
}
-@media (max-width: 50em) {
+@media not all and (min-width: 50em) {
main dl, main ul {
text-align: center;
}
diff --git a/stylesheets/galerie.css b/stylesheets/galerie.css
@@ -68,7 +68,7 @@ main h1 {
}
}
-@media (max-width: 50em) {
+@media not all and (min-width: 50em) {
.mosaic.photos {
--mosaic-side: 8em;
}
diff --git a/stylesheets/membre.css b/stylesheets/membre.css
@@ -77,7 +77,7 @@ main > img {
}
}
-@media (max-width: 80em)
+@media not all and (min-width: 80em)
{
main {
align-items: center;
@@ -99,7 +99,7 @@ main > img {
}
}
-@media (max-width: 50em)
+@media not all and (min-width: 50em)
{
main > .bio-title > h1 {
font-size: 1.2em;
diff --git a/stylesheets/quatuor.css b/stylesheets/quatuor.css
@@ -59,7 +59,7 @@
}
}
-@media (max-width: 50em) {
+@media not all and (min-width: 50em) {
#photos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20%, 50%));
