assets/{css,html}/*, index.html: clean up & correct {CSS,HTML}, pt. XII.

assets/text/TODO: updated.

assets/css/fonts.css

@@ -0,0 +1,13 @@
+@font-face {
+  font-family:              'FixedsysExcelsior301Regular';
+  font-style:               normal;
+  src:                      url('../fonts/fsex300-webfont.eot');
+  src:                      url('../fonts/fsex300-webfont.eot?#iefix') format('embedded-opentype'),
+                            url('../fonts/fsex300-webfont.woff') format('woff'),
+                            url('../fonts/fsex300-webfont.ttf') format('truetype'),
+                            url('../fonts/fsex300-webfont.svg#FixedsysExcelsior301Regular') format('svg');
+}
+
+/*
+ * vim:ts=2 sw=2 expandtab fenc=utf-8 foldmethod=marker nowrap tw=0
+ */

assets/css/help.css

@@ -1,13 +1,3 @@
-@font-face {
-  font-family:        'FixedsysExcelsior301Regular';
-  font-style:         normal;
-  src:                url('../fonts/fsex300-webfont.eot');
-  src:                url('../fonts/fsex300-webfont.eot?#iefix') format('embedded-opentype'),
-                      url('../fonts/fsex300-webfont.woff') format('woff'),
-                      url('../fonts/fsex300-webfont.ttf') format('truetype'),
-                      url('../fonts/fsex300-webfont.svg#FixedsysExcelsior301Regular') format('svg');
-}
-
 body {
   background:         #000000;
   background-image:   url('../images/tile.jpg');
@@ -17,6 +7,7 @@ body {
   font-size:          16pt;
 }
 
+/* {{{ DIV id styles */
 div#box {
   background:         rgba(0,0,100,0.5);
   border:             3px solid #0000ff;
@@ -32,7 +23,8 @@ div#box_wrapper {
   margin:             0 auto;
   width:              50%;
 }
-
+/* }}} */
+/* {{{ Element styles */
 h1 {
   color:              #ff00ff!important;
   font-size:          42px;
@@ -43,13 +35,13 @@ h2 {
   margin-bottom:      15px;
   margin-top:         15px;
 }
-
 p {
   color:              white;
 }
 pre {
   color:              white;
 }
+/* }}} */
 
 /*
  * vim:ts=2 sw=2 expandtab fenc=utf-8 foldmethod=marker nowrap tw=0

assets/css/sally.css

@@ -1,54 +1,5 @@
-@font-face {
-  font-family:              'FixedsysExcelsior301Regular';
-  font-style:               normal;
-  src:                      url('../fonts/fsex300-webfont.eot');
-  src:                      url('../fonts/fsex300-webfont.eot?#iefix') format('embedded-opentype'),
-                            url('../fonts/fsex300-webfont.woff') format('woff'),
-                            url('../fonts/fsex300-webfont.ttf') format('truetype'),
-                            url('../fonts/fsex300-webfont.svg#FixedsysExcelsior301Regular') format('svg');
-}
-body {
-	background-color:         #000000 !important;
-  transition:               0.1s linear;
-}
 
-/* {{{ Element styles */
+/* {{{ BODY.grid styles */
-a {
-  display:                  block;
-}
-a:link, a:visited {
-  color:                    #6B6760;
-  text-decoration:          none;
-}
-a:hover {
-  text-decoration:          underline;
-}
-span {
-  display:                  inline-block;
-  line-height:              15px;
-  min-width:                8px;
-}
-textarea {
-  background:               #001100;
-  border:                   1px solid #333333;
-  color:                    #00FF00;
-  font-family:              'FixedsysExcelsior301Regular';
-  font-size:                12pt;
-  height:                   300px;
-  outline:                  0;
-  width:                    37vw;
-}
-textarea, input[type=text], body {
-  color:                    #6D6B6D;
-  font-family:              'FixedsysExcelsior301Regular';
-  line-height:              11pt;
-  font-size:                12pt;
-  font-weight:              100;
-  margin:                   0;
-  -webkit-font-smoothing:   antialiased !important;
-}
-/* }}} */
-/* {{{ BODY class styles */
 body.grid div {
   border-left:              1px solid #444444;
 }
@@ -65,84 +16,156 @@ body.grid #letters_wrapper > div:first-child,
 body.grid #palette_wrapper > div:first-child {
   border-top:               1px solid #444444;
 }
-body.loading {
+/* }}} */
-  opacity:                  0;
+/* {{{ .initial styles */
+.initial #add_custom_el,
+.initial #doc_el,
+.initial #export_button,
+.initial #format_el,
+.initial #grid_el,
+.initial #import_textarea,
+.initial #load_el,
+.initial #save_el,
+.initial #vertical_checkbox {
 }
 /* }}} */
