💄 style(error): enhance visibility of Zola errors (#359)

sass/main.scss

@@ -21,6 +21,7 @@
 @use 'parts/_table.scss';
 @use 'parts/_tags.scss';
 @use 'parts/_theme-switch.scss';
+@use 'parts/_zola-error.scss';
 
 @font-face {
     src: local('Inter'),

sass/parts/_zola-error.scss

@@ -0,0 +1,28 @@
+// Styles Zola error messages. See https://github.com/welpo/tabi/pull/359
+body > div:last-child > div:last-child[style]:not([class]):not([id]) {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+    border: 2px solid var(--admonition-danger-border);
+    border-radius: 5px;
+    background-color: var(--admonition-danger-bg);
+    padding: 15px;
+    width: fit-content;
+    max-width: 80%;
+}
+
+body > div:last-child > div:last-child[style]:not([class]):not([id]) > p[style]:first-child {
+    margin: 0;
+    color: var(--admonition-danger-border);
+    font-weight: bold;
+}
+
+body > div:last-child > div:last-child[style]:not([class]):not([id]) > pre[style]:last-child {
+    margin-bottom: 0;
+    background-color: var(--admonition-danger-code);
+    padding: 10px;
+    overflow-x: auto;
+}