Improve message shown for Mermaid when JS not enabled

2021-12-21 18:54:46 +00:00
parent 4c14f7f840
commit e66d19ff6e
4 changed files with 26 additions and 5 deletions
@@ -752,6 +752,10 @@ figure {
    max-width: clamp(0vw, 95vw, 100%);
    max-height: calc(80vh - 8rem);
  }
+
+  figure + noscript > *{
+    max-width: calc(max(100%, 100vw));
+  }
 }

@media only screen and (min-width: 768px) {
@@ -774,6 +778,9 @@ figure {
      max-height: calc(100vh - 10rem);
    }
  }
+  figure + noscript > * {
+    max-width: 80%;
+  }
 }

 // Indent definition lists
@@ -806,3 +813,13 @@ dl {
     margin-bottom: 1em;
  }
 }
+
+.no-js .mermaid {
+  display: none;
+}
+
+div.alert > em.javascript-required {
+  display: inline-block;
+  min-height: 1.5em;
+  margin: calc(max(4em, ( 8vh + 4em ) / 2)) 0 0.25em 0;
+}