projects / heroik.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 74bdf0e)
Keep back/press on controls in a fixed header when standalone.
authorJoe Wreschnig <joe.wreschnig@gmail.com>
Sun, 31 Aug 2014 23:23:59 +0000 (01:23 +0200)
committerJoe Wreschnig <joe.wreschnig@gmail.com>
Sun, 31 Aug 2014 23:24:31 +0000 (01:24 +0200)
abilities.html patch | blob | history
allevents.html patch | blob | history
cards.html patch | blob | history
heroik.css patch | blob | history
heroik.html patch | blob | history
scenario.html patch | blob | history
variants.html patch | blob | history

diff --git a/abilities.html b/abilities.html
index b0e97763d890692981e2f2f19feafa703fd0d083..b9f395f550db70f3006ded309f424b6849f789ea 100644 (file)
--- a/abilities.html
+++ b/abilities.html
@@ -28,11 +28,10 @@
     <title>Special Abilities - Hero: Immortal King</title>
   </head>
   <body>
-    <div id=statusbar></div>
+    <header>
+      <a class=button href="heroik.html">◀ Return</a>
+    </header>
     <main>
-    <a class="button no-print" href="heroik.html">
-      ◀ Return
-    </a>
     <h1>Special Abilities</h1>
     <table id=abilities>
       <tbody>
diff --git a/allevents.html b/allevents.html
index 6591e8c450a0ae35b7d357bdacf77f1c0743f04c..7a0444eafb19ebbb5666815d7821b287c50cc164 100644 (file)
--- a/allevents.html
+++ b/allevents.html
@@ -32,19 +32,14 @@
   <body onload="
         canonicalToHTML(document.getElementById('canonical'));
         noncanonicalToHTML(document.getElementById('noncanonical'))">
-                               
-    <div id=statusbar></div>
+    <header>
+      <a class=button href="heroik.html">◀ Return</a>
+    </header>
     <main>
-    <div style="height: 3em" class="no-print">
-      <a class=button style="float: left; text-align: left"
-         href="heroik.html">
-        ◄ Return
-      </a>
-    </div>
+    <h1>Fate Chart Events</h1>
     <noscript>
       Viewing the list of Fate Chart events requires JavaScript.
     </noscript>
-    <h1>Fate Chart Events</h1>
     <h2>Canonical</h2>
     <table id=canonical class=tall>
     </table>
diff --git a/cards.html b/cards.html
index b7079c32800e947a09501d48948e59caf67bd335..4ed3189e0f242e1bb347b6e71ff407768d6e12de 100644 (file)
--- a/cards.html
+++ b/cards.html
@@ -30,14 +30,10 @@
     <title>Expansion Cards - Hero: Immortal King</title>
   </head>
   <body>
-    <div id=statusbar></div>
+    <header>
+      <a class=button href="heroik.html">◀ Return</a>
+    </header>
     <main>
-    <div style="height: 3em" class="no-print">
-      <a class=button style="float: left; text-align: left"
-         href="heroik.html">
-        ◄ Return
-      </a>
-    </div>
     <h1>Promotional Cards</h1>
     <div class='card adventurer'>
       <div class=name>Ykesha</div>
diff --git a/heroik.css b/heroik.css
index d58402fe13bc39ba4289081ac024d0d2aaba54e8..40bb1ae221c27a9af06861c9b9c9b0a3bbb62403 100644 (file)
--- a/heroik.css
+++ b/heroik.css
@@ -66,10 +66,6 @@ html {
     height: 100%;
 }
 
