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 b0e9776..b9f395f 100644 (file)
--- a/abilities.html
+++ b/abilities.html
@@ -28,11 +28,10 @@
     <title>Special Abilities - Hero: Immortal King</title>
   </head>
   <body>
     <title>Special Abilities - Hero: Immortal King</title>
   </head>
   <body>
-    <div id=statusbar></div>
+    <header>
+      <a class=button href="heroik.html">◀ Return</a>
+    </header>
     <main>
     <main>
-    <a class="button no-print" href="heroik.html">
-      ◀ Return
-    </a>
     <h1>Special Abilities</h1>
     <table id=abilities>
       <tbody>
     <h1>Special Abilities</h1>
     <table id=abilities>
       <tbody>
diff --git a/allevents.html b/allevents.html
index 6591e8c..7a0444e 100644 (file)
--- a/allevents.html
+++ b/allevents.html
@@ -32,19 +32,14 @@
   <body onload="
         canonicalToHTML(document.getElementById('canonical'));
         noncanonicalToHTML(document.getElementById('noncanonical'))">
   <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>
     <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>
     <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>
     <h2>Canonical</h2>
     <table id=canonical class=tall>
     </table>
diff --git a/cards.html b/cards.html
index b7079c3..4ed3189 100644 (file)
--- a/cards.html
+++ b/cards.html
@@ -30,14 +30,10 @@
     <title>Expansion Cards - Hero: Immortal King</title>
   </head>
   <body>
     <title>Expansion Cards - Hero: Immortal King</title>
   </head>
   <body>
-    <div id=statusbar></div>
+    <header>
+      <a class=button href="heroik.html">◀ Return</a>
+    </header>
     <main>
     <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>
     <h1>Promotional Cards</h1>
     <div class='card adventurer'>
       <div class=name>Ykesha</div>
diff --git a/heroik.css b/heroik.css
index d58402f..40bb1ae 100644 (file)
--- a/heroik.css
+++ b/heroik.css
@@ -66,10 +66,6 @@ html {
     height: 100%;
 }
 
     height: 100%;
 }
 
-@media (max-width: 639px) {
-    html { font-size: 14px; }
-}
-
 body {
     background-color: black;
     min-height: 100%;
 body {
     background-color: black;
     min-height: 100%;
@@ -77,10 +73,6 @@ body {
     box-sizing: border-box;
 }
 
     box-sizing: border-box;
 }
 
-body.standalone {
-    padding-top: 20px;
-}
-
 main {
     background-color: white;
     max-width: 25.2em;
 main {
     background-color: white;
     max-width: 25.2em;
@@ -91,8 +83,12 @@ main {
     box-sizing: border-box;
 }
 
     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 {
 }
 
 table {
@@ -252,6 +248,15 @@ input[type=checkbox] {
     box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888;
 }
 
     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;
 main > div, main > noscript {
     text-align: center;
     margin-bottom: 1rem;
@@ -711,18 +716,27 @@ table {
     bottom: 1.8%;
 }
 
     bottom: 1.8%;
 }
 
-#statusbar {
-    display: none;
-    position: fixed;
+header {
     left: 0;
     top: 0;
     right: 0;
     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 {
 }
 
 h1, h2, [onclick], label {
@@ -737,13 +751,20 @@ h1, h2, [onclick], label {
     cursor: pointer;
 }
 
     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;
     }
 @media print {
 
     @page {
         size: 3.5in 7in;
         margin: 0.5em;
     }
-    .no-print {
+    header, .no-print {
         display: none !important;
     }
 
         display: none !important;
     }
 
diff --git a/heroik.html b/heroik.html
index 9a78696..64cd2e3 100644 (file)
--- a/heroik.html
+++ b/heroik.html
@@ -28,7 +28,7 @@
     <title>Hero: Immortal King</title>
   </head>
   <body>
     <title>Hero: Immortal King</title>
   </head>
   <body>
-    <div id=statusbar></div>
+    <header></header>
     <main>
     <h1>Find a Dungeon</h1>
     <h2>Difficulty</h2>
     <main>
     <h1>Find a Dungeon</h1>
     <h2>Difficulty</h2>
diff --git a/scenario.html b/scenario.html
index 73cd6f9..5959411 100644 (file)
--- a/scenario.html
+++ b/scenario.html
@@ -30,18 +30,14 @@
     <title>Scenario - Hero: Immortal King</title>
   </head>
   <body onload="generateScenario()">
     <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>
       <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>
     <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 a6baea7..9eb90ea 100644 (file)
--- a/variants.html
+++ b/variants.html
@@ -29,11 +29,10 @@
     <title>Variants - Hero: Immortal King</title>
   </head>
   <body>
     <title>Variants - Hero: Immortal King</title>
   </head>
   <body>
-    <div id=statusbar></div>
+    <header>
+      <a class=button href="heroik.html">◀ Return</a>
+    </header>
     <main>
     <main>
-    <a class="button no-print" href="heroik.html">
-      ◀ Return
-    </a>
     <h1>Canon Variants</h1>
     <h2>Advanced Solitaire</h2>
     <ul>
     <h1>Canon Variants</h1>
     <h2>Advanced Solitaire</h2>
     <ul>
Scenario Generator & Variant Rules for Hero: Immortal King