Tweaked css and debounced image update

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>

index.html

@@ -136,8 +136,12 @@
       </div>
     </div>
 
-    <div>
-      Source code available on <a href="https://github.com/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">GitHub</a>, <a href="https://gitlab.com/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">GitLab</a>, <a href="https://bitbucket.org/AverageMarcus/bsky-screenshot/" target="_blank" rel="noopener noreferrer">Bitbucket</a> & <a href="https://git.cluster.fun/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">my own Gitea server</a>.
+    <div class="container">
+      <div class="row">
+        <div class="column column-60 column-offset-20" style="text-align: center;">
+          Source code available on <a href="https://github.com/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">GitHub</a>, <a href="https://gitlab.com/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">GitLab</a>, <a href="https://bitbucket.org/AverageMarcus/bsky-screenshot/" target="_blank" rel="noopener noreferrer">Bitbucket</a> & <a href="https://git.cluster.fun/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">my own Gitea server</a>.
+        </div>
+      </div>
     </div>
   </div>
 

script.js

@@ -23,6 +23,7 @@ function setWidth(value) {
 }
 
 (() => {
+  var timeout;
   let {bskyPost, config} = bindIt({
     config: {
       corsProxy: "https://corsproxy.io/?url=",
@@ -163,19 +164,20 @@ function setWidth(value) {
       bskyPost.externalLink.domain = record.value.embed.external.uri.replaceAll("https://", "").split("/")[0];
       bskyPost.externalLink.image = `${config.corsProxy}https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${record.value.embed.external.thumb.ref["$link"]}@jpeg`;
     }
-
-    updateImage();
   }
 
   function updateImage() {
-    window.requestAnimationFrame(function() {
+    if (timeout) {
+      window.cancelAnimationFrame(timeout);
+    }
+    timeout = window.requestAnimationFrame(function() {
       domtoimage.toPng(document.getElementById('post'), { cacheBust: false })
         .then(function (dataUrl) {
           document.getElementById('result-image').src = dataUrl;
         });
     });
   }
-  [...document.querySelectorAll('img')].forEach(el => el.addEventListener("load", updateImage));
+  [...document.querySelectorAll('#post img'), ...document.querySelectorAll('#input-form input')].forEach(el => el.addEventListener("load", updateImage));
 
   document.getElementById('submit').addEventListener('click', loadPost);
   document.getElementById('post-url').addEventListener('change', loadPost);
@@ -188,5 +190,4 @@ function setWidth(value) {
     link.href = document.getElementById('result-image').src;
     link.click();
   });
-
 })();

style.css

@@ -1,4 +1,3 @@
-
 body {
   min-height: 100vh;
   display: flex;
@@ -257,7 +256,12 @@ body {
   font-variant: no-contextual;
 }
 
-#download, #result-image {
+#result-image {
   display: block;
-  margin: 30px auto;
+  margin: 20px auto;
+}
+
+#download {
+  display: block;
+  margin: 10px auto 30px;
 }