diff --git a/index.pug b/index.pug index c398a2c..5081a9f 100644 --- a/index.pug +++ b/index.pug @@ -2,11 +2,13 @@ doctype html html(lang="en-gb") head meta(charset="utf-8") - title tiles to bitsy + title tilesy link(rel="stylesheet" href="style.css") body - h1 tiles to bitsy - p import 8x8 tile sheets into your Bitsy games + h1 + span.background tilesy + p + span.background import 8x8 tile sheets into your Bitsy games .pages .page#start button.normal.pagination.next#new create a new bitsy game @@ -50,8 +52,9 @@ html(lang="en-gb") input(type="checkbox")#rotate | rotated p. - some tile sets only include one rotation for each tile; - this can be a problem in Bitsy since it does not allow tile rotation/mirroring. + 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 tiles automatically in #[i tilesy]. p. #[i tilesy] will not create duplicate tiles, so don't worry about ending up with numerous identical tiles. diff --git a/style.less b/style.less index 768ce23..d642f9f 100644 --- a/style.less +++ b/style.less @@ -11,6 +11,7 @@ html, body { background-color: @background; + background-image: url("background.png"); font-size: 3vmin; margin: 0; padding: 0; @@ -46,7 +47,7 @@ input { &[type="checkbox"] { width: auto; - margin-right: 0.5em; + margin-right: 1em; position: relative; top: 0.25em; left: 0.25em; @@ -75,6 +76,11 @@ textarea { width: 100%; } +.background { + background-color: @background; + box-shadow: 0 0 2em @background; +} + .checkboxes label { margin-right: 1em; } @@ -88,6 +94,7 @@ textarea { height: 80vmin; width: 80vmin; + background-color: @background; border-radius: 5vmin; box-shadow: @accent 0.5vmin 0.5vmin; padding: 5vmin;