-/* {{{ Class styles */
+/* {{{ .selector_el styles */
-.ba.focused { box-shadow: inset 0 0px 2px #000, inset 0 0px 2px #000; border-color: #000; }
+.selector_el {
-.block:nth-child(n+2) { padding-left: 30px; }
+  border:                   1px dashed white !important;
-.block { padding:4px; }
+  left:                     -999px;
-.bucket #canvas_wrapper { cursor: url(../images/bucket.png) 3 15, auto; }
+  margin-top:               -1px;
-.close { position: absolute; top: 20px; right: 20px; z-index: 2; padding: 10px; background: black; cursor: pointer; }
+  padding-top:              1px;
-.dropper #canvas_wrapper { cursor: url(../images/dropper.gif) 0 15, auto; }
+  pointer-events:           none;
-.ed { color: #fff; }
+  position:                 absolute;
-.ed.focused { color: white; text-decoration: underline; }
+  top:                      -999px;
-.faded { color: #404040; }
+}
-.focused { box-shadow: inset 0 0px 2px #fff; border-color: #fff; }
+.selector_el.creating div {
-.focused { box-shadow: inset 1px 0 2px white, inset -1px 0 2px white, inset 0 1px 2px white, inset 0 -1px 2px white; }
+  display:                  none; }
-.hidden { visibility: hidden; }
+.selector_el.dragging {
-.loading .vertical #ui_wrapper { clear: none }
+  color:                    #00FF00;
-.locked { border-bottom: 1px solid; color: #bbb; text-decoration: none; }
+}
-.selector_el.creating div { display: none; }
+/* }}} */
-.selector_el.dragging { color: #0f0; }
+/* {{{ .tool styles */
-.tool { cursor: pointer; }
+.tool {
-.tool.focused { color: white; text-decoration: underline; }
+  cursor:                   pointer;
-.tool.locked.focused { box-shadow: 0 0; }
+}
-.tool.radio { margin: 0 8px 0 0; }
+.tool.focused {
-.vertical .wrapper, .vertical .block { float: left; }
+  color:                    white;
-.vertical #brush_container { display: inline-block; float: left; }
+  text-decoration:          underline;
+}
+.tool.locked.focused {
+  box-shadow:               0 0;
+}
+.tool.radio {
+  margin:                   0 8px 0 0;
+}
+.tool.radio.focused {
+  background-color:         #6D6D6D;
+  box-shadow:               none;
+  color:                    black;
+}
+/* }}} */
+/* {{{ .vertical styles */
+.vertical .wrapper, .vertical .block {
+  float:                    left;
+}
+.vertical #brush_container {
+  display:                  inline-block;
+  float:                    left;
+}
 .vertical #canvas_wrapper,
 .vertical #canvas_wrapper div,
 .vertical #palette_wrapper,
-.vertical #palette_wrapper { margin-right: 10px; }
+.vertical #palette_wrapper {
-.vertical #secret_wrapper { margin-right: 10px; }
+  margin-right:             10px;
-.vertical #secret_wrapper span { float: left; clear: both; }
+}
-.vertical #tools_block { min-width: 100%; }
+.vertical #secret_wrapper {
+  margin-right:             10px;
+}
+.vertical #secret_wrapper span {
+  clear:                    both;
+  float:                    left;
+}
+.vertical #tools_block {
+  min-width:                100%;
+}
 .vertical #tools_wrapper,
-.vertical #ui_wrapper { width: 320px; float: left; clear: none; }
+.vertical #ui_wrapper {
-.vertical #workspace_wrapper { width: auto; position: relative; float: left; }
+  clear:                    none;
-.wrapper { cursor: crosshair; }
+  float:                    left;
+  width:                    320px;
+}
+.vertical #workspace_wrapper {
+  float:                    left;
+  position:                 relative;
+  width:                    auto;
+}
+/* }}} */
 