-@media (max-width: 639px) {
-    html { font-size: 14px; }
-}
-
 body {
     background-color: black;
     min-height: 100%;
@@ -77,10 +73,6 @@ body {
     box-sizing: border-box;
 }
 
-body.standalone {
-    padding-top: 20px;
-}
-
 main {
     background-color: white;
     max-width: 25.2em;
@@ -91,8 +83,12 @@ main {
     box-sizing: border-box;
 }
 
-body.standalone main {
-    padding-top: 0.5em;
+body.standalone header + main {
+    padding-top: 5em;
+}
+
+body.standalone header:empty + main {
+    padding-top: 2em;
 }
 
 table {
@@ -252,6 +248,15 @@ input[type=checkbox] {
     box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888;
 }
 
+
+.standalone header .button {
+    box-shadow: 0 0 0.5em 0.0625em #aaa;
+}
+
+.standalone header .button:active {
+    box-shadow: 0 0 0 0 #aaa;
+}
+
 main > div, main > noscript {
     text-align: center;
     margin-bottom: 1rem;
@@ -711,18 +716,27 @@ table {
     bottom: 1.8%;
 }
 
-#statusbar {
-    display: none;
-    position: fixed;
+header {
     left: 0;
     top: 0;
     right: 0;
-    height: 20px;
-    background-color: black;
+    margin: auto;
+    max-width: 25.2em;
+    background-color: white;
+    padding: 0.5em;
+    box-sizing: border-box;
+    z-index: 2;
 }
 
-body.standalone #statusbar {
-    display: block;
+body.standalone header:empty {
+    padding: 0;
+    padding-top: 20px;
+}
+
+body.standalone header {
+    position: fixed;
+    padding-top: 20px;
+    background-color: black;
 }
 
 h1, h2, [onclick], label {
@@ -737,13 +751,20 @@ h1, h2, [onclick], label {
     cursor: pointer;
 }
 
+@media (max-width: 639px) {
+    html { font-size: 14px; }
+    header .button {
+        padding: 0 0.2em;
+    }
+}
+
 @media print {
 
     @page {
         size: 3.5in 7in;
         margin: 0.5em;
     }
-    .no-print {
+    header, .no-print {
         display: none !important;
     }
 
diff --git a/heroik.html b/heroik.html
index 9a78696c53ca52282d574cfaf575baf6e979bd1f..64cd2e3681cef8316597c742b434d3d3868ba755 100644 (file)
--- a/heroik.html
+++ b/heroik.html
@@ -28,7 +28,7 @@
     <title>Hero: Immortal King</title>
   </head>
   <body>
-    <div id=statusbar></div>
+    <header></header>
     <main>
     <h1>Find a Dungeon</h1>
     <h2>Difficulty</h2>
diff --git a/scenario.html b/scenario.html
index 73cd6f95d093a20e3c3082008dba60646ad77c0f..5959411f91ec93ef8575441e149ddf5ebf0bdd9d 100644 (file)
--- a/scenario.html
+++ b/scenario.html
@@ -30,18 +30,14 @@
     <title>Scenario - Hero: Immortal King</title>
   </head>
   <body onload="generateScenario()">
-    <div id=statusbar></div>
-    <main>
-    <div style="height: 3em" class="no-print">
-      <a class=button style="float: left; text-align: left"
-         href="heroik.html">
-        ◄ Finished!
-      </a>
+    <header>
+      <a class=button href="heroik.html">◀ Finished!</a>
       <a class=button style="float: right; text-align: right"
          onclick="nextEvent(this)">
         Press On ▼
       </a>
-    </div>
+    </header>
+    <main>
     <h1 id=name onclick="randomizeName()">The Boiling Forest</h1>
     <table id=fate>
       <thead><tr><th>Fate Chart</th><th>Event</th></tr></thead>
diff --git a/variants.html b/variants.html
index a6baea79f2a2ef19ed1345834ae1648fd2592d69..9eb90eaf061a267c65ca12120338bd1f7a938768 100644 (file)
--- a/variants.html
+++ b/variants.html
@@ -29,11 +29,10 @@
     <title>Variants - Hero: Immortal King</title>
   </head>
   <body>
-    <div id=statusbar></div>
+    <header>
+      <a class=button href="heroik.html">◀ Return</a>
+    </header>
     <main>
-    <a class="button no-print" href="heroik.html">
-      ◀ Return
-    </a>
     <h1>Canon Variants</h1>
     <h2>Advanced Solitaire</h2>
     <ul>
Scenario Generator & Variant Rules for Hero: Immortal King