Permalink
Browse files

Tidy up help window.

  • Loading branch information...
1 parent 8420a76 commit 1c8f1857921237f672f711d383c65d60870a3811 @capnrefsmmat capnrefsmmat committed Jan 28, 2012
Showing with 43 additions and 10 deletions.
  1. +23 −0 relativity/relativity.css
  2. +20 −10 relativity/relativity.html
View
@@ -194,6 +194,29 @@ header ul li:hover, li.nav-active {
color: #fff;
}
+#help-screen dt, #help-screen dd {
+ display: inline;
+}
+
+#help-screen dt {
+ font-weight: bold;
+ margin: 0.5em 0;
+}
+
+#help-screen dd {
+ margin-left: 0.5em;
+}
+
+#help-screen .close {
+ position: absolute;
+ top: 1em;
+ right: 1em;
+}
+
+#help-screen h3 {
+ margin: 0 0 1em;
+}
+
/** Captions **/
#caption {
View
@@ -86,17 +86,27 @@ <h3>Choose a demo</h3>
</div>
<div id="help-screen">
+ <a class="close" href="#" onclick="$('#help-screen').toggle(); return false">Close</a>
<h3>Keyboard Controls</h3>
- <br> w, a, s and d, or arrow keys: Accelerate
- <br> q and e: Rotate left and right (yaw)
- <br> 3: Show 3D view
- <br> t: Toggle clock display.
- <br> p: Toggle coordinate display.
- <br> Page up/down: Zoom in and out
- <br> space: Fire photon (rasteroids only).
- <br> h: Toggle help screen.
- <br> Press Next to advance to the next step in a demonstration.
- <br> <a href="#" onclick="$('#help-screen').toggle(); return false">Close</a>
+ <dl>
+ <dt>w, a, s and d, or arrow keys</dt>
+ <dd>Accelerate<br/></dd>
+ <dt>q, e</dt>
+ <dd>Rotate left and right (yaw)<br/></dd>
+ <dt>3</dt>
+ <dd>Show 3D view<br/></dd>
+ <dt>t</dt>
+ <dd>Toggle clock display<br/></dd>
+ <dt>p</dt>
+ <dd>Toggle coordinate display<br/></dd>
+ <dt>Page up/down</dt>
+ <dd>Zoom in and out<br/></dd>
+ <dt>Space</dt>
+ <dd>Fire photon (rasteroids only)<br/></dd>
+ <dt>h</dt>
+ <dd>Toggle help screen</dd>
+ </dl>
+ Press Next to advance to the next step in a demonstration.
</div>
<div id="zoom">
<a href="#" id="zoomIn">+</a>

0 comments on commit 1c8f185

Please sign in to comment.