+/* {{{ Class & id styles (simple) */
+.bucket #canvas_wrapper { cursor: url(../images/bucket.png) 3 15, auto; }
+.dropper #canvas_wrapper { cursor: url(../images/dropper.gif) 0 15, auto; }
+.faded { color: #404040; }
+.hidden { visibility: hidden; }
+.loading .vertical #ui_wrapper { clear: none }
+#experimental_palette_toggle.focused { box-shadow: none; }
+#import_wrapper { display: none; }
+#tools_block > * { cursor: crosshair; }
+#workspace_wrapper { width: 100%; }
+/* }}} */
+/* {{{ Class styles (complex) */
+.ba.focused {
+  box-shadow:               inset 0 0px 2px #000, inset 0 0px 2px black;
+  border-color:             black;
+}
 .block {
-  background-color:         #000000;
+  background-color:         black;
   float:                    left;
   height:                   auto;
   user-select:              none;
-  width:                    auto;
-  -webkit-user-select:      none;
   -moz-user-select:         none;
+  -webkit-user-select:      none;
+  width:                    auto;
+}
+.block {
+  padding:                  4px;
+}
+.block:nth-child(n+2) {
+  padding-left:             30px;
+}
+.close {
+  background:               black;
+  cursor:                   pointer;
+  padding:                  10px;
+  position:                 absolute;
+  right:                    20px;
+  top:                      20px;
+  z-index:                  2;
 }
 .custom {
   float:                    left;
   margin-bottom:            5px;
   margin-right:             5px;
 }
+.ed {
+  color:                    white;
+}
+.ed.focused {
+  color:                    white;
+  text-decoration:          underline;
+}
 .faba.focused, .fbba.focused, .fcba.focused, .fdba.focused, .feba.focused, .ffba.focused, .fgba.focused, .fhba.focused,
 .fiba.focused, .fjba.focused, .fkba.focused, .flba.focused, .fmba.focused, .fnba.focused, .foba.focused, .fpba.focused {
   box-shadow:               inset 1px 0 2px #888888, inset -1px 0 2px #888888, inset 0 1px 2px #888888, inset 0 -1px 2px #888888;
 }
-.panke #add_custom_el,
+.focused {
-.panke #doc_el,
+  box-shadow:               inset 1px 0 2px white, inset -1px 0 2px white, inset 0 1px 2px white, inset 0 -1px 2px white;
-.panke #export_button,
+  border-color:             white;
-.panke #format_el,
-.panke #grid_el,
-.panke #import_textarea,
-.panke #load_el,
-.panke #save_el,
-.panke #vertical_checkbox { }
-.selector_el {
-  border:                   1px dashed #fff !important;
-  left:                     -999px;
-  margin-top:               -1px;
-  padding-top:              1px;
-  position:                 absolute;
-  top:                      -999px;
 }
-.tool.radio.focused {
+.locked {
-  background-color:         #6D6D6D;
+  border-bottom:            1px solid;
-  box-shadow:               none;
+  color:                    #bbbbbb;
-  color:                    #000000;
+  text-decoration:          none;
 }
 .transparent {
   background-color:         transparent;
@@ -155,48 +178,109 @@ body.loading {
   }
 }
 .wrapper {
-  background-color:         #000000;
+  background-color:         black;
+  cursor:                   crosshair;
   float:                    left;
   height:                   auto;
   user-select:              none;
+  -moz-user-select:         none;
+  -webkit-user-select:      none;
   white-space:              pre-wrap;
   width:                    auto;
   word-wrap:                break-word;
-  -webkit-user-select:      none;
-  -moz-user-select:         none;
 }
 /* }}} */
-/* {{{ Id styles */
+/* {{{ Element styles */
-#brush_wrapper, #letters_wrapper { cursor: crosshair; }
+a {
-#cursor_input { position: fixed; top: 0; right: 0; width:30px; opacity: 0; font-size: 16px; }
+  display:                  block;
-#experimental_palette_toggle.focused { box-shadow: none; }
+}
-#import_wrapper { display: none; }
+a:link, a:visited {
-#import_textarea { font-size: 9pt; }
+  color:                    #6B6760;
-#secret_wrapper { float: left; clear: right; }
+  text-decoration:          none;
-#secret_wrapper span { float: left; }
+}
-#textarea_mode { padding: 4px; }
+a:hover {
-#tools_block > * { cursor: crosshair; }
+  text-decoration:          underline;
-#ui_wrapper .block { width: 100px; }
+}
-#ui_wrapper { clear:both; float: left; width: 100vw; }
+body {
-#workspace_wrapper { width: 100%; }
+	background-color:         black !important;
-
+  transition:               0.1s linear;
+}
+body.loading {
+  opacity:                  0;
+}
+span {
+  display:                  inline-block;
+  line-height:              15px;
+  min-width:                8px;
+}
+textarea, input[type=text], body {
+  color:                    #6D6B6D;
+  font-family:              'FixedsysExcelsior301Regular';
+  -webkit-font-smoothing:   antialiased !important;
+  line-height:              11pt;
+  font-size:                12pt;
+  font-weight:              100;
+  margin:                   0;
+}
+/* }}} */
+/* {{{ Id styles (complex) */
 #brush_wrapper {
   border:                   1px solid;
   display:                  inline-block;
   float:                    left;
   margin-bottom:            13px;
+  padding-right:            10px;
+}
+#brush_wrapper, #letters_wrapper {
+  cursor:                   crosshair;
 }
 #canvas_wrapper {
   box-shadow:               0 0 2px rgba(255,255,255,0.3);
   margin:                   3px;
   white-space:              pre;
 }
