[wip] Postluminal - illustrated science fantasy story

cmbalfonso

https://dl.dropboxusercontent.com/u/644231/documents/luminous.html

A humorous tale of (deleveled) scifi epic heroes after their main saga is done. An experiment in allusion.

It also needs a combat script for tournament battles. Maybe some more RPG-like mechanics re: equipment and new spells. A lot still unfinished, but much of the actual story has already been prepared.

For now however, I beg for help with these two issues:

• 1) The game has embedded images. Is there a way to show something happening during the preloading stage, other than the blue bar up top and "This story was created with Twine and is powered by TiddlyWiki."
• 2) The text box isn't centering properly in Jonah or showing a gradient. What should I edit here?

html {
/* Vertical colour gradient */
background-image: linear-gradient(to bottom, gainsboro, silver);
background-image: -webkit-linear-gradient(top, gainsboro, silver);
background-attachment: fixed;

/* Fallback colour */
background-color: silver;
}
body {
/* Remove default styles */
background-color: transparent;
margin: 10% 0 0 0;
font-size: 100%;
/* Used to center the box */
text-align: center;
}

#passages {
/* Box background (white with 70% opacity) */
background-color: rgba(255, 255, 255, 0.7);

/* Border */
border: 2px solid white;

/* Rounded corners */
border-radius: 1em;

/* Box width */
width: 60%;

/* Center the box */
text-align: center;
display: inline-block;
min-height: 40%;
margin:auto;
margin-bottom: 5%;
padding: 0px;
}

.passage {
margin: 0px;
/* Inner margin within the box */
padding: 2em;

/* box-shadow: #000 0.5em 0.5em 0;*/

/* Text formatting */
font-family: Geneva, "Helvetica Neue", Helvetica, sans-serif;
color: black;
/*font-size: 100%;*/
font-size:1.2rem;
text-align:justify;
}

/* No sidebar */
#sidebar {
display:none;
}

/* Links */
a.internalLink, a.externalLink {
color: royalblue;
}
a.internalLink:hover, a.externalLink:hover {
color: deepskyblue;
text-decoration: none;
}

/* Shrink the page when viewed on devices with a low screen width */
@media screen and (max-width: 960px) {
.passage { font-size: 90%;}
#passages { width: 70%; }
}
@media screen and (max-width: 840px) {
.passage { font-size: 87.5%; }
#passages { width: 80%; }
}
@media screen and (max-width: 720px) {
.passage { font-size: 75%; }
#passages { width: 90%; }
}

/* transition for jonah*/

.passage .title { display: none }
.revision-span-in {
opacity: 0;
}
.revision-span:not(.revision-span-out) {
transition: 1s; -webkit-transition: 1s;
}
.revision-span-out {
position:absolute;
opacity: 0;
}