themes/default/layouts/partials/card-unsafe: Disable blur

Too expensive.

3 files changed, 48 insertions, 42 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 1bac056..e3bf90a 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -856,15 +856,33 @@ micro-header footer p {
   display: inline;
 }
 
+micro-unsafe-content {
+  border-radius: 0.5rem;
+  display: block;
+  background: repeating-linear-gradient(
+    45deg,
+    #ff9999,
+    #ff9999 1rem,
+    #eee 1rem,
+    #eee 2rem
+  );
+  box-shadow: 0 0 3px var(--shadow);
+  opacity: 0.5;
+}
+
 micro-unsafe-content * {
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
 }
 
+micro-unsafe details {
+  margin-bottom: 0.5rem;
+}
+
 micro-unsafe details svg {
   stroke-width: 0.1rem;
-  margin-right: 0.15rem;
+  margin-right: 0.5rem;
 }
 
 micro-unsafe details summary {
@@ -876,24 +894,21 @@ micro-unsafe details summary {
   list-style: none;
 }
 
+micro-unsafe details summary header {
+  display: flex;
+}
+
 micro-unsafe details > summary::-webkit-details-marker {
   display: none;
 }
 
-micro-unsafe-content {
-  border-radius: 0.25rem;
-  display: block;
-  background: repeating-linear-gradient(
-    180deg,
-    #ff9999,
-    #ff9999 1rem,
-    #eee 1rem,
-    #eee 2rem
-  );
+micro-unsafe details[open] + micro-unsafe-content {
+  background: none;
+  box-shadow: none;
+  opacity: 1;
 }
 
 micro-unsafe details[open] + micro-unsafe-content * {
-  filter: none;
   transition: 1s;
   visibility: visible;
   opacity: 1;
@@ -902,22 +917,6 @@ micro-unsafe details[open] + micro-unsafe-content * {
   pointer-events: auto;
 }
 
-micro-unsafe details[open] + micro-unsafe-content {
-  background: none;
-}
-
-@supports (filter: blur(2rem)) {
-  micro-unsafe-content * {
-    filter: blur(2rem);
-    visibility: unset;
-    opacity: unset;
-  }
-  micro-unsafe-content {
-    outline: none;
-    background: unset;
-  }
-}
-
 tab-list {
   display: inline-block;
   overflow-x: auto;
diff --git a/themes/default/layouts/_default/summary.html b/themes/default/layouts/_default/summary.html
index dcbb501..542da20 100644
--- a/themes/default/layouts/_default/summary.html
+++ b/themes/default/layouts/_default/summary.html
@@ -8,21 +8,9 @@
         <micro-metadata>
           {{ partial "card-meta.html" . }}
         </micro-metadata>
-          {{ if .Params.unsafe }}
-            <micro-unsafe>
-            <details>
-              <summary>
-                {{ safeHTML (readFile (print (partial "function-paths.html" "static") "/icons/feather/alert-circle.svg")) }}
-                <span>Danger: Unsafe Content. <b><u>Click here</u></b> to show/hide</span>
-              </summary>
-            </details>
-            <micro-unsafe-content>
-          {{ end }}
+          {{ if .Params.unsafe }}{{ partial "card-unsafe.html" "begin" }}{{ end }}
             {{- partial "function-content.html" .Content | safeHTML -}}
-          {{ if .Params.unsafe }}
-            </micro-unsafe-content>
-            </micro-unsafe>
-          {{ end }}
+          {{ if .Params.unsafe }}{{ partial "card-unsafe.html" "end" }}{{ end }}
           <micro-tags>{{ partial "tags.html" . }}</micro-tags>
       </micro-content>
     </micro-summary>
diff --git a/themes/default/layouts/partials/card-unsafe.html b/themes/default/layouts/partials/card-unsafe.html
new file mode 100644
index 0000000..11e1bab
--- /dev/null
+++ b/themes/default/layouts/partials/card-unsafe.html
@@ -0,0 +1,19 @@
+{{- $section := . -}}
+
+{{ if eq $section "begin" }}
+<micro-unsafe>
+<details>
+  <summary>
+    <header>
+      {{ safeHTML (readFile (print (partial "function-paths.html" "static") "/icons/feather/alert-circle.svg")) }}
+      <span>Danger: Unsafe Content. <b><u>Click here</u></b> to show/hide</span>
+    </header>
+  </summary>
+</details>
+  <micro-unsafe-content>
+{{ end }}
+
+{{ if eq $section "end" }}
+  </micro-unsafe-content>
+</micro-unsafe>
+{{ end }}