mirrors/roar
1
Fork 0
mirror of https://github.com/lalbornoz/roar.git synced 2024-12-22 20:36:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
assets/text/TODO: updated.
This commit is contained in:
Lucio Andrés Illanes Albornoz 2018-11-25 13:42:55 +01:00
parent b6e0a93029
commit 61c40b59c3
6 changed files with 238 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/css/fonts.css Normal file
View File

@ -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
*/

16
assets/css/help.css
View File

@ -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

332
assets/css/sally.css
View File

@ -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;
}
/* }}} */

1
assets/html/help.html
View File

@ -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>

15
assets/text/TODO
View File

@ -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

10
index.html
View File

@ -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>
<div id="brush_wrapper"></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">