Skip to content
This repository
Browse code

Restructuring repo

  • Loading branch information...
commit 5447696da4b77fc4e6329c9aa487e9ee26a054bd 1 parent c6452ac
darsain authored
9 .editorconfig
... ... @@ -0,0 +1,9 @@
  1 +# editorconfig.org
  2 +root = true
  3 +
  4 +[*]
  5 +indent_style = tab
  6 +end_of_line = lf
  7 +charset = utf-8
  8 +trim_trailing_whitespace = true
  9 +insert_final_newline = false
51 .jshintrc
... ... @@ -0,0 +1,51 @@
  1 +{
  2 + "predef" : [
  3 + "jQuery"
  4 + ],
  5 +
  6 + "bitwise": false,
  7 + "camelcase": false,
  8 + "curly": true,
  9 + "eqeqeq": true,
  10 + "forin": false,
  11 + "immed": true,
  12 + "latedef": true,
  13 + "newcap": true,
  14 + "noarg": true,
  15 + "noempty": true,
  16 + "nonew": false,
  17 + "plusplus": false,
  18 + "quotmark": false,
  19 + "regexp": false,
  20 + "undef": true,
  21 + "unused": true,
  22 + "strict": true,
  23 + "trailing": true,
  24 +
  25 + "asi": false,
  26 + "boss": false,
  27 + "debug": false,
  28 + "eqnull": true,
  29 + "es5": false,
  30 + "esnext": false,
  31 + "evil": false,
  32 + "expr": false,
  33 + "funcscope": false,
  34 + "globalstrict": false,
  35 + "iterator": false,
  36 + "lastsemic": false,
  37 + "laxbreak": false,
  38 + "laxcomma": true,
  39 + "loopfunc": false,
  40 + "multistr": false,
  41 + "onecase": true,
  42 + "proto": false,
  43 + "regexdash": false,
  44 + "scripturl": false,
  45 + "smarttabs": true,
  46 + "shadow": false,
  47 + "sub": false,
  48 + "supernew": false,
  49 +
  50 + "browser": true
  51 +}
