From ce639ef6db364ce0c7cb049055a39da2c54a986e Mon Sep 17 00:00:00 2001 From: Max Bradbury Date: Tue, 21 Jul 2020 20:23:30 +0100 Subject: [PATCH] styling --- includes/background.png | Bin 7993 -> 0 bytes includes/style.less | 15 ++++++++++----- includes/tilesy.png | Bin 0 -> 4229 bytes index.pug | 10 +++------- script.js | 13 ------------- 5 files changed, 13 insertions(+), 25 deletions(-) delete mode 100644 includes/background.png create mode 100644 includes/tilesy.png diff --git a/includes/background.png b/includes/background.png deleted file mode 100644 index 91fd9b692ffc56d17f01e7dc41b4abc7ceb77a2e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7993 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 diff --git a/includes/style.less b/includes/style.less index 31f9f2d..f95c7a0 100644 --- a/includes/style.less +++ b/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; } diff --git a/includes/tilesy.png b/includes/tilesy.png new file mode 100644 index 0000000000000000000000000000000000000000..1fdc63440b71d450d51ac33e0988f8c2de2b85e3 GIT binary patch literal 4229 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 baiy`CvC8LtK>+Y=3knH}3~bt;eDQw(V>BUS literal 0 HcmV?d00001 diff --git a/index.pug b/index.pug index cd850d3..77667f2 100644 --- a/index.pug +++ b/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 diff --git a/script.js b/script.js index 09486c4..1a4e514 100644 --- a/script.js +++ b/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;