From a9993e0a683bc56ef091762e192fdb47676be82b Mon Sep 17 00:00:00 2001 From: Joel Martin Date: Sat, 26 Apr 2014 16:03:03 -0500 Subject: JS web: use/import to Himera style web REPL. --- docs/TODO | 1 - js/web/base.css | 222 +++++++++++++++++++++++ js/web/bg-body.png | Bin 0 -> 315790 bytes js/web/bg-rule.png | Bin 0 -> 958 bytes js/web/console.css | 52 +++--- js/web/fonts/exo-black-webfont.eot | Bin 0 -> 45944 bytes js/web/fonts/exo-black-webfont.svg | 246 +++++++++++++++++++++++++ js/web/fonts/exo-black-webfont.ttf | Bin 0 -> 45784 bytes js/web/fonts/exo-black-webfont.woff | Bin 0 -> 25136 bytes js/web/fonts/exo-bold-webfont.eot | Bin 0 -> 48592 bytes js/web/fonts/exo-bold-webfont.svg | 246 +++++++++++++++++++++++++ js/web/fonts/exo-bold-webfont.ttf | Bin 0 -> 48436 bytes js/web/fonts/exo-bold-webfont.woff | Bin 0 -> 28200 bytes js/web/fonts/exo-regular-webfont.eot | Bin 0 -> 46742 bytes js/web/fonts/exo-regular-webfont.svg | 246 +++++++++++++++++++++++++ js/web/fonts/exo-regular-webfont.ttf | Bin 0 -> 46580 bytes js/web/fonts/exo-regular-webfont.woff | Bin 0 -> 25932 bytes js/web/github-icon.png | Bin 0 -> 1641 bytes js/web/himera.css | 280 ++++++++++++++++++++++++++++ js/web/layout.css | 100 ++++++++++ js/web/skeleton.css | 237 ++++++++++++++++++++++++ mal.html | 331 ++++++++++++++++++++++++++-------- 22 files changed, 1866 insertions(+), 95 deletions(-) create mode 100644 js/web/base.css create mode 100644 js/web/bg-body.png create mode 100644 js/web/bg-rule.png create mode 100644 js/web/fonts/exo-black-webfont.eot create mode 100644 js/web/fonts/exo-black-webfont.svg create mode 100644 js/web/fonts/exo-black-webfont.ttf create mode 100644 js/web/fonts/exo-black-webfont.woff create mode 100644 js/web/fonts/exo-bold-webfont.eot create mode 100644 js/web/fonts/exo-bold-webfont.svg create mode 100644 js/web/fonts/exo-bold-webfont.ttf create mode 100644 js/web/fonts/exo-bold-webfont.woff create mode 100644 js/web/fonts/exo-regular-webfont.eot create mode 100644 js/web/fonts/exo-regular-webfont.svg create mode 100644 js/web/fonts/exo-regular-webfont.ttf create mode 100644 js/web/fonts/exo-regular-webfont.woff create mode 100644 js/web/github-icon.png create mode 100644 js/web/himera.css create mode 100644 js/web/layout.css create mode 100644 js/web/skeleton.css diff --git a/docs/TODO b/docs/TODO index 22321ff..0d5d28b 100644 --- a/docs/TODO +++ b/docs/TODO @@ -32,7 +32,6 @@ Java: - step9_interop Javascript: - - switch to himera page/styling for online console Make: - allow '_' in make variable names diff --git a/js/web/base.css b/js/web/base.css new file mode 100644 index 0000000..9e62c9c --- /dev/null +++ b/js/web/base.css @@ -0,0 +1,222 @@ +/* +* Skeleton V1.0.2 +* Copyright 2011, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 5/20/2011 +*/ + + +/* Table of Content +================================================== + #Reset & Basics + #Basic Styles + #Site Styles + #Typography + #Links + #Lists + #Images + #Buttons + #Tabs + #Forms + #Misc */ + + +/* #Reset & Basics (Inspired by E. Meyers) +================================================== */ + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } + body { + line-height: 1; } + ol, ul { + list-style: none; } + blockquote, q { + quotes: none; } + blockquote:before, blockquote:after, + q:before, q:after { + content: ''; + content: none; } + table { + border-collapse: collapse; + border-spacing: 0; } + + +/* #Basic Styles +================================================== */ + body { + background: #ebe7d7 url(bg-body.png); + font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ + } + + +/* #Typography +================================================== */ + h1, h2, h3, h4, h5, h6 { + font-weight: normal; } + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } + h1 { + font-size: 56px; + line-height: 50px; + font-family: "ExoBlack"; + text-transform: uppercase; + color: #8f4732; + margin-bottom: 10px; + text-shadow: 1px 1px 1px #a9a17c; + } + h2 { + font-size: 18px; + line-height: 40px; + margin-top: -45px; + font-family: "ExoBold"; + color: #327a8e; + float: right; + } + h3 { + font-size: 24px; + line-height: 34px; + margin-top: 20px; + margin-left: 10px; + font-family: "ExoBold"; + color: #327a8e; + } + h4 { + font-size: 18px; + line-height: 30px; + margin-bottom: 4px; + font-family: "ExoBold"; + color: #444; + } + h5 { font-size: 17px; line-height: 24px; } + h6 { font-size: 14px; line-height: 21px; } + .subheader { color: #777; } + + p { margin: 0 0 20px 0; } + p img { margin: 0; } + p.lead { font-size: 21px; line-height: 27px; color: #777; } + + em { font-style: italic; } + strong { font-weight: bold; color: #333; } + small { font-size: 80%; } + +/* Blockquotes */ + blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; } + blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } + blockquote cite { display: block; font-size: 12px; color: #555; } + blockquote cite:before { content: "\2014 \0020"; } + blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } + + hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; } + + +/* #Links +================================================== */ + a, a:visited { color: #333; text-decoration: underline; outline: 0; } + a:hover, a:focus { color: #000; } + p a, p a:visited { line-height: inherit; } + + +/* #Lists +================================================== */ + ul, ol { margin-bottom: 20px; } + ul { list-style: none outside; } + ol { list-style: decimal; } + ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } + ul.square { list-style: square outside; } + ul.circle { list-style: circle outside; } + ul.disc { list-style: disc outside; } + ul ul, ul ol, + ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; } + ul ul li, ul ol li, + ol ol li, ol ul li { margin-bottom: 6px; } + li { line-height: 18px; margin-bottom: 12px; } + ul.large li { line-height: 21px; } + li p { line-height: 21px; } + +/* #Images +================================================== */ +/* + The purpose of the below declaration is to make sure images don't + exceed the width of columns they are put into when resizing window. + Unfortunately, this declaration breaks certain lightbox, slider or other plugins, + so the best solution is to individually call these properties on images that + are children of the grid that you want to resize with grid. + + img { + max-width: 100%; + height: auto; } + +*/ + + +/* #Forms +================================================== */ + + form { + margin-bottom: 20px; } + fieldset { + margin-bottom: 20px; } + input[type="text"], + input[type="password"], + input[type="email"], + textarea, + select { + border: 1px solid #ccc; + padding: 6px 4px; + outline: none; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #777; + margin: 0; + width: 210px; + max-width: 100%; + display: block; + margin-bottom: 20px; + background: #fff; } + select { + padding: 0; } + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus, + textarea:focus { + border: 1px solid #aaa; + color: #444; + -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); + -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); + box-shadow: 0 0 3px rgba(0,0,0,.2); } + textarea { + min-height: 60px; } + label, + legend { + display: block; + font-weight: bold; + font-size: 13px; } + select { + width: 220px; } + input[type="checkbox"] { + display: inline; } + label span, + legend span { + font-weight: normal; + font-size: 13px; + color: #444; } + +/* #Misc +================================================== */ + .remove-bottom { margin-bottom: 0 !important; } + .half-bottom { margin-bottom: 10px !important; } + .add-bottom { margin-bottom: 20px !important; } + + + diff --git a/js/web/bg-body.png b/js/web/bg-body.png new file mode 100644 index 0000000..e9a3101 Binary files /dev/null and b/js/web/bg-body.png differ diff --git a/js/web/bg-rule.png b/js/web/bg-rule.png new file mode 100644 index 0000000..64daa47 Binary files /dev/null and b/js/web/bg-rule.png differ diff --git a/js/web/console.css b/js/web/console.css index 454fbcb..5454fd1 100644 --- a/js/web/console.css +++ b/js/web/console.css @@ -1,28 +1,9 @@ -html, body { - background-color: #333; - color: white; - font-family: monospace; - margin: 0; - padding: 0; -} +/* Outer console element */ #console { - height: 400px; - width: 750px; - position:relative; - background-color: black; - border: 2px solid #CCC; - margin: 0 auto; - margin-top: 50px; } +/* The inner console element. */ .jqconsole { - padding: 10px; - padding-bottom: 10px; -} -.jqconsole-cursor { - background-color: #999; -} -.jqconsole-blurred .jqconsole-cursor { - background-color: #666; + background-color: black;; } .jqconsole-prompt { color: #0d0; @@ -38,6 +19,33 @@ html, body { color: #bb0; font-weight: normal; } +.jqconsole-output { + font-weight: lighter; + font-family:monospace; + color: grey; +} +.jqconsole-return { + font-weight: normal; + font-family:monospace; + color: white; +} +.jqconsole-error { + font-weight: normal; + font-family:monospace; + color: red; +} +/* The cursor. */ +.jqconsole-cursor { + font-weight: normal; + font-family:monospace; + background-color: #BDB; +} +/* The cursor color when the console looses focus. */ +.jqconsole-blurred .jqconsole-cursor { + font-weight: normal; + font-family:monospace; + background-color: #444; +} .brace { color: #00FFFF; } diff --git a/js/web/fonts/exo-black-webfont.eot b/js/web/fonts/exo-black-webfont.eot new file mode 100644 index 0000000..15874cb Binary files /dev/null and b/js/web/fonts/exo-black-webfont.eot differ diff --git a/js/web/fonts/exo-black-webfont.svg b/js/web/fonts/exo-black-webfont.svg new file mode 100644 index 0000000..3509980 --- /dev/null +++ b/js/web/fonts/exo-black-webfont.svg @@ -0,0 +1,246 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c 2011 Natanael Gama exondiscoveredcom with Reserved Font Name Exo +Designer : Natanael Gama + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/js/web/fonts/exo-black-webfont.ttf b/js/web/fonts/exo-black-webfont.ttf new file mode 100644 index 0000000..1d88063 Binary files /dev/null and b/js/web/fonts/exo-black-webfont.ttf differ diff --git a/js/web/fonts/exo-black-webfont.woff b/js/web/fonts/exo-black-webfont.woff new file mode 100644 index 0000000..fe5c0e4 Binary files /dev/null and b/js/web/fonts/exo-black-webfont.woff differ diff --git a/js/web/fonts/exo-bold-webfont.eot b/js/web/fonts/exo-bold-webfont.eot new file mode 100644 index 0000000..14b2913 Binary files /dev/null and b/js/web/fonts/exo-bold-webfont.eot differ diff --git a/js/web/fonts/exo-bold-webfont.svg b/js/web/fonts/exo-bold-webfont.svg new file mode 100644 index 0000000..96c0234 --- /dev/null +++ b/js/web/fonts/exo-bold-webfont.svg @@ -0,0 +1,246 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c 2011 Natanael Gama exondiscoveredcom with Reserved Font Name Exo +Designer : Natanael Gama + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/js/web/fonts/exo-bold-webfont.ttf b/js/web/fonts/exo-bold-webfont.ttf new file mode 100644 index 0000000..96edaf7 Binary files /dev/null and b/js/web/fonts/exo-bold-webfont.ttf differ diff --git a/js/web/fonts/exo-bold-webfont.woff b/js/web/fonts/exo-bold-webfont.woff new file mode 100644 index 0000000..29b5df1 Binary files /dev/null and b/js/web/fonts/exo-bold-webfont.woff differ diff --git a/js/web/fonts/exo-regular-webfont.eot b/js/web/fonts/exo-regular-webfont.eot new file mode 100644 index 0000000..fa9ac6d Binary files /dev/null and b/js/web/fonts/exo-regular-webfont.eot differ diff --git a/js/web/fonts/exo-regular-webfont.svg b/js/web/fonts/exo-regular-webfont.svg new file mode 100644 index 0000000..87f3554 --- /dev/null +++ b/js/web/fonts/exo-regular-webfont.svg @@ -0,0 +1,246 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c 2011 Natanael Gama exondiscoveredcom with Reserved Font Name Exo +Designer : Natanael Gama + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/js/web/fonts/exo-regular-webfont.ttf b/js/web/fonts/exo-regular-webfont.ttf new file mode 100644 index 0000000..1c38cf1 Binary files /dev/null and b/js/web/fonts/exo-regular-webfont.ttf differ diff --git a/js/web/fonts/exo-regular-webfont.woff b/js/web/fonts/exo-regular-webfont.woff new file mode 100644 index 0000000..bc6bf89 Binary files /dev/null and b/js/web/fonts/exo-regular-webfont.woff differ diff --git a/js/web/github-icon.png b/js/web/github-icon.png new file mode 100644 index 0000000..fa68d42 Binary files /dev/null and b/js/web/github-icon.png differ diff --git a/js/web/himera.css b/js/web/himera.css new file mode 100644 index 0000000..139588d --- /dev/null +++ b/js/web/himera.css @@ -0,0 +1,280 @@ +/* Additional Classes --------------------------------------------- */ + +.source { + font-family: "ExoRegular"; + font-size: 18px; + height: 31px; + margin-top: 20px; + text-align: right; +} + +.source img { + margin-left: 5px; + vertical-align: sub; +} + +.source a { + text-decoration: none; +} + +.rule { + background: url(bg-rule.png); + height: 12px; + clear: both; + margin-top: 20px; + margin-bottom: 20px; +} + +.cheat-box-container { + background-color: rgba(213,207,180,0.4); + border-radius: 5px; + -moz-border-radius: 5px; + margin-top: 20px; +} + +.cheat-box { + padding: 20px; +} + +table { + font-family: monospace; + margin-top: 20px; + width: 100%; +} + +td { + padding: 3px; +} + +.row-one { + background-color: #f2efe4; +} + +.row-label { + color: #666; + font-family: "ExoBold"; + text-transform: uppercase; +} + +.footer-logo { + font-size: 18px; + font-family: "ExoBlack"; + text-transform: uppercase; + color: #8f4732; +} + +ul.footer-links { + float: right; +} + +.footer-links li { + font-family: "ExoRegular"; + font-size: 14px; + display: inline; + list-style-type: none; + margin-left: 10px; + text-transform: uppercase; +} + +.footer-links li a { + color: #327a8e; + text-decoration: none; +} + +.footer-links li a:hover { + color: #333; +} + +.tiny-note { + font-size: small; +} + +/* Editor ---------------------------------------------- */ + +.CodeMirror { + position: relative; + height: 320px; + background: #fbfbf8; + border-radius: 5px; + -moz-border-radius: 5px; + border: 1px solid #d5ceb4; +} + +/* Console --------------------------------------------- */ + +#console { + position: relative; + height: 220px; + background: #fbfbf8; + border-radius: 5px; + -moz-border-radius: 5px; + border: 1px solid #d5ceb4; +} + +/* Console --------------------------------------------- */ +/* The console container element */ +#console { + position: relative; + height: 320px; + background-color:#fbfbf8;; +} +/* The inner console element. */ +.jqconsole { + background: #fbfbf8; + border-radius: 5px; + -moz-border-radius: 5px; + border: 1px solid #d5ceb4; + padding: 10px; + + white-space: pre-wrap; + word-wrap: break-word; +} +/* The cursor. */ +.jqconsole-cursor { + font-weight: normal; + font-family:monospace; + background-color: #000; +} +/* The cursor color when the console looses focus. */ +.jqconsole-blurred .jqconsole-cursor { + font-weight: normal; + font-family:monospace; + background-color: #7F7F7F; +} +/* The current prompt text color */ +.jqconsole-prompt { + font-weight: normal; + font-family:monospace; + color: #000; +} +/* The command history */ +.jqconsole-old-prompt { + font-weight: normal; + font-family:monospace; + color: #000; +} +/* The text color when in input mode. */ +.jqconsole-input { + font-weight: normal; + font-family:monospace; + color: #000; +} +/* Previously entered input. */ +.jqconsole-old-input { + color: #000; + font-weight: normal; + font-family:monospace; +} +/* The text color of the output. */ +.jqconsole-output { + font-weight: normal; + font-family:monospace; + color: #000; +} + +.jqconsole-inner { + /*width:580px;*/ + height:200px; + margin: 10px 10px; + overflow:auto; + text-align:left; +} + +.jqconsole-message-value { + color:#333; + font-family:monospace; + padding:0.1em; +} + +.jqconsole-prompt-box { + color:#444; font-family:monospace; +} + +.jqconsole-focus span.jquery-console-cursor { + background:#333; color:#eee; font-weight:bold; +} + +.jqconsole-message-error { + font-family:sans-serif; + font-weight:bold; + padding:0.1em; + color:#ef0505; +} + +.jqconsole-message-success { + color:#187718; font-family:monospace; + padding:0.1em; +} + + +.ebnf { + color:#444; font-family:monospace; + text-transform: uppercase; +} + +.doc-link { + font-size: 0.65em; + text-decoration: none; +} + +/* Synonym Styles */ + +#himera-synonym h1 { + margin-left: 10px; +} + +#himera-synonym h1 div { + font-size: 16px; + color: black; +} + +#himera-synonym h4, +#himera-synonym h5 { + margin-left: 10px; +} + +#himera-synonym .cheat-box-container { + margin-top: 0px; + background-color: rgb(255, 250, 240); + border: 1px solid #ccc; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); + -o-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); + -ms-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); +} + +#himera-synonym pre { + font-size: 13px; + font-family: monospace; +} + +.syn-section { + clear: both; + float: left; + margin-bottom: 20px; +} + +#himera-synonym table { + margin: 0; + padding: 0; +} + +#himera-synonym .container { + margin: 0; + overflow-x: hidden !important; + overflow-y: hidden !important; +} + +h1 a { + text-decoration: none; + color: inherit; +} + +h1 a:visited { + text-decoration: none; + color: inherit; +} diff --git a/js/web/layout.css b/js/web/layout.css new file mode 100644 index 0000000..9c5feab --- /dev/null +++ b/js/web/layout.css @@ -0,0 +1,100 @@ +/* +* Skeleton V1.0.2 +* Copyright 2011, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 5/20/2011 +*/ + +/* Table of Content +================================================== + #Site Styles + #Page Styles + #Media Queries + #Font-Face */ + +/* #Site Styles +================================================== */ + +/* #Page Styles +================================================== */ + +/* #Media Queries +================================================== */ + + /* iPad Portrait/Browser */ + @media only screen and (min-width: 768px) and (max-width: 991px) {} + + /* Mobile/Browser */ + @media only screen and (max-width: 767px) {} + + /* Mobile Landscape/Browser */ + @media only screen and (min-width: 480px) and (max-width: 767px) {} + + /* Anything smaller than standard 960 */ + @media only screen and (max-width: 959px) { + h1 { + font-size: 48px; + } + h2 { + font-size: 16px; + float: none; + line-height: 150%; + margin-top: -10px; + } + h3 { + font-size: 18px; + } + h4 { + font-size: 14px; + } + .source p { + font-size: 16px; + } + } + + /* iPad Portrait Only */ + @media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) {} + + /* Mobile Only */ + @media only screen and (max-width: 767px) and (max-device-width: 1000px) {} + + /* Mobile Landscape Only */ + @media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {} + + +/* Fonts --------------------------------------------- */ + +@font-face { + font-family: 'ExoBold'; + src: url('fonts/exo-bold-webfont.eot'); + src: url('fonts/exo-bold-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/exo-bold-webfont.woff') format('woff'), + url('fonts/exo-bold-webfont.ttf') format('truetype'), + url('fonts/exo-bold-webfont.svg#ExoBold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'ExoBlack'; + src: url('fonts/exo-black-webfont.eot'); + src: url('fonts/exo-black-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/exo-black-webfont.woff') format('woff'), + url('fonts/exo-black-webfont.ttf') format('truetype'), + url('fonts/exo-black-webfont.svg#ExoBlack') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'ExoRegular'; + src: url('fonts/exo-regular-webfont.eot'); + src: url('fonts/exo-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/exo-regular-webfont.woff') format('woff'), + url('fonts/exo-regular-webfont.ttf') format('truetype'), + url('fonts/exo-regular-webfont.svg#ExoRegular') format('svg'); + font-weight: normal; + font-style: normal; +} diff --git a/js/web/skeleton.css b/js/web/skeleton.css new file mode 100644 index 0000000..31e2a61 --- /dev/null +++ b/js/web/skeleton.css @@ -0,0 +1,237 @@ +/* +* Skeleton V1.0.2 +* Copyright 2011, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 5/20/2011 +*/ + + +/* Table of Contents +================================================== + #Base 960 Grid + #Tablet (Portrait) + #Mobile (Portrait) + #Mobile (Landscape) + #Clearing */ + + + +/* #Base 960 Grid +================================================== */ + + .container { position: relative; width: 960px; margin: 30px auto; padding: 0; } + .column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } + .row { margin-bottom: 20px; } + + /* Nested Column Classes */ + .column.alpha, .columns.alpha { margin-left: 0; } + .column.omega, .columns.omega { margin-right: 0; } + + /* Base Grid */ + .container .one.column { width: 40px; } + .container .two.columns { width: 100px; } + .container .three.columns { width: 160px; } + .container .four.columns { width: 220px; } + .container .five.columns { width: 280px; } + .container .six.columns { width: 340px; } + .container .seven.columns { width: 400px; } + .container .eight.columns { width: 460px; } + .container .nine.columns { width: 520px; } + .container .ten.columns { width: 580px; } + .container .eleven.columns { width: 640px; } + .container .twelve.columns { width: 700px; } + .container .thirteen.columns { width: 760px; } + .container .fourteen.columns { width: 820px; } + .container .fifteen.columns { width: 880px; } + .container .sixteen.columns { width: 940px; } + + .container .one-third.column { width: 300px; } + .container .two-thirds.column { width: 620px; } + + /* Offsets */ + .container .offset-by-one { padding-left: 60px; } + .container .offset-by-two { padding-left: 120px; } + .container .offset-by-three { padding-left: 180px; } + .container .offset-by-four { padding-left: 240px; } + .container .offset-by-five { padding-left: 300px; } + .container .offset-by-six { padding-left: 360px; } + .container .offset-by-seven { padding-left: 420px; } + .container .offset-by-eight { padding-left: 480px; } + .container .offset-by-nine { padding-left: 540px; } + .container .offset-by-ten { padding-left: 600px; } + .container .offset-by-eleven { padding-left: 660px; } + .container .offset-by-twelve { padding-left: 720px; } + .container .offset-by-thirteen { padding-left: 780px; } + .container .offset-by-fourteen { padding-left: 840px; } + .container .offset-by-fifteen { padding-left: 900px; } + + + +/* #Tablet (Portrait) +================================================== */ + + /* Note: Design for a width of 768px */ + + @media only screen and (min-width: 768px) and (max-width: 959px) { + .container { width: 768px; } + .container .column, + .container .columns { margin-left: 10px; margin-right: 10px; } + .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } + .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } + + .container .one.column { width: 28px; } + .container .two.columns { width: 76px; } + .container .three.columns { width: 124px; } + .container .four.columns { width: 172px; } + .container .five.columns { width: 220px; } + .container .six.columns { width: 268px; } + .container .seven.columns { width: 316px; } + .container .eight.columns { width: 364px; } + .container .nine.columns { width: 412px; } + .container .ten.columns { width: 460px; } + .container .eleven.columns { width: 508px; } + .container .twelve.columns { width: 556px; } + .container .thirteen.columns { width: 604px; } + .container .fourteen.columns { width: 652px; } + .container .fifteen.columns { width: 700px; } + .container .sixteen.columns { width: 748px; } + + .container .one-third.column { width: 236px; } + .container .two-thirds.column { width: 492px; } + + /* Offsets */ + .container .offset-by-one { padding-left: 48px; } + .container .offset-by-two { padding-left: 96px; } + .container .offset-by-three { padding-left: 144px; } + .container .offset-by-four { padding-left: 192px; } + .container .offset-by-five { padding-left: 288px; } + .container .offset-by-six { padding-left: 336px; } + .container .offset-by-seven { padding-left: 348px; } + .container .offset-by-eight { padding-left: 432px; } + .container .offset-by-nine { padding-left: 480px; } + .container .offset-by-ten { padding-left: 528px; } + .container .offset-by-eleven { padding-left: 576px; } + .container .offset-by-twelve { padding-left: 624px; } + .container .offset-by-thirteen { padding-left: 672px; } + .container .offset-by-fourteen { padding-left: 720px; } + .container .offset-by-fifteen { padding-left: 900px; } + } + + +/* #Mobile (Portrait) +================================================== */ + + /* Note: Design for a width of 320px */ + + @media only screen and (max-width: 767px) { + .container { width: 300px; } + .columns, .column { margin: 0; } + + .container .one.column, + .container .two.columns, + .container .three.columns, + .container .four.columns, + .container .five.columns, + .container .six.columns, + .container .seven.columns, + .container .eight.columns, + .container .nine.columns, + .container .ten.columns, + .container .eleven.columns, + .container .twelve.columns, + .container .thirteen.columns, + .container .fourteen.columns, + .container .fifteen.columns, + .container .sixteen.columns, + .container .one-third.column, + .container .two-thirds.column { width: 300px; } + + /* Offsets */ + .container .offset-by-one, + .container .offset-by-two, + .container .offset-by-three, + .container .offset-by-four, + .container .offset-by-five, + .container .offset-by-six, + .container .offset-by-seven, + .container .offset-by-eight, + .container .offset-by-nine, + .container .offset-by-ten, + .container .offset-by-eleven, + .container .offset-by-twelve, + .container .offset-by-thirteen, + .container .offset-by-fourteen, + .container .offset-by-fifteen { padding-left: 0; } + + } + + +/* #Mobile (Landscape) +================================================== */ + + /* Note: Design for a width of 480px */ + + @media only screen and (min-width: 480px) and (max-width: 767px) { + .container { width: 420px; } + .columns, .column { margin: 0; } + + .container .one.column, + .container .two.columns, + .container .three.columns, + .container .four.columns, + .container .five.columns, + .container .six.columns, + .container .seven.columns, + .container .eight.columns, + .container .nine.columns, + .container .ten.columns, + .container .eleven.columns, + .container .twelve.columns, + .container .thirteen.columns, + .container .fourteen.columns, + .container .fifteen.columns, + .container .sixteen.columns, + .container .one-third.column, + .container .two-thirds.column { width: 420px; } + } + + +/* #Clearing +================================================== */ + + /* Self Clearing Goodness */ + .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } + + /* Use clearfix class on parent to clear nested columns, + or wrap each row of columns in a
*/ + .clearfix:before, + .clearfix:after, + .row:before, + .row:after { + content: '\0020'; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; } + .row:after, + .clearfix:after { + clear: both; } + .row, + .clearfix { + zoom: 1; } + + /* You can also use a
to clear columns */ + .clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; + } + + + \ No newline at end of file diff --git a/mal.html b/mal.html index 45e6dc3..3bc5b21 100644 --- a/mal.html +++ b/mal.html @@ -1,81 +1,268 @@ - + + - - - - - -
- - - - + + + - + // Initiate the first prompt. + handler(); + }); + + + -- cgit v1.2.3