33 CONTRIBUTING.md
Source Rendered
... ... @@ -0,0 +1,33 @@
  1 +## Submitting an issue
  2 +
  3 +When reporting a bug, please describe it thoroughly, with attached code showcasing how are you using the library. The
  4 +best way how to make it easy for developers, and ensure that your issue will be looked at, is to replicate it on
  5 +[jsfiddle](http://jsfiddle.net/) or a similar service.
  6 +
  7 +## Contributions
  8 +
  9 +Contributions are welcome! But please, follow these few simple rules:
  10 +
  11 +**Maintain the coding style** used throughout the project, and defined in the `.editorconfig` file. You can use the
  12 +[Editorconfig](http://editorconfig.org) plugin for your editor of choice:
  13 +
  14 +- [Sublime Text 2](https://github.com/sindresorhus/editorconfig-sublime)
  15 +- [Textmate](https://github.com/Mr0grog/editorconfig-textmate)
  16 +- [Notepad++](https://github.com/editorconfig/editorconfig-notepad-plus-plus)
  17 +- [Emacs](https://github.com/editorconfig/editorconfig-emacs)
  18 +- [Vim](https://github.com/editorconfig/editorconfig-vim)
  19 +- [Visual Studio](https://github.com/editorconfig/editorconfig-visualstudio)
  20 +- [... other editors](http://editorconfig.org/#download)
  21 +
  22 +---
  23 +
  24 +**Code has to pass JSHint** with options defined in the `.jshintrc` file. You can use `grunt jshint` task to lint
  25 +manually, or again, there are amazing plugins for a lot of popular editors consuming this file and linting as you code:
  26 +
  27 +- [Sublim Text 2](https://github.com/SublimeLinter/SublimeLinter)
  28 +- [TextMate](http://rondevera.github.com/jslintmate/), or [alternative](http://fgnass.posterous.com/jslint-in-textmate)
  29 +- [Notepad++](http://sourceforge.net/projects/jslintnpp/)
  30 +- [Emacs](https://github.com/daleharvey/jshint-mode)
  31 +- [Vim](https://github.com/walm/jshint.vim)
  32 +- [Visual Studio](https://github.com/jamietre/SharpLinter), or [alternative](http://jslint4vs2010.codeplex.com/)
  33 +- [... other editors](http://www.jshint.com/platforms/)
115 Gruntfile.js
... ... @@ -0,0 +1,115 @@
  1 +/*jshint node:true */
  2 +module.exports = function(grunt) {
  3 + 'use strict';
  4 +
  5 + // Override environment based line endings enforced by Grunt
  6 + grunt.util.linefeed = '\n';
  7 +
  8 + // Grunt configuration
  9 + grunt.initConfig({
  10 + pkg: grunt.file.readJSON('component.json'),
  11 + meta: {
  12 + banner: '/*!\n' +
  13 + ' * <%= pkg.name %> <%= pkg.version %> - <%= grunt.template.today("dS mmm yyyy") %>\n' +
  14 + ' * <%= pkg.homepage %>\n' +
  15 + ' *\n' +
  16 + ' * Licensed under the <%= pkg.licenses[0].type %> license.\n' +
  17 + ' * <%= pkg.licenses[0].url %>\n' +
  18 + ' */\n',
  19 + bannerLight: '/*! <%= pkg.name %> <%= pkg.version %>' +
  20 + ' - <%= grunt.template.today("dS mmm yyyy") %> | <%= pkg.homepage %> */'
  21 + },
  22 +
  23 + // JSHint the code.
  24 + jshint: {
  25 + options: {
  26 + jshintrc: '.jshintrc'
  27 + },
  28 + all: ['src/*.js']
  29 + },
  30 +
  31 + // Clean folders.
  32 + clean: {
  33 + dist: ['dist/**', '!dist']
  34 + },
  35 +
  36 + // Concatenate files.
  37 + concat: {
  38 + options: {
  39 + banner: '<%= meta.banner %>'
  40 + },
  41 + vanilla: {
  42 + src: 'src/<%= pkg.name %>.js',
  43 + dest: 'dist/<%= pkg.name %>.js'
  44 + },
  45 + jquery: {
  46 + src: ['src/<%= pkg.name %>.js', 'src/jquery.js'],
  47 + dest: 'dist/jquery.<%= pkg.name %>.js'
  48 + }
  49 + },
  50 +
  51 + // Minify with Google Closure Compiler.
  52 + gcc: {
  53 + options: {
  54 + banner: '<%= meta.bannerLight %>'
  55 + },
  56 + vanilla: {
  57 + src: 'src/<%= pkg.name %>.js',
  58 + dest: 'dist/<%= pkg.name %>.min.js'
  59 + },
  60 + jquery: {
  61 + src: ['src/<%= pkg.name %>.js', 'src/jquery.js'],
  62 + dest: 'dist/jquery.<%= pkg.name %>.min.js'
  63 + }
  64 + },
  65 +
  66 + // Compress files.
  67 + compress: {
  68 + options: {
  69 + mode: 'gzip'
  70 + },
  71 + vanilla: {
  72 + src: 'dist/<%= pkg.name %>.min.js',
  73 + dest: 'dist/<%= pkg.name %>.min.js.gz'
  74 + },
  75 + jquery: {
  76 + src: 'dist/<%= pkg.name %>.jquery.min.js',
  77 + dest: 'dist/<%= pkg.name %>.jquery.min.js.gz'
  78 + }
  79 + },
  80 +
  81 + // Bump up fields in JSON files.
  82 + bumpup: ['component.json', '<%= pkg.name %>.jquery.json'],
  83 +
  84 + // Commit changes and tag the latest commit with a version from JSON file.
  85 + tagrelease: ['component.json']
  86 + });
  87 +
  88 + // These plugins provide necessary tasks.
  89 + grunt.loadNpmTasks('grunt-contrib-compress');
  90 + grunt.loadNpmTasks('grunt-contrib-jshint');
  91 + grunt.loadNpmTasks('grunt-contrib-concat');
  92 + grunt.loadNpmTasks('grunt-contrib-clean');
  93 + grunt.loadNpmTasks('grunt-tagrelease');
  94 + grunt.loadNpmTasks('grunt-bumpup');
  95 + grunt.loadNpmTasks('grunt-gcc');
  96 +
  97 + // Build task.
  98 + grunt.registerTask('build', function () {
  99 + grunt.task.run('jshint');
  100 + grunt.task.run('clean');
  101 + grunt.task.run('concat');
  102 + grunt.task.run('gcc');
  103 + });
  104 +
  105 + // Release task.
  106 + grunt.registerTask('release', function (type) {
  107 + type = type ? type : 'patch';
  108 + grunt.task.run('build');
  109 + grunt.task.run('bumpup:' + type);
  110 + grunt.task.run('tagrelease');
  111 + });
  112 +
  113 + // Default task.
  114 + grunt.registerTask('default', ['jshint']);
  115 +};
48 compress.sh
... ... @@ -1,48 +0,0 @@
1   -#/bin/sh
2   -#
3   -# @description : BASH script for minifying javascript files
4   -# @requirements : curl
5   -
6   -# Format for minifying multiple files:
7   -# IN=( file1.js file2.js file3.js )
8   -IN=jquery.motio.js
9   -OUT=jquery.motio.min.js
10   -
11   -# Compiler settings
12   -API_URL=http://closure-compiler.appspot.com/compile
13   -COMPILATION_LEVEL=SIMPLE_OPTIMIZATIONS
14   -
15   -# Check if curl is installed
16   -if [ -z "$(which curl)" ]
17   -then
18   - echo 'Please install curl to proceed.'
19   - exit
20   -fi
21   -
22   -# Itearate through all files
23   -for f in ${IN[@]}
24   -do
25   - if [ -r ${f} ]
26   - then
27   - code="${code} --data-urlencode js_code@${f}"
28   - else
29   - echo "File ${f} does not exist or is not readable. Skipped."
30   - fi
31   -done
32   -
33   -# If there is no code, terminate
34   -if [ -z "${code}" ]
35   -then
36   - echo 'Nothing to compile.'
37   - exit
38   -fi
39   -
40   -# Compile & save new file
41   -`curl \
42   - --url ${API_URL} \
43   - --header 'Content-type: application/x-www-form-urlencoded' \
44   - ${code} \
45   - --data output_format=text \
46   - --data output_info=compiled_code \
47   - --data compilation_level=${COMPILATION_LEVEL} \
48   - --output ${OUT}`
655 css/style.css
... ... @@ -1,655 +0,0 @@
1   -/* =============================================================================
2   - HTML5 display definitions
3   - ========================================================================== */
4   -
5   -article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
6   -audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
7   -audio:not([controls]) { display: none; }
8   -[hidden] { display: none; }
9   -
10   -
11   -/* =============================================================================
12   - Base
13   - ========================================================================== */
14   -
15   -html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
16   -html, button, input, select, textarea { font-family: sans-serif; color: #222; -webkit-tab-size: 4; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; }
17   -body { margin: 0; font-size: 14px; line-height: 1.4; overflow-y: scroll; background: url('../img/texture.png') #404040; text-shadow: 1px 1px 0 rgba(0,0,0,.5); }
18   -
19   -::-moz-selection { background: #333; color: #fff; text-shadow: -1px -1px 0 #000 !important; }
20   -::selection { background: #333; color: #fff; text-shadow: -1px -1px 0 #000 !important; }
21   -
22   -
23   -/* =============================================================================
24   - Links
25   - ========================================================================== */
26   -
27   -a { color: #a6a6a6; text-decoration: none; }
28   -a:hover { color: #fff; }
29   -a:focus { outline: thin dotted; }
30   -a:hover, a:active { outline: 0; }
31   -
32   -
33   -/* =============================================================================
34   - Typography
35   - ========================================================================== */
36   -
37   -abbr[title] { border-bottom: 1px dotted; }
38   -
39   -b, strong { font-weight: bold; }
40   -
41   -blockquote { margin: 1em 40px; }
42   -
43   -dfn { font-style: italic; }
44   -
45   -hr { display: block; height: 1px; border: 0; border-top: 1px solid; border-color: #ccc; border-color: rgba(0,0,0,0.2); background: rgba(255,255,255,0.3); margin: 1em 0; padding: 0; }
46   -
47   -ins { background: #ff9; color: #000; text-decoration: none; }
48   -
49   -mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
50   -
51   -pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
52   -
53   -pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 0.8em; background: #f8f8f8; border: 1px solid #ccc; }
54   -
55   -code { padding: 3px 4px; background-color: #f7f7f9; border: 1px solid #e1e1e8; border-radius: 4px; }
56   -
57   -q { quotes: none; }
58   -q:before, q:after { content: ""; content: none; }
59   -
60   -small { font-size: 85%; opacity: 0.6; }
61   -
62   -sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
63   -sup { top: -0.5em; }
64   -sub { bottom: -0.25em; }
65   -
66   -
67   -/* =============================================================================
68   - Lists
69   - ========================================================================== */
70   -
71   -ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
72   -dd { margin: 0 0 0 40px; }
73   -nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
74   -
75   -
76   -/* =============================================================================
77   - Embedded content
78   - ========================================================================== */
79   -
80   -img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
81   -
82   -svg:not(:root) { overflow: hidden; }
83   -
84   -
85   -/* =============================================================================
86   - Figures
87   - ========================================================================== */
88   -
89   -figure { margin: 0; }
90   -
91   -
92   -/* =============================================================================
93   - Forms
94   - ========================================================================== */
95   -
96   -form { margin: 0; }
97   -fieldset { border: 0; margin: 0; padding: 0; }
98   -
99   -label { cursor: pointer; }
100   -
101   -legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
102   -
103   -button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
104   -
105   -button, input { line-height: normal; }
106   -
107   -button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
108   -
109   -button[disabled], input[disabled] { cursor: default; }
110   -
111   -input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
112   -input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
113   -input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
114   -
115   -button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
116   -
117   -textarea { overflow: auto; vertical-align: top; resize: vertical; }
118   -
119   -input:valid, textarea:valid { }
120   -input:invalid, textarea:invalid { background-color: #f0dddd; }
121   -
122   -
123   -/* =============================================================================
124   - Headlines
125   - ========================================================================== */
126   -
127   -h6 { margin: 0; font-size: 0.85em; text-transform: uppercase; color: #888; }
128   -
129   -
130   -/* =============================================================================
131   - Tables
132   - ========================================================================== */
133   -
134   -table { border-collapse: collapse; border-spacing: 0; }
135   -td { vertical-align: top; }
136   -
137   -
138   -/* =============================================================================
139   - Elements
140   - ========================================================================== */
141   -
142   -/* Message bubbles */
143   -.info-bubble { margin: 1em 0; padding: 1px 1em; color: #3a87ad; background: #d9edf7; border: 1px solid #bce8f1; }
144   -.info-bubble p { margin: 1em 0; }
145   -
146   -/* Buttons */
147   -.btn { display: inline-block; padding: 5px 10px 5px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center; text-decoration: none;
148   - vertical-align: middle; background-color: #f5f5f5; text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.75);
149   - background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
150   - background-image: -ms-linear-gradient(top, #fff, #e6e6e6);
151   - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
152   - background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
153   - background-image: -o-linear-gradient(top, #fff, #e6e6e6);
154   - background-image: linear-gradient(top, #fff, #e6e6e6);
155   - background-repeat: repeat-x;
156   - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#333', GradientType=0);
157   - border: 1px solid;
158   - border-color: #333 #333 #bfbfbf;
159   - border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.3);
160   - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
161   - -webkit-border-radius: 2px;
162   - -moz-border-radius: 2px;
163   - border-radius: 2px;
164   - -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0, 0, 0, 0.15);
165   - -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0, 0, 0, 0.15);
166   - box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0, 0, 0, 0.15);
167   - cursor: pointer;
168   - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
169   - *margin-left: .3em;
170   -}
171   -.btn:hover,
172   -.btn:active,
173   -.btn.active,
174   -.btn.disabled,
175   -.btn[disabled] { background-color: #e6e6e6; }
176   -.btn:active, .btn.active { background-color: #cccccc \9; }
177   -.btn:first-child { *margin-left: 0; }
178   -.btn:hover {
179   - color: #333333;
180   - text-decoration: none;
181   - background-color: #e6e6e6;
182   - background-position: 0 -15px;
183   - -webkit-transition: background-position 0.1s linear;
184   - -moz-transition: background-position 0.1s linear;
185   - -ms-transition: background-position 0.1s linear;
186   - -o-transition: background-position 0.1s linear;
187   - transition: background-position 0.1s linear;
188   -}
189   -.btn:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
190   -.btn.active, .btn:active {
191   - background-image: none;
192   - -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
193   - -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
194   - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
195   - background-color: #e6e6e6;
196   - background-color: #d9d9d9 \9;
197   - outline: 0;
198   -}
199   -.btn.disabled, .btn[disabled] { cursor: default; background-image: none; background-color: #e6e6e6; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none;
200   - -moz-box-shadow: none; box-shadow: none;
201   -}
202   -.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
203   -.btn-large [class^="icon-"] { margin-top: 1px; }
204   -.btn-small { padding: 5px 9px; font-size: 11px; line-height: 16px; }
205   -.btn-small [class^="icon-"] { margin-top: -1px; }
206   -.btn-mini { padding: 2px 6px; font-size: 11px; line-height: 14px; }
207   -
208   -.btn-blue,
209   -.btn-blue:hover,
210   -.btn-orange,
211   -.btn-orange:hover,
212   -.btn-red,
213   -.btn-red:hover,
214   -.btn-green,
215   -.btn-green:hover,
216   -.btn-black,
217   -.btn-black:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); color: #ffffff; }
218   -
219   -.btn-blue,
220   -.btn-orange,
221   -.btn-red,
222   -.btn-green,
223   -.btn-black {
224   - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.3);
225   - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.3);
226   - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.3);
227   -}
228   -.btn-blue.active,
229   -.btn-orange.active,
230   -.btn-red.active,
231   -.btn-green.active { color: rgba(255, 255, 255, 0.75); }
232   -
233   -.btn-blue {
234   - background-color: #006dcc;
235   - background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
236   - background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
237   - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
238   - background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
239   - background-image: -o-linear-gradient(top, #0088cc, #0044cc);
240   - background-image: linear-gradient(top, #0088cc, #0044cc);
241   - background-repeat: repeat-x;
242   - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
243   - border-color: #0044cc #0044cc #002a80;
244   - border-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.5);
245   - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
246   -}
247   -.btn-blue:hover,
248   -.btn-blue:active,
249   -.btn-blue.active,
250   -.btn-blue.disabled,
251   -.btn-blue[disabled] { background-color: #0044cc; }
252   -.btn-blue:active, .btn-blue.active { background-color: #003399 \9; }
253   -
254   -.btn-orange {
255   - background-color: #faa732;
256   - background-image: -moz-linear-gradient(top, #fbb450, #f89406);
257   - background-image: -ms-linear-gradient(top, #fbb450, #f89406);
258   - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
259   - background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
260   - background-image: -o-linear-gradient(top, #fbb450, #f89406);
261   - background-image: linear-gradient(top, #fbb450, #f89406);
262   - background-repeat: repeat-x;
263   - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
264   - border-color: #f89406 #f89406 #ad6704;
265   - border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
266   - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
267   -}
268   -.btn-orange:hover,
269   -.btn-orange:active,
270   -.btn-orange.active,
271   -.btn-orange.disabled,
272   -.btn-orange[disabled] { background-color: #f89406; }
273   -.btn-orange:active, .btn-orange.active { background-color: #c67605 \9; }
274   -
275   -.btn-red {
276   - background-color: #da4f49;
277   - background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
278   - background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
279   - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
280   - background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
281   - background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
282   - background-image: linear-gradient(top, #ee5f5b, #bd362f);
283   - background-repeat: repeat-x;
284   - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
285   - border-color: #bd362f #bd362f #802420;
286   - border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.4);
287   - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
288   -}
289   -.btn-red:hover,
290   -.btn-red:active,
291   -.btn-red.active,
292   -.btn-red.disabled,
293   -.btn-red[disabled] { background-color: #bd362f; }
294   -.btn-red:active, .btn-red.active { background-color: #942a25 \9; }
295   -
296   -.btn-green {
297   - background-color: #5bb75b;
298   - background-image: -moz-linear-gradient(top, #62c462, #51a351);
299   - background-image: -ms-linear-gradient(top, #62c462, #51a351);
300   - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
301   - background-image: -webkit-linear-gradient(top, #62c462, #51a351);
302   - background-image: -o-linear-gradient(top, #62c462, #51a351);
303   - background-image: linear-gradient(top, #62c462, #51a351);
304   - background-repeat: repeat-x;
305   - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
306   - border-color: #51a351 #51a351 #387038;
307   - border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
308   - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
309   -}
310   -.btn-green:hover,
311   -.btn-green:active,
312   -.btn-green.active,
313   -.btn-green.disabled,
314   -.btn-green[disabled] { background-color: #51a351; }
315   -.btn-green:active, .btn-green.active { background-color: #408140 \9; }
316   -
317   -.btn-black {
318   - background-color: #393939;
319   - background-image: -moz-linear-gradient(top, #454545, #262626);
320   - background-image: -ms-linear-gradient(top, #454545, #262626);
321   - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#454545), to(#262626));
322   - background-image: -webkit-linear-gradient(top, #454545, #262626);
323   - background-image: -o-linear-gradient(top, #454545, #262626);
324   - background-image: linear-gradient(top, #454545, #262626);
325   - background-repeat: repeat-x;
326   - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.3);
327   - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.3);
328   - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.3);
329   - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#262626', GradientType=0);
330   - border-color: #222 #222 #000;
331   - border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.7);
332   - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
333   -}
334   -.btn-black:hover,
335   -.btn-black:active,
336   -.btn-black.active,
337   -.btn-black.disabled,
338   -.btn-black[disabled] { background-color: #222; }
339   -.btn-black:active, .btn-black.active { background-color: #0c0c0c \9; }
340   -
341   -button.btn, input[type="submit"].btn { *padding-top: 2px; *padding-bottom: 2px; }
342   -button.btn::-moz-focus-inner, input[type="submit"].btn::-moz-focus-inner { padding: 0; border: 0; }
343   -button.btn.large, input[type="submit"].btn.large { *padding-top: 7px; *padding-bottom: 7px; }
344   -button.btn.small, input[type="submit"].btn.small { *padding-top: 3px; *padding-bottom: 3px; }
345   -
346   -.btn-group { position: relative; *zoom: 1; *margin-left: .3em; }
347   -.btn-group:before, .btn-group:after { display: table; content: ""; }
348   -.btn-group:after { clear: both; }
349   -.btn-group:first-child { *margin-left: 0; }
350   -.btn-group + .btn-group { margin-left: 5px; }
351   -.btn-toolbar { }
352   -.btn-toolbar .btn-group { display: inline-block; *display: inline; *zoom: 1; }
353   -.btn-group .btn { position: relative; float: left; margin-left: -1px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
354   -.btn-group .btn:first-child {
355   - margin-left: 0;
356   - -webkit-border-top-left-radius: 2px;
357   - -moz-border-radius-topleft: 2px;
358   - border-top-left-radius: 2px;
359   - -webkit-border-bottom-left-radius: 2px;
360   - -moz-border-radius-bottomleft: 2px;
361   - border-bottom-left-radius: 2px;
362   -}
363   -.btn-group .btn:last-child, .btn-group .dropdown-toggle {
364   - -webkit-border-top-right-radius: 2px;
365   - -moz-border-radius-topright: 2px;
366   - border-top-right-radius: 2px;
367   - -webkit-border-bottom-right-radius: 2px;
368   - -moz-border-radius-bottomright: 2px;
369   - border-bottom-right-radius: 2px;
370   -}
371   -.btn-group .btn.large:first-child {
372   - margin-left: 0;
373   - -webkit-border-top-left-radius: 2px;
374   - -moz-border-radius-topleft: 2px;
375   - border-top-left-radius: 2px;
376   - -webkit-border-bottom-left-radius: 2px;
377   - -moz-border-radius-bottomleft: 2px;
378   - border-bottom-left-radius: 2px;
379   -}
380   -.btn-group .btn.large:last-child, .btn-group .large.dropdown-toggle {
381   - -webkit-border-top-right-radius: 2px;
382   - -moz-border-radius-topright: 2px;
383   - border-top-right-radius: 2px;
384   - -webkit-border-bottom-right-radius: 2px;
385   - -moz-border-radius-bottomright: 2px;
386   - border-bottom-right-radius: 2px;
387   -}
388   -
389   -/* Labels */
390   -.label { padding: 2px 4px 2px; font-size: 12px; color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.50); background-color: #666;
391   - -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border-bottom: 1px solid #333;
392   -}
393   -.label-important { background-color: #b94a48; }
394   -.label-warning { background-color: #f89406; }
395   -.label-success { background-color: #468847; }
396   -.label-info { background-color: #3a87ad; }
397   -
398   -/* Progress */
399   -.progress {
400   - overflow: hidden;
401   - height: 18px;
402   - background-color: #f7f7f7;
403   - background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
404   - background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
405   - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
406   - background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
407   - background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
408   - background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
409   - background-repeat: repeat-x;
410   - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
411   - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
412   - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
413   - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
414   - -webkit-border-radius: 4px;
415   - -moz-border-radius: 4px;
416   - border-radius: 4px;
417   -}
418   -.progress .bar {
419   - width: 0%;
420   - height: 18px;
421   - float: left;
422   - color: #ffffff;
423   - font-size: 12px;
424   - text-align: center;
425   - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
426   - background-color: #5eb95e;
427   - background-image: -moz-linear-gradient(top, #62c462, #57a957);
428   - background-image: -ms-linear-gradient(top, #62c462, #57a957);
429   - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
430   - background-image: -webkit-linear-gradient(top, #62c462, #57a957);
431   - background-image: -o-linear-gradient(top, #62c462, #57a957);
432   - background-image: linear-gradient(top, #62c462, #57a957);
433   - background-repeat: repeat-x;
434   - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
435   - -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
436   - -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
437   - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
438   - -webkit-box-sizing: border-box;
439   - -moz-box-sizing: border-box;
440   - box-sizing: border-box;
441   - -webkit-transition: width 0.3s ease;
442   - -moz-transition: width 0.3s ease;
443   - -ms-transition: width 0.3s ease;
444   - -o-transition: width 0.3s ease;
445   - transition: width 0.3s ease;
446   -}
447   -
448   -
449   -/* ==========================================================================
450   - Example page boilerplate styles
451   - ========================================================================== */
452   -
453   -body { border: 2px solid #555; border-color: rgba(255,255,255,.1); border-left: 0; border-right: 0; margin: 5px 0; outline: 5px solid #222; }
454   -
455   -.container { width: 940px; margin: 0 auto; }
456   -
457   -/* Header */
458   -#header { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.5); }
459   -#header .container { position: relative; height: 190px; }
460   -#header h1 { margin: 0; padding: 40px 0 0 0; font-family: Exo, sans-serif; text-shadow: 2px 2px 0 rgba(0,0,0,.5); }
461   -#header p { margin: 0; color: #999; font-style: italic; }
462   -
463   -#header .download { position: absolute; top: 20px; right: 160px; width: 210px; height: 75px; background: url('../img/download.png') no-repeat right 0; }
464   -#header .download h4 { margin: 9px 28px 0 0; font: bold 16px/1 Exo, sans-serif; text-align: right; color: #bbb; }
465   -#header .download a { position: absolute; bottom: 0; height: 100%; text-align: center; }
466   -#header .download a.left { left: 0; width: 110px; }
467   -#header .download a.right { right: 0; width: 100px; }
468   -#header .download a span { display: block; margin-top: 39px; height: 32px; line-height: 32px; }
469   -#header .download a.left span { border-right: 1px solid #333; }
470   -#header .download a.right span { border-left: 1px solid #555; }
471   -#header .download:hover { background-position: right -75px; }
472   -#header .download:hover h4 { color: #fff; }
473   -#header .download:hover a.right span { border-color: #888; }
474   -#header .download a:hover span { background: #5a5a5a; background: rgba(255,255,255,.1); }
475   -
476   -#header a.repo { position: absolute; top: -3px; right: 0; width: 120px; height: 130px; background: url('../img/repo.png') no-repeat center top; }
477   -
478   -/* Navigation */
479   -#nav { position: absolute; bottom: -3px; margin: 0; padding: 0; list-style: none; }
480   -#nav li { display: block; float: left; width: 200px; margin-right: 1px; text-align: center; font-weight: bold; }
481   -#nav li a { display: block; padding: 15px 0; text-transform: uppercase; border-radius: 0; text-decoration: none; color: #ccc;
482   - background: #4a4a4a; background: rgba(255,255,255,.04); -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
483   -}
484   -#nav li a:hover { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.5); background: #4a4a4a; background: rgba(255,255,255,.1); }
485   -#nav li a.active { color: #424242; text-shadow: none; background: #f5f5f5;
486   - background: -moz-linear-gradient(top, #ffffff 32%, #f5f5f5 100%); /* FF3.6+ */
487   - background: -webkit-gradient(linear, left top, left bottom, color-stop(32%,#ffffff), color-stop(100%,#f5f5f5)); /* Chrome,Safari4+ */
488   - background: -webkit-linear-gradient(top, #ffffff 32%,#f5f5f5 100%); /* Chrome10+,Safari5.1+ */
489   - background: -o-linear-gradient(top, #ffffff 32%,#f5f5f5 100%); /* Opera 11.10+ */
490   - background: -ms-linear-gradient(top, #ffffff 32%,#f5f5f5 100%); /* IE10+ */
491   - background: linear-gradient(top, #ffffff 32%,#f5f5f5 100%); /* W3C */
492   - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
493   - box-shadow: 0 -3px 0 rgba(0,0,0,.5);
494   -}
495   -
496   -/* Content */
497   -#content { background: #f5f5f5; padding: 10px; text-shadow: 1px 1px 0 rgba(255,255,255,.1); background-clip: padding-box;
498   - border-top: 3px solid; border-bottom: 3px solid; border-color: rgba(0,0,0,.5);
499   -}
500   -#content a { color: #0088cc; }
501   -#content a:hover { color: #005580; }
502   -
503   -/* Footer */
504   -#footer { font-size: 0.85em; padding: 2.5em 0; color: #fff; text-transform: uppercase; }
505   -#footer p { margin: 3px 0; }
506   -
507   -
508   -/* ==========================================================================
509   - Page styles
510   - ========================================================================== */
511   -
512   -/* motio examples */
513   -.motiowrap { position: relative; margin: 20px 0; padding: 10px; border-radius: 3px;
514   - background: #fff; border: 1px solid #ddd; border-bottom-color: #ccc;
515   -}
516   -.motiowrap .motio { position: relative; float: right; }
517   -.motiowrap pre { margin-top: 0; width: 450px; background: rgba(255,255,255,.3); border: 0; border-left: 3px solid #eee; text-shadow: 1px 1px 0 rgba(255,255,255,.5); }
518   -
519   -#pan { height: 170px; background: url('../img/clouds.jpg') 0 0; -webkit-translate: transformZ(0); }
520   -#pan pre { float: right; margin: 0; width: 200px; border-color: rgba(255,255,255,.5); }
521   -#fire { width: 192px; height: 192px; background: url('../img/fire2.jpg') 0 0; }
522   -#fire2 { width: 120px; height: 120px; margin: 10px; background: url('../img/fire.jpg') 0 0; }
523   -#walk { width: 50px; height: 110px; margin: 20px; background: url('../img/sailormars_walk.png') 0 0; }
524   -#kick { width: 120px; height: 150px; background: url('../img/sailormars.gif') 0 -600px; }
525   -
526   -.optionblock { display: inline-block; margin: 15px 5px 0 0; position: relative; height: 28px; padding: 0 30px 0 10px;
527   - text-shadow: 1px 1px 0 rgba(255,255,255,.5); vertical-align: middle;
528   - background: #f8f8f8; background: rgba(240, 240, 240, 0.5); border-radius: 3px;
529   - -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .2);
530   - -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .2);
531   - -ms-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .2);
532   - -o-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .2);
533   - box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .2);
534   -}
535   -.optionblock > * { display: block; float: left; height: 28px; line-height: 28px; }
536   -.optionblock .divider { width: 1px; height: 100%; margin: 0 8px; background: #222; background: rgba(0,0,0,.1); background-clip: padding-box;
537   - border-right: 1px solid #fff; border-color: rgba(255,255,255,.6);
538   -}
539   -.optionblock .slider { width: 150px; margin-top: 2px; }
540   -.optionblock .range { position: absolute; right: 0; top: 0; padding: 0; width: 40px; text-align: center; background: transparent; border: 0; }
541   -.optionblock,
542   -.optionblock .range { color: #444; color: rgba(0,0,0,.5); }
543   -
544   -#pan,
545   -#game { border: 0;
546   - -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
547   - -moz-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
548   - -ms-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
549   - -o-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
550   - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
551   -}
552   -
553   -/* Minigame styles */
554   -#minigame { margin: 10px 0; }
555   -#minigame .keys { line-height: 25px; height: 25px; color: #666; }
556   -#minigame .key { display: inline-block; height: 25px; padding: 0 10px; font-weight: bold; font-family: Consolas, monospace; text-shadow: 1px 1px 0 white;
557   - background: #f8f8f8; border-radius: 3px; border: 1px solid;
558   - border-color: #ccc; border-color: rgba(0,0,0,.1); border-bottom-color: rgba(0,0,0,.2);
559   -}
560   -
561   -#game { position: relative; clear: both; margin: 10px 0; width: 100%; height: 240px; background: url('../img/minigame_bg.png') no-repeat center 0; }
562   -#game div { position: absolute; }
563   -
564   -#game .char { width: 120px; height: 150px; left: 410px; bottom: 0; }
565   -#game .char div { width: 100%; height: 100%; background: url('../img/sailormars.gif') no-repeat left top; }
566   -#game .char .stand { background-position: 0 0; }
567   -#game .char .stand_left { background-position: 0 -150px; }
568   -#game .char .run { background-position: 0 -300px; }
569   -#game .char .run_left { background-position: 0 -450px; }
570   -#game .char .jump { background-position: 0 -600px; }
571   -#game .char .jump_left { background-position: 0 -750px; }
572   -#game .char .kick { background-position: 0 -900px; }
573   -#game .char .kick_left { background-position: 0 -1050px; }
574   -
575   -#game .overlay { width: 100%; height: 100%; left: 0; top: 0; bottom: 0; right: 0; z-index: 2;
576   - background: url('../img/minigame_bg.png') no-repeat center -240px;
577   -}
578   -
579   -
580   -/* ==========================================================================
581   - Non-semantic helper classes
582   - ========================================================================== */
583   -
584   -/* For image replacement */
585   -.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
586   -.ir br { display: none; }
587   -
588   -/* Floats */
589   -.fleft { float: left; }
590   -.fright { float: right; }
591   -
592   -/* Hide from both screenreaders and browsers: h5bp.com/u */
593   -.hidden { display: none !important; visibility: hidden; }
594   -
595   -/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
596   -.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
597   -
598   -/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
599   -.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
600   -
601   -/* Hide visually and from screenreaders, but maintain layout */
602   -.invisible { visibility: hidden; }
603   -
604   -/* Contain floats: h5bp.com/q */
605   -.clearfix:before, .clearfix:after { content: ""; display: table; }
606   -.clearfix:after { clear: both; }
607   -.clearfix { *zoom: 1; }
608   -
609   -/* PrettyPrint styles */
610   -.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}
611   -.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}
612   -.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}
613   -ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
614   -
615   -/* Range input */
616   -.slider {
617   - display: inline-block;
618   - position: relative;
619   - height: 25px;
620   - cursor: pointer;
621   -}
622   -.progress {
623   - background: #f5f5f5;
624   - background: rgba(255, 255, 255, 0.4);
625   - border-top: 1px solid #aaa;
626   - border-bottom: 1px solid #fff;
627   - border-top-color: rgba(0,0,0,.15);
628   - border-bottom-color: rgba(255,255,255,.6);
629   - height: 2px;
630   - margin-top: 11px;
631   - border-radius: 2px;
632   -}
633   -.handle {
634   - display: block;
635   - position: absolute;
636   - top: 7px;
637   - width: 10px;
638   - height: 10px;
639   - border-radius: 50%;
640   -
641   - background: #f2f2f2; /* Old browsers */
642   - background: -moz-linear-gradient(top, #f2f2f2 0%, #d8d8d8 100%); /* FF3.6+ */
643   - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#d8d8d8)); /* Chrome,Safari4+ */
644   - background: -webkit-linear-gradient(top, #f2f2f2 0%,#d8d8d8 100%); /* Chrome10+,Safari5.1+ */
645   - background: -o-linear-gradient(top, #f2f2f2 0%,#d8d8d8 100%); /* Opera 11.10+ */
646   - background: -ms-linear-gradient(top, #f2f2f2 0%,#d8d8d8 100%); /* IE10+ */
647   - background: linear-gradient(top, #f2f2f2 0%,#d8d8d8 100%); /* W3C */
648   - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#d8d8d8',GradientType=0 ); /* IE6-9 */
649   -
650   - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.3);
651   - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.3);
652   - -ms-box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.3);
653   - -o-box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.3);
654   - box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.3);
655   -}
BIN  img/clouds.jpg
BIN  img/download.png
BIN  img/fire.jpg
BIN  img/fire2.jpg
BIN  img/minigame_bg.png
BIN  img/repo.png
BIN  img/sailormars.gif
BIN  img/sailormars_walk.png
BIN  img/texture.png
471 index.html
... ... @@ -1,471 +0,0 @@
1   -<!doctype html>
2   -<html lang="en">
3   -<head>
4   - <meta charset="utf-8">
5   - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6   - <title>Motio - jQuery plugin</title>
7   - <meta name="description" content="Simple sprite based animations with jQuery.">
8   - <meta name="viewport" content="width=device-width">
9   - <link href='http://fonts.googleapis.com/css?family=Exo:700' rel='stylesheet' type='text/css'>
10   - <link rel="stylesheet" href="css/style.css">
11   -</head>
12   -<body id="top">
13   -
14   - <div id="header">
15   - <div class="container">
16   -
17   - <h1>Motio</h1>
18   - <p>jQuery plugin for simple but powerful sprite based animations and panning</p>
19   -
20   - <div class="download">
21   - <h4>Download latest</h4>
22   - <a href="//github.com/Darsain/motio/raw/master/jquery.motio.js" class="left"><span>Development</span></a>
23   - <a href="//github.com/Darsain/motio/raw/master/jquery.motio.min.js" class="right"><span>Production</span></a>
24   - </div>
25   -
26   - <a href="//github.com/Darsain/motio" class="repo ir">Repository &amp; Documentation on Github</a>
27   -
28   - <ul id="nav" class="clearfix">
29   - <li><a href="#examples">Examples</a></li>
30   - <li><a href="#minigame">Minigame</a></li>
31   - </ul>
32   -
33   - </div>
34   - </div>
35   -
36   - <div id="content">
37   - <div id="sections" class="container">
38   -
39   - <div id="examples" class="clearfix">
40   -
41   - <div id="pan" class="motiowrap motio clearfix" data-motio='{ "speed": -50, "bgSize": 1024, "paused": 1 }'>
42   -
43   -<pre class="prettyprint lang-js">
44   -$('#pan').motio({
45   - speed: -50,
46   - bgSize: 1024,
47   - paused: 1
48   -});
49   -</pre>
50   -
51   -
52   - <button class="btn" data-action="play">Play</button>
53   - <button class="btn" data-action="pause">Pause</button>
54   - <button class="btn" data-action="toggle">Toggle</button>
55   -
56   - <br>
57   -
58   - <div class="optionblock">
59   - <span>Speed</span> <span class="divider"></span>
60   - <input type="text" name="speed" min="-100" max="100" step="1" value="-50" class="range">
61   - <span class="divider"></span>
62   - </div>
63   - <br>
64   - <div class="optionblock">
65   - <span>FPS</span> <span class="divider"></span>
66   - <input type="text" name="fps" min="1" max="60" step="1" value="15" class="range">
67   - <span class="divider"></span>
68   - </div>
69   -
70   - </div>
71   -
72   - <div class="motiowrap clearfix">
73   -
74   - <div id="walk" class="motio" data-motio='{ "frames": 12, "fps": 10, "paused": 1 }'></div>
75   -
76   -<pre class="prettyprint lang-js">
77   -$('#walk').motio({ frames: 10, fps: 10, paused: 1 });
78   -</pre>
79   -
80   - <div class="nav">
81   - <button class="btn" data-action="play">Play</button>
82   - <button class="btn" data-action="pause">Pause</button>
83   - <button class="btn" data-action="toggle">Toggle</button>
84   - </div>
85   -
86   - <div class="optionblock">
87   - <span>FPS</span> <span class="divider"></span>
88   - <input type="text" name="fps" min="1" max="60" step="1" value="10" class="range">
89   - <span class="divider"></span>
90   - </div>
91   - </div>
92   -
93   - <div class="motiowrap clearfix">
94   -
95   - <div id="kick" class="motio" data-motio='{ "frames": 10, "fps": 10, "paused": 1 }'></div>
96   -
97   -<pre class="prettyprint lang-js">
98   -$('#kick').motio({ frames: 10, fps: 10, paused: 1 });
99   -</pre>
100   -
101   - <div class="nav">
102   - <button class="btn" data-action="play">Play</button>
103   - <button class="btn" data-action="pause">Pause</button>
104   - <button class="btn" data-action="toggle">Toggle</button>
105   - <button class="btn" data-action="toStart">ToStart</button>
106   - <button class="btn" data-action="toEnd">ToEnd</button>
107   - </div>
108   -
109   - <div class="optionblock">
110   - <span>FPS</span> <span class="divider"></span>
111   - <input type="text" name="fps" min="1" max="60" step="1" value="10" class="range">
112   - <span class="divider"></span>
113   - </div>
114   -
115   - </div>
116   -
117   - <div class="motiowrap clearfix">
118   -
119   - <div id="fire" class="motio" data-motio='{ "frames": 25, "fps": 15, "paused": 1 }'></div>
120   -
121   -<pre class="prettyprint lang-js">
122   -$('#fire').motio({ frames: 25, fps: 15, paused: 1 });
123   -</pre>
124   -
125   - <div class="nav">
126   - <button class="btn" data-action="toStart">ToStart</button>
127   - <button class="btn" data-action="toEnd">ToEnd</button>
128   - </div>
129   -
130   - <div class="optionblock">
131   - <span>FPS</span> <span class="divider"></span>
132   - <input type="text" name="fps" min="1" max="60" step="1" value="15" class="range">
133   - <span class="divider"></span>
134   - </div>
135   - </div>
136   -
137   - <div class="motiowrap clearfix">
138   -
139   - <div id="fire2" class="motio" data-motio='{ "frames": 20, "fps": 15, "paused": 1 }'></div>
140   -
141   -<pre class="prettyprint lang-js">
142   -$('#fire2').motio({ frames: 20, fps: 15, paused: 1 });
143   -</pre>
144   -
145   - <div class="nav">
146   - <button class="btn" data-action="toStart">ToStart</button>
147   - <button class="btn" data-action="toEnd">ToEnd</button>
148   - </div>
149   -
150   - <div class="optionblock">
151   - <span>FPS</span> <span class="divider"></span>
152   - <input type="text" name="fps" min="1" max="60" step="1" value="15" class="range">
153   - <span class="divider"></span>
154   - </div>
155   - </div>
156   -
157   - </div><!--end:#examples-->
158   -
159   - <div id="minigame">
160   -
161   - <div class="keys">
162   -
163   - <div class="fright">
164   - Available keys:
165   - <span class="key">&larr;</span>
166   - <span class="key">&rarr;</span>
167   - <span class="key">Space</span>
168   - <span class="key">B</span>
169   - </div>
170   -
171   - <span>Motio is not really intended for games, but I just wanted to try :)</span>
172   -
173   - </div>
174   -
175   - <div id="game">
176   -
177   - <div class="char">
178   -
179   - <div class="stand"></div>
180   - <div class="stand_left"></div>
181   - <div class="run"></div>
182   - <div class="run_left"></div>
183   - <div class="jump"></div>
184   - <div class="jump_left"></div>
185   - <div class="kick"></div>
186   - <div class="kick_left"></div>
187   -
188   - </div>
189   -
190   - <div class="overlay"></div>
191   - </div>
192   -
193   - <small class="fright">Graphics are from <a href="http://spriters-resource.com/arcade/prettysoldiersailormoon/">here</a>. Please don't sue me, anyone :)</small>
194   -
195   - <small>I've spent one whole day on this! O_o</small>
196   -
197   -<h4>HTLM</h4>
198   -<pre class="prettyprint lang-html">
199   -&lt;div id=&quot;game&quot;&gt;
200   -
201   - &lt;div class=&quot;char&quot;&gt;
202   -
203   - &lt;div class=&quot;stand&quot;&gt;&lt;/div&gt;
204   - &lt;div class=&quot;stand_left&quot;&gt;&lt;/div&gt;
205   - &lt;div class=&quot;run&quot;&gt;&lt;/div&gt;
206   - &lt;div class=&quot;run_left&quot;&gt;&lt;/div&gt;
207   - &lt;div class=&quot;jump&quot;&gt;&lt;/div&gt;
208   - &lt;div class=&quot;jump_left&quot;&gt;&lt;/div&gt;
209   - &lt;div class=&quot;kick&quot;&gt;&lt;/div&gt;
210   - &lt;div class=&quot;kick_left&quot;&gt;&lt;/div&gt;
211   -
212   - &lt;/div&gt;
213   -
214   - &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;
215   -&lt;/div&gt;
216   -</pre>
217   -
218   -<h4>CSS</h4>
219   -<pre class="prettyprint lang-css">
220   -#game {
221   - position: relative;
222   - clear: both;
223   - margin: 10px 0;
224   - width: 100%;
225   - height: 240px;
226   - background: url('../img/minigame_bg.png') no-repeat center 0;
227   -}
228   -#game div {
229   - position: absolute;
230   -}
231   -
232   -#game .char {
233   - width: 120px;
234   - height: 150px;
235   - left: 410px;
236   - bottom: 0;
237   -}
238   -#game .char div {
239   - width: 100%;
240   - height: 100%;
241   - background: url('../img/sailormars.gif') no-repeat left top;
242   -}
243   -#game .char .stand {
244   - background-position: 0 0;
245   -}
246   -#game .char .stand_left {
247   - background-position: 0 -150px;
248   -}
249   -#game .char .run {
250   - background-position: 0 -300px;
251   -}
252   -#game .char .run_left {
253   - background-position: 0 -450px;
254   -}
255   -#game .char .jump {
256   - background-position: 0 -600px;
257   -}
258   -#game .char .jump_left {
259   - background-position: 0 -750px;
260   -}
261   -#game .char .kick {
262   - background-position: 0 -900px;
263   -}
264   -#game .char .kick_left {
265   - background-position: 0 -1050px;
266   -}
267   -
268   -#game .overlay {
269   - width: 100%;
270   - height: 100%;
271   - left: 0;
272   - top: 0;
273   - z-index: 2;
274   - background: url('../img/minigame_bg.png') no-repeat center -240px;
275   -}
276   -</pre>
277   -
278   -<h4>Javascript <small>- this is REALLY dirty and could be written a LOT smarter, buttfuckit...</small></h4>
279   -<pre class="prettyprint lang-js">
280   -var $game = $(&#039;#game&#039;),
281   - pos = 400,
282   - $char = $game.find(&#039;.char&#039;).css({ left: pos + &#039;px&#039; }),
283   - posMax = $game.innerWidth() - $char.innerWidth(),
284   - facing = &#039;right&#039;,
285   - moveSpeed = 300,
286   - moveFps = 30,
287   - pressed = [],
288   - inAction = 0,
289   - inRunning = 0,
290   - mIndex,
291   - listenOn = [37,39,32,66],
292   - $mations = $char.children().hide(),
293   - mations = {
294   - right: {
295   - stand: $mations.filter(&#039;.stand&#039;).motio({ frames: 8, paused: 1, fps: 10 }),
296   - run: $mations.filter(&#039;.run&#039; ).motio({ frames: 6, paused: 1, fps: 10 }),
297   - jump: $mations.filter(&#039;.jump&#039; ).motio({ frames: 10, paused: 1, fps: 15 }),
298   - kick: $mations.filter(&#039;.kick&#039; ).motio({ frames: 9, paused: 1, fps: 15 })
299   - },
300   - left: {
301   - stand: $mations.filter(&#039;.stand_left&#039;).motio({ frames: 8, paused: 1, fps: 10 }),
302   - run: $mations.filter(&#039;.run_left