Simplify HTML page layout

1 files changed, 11 insertions, 131 deletions

diff --git a/SunkenMoon.html.coffee b/SunkenMoon.html.coffee
index 12dee74..a719d15 100644
--- a/SunkenMoon.html.coffee
+++ b/SunkenMoon.html.coffee
@@ -4,7 +4,7 @@
 
 # This program is available under the terms of the MIT License
 
-version = "0.1.116"
+version = "0.1.143"
 
 { htmlcup } = require 'htmlcup'
 
@@ -41,137 +41,17 @@ genPage = ->
     @meta charset:"utf-8"
     @link rel:"shortcut icon", href:icon
     @title title
-    @style type: "text/css",
-      """
-      body {
-        /* background:pink; */
-        /* background: #69B2FF; */
-        /* background: #21AFF8; */
-        /* background: #0286E8; */
-        /* background: #1096EE; */
-        background:black;
-        text-align: center;
-        font-size: 22px;
-        font-family: Helvetica;
-        color:white;
-        color:rgba(255,255,255,0.9);
-        margin:0;
-      }
-      .banner {
-        border: 5px solid white;
-        border: 5px solid white rgba(255,255,255,0.9);
-        box-shadow: 0 2px 4px blue;
-        margin: 1em;
-      }
-      footer, p {
-        margin-top:0.418em;
-        margin-bottom:0.418em;
-        margin-left:auto;
-        margin-right:auto;
-        text-shadow: 0 1px 1px blue;
-      }
-      p {
-        width:22em;
-        max-width:100%;
-      }
-      a {
-        /*
-        color:rgb(200,255,255);
-        color:rgba(200,255,255,0.9);
-        */
-        color:white;
-        color:rgba(255,255,255,0.9);
-        text-decoration:none;
-        display: inline-block;
-        border: 1px solid white;
-        padding: 0 0.2em;
-        border-radius: 0.2em;
-        -moz-border-radius: 0.2em;
-        -webkit-border-radius: 0.2em;
-        -ie-border-radius: 0.2em;
-      }
-      a:hover {
-        background-color:rgba(20,70,180,1.0);
-      }
-      .petition {
-        margin:0.418em;
-        padding:0.618em;
-      }
-      .petition a {
-        font-size:127.2%;
-        box-shadow: 0 2px 4px blue;
-        margin:0.3em;
-      }
-      .page {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        border: 0;
-      }
-      .centering {
-        display: table;
-        padding: 0;
-      }
-      .centered {
-        display: table-cell;
-        vertical-align: middle;
-        text-align: center;
-      }
-      .inline-block {
-        display: inline-block;
-      }
-      .dynamic-section {
-        display: inline-block;
-        vertical-align:middle;
-        max-width:100%;
-      }
-      .flip-lr {
-        -moz-transform:     scaleX(-1);
-        -o-transform:       scaleX(-1);
-        -webkit-transform:  scaleX(-1);
-        transform:          scaleX(-1);
-        filter:             FlipH;
-        -ms-filter:         "FlipH";
-      }
-      image, .pixelart {
-        image-rendering:optimizeSpeed;             /* Legal fallback */
-        image-rendering:-moz-crisp-edges;          /* Firefox        */
-        image-rendering:-o-crisp-edges;            /* Opera          */
-        image-rendering:-webkit-optimize-contrast; /* Safari         */
-        image-rendering:optimize-contrast;         /* CSS3 Proposed  */
-        image-rendering:crisp-edges;               /* CSS4 Proposed  */
-        image-rendering:pixelated;                 /* CSS4 Proposed  */
-        -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
-      }
-      /*
-      .pixelart {
-        image-rendering: -moz-crisp-edges; 
-        -ms-interpolation-mode: nearest-neighbor;
-        image-rendering: pixelated;
-        image-rendering: crisp-edges;
-      }
-      */
-      g.flipped {
-        transform:scale(-1,1);
-      }
-      .dim {
-        opacity: 0.2;
-      }
-      .dim:hover {
-        opacity: 1;
-      }
-      """
-  @body ->
-    @div class:"centering page", ->
-     @div class:"centered", ->
-      @div style:"visibility:hidden;position:absolute", ->
+  @body style:"margin:0;border:0;padding:0;height:100%;width:100%;background:black", ->
+    @div style:"visibility:hidden;position:absolute", ->
         @img id:"pixyvaquita", src:pixyvaquita
         @img id:"pixyvaquita_twist_l", src:frames.twist_l
         @img id:"pixyvaquita_twist_r", src:frames.twist_r
         @img id:"happybubble0", src:frames.happybubble0
         @img id:"grumpybubble0", src:frames.grumpybubble0
         @img id:"evilbubble0", src:frames.evilbubble0
-      @div style:"position:relative", ->
+    @div style:"display:table;width:100%;max-width:100%;height:100%;margin:0;border:0;padding:0", ->
+     @div style:"display:table-cell;vertical-align:middle;width:100%;margin:0;border:0;padding:0;text-align:center", ->
+      @div style:"position:relative;display:inline-block",  width:"#{gameAreaSize[0]*2}", height:"#{gameAreaSize[1]*2}", ->
         @svg id:"sea-svgroot", width:"#{gameAreaSize[0]*2}", height:"#{gameAreaSize[1]*2}", style:"position:absolute;opacity:0.9;z-index:-1000", ->
           @defs ->
             @linearGradient id:"grad1", x1:"0%", y1:"0%", x2:"0%", y2:"100%", ->
@@ -182,11 +62,11 @@ genPage = ->
               @stop offset:"100%", style:"stop-color:rgb(0,0,0);stop-opacity:1"
           @rect x:"0", y:"0", width:"#{gameAreaSize[0]*2}", height:"#{gameAreaSize[1]*2}", fill:"url(#grad1)"
         @canvas width:"#{gameAreaSize[0]*2}", height:"#{gameAreaSize[1]*2}",  ->
-      @footer class:"dim", ->
-        @span gameName
-        @span " - "
-        @a target:"_blank", href:"index.html", "Learn about Vaquitas"
-        @span id:"fps"
+        @header style:"position:absolute;top:0;left:0;font-size:10px;width:100%;color:black", ->
+          @span gameName
+          @span " - "
+          @a target:"_blank", href:"index.html", "Learn about Vaquitas"
+          @span id:"fps"
     gameObjects = null
     @script type:"text/javascript", "gameObjects=#{JSON.stringify(gameObjects)};"
     @script type:"text/javascript", "__hasProp = {}.hasOwnProperty; __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };"