Use CSS @supports rule to change property values if popover is supported
This commit is contained in:
parent
e76ac1778b
commit
659896f57d
|
@ -54,11 +54,10 @@
|
||||||
.navbar__menu a:focus { outline-offset: 0.2em; }
|
.navbar__menu a:focus { outline-offset: 0.2em; }
|
||||||
|
|
||||||
.navbar__links {
|
.navbar__links {
|
||||||
display: none;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar__toggle {
|
.navbar__toggle {
|
||||||
|
@ -68,7 +67,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
display: flex;
|
display: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.3em;
|
gap: 0.3em;
|
||||||
}
|
}
|
||||||
|
@ -92,22 +91,15 @@
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@supports selector([popover]) {
|
||||||
|
.navbar__toggle { display: flex; }
|
||||||
|
.navbar__links { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
/* Tablet screen size */
|
/* Tablet screen size */
|
||||||
@media only screen and (min-width: 43.75rem) {
|
@media only screen and (min-width: 43.75rem) {
|
||||||
.navbar { padding: 1em 0.6em; }
|
.navbar { padding: 1em 0.6em; }
|
||||||
.navbar__toggle, .navbar__popover { display: none; }
|
.navbar__toggle, .navbar__popover { display: none; }
|
||||||
.navbar__links { display: flex; }
|
.navbar__links { display: flex; }
|
||||||
}
|
}
|
||||||
{% endcss %}
|
{% endcss %}
|
||||||
|
|
||||||
{%- js %}
|
|
||||||
function supportsPopover() {
|
|
||||||
return HTMLElement.prototype.hasOwnProperty("popover");
|
|
||||||
}
|
|
||||||
const popoverSupported = supportsPopover();
|
|
||||||
|
|
||||||
if (!popoverSupported) {
|
|
||||||
document.querySelector(".navbar__toggle").style.display = "none";
|
|
||||||
document.querySelector(".navbar__links").style.display = "flex";
|
|
||||||
}
|
|
||||||
{% endjs %}
|
|
Loading…
Reference in New Issue