add: near perfect metadata compatibility

app/public/app.js

@@ -69,7 +69,7 @@ function check_message() {
     if (message) {
         element.style.marginBottom = "1rem";
         element.style.paddingLeft = "1rem";
-        element.innerHTML += `<li class="${message_good ? "green" : "red"}">${message.replaceAll('"', "")}</li>`;
+        element.innerHTML = `<li class="${message_good ? "green" : "red"}">${message.replaceAll('"', "")}</li>`;
     }
 
     // clear cookies
@@ -83,7 +83,7 @@ globalThis.show_message = (message, message_good = true) => {
     const element = document.getElementById("messages");
     element.style.marginBottom = "1rem";
     element.style.paddingLeft = "1rem";
-    element.innerHTML += `<li class="${message_good ? "green" : "red"}">${message.replaceAll('"', "")}</li>`;
+    element.innerHTML = `<li class="${message_good ? "green" : "red"}">${message.replaceAll('"', "")}</li>`;
 };
 
 check_message();

app/public/style.css

@@ -111,6 +111,11 @@ article {
     }
 }
 
+.container {
+    margin: 10px auto 0;
+    width: 100%;
+}
+
 .content_container {
     margin: var(--pad-2) auto;
     width: 100%;
@@ -163,7 +168,7 @@ video {
     justify-content: center;
     align-items: center;
     gap: var(--gap-2);
-    padding: var(--pad-2) var(--pad-4);
+    padding: var(--pad-2) calc(var(--pad-3) * 1.5);
     cursor: pointer;
     background: var(--color-raised);
     color: var(--color-text);
@@ -198,7 +203,7 @@ video {
 /* input */
 input {
     --h: 36px;
-    padding: var(--pad-2) var(--pad-4);
+    padding: var(--pad-2) calc(var(--pad-3) * 1.5);
     background: var(--color-raised);
     color: var(--color-text);
     outline: none;

app/templates_src/view.lisp

@@ -3,7 +3,11 @@
 (title
     (text "{{ entry.slug }}"))
 (text "{%- endif %} {{ metadata_head|safe }}")
+
+(text "{% if metadata.page_icon|length == 0 -%}")
 (link ("rel" "icon") ("href" "/public/favicon.svg"))
+(text "{%- endif %}")
+
 (text "{% endblock %} {% block body %}")
 (div
     ("class" "flex flex-col gap-2")