-
+#cursor_input {
+  font-size:                16px;
+  opacity:                  0;
+  position:                 fixed;
+  right:                    0;
+  top:                      0;
+  width:                    30px;
+}
+#import_textarea {
+  background:               #001100;
+  border:                   1px solid #333333;
+  color:                    #00FF00;
+  font-family:              'FixedsysExcelsior301Regular';
+  font-size:                12pt;
+  height:                   300px;
+  outline:                  0;
+  width:                    37vw;
+}
 #letters_wrapper {
   display:                  inline-block;
   user-select:              none;
-  -moz-user-select:         none;
   -webkit-user-select:      none;
+  -moz-user-select:         none;
+}
+#secret_wrapper {
+  clear:                    right;
+  float:                    left;
+}
+#secret_wrapper span {
+  float:                    left;
+}
+#textarea_mode {
+  float:                    left;
+  padding:                  4px;
+}
+#ui_wrapper {
+  clear:                    both;
+  float:                    left;
+  width:                    100vw;
+}
+#ui_wrapper .block {
+  width:                    100px;
 }
 /* }}} */
 

assets/html/help.html

@@ -4,6 +4,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <!-- {{{ HEAD -->
   <head>
+    <link charset="utf-8" href="../css/fonts.css" rel="stylesheet" type="text/css" />
     <link charset="utf-8" href="../css/help.css" rel="stylesheet" type="text/css" />
     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
     <title>asciiblaster v1.0.6 documentation</title>

assets/text/TODO

@@ -1,8 +1,7 @@
-1)  bug: fix {move,select}, save box colour(s), UI {margins,padding}, vertical mode
+1)  feature: {bold,italic,underline} attributes
-2)  feature: {bold,italic,underline} attributes
+2)  feature: draw w/ keyboard instead of [LR]MB
-3)  feature: draw w/ keyboard instead of [LR]MB
+3)  feature: {line,measuring} tool
-4)  feature: {line,measuring} tool
+4)  feature: status bar w/ position, etc.
-5)  feature: status bar w/ position, etc.
+5)  feature: zoom {in,out} (esp. on Android)
-6)  feature: zoom {in,out} (esp. on Android)
+6)  reimplement: ANSI (maybe,) {save,upload} as PNG & gallery, cutoff (print line #(s) affected, tunably,) shaders (maybe)
-7)  reimplement: ANSI (maybe,) {save,upload} as PNG & gallery, cutoff (print line #(s) affected, tunably,) shaders (maybe)
+7)  releases: merge w/ MiRCARTools (into asciiblaster,) provide signed release APK
-8)  releases: merge w/ MiRCARTools (into asciiblaster,) provide signed release APK

index.html

@@ -5,6 +5,7 @@
   <!-- {{{ HEAD -->
   <head>
     <link charset="utf-8" href="assets/css/ak.css" rel="stylesheet" type="text/css" />
+    <link charset="utf-8" href="assets/css/fonts.css" rel="stylesheet" type="text/css" />
     <link charset="utf-8" href="assets/css/sally.css" rel="stylesheet" type="text/css" />
     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
     <meta content="width=device-width, maximum-scale=1.0, user-scalable=yes" name="viewport" />
@@ -12,7 +13,7 @@
   </head>
   <!-- }}} -->
   <!-- {{{ BODY -->
-  <body class="loading panke">
+  <body class="loading initial">
     <!-- {{{ DIV: workspace_wrapper -->
     <div id="workspace_wrapper">
       <div id="canvas_wrapper" class="wrapper"></div>
@@ -32,8 +33,8 @@
       <!-- }}} -->
       <!-- {{{ DIV: brush_container -->
       <div id="brush_container" class="block">
-        <div id="brush_wrapper">
+        <div id="brush_wrapper"></div>
-        </div>
+        <br />
         <span id="fg_checkbox" class="tool">x fg</span><br />
         <span id="bg_checkbox" class="tool">x bg</span><br />
         <span id="char_checkbox" class="tool">x char</span><br />
@@ -59,7 +60,7 @@
       </div>
       <!-- }}} -->
       <!-- {{{ DIV: textarea_mode -->
-      <div id="textarea_mode" style="float: left">
+      <div id="textarea_mode">
         <div>
           <span id="clear_el" class="tool">new</span>
           <span id="save_el" class="tool">save</span>
@@ -71,7 +72,6 @@
           <span id="grid_el" class="tool">_ grid</span>
           <span id="vertical_checkbox" class="tool">x vertical</span>
         </div>
-
         <div id="import_wrapper">
           <span id="format_el">ascii *mirc</span>
           <span id="import_buttons">