styling

includes/style.less

@@ -11,7 +11,6 @@
 
 html, body {
     background-color: @background;
-    background-image: url("background.png");
     font-size: 3vmin;
     margin: 0;
     padding: 0;
@@ -37,6 +36,10 @@ button {
     }
 }
 
+h1 {
+    margin: 0;
+}
+
 h3 {
     font-size: 0.9em;
 }
@@ -57,6 +60,7 @@ input {
 img {
     max-height: 12em;
     max-width: 100%;
+    margin: 0;
 }
 
 p {
@@ -70,7 +74,7 @@ label {
 }
 
 textarea {
-    height: 20em;
+    height: 15em;
     padding: 0.5em;
     text-align: left;
     width: 100%;
@@ -92,12 +96,13 @@ textarea {
 }
 
 .page {
-    height: 80vmin;
-    width: 80vmin;
+    height: 70vmin;
+    width: 70vmin;
     
     background-color: @background;
+    border: 2px solid @accent;
     border-radius: 5vmin;
-    box-shadow: @accent 0.5vmin 0.5vmin;
+    box-shadow: @accent 1vmin 1vmin;
     padding: 5vmin;
     position: relative;
 }

index.pug

@@ -6,7 +6,7 @@ html(lang="en-gb")
         link(rel="stylesheet" href="includes/style.css")
     body
         h1
-            span.background tilesy
+            img(alt="tilesy" src="includes/tilesy.png")
         p
             span.background import 8×8 tile sheets into Bitsy games
         .pages
@@ -33,11 +33,8 @@ html(lang="en-gb")
             .page.extras
                 h2 tiles
                 label
-                    | tile name prefix (optional)
+                    | tile name (optional)
                     input#prefix(type="text" placeholder="e.g. 'forest'" autocomplete="off")
-                p.
-                    to help you find your new tiles in Bitsy, #[br]
-                    new tiles will be named #[span#tile-name-preview e.g. 'forest 1']
 
                 h3 create alternate versions
                 .checkboxes
@@ -57,8 +54,7 @@ html(lang="en-gb")
                     some tile sheets assume you will be able to flip and rotate their tiles.
                     Bitsy does not allow this, so it may be easier
                     to generate these alternate versions here.
-                p.
-                    don't worry - #[i tilesy] will not create duplicate tiles.
+
                 button.pagination.prev#back-to-image previous
                 button.pagination.next#import next
             .page.download

script.js

@@ -60,7 +60,6 @@ async function run() {
     const checkboxRotateTiles    = el("rotate");
     const inputPrefix            = el("prefix");
     const imagePreview           = el("preview");
-    const spanTileNamePreview    = el("tile-name-preview")
     const textareaGameDataInput  = el("game-data");
     const textareaGameDataOutput = el("output");
 
@@ -122,18 +121,6 @@ async function run() {
         }, "image");
     });
 
-    function handleTilePrefix() {
-        if (inputPrefix.value) {
-            spanTileNamePreview.innerText = `'${this.value} 1' etc.`
-        } else {
-            spanTileNamePreview.innerText = "'forest 1' etc."
-        }
-    }
-
-    inputPrefix.addEventListener("keyup", handleTilePrefix);
-    inputPrefix.addEventListener("change", handleTilePrefix);
-    handleTilePrefix();
-
     function addTiles() {
         let image    = imagePreview.getAttribute("src");
         let gameData = textareaGameDataInput.value;