From 2d33adc1e37007a68ef11b34b0eaf7e4d9d692ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucio=20Andr=C3=A9s=20Illanes=20Albornoz?= Date: Sun, 25 Nov 2018 13:42:55 +0100 Subject: [PATCH] assets/{css,html}/*, index.html: clean up & correct {CSS,HTML}, pt. XII. assets/text/TODO: updated. --- assets/css/fonts.css | 13 ++ assets/css/help.css | 16 +- assets/css/sally.css | 332 ++++++++++++++++++++++++++---------------- assets/html/help.html | 1 + assets/text/TODO | 15 +- index.html | 10 +- 6 files changed, 238 insertions(+), 149 deletions(-) create mode 100644 assets/css/fonts.css diff --git a/assets/css/fonts.css b/assets/css/fonts.css new file mode 100644 index 0000000..df42e9b --- /dev/null +++ b/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 + */ diff --git a/assets/css/help.css b/assets/css/help.css index 8474fe9..3f44ead 100644 --- a/assets/css/help.css +++ b/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 diff --git a/assets/css/sally.css b/assets/css/sally.css index 5ed3336..3037cf2 100644 --- a/assets/css/sally.css +++ b/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 */ -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 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 */ -.ba.focused { box-shadow: inset 0 0px 2px #000, inset 0 0px 2px #000; border-color: #000; } -.block:nth-child(n+2) { padding-left: 30px; } -.block { padding:4px; } -.bucket #canvas_wrapper { cursor: url(../images/bucket.png) 3 15, auto; } -.close { position: absolute; top: 20px; right: 20px; z-index: 2; padding: 10px; background: black; cursor: pointer; } -.dropper #canvas_wrapper { cursor: url(../images/dropper.gif) 0 15, auto; } -.ed { color: #fff; } -.ed.focused { color: white; text-decoration: underline; } -.faded { color: #404040; } -.focused { box-shadow: inset 0 0px 2px #fff; border-color: #fff; } -.focused { box-shadow: inset 1px 0 2px white, inset -1px 0 2px white, inset 0 1px 2px white, inset 0 -1px 2px white; } -.hidden { visibility: hidden; } -.loading .vertical #ui_wrapper { clear: none } -.locked { border-bottom: 1px solid; color: #bbb; text-decoration: none; } -.selector_el.creating div { display: none; } -.selector_el.dragging { color: #0f0; } -.tool { cursor: pointer; } -.tool.focused { color: white; text-decoration: underline; } -.tool.locked.focused { box-shadow: 0 0; } -.tool.radio { margin: 0 8px 0 0; } -.vertical .wrapper, .vertical .block { float: left; } -.vertical #brush_container { display: inline-block; float: left; } +/* {{{ .selector_el styles */ +.selector_el { + border: 1px dashed white !important; + left: -999px; + margin-top: -1px; + padding-top: 1px; + pointer-events: none; + position: absolute; + top: -999px; +} +.selector_el.creating div { + display: none; } +.selector_el.dragging { + color: #00FF00; +} +/* }}} */ +/* {{{ .tool styles */ +.tool { + cursor: pointer; +} +.tool.focused { + color: white; + 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 #secret_wrapper { margin-right: 10px; } -.vertical #secret_wrapper span { float: left; clear: both; } -.vertical #tools_block { min-width: 100%; } +.vertical #palette_wrapper { + margin-right: 10px; +} +.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 #workspace_wrapper { width: auto; position: relative; float: left; } -.wrapper { cursor: crosshair; } +.vertical #ui_wrapper { + clear: none; + 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, -.panke #doc_el, -.panke #export_button, -.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; +.focused { + box-shadow: inset 1px 0 2px white, inset -1px 0 2px white, inset 0 1px 2px white, inset 0 -1px 2px white; + border-color: white; } -.tool.radio.focused { - background-color: #6D6D6D; - box-shadow: none; - color: #000000; +.locked { + border-bottom: 1px solid; + color: #bbbbbb; + 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 */ -#brush_wrapper, #letters_wrapper { cursor: crosshair; } -#cursor_input { position: fixed; top: 0; right: 0; width:30px; opacity: 0; font-size: 16px; } -#experimental_palette_toggle.focused { box-shadow: none; } -#import_wrapper { display: none; } -#import_textarea { font-size: 9pt; } -#secret_wrapper { float: left; clear: right; } -#secret_wrapper span { float: left; } -#textarea_mode { padding: 4px; } -#tools_block > * { cursor: crosshair; } -#ui_wrapper .block { width: 100px; } -#ui_wrapper { clear:both; float: left; width: 100vw; } -#workspace_wrapper { width: 100%; } - +/* {{{ Element styles */ +a { + display: block; +} +a:link, a:visited { + color: #6B6760; + text-decoration: none; +} +a:hover { + text-decoration: underline; +} +body { + 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; } /* }}} */ diff --git a/assets/html/help.html b/assets/html/help.html index d8dddbd..4e8da98 100644 --- a/assets/html/help.html +++ b/assets/html/help.html @@ -4,6 +4,7 @@ + asciiblaster v1.0.6 documentation diff --git a/assets/text/TODO b/assets/text/TODO index e64d3d8..a6ba9b2 100644 --- a/assets/text/TODO +++ b/assets/text/TODO @@ -1,8 +1,7 @@ -1) bug: fix {move,select}, save box colour(s), UI {margins,padding}, vertical mode -2) feature: {bold,italic,underline} attributes -3) feature: draw w/ keyboard instead of [LR]MB -4) feature: {line,measuring} tool -5) feature: status bar w/ position, etc. -6) feature: zoom {in,out} (esp. on Android) -7) reimplement: ANSI (maybe,) {save,upload} as PNG & gallery, cutoff (print line #(s) affected, tunably,) shaders (maybe) -8) releases: merge w/ MiRCARTools (into asciiblaster,) provide signed release APK +1) feature: {bold,italic,underline} attributes +2) feature: draw w/ keyboard instead of [LR]MB +3) feature: {line,measuring} tool +4) feature: status bar w/ position, etc. +5) 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) releases: merge w/ MiRCARTools (into asciiblaster,) provide signed release APK diff --git a/index.html b/index.html index 84bfbf9..6a63d0f 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + @@ -12,7 +13,7 @@ - +
@@ -32,8 +33,8 @@
-
-
+
+
x fg
x bg
x char
@@ -59,7 +60,7 @@
-
+
new save @@ -71,7 +72,6 @@ _ grid x vertical
-
ascii *mirc