Accords-Library-Archive/v3.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Handle no-script styling using media query

Browse Source
This commit is contained in:
DrMint 2024-06-30 15:50:51 +02:00
parent efb0f03be8
commit 591ea6b976
1 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/AppLayout/components/Html.astro
View File

@ -130,16 +130,6 @@ const isIOS = parser.getOS().name === "iOS";
</>
)
}
<noscript>
<style is:global>
.when-js {
display: none !important;
visibility: none !important;
opacity: 0 !important;
}
</style>
</noscript>
</head>
<body>
@ -815,14 +805,26 @@ const isIOS = parser.getOS().name === "iOS";
display: none !important;
}
}
@media (scripting: none) {
.when-js {
display: none !important;
visibility: none !important;
opacity: 0 !important;
}
}
@media (scripting: enabled) {
.when-no-js {
display: none !important;
visibility: none !important;
opacity: 0 !important;
}
}
</style>
{/* ------------------------------------------- JS --------------------------------------------- */}
<script is:inline>
Array.from(document.querySelectorAll(".when-no-js")).forEach((node) => node.remove());
</script>
<script is:inline>
document.querySelectorAll("a").forEach((element) => {
const href = element.getAttribute("href");