styling and copy

This commit is contained in:
Max Bradbury 2020-07-20 17:23:41 +01:00
parent 3d74798d82
commit 8f4f0ed1e5
2 changed files with 16 additions and 6 deletions

View File

@ -2,11 +2,13 @@ doctype html
html(lang="en-gb") html(lang="en-gb")
head head
meta(charset="utf-8") meta(charset="utf-8")
title tiles to bitsy title tilesy
link(rel="stylesheet" href="style.css") link(rel="stylesheet" href="style.css")
body body
h1 tiles to bitsy h1
p import 8x8 tile sheets into your Bitsy games span.background tilesy
p
span.background import 8x8 tile sheets into your Bitsy games
.pages .pages
.page#start .page#start
button.normal.pagination.next#new create a new bitsy game button.normal.pagination.next#new create a new bitsy game
@ -50,8 +52,9 @@ html(lang="en-gb")
input(type="checkbox")#rotate input(type="checkbox")#rotate
| rotated | rotated
p. p.
some tile sets only include one rotation for each tile; some tile sheets assume you will be able to flip and rotate their tiles;
this can be a problem in Bitsy since it does not allow tile rotation/mirroring. Bitsy does not allow this, so it may be easier
to generate these alternate tiles automatically in #[i tilesy].
p. p.
#[i tilesy] will not create duplicate tiles, #[i tilesy] will not create duplicate tiles,
so don't worry about ending up with numerous identical tiles. so don't worry about ending up with numerous identical tiles.

View File

@ -11,6 +11,7 @@
html, body { html, body {
background-color: @background; background-color: @background;
background-image: url("background.png");
font-size: 3vmin; font-size: 3vmin;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -46,7 +47,7 @@ input {
&[type="checkbox"] { &[type="checkbox"] {
width: auto; width: auto;
margin-right: 0.5em; margin-right: 1em;
position: relative; position: relative;
top: 0.25em; top: 0.25em;
left: 0.25em; left: 0.25em;
@ -75,6 +76,11 @@ textarea {
width: 100%; width: 100%;
} }
.background {
background-color: @background;
box-shadow: 0 0 2em @background;
}
.checkboxes label { .checkboxes label {
margin-right: 1em; margin-right: 1em;
} }
@ -88,6 +94,7 @@ textarea {
height: 80vmin; height: 80vmin;
width: 80vmin; width: 80vmin;
background-color: @background;
border-radius: 5vmin; border-radius: 5vmin;
box-shadow: @accent 0.5vmin 0.5vmin; box-shadow: @accent 0.5vmin 0.5vmin;
padding: 5vmin; padding: 5vmin;