Oskar Segersvärd
9 years ago
58 changed files with 20881 additions and 400 deletions
@ -1,157 +0,0 @@ |
|||
<link rel='ractive' href='./BundleOptions.html'> |
|||
<link rel='ractive' href='./Module.html'> |
|||
<link rel='ractive' href='./Status.html'> |
|||
<link rel='ractive' href='./Output.html'> |
|||
<link rel='ractive' href='./Blurb.html'> |
|||
|
|||
<div class='left'> |
|||
<select value='{{selectedExample}}'> |
|||
{{#each examples}} |
|||
<option value='{{this}}'>{{name}}</option> |
|||
{{/each}} |
|||
</select> |
|||
|
|||
{{#each modules :i}} |
|||
<Module module='{{this}}' index='{{i}}' main='{{i===0}}'/> |
|||
{{/each}} |
|||
|
|||
<button class='mdl-button mdl-js-button new-module' on-tap='createModule()'>new module</button> |
|||
</div> |
|||
|
|||
<div class='right'> |
|||
<Status error='{{error}}'/> |
|||
<BundleOptions options='{{options}}'/> |
|||
<Output output='{{output}}'/> |
|||
<Blurb/> |
|||
</div> |
|||
|
|||
|
|||
<style> |
|||
main { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.left, .right { |
|||
width: 50%; |
|||
height: 100%; |
|||
float: left; |
|||
} |
|||
|
|||
.new-module { |
|||
float: right; |
|||
} |
|||
</style> |
|||
|
|||
<script> |
|||
import { dirname, resolve, extname } from './utils/path'; |
|||
import tap from 'ractive-events-tap'; |
|||
|
|||
component.exports = { |
|||
data: () => ({ |
|||
error: null, |
|||
options: { |
|||
format: 'amd', |
|||
moduleName: 'bundle' |
|||
}, |
|||
modules: [ |
|||
{ |
|||
name: 'main.js', |
|||
code: `import { foo } from './foo';\nconsole.log( foo() );` |
|||
}, |
|||
|
|||
{ |
|||
name: 'foo.js', |
|||
code: `export function foo () {\n\treturn 42;\n}` |
|||
} |
|||
] |
|||
}), |
|||
|
|||
oninit () { |
|||
this.observe({ |
|||
modules: modules => { |
|||
console.log( 'modules', modules ); |
|||
this.renderModules( modules, this.get( 'options' ) ); |
|||
}, |
|||
|
|||
options: options => { |
|||
console.log( 'options', options ); |
|||
this.renderModules( this.get( 'modules' ), options ); |
|||
}, |
|||
|
|||
selectedExample: example => { |
|||
const modules = Object.keys( example.modules ).map( key => { |
|||
return { |
|||
name: `${key}.js`, |
|||
code: example.modules[ key ] |
|||
}; |
|||
}); |
|||
|
|||
modules.sort( ( a, b ) => { |
|||
if ( a.name === 'main.js' ) return -1; |
|||
if ( b.name === 'main.js' ) return 1; |
|||
|
|||
return a.name < b.name ? -1 : 1; |
|||
}); |
|||
|
|||
this.set({ modules }); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
renderModules ( modules, options ) { |
|||
let moduleById = {}; |
|||
|
|||
modules.forEach( module => { |
|||
moduleById[ module.name ] = module; |
|||
}); |
|||
|
|||
rollup.rollup({ |
|||
entry: '@main', |
|||
resolveId ( importee, importer ) { |
|||
if ( !importer ) return importee; |
|||
if ( importee[0] !== '.' ) return undefined; |
|||
return resolve( dirname( importer ), importee ); |
|||
}, |
|||
load: function ( id ) { |
|||
if ( id === '@main' ) return modules[0].code; |
|||
if ( id.substr( 0, 2 ) === './' ) id = id.substring( 2 ); |
|||
|
|||
if ( extname( id ) === '' ) { |
|||
id += '.js'; |
|||
} |
|||
|
|||
const module = moduleById[ id ]; |
|||
|
|||
if ( !module ) throw new Error( `missing module ${id}` ); // TODO... |
|||
|
|||
return module.code; |
|||
} |
|||
}).then( bundle => { |
|||
console.log( 'bundle', bundle ) |
|||
const generated = bundle.generate( options ); |
|||
|
|||
this.set( 'output', generated.code ); |
|||
this.set( 'error', null ); |
|||
}) |
|||
.catch( error => this.set( 'error', error ) ); |
|||
}, |
|||
|
|||
removeModule ( index ) { |
|||
this.splice( 'modules', index, 1 ); |
|||
}, |
|||
|
|||
createModule () { |
|||
this.push( 'modules', { |
|||
name: 'newModule.js', |
|||
contents: '' |
|||
}); |
|||
|
|||
const view = this.findAllComponents( 'Module' ).pop(); |
|||
view.find( 'input' ).select(); |
|||
}, |
|||
|
|||
events: { |
|||
tap |
|||
} |
|||
}; |
|||
</script> |
|||
@ -1,37 +0,0 @@ |
|||
<div class='option'> |
|||
<p>Bundle format:</p> |
|||
[[#formats : i]] |
|||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="format-[[value]]"> |
|||
<input type="radio" id="format-[[value]]" class="mdl-radio__button" name="{{options.format}}" value="[[value]]"/> |
|||
<span class="mdl-radio__label">[[name]]</span> |
|||
</label> |
|||
[[/]] |
|||
</div> |
|||
|
|||
<style> |
|||
.option { |
|||
margin: 0 20px 20px 20px; |
|||
} |
|||
|
|||
.option > label { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.option > p { |
|||
margin: 0; |
|||
} |
|||
</style> |
|||
|
|||
<script> |
|||
component.exports = { |
|||
data: () => ({ |
|||
formats: [ |
|||
{ name: 'AMD', value: 'amd' }, |
|||
{ name: 'CommonJS', value: 'cjs' }, |
|||
{ name: 'ES2015', value: 'es6' }, |
|||
{ name: 'Globals', value: 'iife' }, |
|||
{ name: 'UMD', value: 'umd' } |
|||
] |
|||
}) |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,133 @@ |
|||
<article class='module {{main ? "main-module" : ""}}'> |
|||
<header> |
|||
{{#if main}} |
|||
<span class='module-name'>main.js <span class='entry-module-label'>(entry module)</span></span> |
|||
{{else}} |
|||
<input class='module-name' value='{{module.name}}' placeholder='foo.js'> |
|||
|
|||
<button class='remove' on-tap='fire("remove", index)'> |
|||
<span class='label'>remove</span> |
|||
<span class='icon-cancel'></span> |
|||
</button> |
|||
{{/if}} |
|||
</header> |
|||
|
|||
<textarea value='[[module.code]]'/> |
|||
</article> |
|||
|
|||
<style> |
|||
.module { |
|||
margin: 0 0 1em 0; |
|||
border: 1px solid #f4f4f4; |
|||
} |
|||
|
|||
header { |
|||
width: 100%; |
|||
border-bottom: 1px solid #f4f4f4; |
|||
} |
|||
|
|||
.main-module { |
|||
border: 1px solid #ccc; |
|||
} |
|||
|
|||
.main-module header { |
|||
/*background-color: #f4f4f4;*/ |
|||
} |
|||
|
|||
.module-name { |
|||
display: block; |
|||
width: 100%; |
|||
font-family: inherit; |
|||
font-size: inherit; |
|||
padding: 0.5em; |
|||
border: none; |
|||
outline: none; |
|||
line-height: 1; |
|||
color: #333; |
|||
} |
|||
|
|||
.module-name:focus { |
|||
background-color: #eee; |
|||
} |
|||
|
|||
.entry-module-label { |
|||
color: #999; |
|||
} |
|||
|
|||
button { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
font-family: inherit; |
|||
font-size: inherit; |
|||
padding: 0.5em; |
|||
background-color: transparent; |
|||
border: none; |
|||
color: #85144b; |
|||
cursor: pointer; |
|||
outline: none; |
|||
opacity: 0.4; |
|||
-webkit-transition: opacity 0.2s; |
|||
transition: opacity 0.2s; |
|||
} |
|||
|
|||
button:hover, button:active { |
|||
opacity: 1; |
|||
} |
|||
|
|||
button .label { |
|||
position: absolute; |
|||
right: 100%; |
|||
opacity: 0; |
|||
-webkit-transition: opacity 0.2s; |
|||
transition: opacity 0.2s; |
|||
} |
|||
|
|||
button:hover .label, button:active .label { |
|||
opacity: 0.6; |
|||
} |
|||
|
|||
.icon-cancel { |
|||
font-size: 0.8em; |
|||
} |
|||
|
|||
textarea { |
|||
width: 100%; |
|||
height: 100px; |
|||
} |
|||
</style> |
|||
|
|||
<script> |
|||
import tap from 'ractive-events-tap'; |
|||
|
|||
component.exports = { |
|||
onrender () { |
|||
this.on( 'remove', index => this.parent.removeModule( index ) ); |
|||
|
|||
let updating = false; |
|||
|
|||
const editor = CodeMirror.fromTextArea( this.find( 'textarea' ), { |
|||
lineNumbers: true, |
|||
lineWrapping: true |
|||
}); |
|||
|
|||
editor.on( 'change', instance => { |
|||
if ( !updating ) { |
|||
updating = true; |
|||
this.set( 'module.code', instance.getValue() ); |
|||
updating = false; |
|||
} |
|||
}); |
|||
|
|||
this.observe( 'module.code', code => { |
|||
if ( !updating && code != null ) { |
|||
updating = true; |
|||
editor.setValue( code ); |
|||
updating = false; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
events: { tap } |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,85 @@ |
|||
<link rel='ractive' href='./Module.html'> |
|||
|
|||
<header class='start-here clearfix'> |
|||
<strong>Write ES6 modules here...</strong> |
|||
|
|||
<select value='{{selectedExample}}'> |
|||
<option disabled>...or select an example</option> |
|||
{{#each examples}} |
|||
<option value='{{this}}'>{{name}}</option> |
|||
{{/each}} |
|||
</select> |
|||
</header> |
|||
|
|||
{{#each modules :i}} |
|||
<Module module='{{this}}' index='{{i}}' main='{{i===0}}'/> |
|||
{{/each}} |
|||
|
|||
<button class='new-module' on-tap='createModule()'><span class='icon icon-plus'></span> add module</button> |
|||
|
|||
<style> |
|||
.start-here { |
|||
margin: 0 0 1em 0; |
|||
} |
|||
|
|||
select { |
|||
float: right; |
|||
} |
|||
|
|||
.new-module { |
|||
display: block; |
|||
width: 100%; |
|||
color: #3D9970; |
|||
border: none; |
|||
padding: 1em; |
|||
} |
|||
</style> |
|||
|
|||
<script> |
|||
import { dirname, resolve, extname } from '../utils/path'; |
|||
import tap from 'ractive-events-tap'; |
|||
|
|||
let uid = 1; |
|||
|
|||
component.exports = { |
|||
oninit () { |
|||
this.observe({ |
|||
selectedExample: example => { |
|||
const modules = Object.keys( example.modules ).map( key => { |
|||
return { |
|||
name: `${key}.js`, |
|||
code: example.modules[ key ].trim() |
|||
}; |
|||
}); |
|||
|
|||
modules.sort( ( a, b ) => { |
|||
if ( a.name === 'main.js' ) return -1; |
|||
if ( b.name === 'main.js' ) return 1; |
|||
|
|||
return a.name < b.name ? -1 : 1; |
|||
}); |
|||
|
|||
this.set({ modules }); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
removeModule ( index ) { |
|||
this.splice( 'modules', index, 1 ); |
|||
}, |
|||
|
|||
createModule () { |
|||
this.push( 'modules', { |
|||
name: `module_${uid++}.js`, |
|||
contents: '' |
|||
}); |
|||
|
|||
const view = this.findAllComponents( 'Module' ).pop(); |
|||
view.find( 'input' ).select(); |
|||
}, |
|||
|
|||
events: { |
|||
tap |
|||
} |
|||
}; |
|||
</script> |
|||
@ -1,82 +0,0 @@ |
|||
<div class='module mdl-card mdl-shadow--2dp'> |
|||
<header> |
|||
<div class="mdl-textfield mdl-js-textfield"> |
|||
<input class="mdl-textfield__input" value='{{module.name}}' placeholder='foo.js'> |
|||
</div> |
|||
<button class='mdl-button mdl-js-button' on-tap='fire("remove", index)'>remove</button> |
|||
</header> |
|||
|
|||
<textarea value='[[module.code]]'/> |
|||
</div> |
|||
|
|||
<style> |
|||
.module { |
|||
padding: 5px; |
|||
margin: 0 auto 10px auto; |
|||
width: calc( 100% - 10px ); |
|||
min-height: 100px; |
|||
} |
|||
|
|||
header { |
|||
width: 100%; |
|||
padding: 0 5em 10px 0; |
|||
} |
|||
|
|||
input { |
|||
width: 100%; |
|||
} |
|||
|
|||
button { |
|||
position: absolute; |
|||
top: 15px; |
|||
right: 0; |
|||
} |
|||
|
|||
textarea { |
|||
width: 100%; |
|||
height: 100px; |
|||
} |
|||
|
|||
.CodeMirror { |
|||
height: auto; |
|||
} |
|||
|
|||
.CodeMirror-scroll { |
|||
max-height: 80vh; |
|||
} |
|||
</style> |
|||
|
|||
<script> |
|||
import tap from 'ractive-events-tap'; |
|||
|
|||
component.exports = { |
|||
onrender () { |
|||
this.on( 'remove', index => this.parent.removeModule( index ) ); |
|||
|
|||
let updating = false; |
|||
|
|||
const editor = CodeMirror.fromTextArea( this.find( 'textarea' ), { |
|||
lineNumbers: true, |
|||
lineWrapping: true |
|||
}); |
|||
|
|||
editor.on( 'change', instance => { |
|||
if ( !updating ) { |
|||
updating = true; |
|||
this.set( 'module.code', instance.getValue() ); |
|||
updating = false; |
|||
} |
|||
}); |
|||
|
|||
this.observe( 'module.code', code => { |
|||
if ( !updating && code != null ) { |
|||
updating = true; |
|||
editor.setValue( code ); |
|||
updating = false; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
events: { tap } |
|||
}; |
|||
</script> |
|||
@ -1,32 +0,0 @@ |
|||
<div class='module mdl-card mdl-shadow--2dp'> |
|||
<div id='editor'></div> |
|||
</div> |
|||
|
|||
<style> |
|||
.module { |
|||
padding: 5px; |
|||
margin: 0 auto 10px auto; |
|||
width: calc( 100% - 10px ); |
|||
min-height: initial; |
|||
} |
|||
</style> |
|||
|
|||
<script> |
|||
component.exports = { |
|||
oncomplete () { |
|||
let cm = CodeMirror( this.find( '#editor' ), { |
|||
lineNumbers: true, |
|||
lineWrapping: true, |
|||
readOnly: true |
|||
}); |
|||
|
|||
cm.setSize( null, '100%' ); |
|||
|
|||
this.observe( 'output', output => { |
|||
if ( typeof output === 'string' ) { |
|||
cm.setValue( output ); |
|||
} |
|||
}); |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,27 @@ |
|||
<div class='bundle'></div> |
|||
|
|||
<style> |
|||
.bundle { |
|||
border: 1px solid #eee; |
|||
} |
|||
</style> |
|||
|
|||
<script> |
|||
component.exports = { |
|||
onrender () { |
|||
let cm = CodeMirror( this.find( 'div' ), { |
|||
lineNumbers: true, |
|||
lineWrapping: true, |
|||
readOnly: true |
|||
}); |
|||
|
|||
cm.setSize( null, '100%' ); |
|||
|
|||
this.observe( 'code', code => { |
|||
if ( typeof code === 'string' ) { |
|||
cm.setValue( code ); |
|||
} |
|||
}); |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,55 @@ |
|||
<table> |
|||
<tr> |
|||
[[#each formats : i]] |
|||
<td> |
|||
<button |
|||
class='{{value === options.format ? "selected": ""}}' |
|||
on-tap='set("options.format", value)' |
|||
>{{name}}</button> |
|||
</td> |
|||
[[/each]] |
|||
</tr> |
|||
</table> |
|||
|
|||
<style> |
|||
table { |
|||
width: 100%; |
|||
border-spacing: 0; |
|||
} |
|||
|
|||
td { |
|||
width: 20%; |
|||
padding: 0; |
|||
font-size: 0.8em; |
|||
} |
|||
|
|||
button { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 1em; |
|||
} |
|||
|
|||
.selected { |
|||
background-color: #ccc; |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
|
|||
<script> |
|||
import tap from 'ractive-events-tap'; |
|||
|
|||
component.exports = { |
|||
data: () => ({ |
|||
formats: [ |
|||
{ name: 'AMD', value: 'amd' }, |
|||
{ name: 'CommonJS', value: 'cjs' }, |
|||
{ name: 'ES2015', value: 'es6' }, |
|||
{ name: 'Globals', value: 'iife' }, |
|||
{ name: 'UMD', value: 'umd' } |
|||
] |
|||
}), |
|||
|
|||
events: { tap } |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,33 @@ |
|||
<div class='status {{error ? "error": "success"}}'> |
|||
{{#if error}} |
|||
<span> |
|||
<span class='icon icon-error'></span> |
|||
<strong>{{error.name}}:</strong> {{error.message}} |
|||
</span> |
|||
{{else}} |
|||
<span> |
|||
<span class='icon icon-ok'></span> |
|||
Rollup successful! |
|||
</span> |
|||
{{/if}} |
|||
</div> |
|||
|
|||
<style> |
|||
.status { |
|||
padding: 0.5em; |
|||
margin: 0 0 1em 0; |
|||
color: white; |
|||
} |
|||
|
|||
.success { |
|||
background-color: #3D9970; |
|||
} |
|||
|
|||
.error { |
|||
background-color: #FF4136; |
|||
} |
|||
|
|||
.status > span { |
|||
font-size: 1em; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,26 @@ |
|||
<link rel='ractive' href='./BundleOptions.html'> |
|||
<link rel='ractive' href='./Status.html'> |
|||
<link rel='ractive' href='./Bundle.html'> |
|||
|
|||
<Status error='{{error}}'/> |
|||
<BundleOptions options='{{options}}'/> |
|||
<Bundle code='{{code}}'/> |
|||
|
|||
|
|||
<script> |
|||
import tap from 'ractive-events-tap'; |
|||
|
|||
component.exports = { |
|||
data: () => ({ |
|||
error: null, |
|||
options: { |
|||
format: 'amd', |
|||
moduleName: 'bundle' |
|||
} |
|||
}), |
|||
|
|||
events: { |
|||
tap |
|||
} |
|||
}; |
|||
</script> |
|||
@ -1,31 +0,0 @@ |
|||
<div class='mdl-card mdl-shadow--2dp status-div' style="background-color:{{ error ? 'rgb(182, 80, 67)' : 'rgb(114, 185, 92)' }}"> |
|||
{{#error}} |
|||
<span> |
|||
<i class="material-icons">error</i> |
|||
<strong>{{error.name}}:</strong> {{error.message}} |
|||
</span> |
|||
{{else}} |
|||
<span> |
|||
<i class="material-icons">check</i> |
|||
Rollup successful! |
|||
</span> |
|||
{{/error}} |
|||
</div> |
|||
|
|||
<style> |
|||
.status-div { |
|||
padding: 5px 20px; |
|||
margin: 0 auto 10px auto; |
|||
width: calc( 100% - 10px ); |
|||
min-height: initial; |
|||
height: 75px; |
|||
} |
|||
|
|||
.status-div > span { |
|||
vertical-align: middle; |
|||
line-height: 65px; |
|||
font-size: 20px; |
|||
color: white; |
|||
float: left; |
|||
} |
|||
</style> |
|||
@ -1,9 +1,62 @@ |
|||
import BaseView from './BaseView'; |
|||
import Input from './Input/index'; |
|||
import Output from './Output/index'; |
|||
import Footer from './Footer'; |
|||
import examples from './examples'; |
|||
import { dirname, extname, resolve } from './utils/path'; |
|||
|
|||
console.log( examples ); |
|||
|
|||
const ractive = new BaseView({ |
|||
el: 'main', |
|||
const input = new Input({ |
|||
el: '.input', |
|||
data: { examples } |
|||
}); |
|||
|
|||
const output = new Output({ |
|||
el: '.output' |
|||
}); |
|||
|
|||
const footer = new Footer({ |
|||
el: 'footer' |
|||
}); |
|||
|
|||
function update () { |
|||
const modules = input.get( 'modules' ); |
|||
const options = output.get( 'options' ); |
|||
|
|||
let moduleById = {}; |
|||
|
|||
modules.forEach( module => { |
|||
moduleById[ module.name ] = module; |
|||
}); |
|||
|
|||
/*global rollup */ |
|||
rollup.rollup({ |
|||
entry: '@main', |
|||
resolveId ( importee, importer ) { |
|||
if ( !importer ) return importee; |
|||
if ( importee[0] !== '.' ) return undefined; |
|||
return resolve( dirname( importer ), importee ); |
|||
}, |
|||
load: function ( id ) { |
|||
if ( id === '@main' ) return modules[0].code; |
|||
if ( id.substr( 0, 2 ) === './' ) id = id.substring( 2 ); |
|||
|
|||
if ( extname( id ) === '' ) { |
|||
id += '.js'; |
|||
} |
|||
|
|||
const module = moduleById[ id ]; |
|||
|
|||
if ( !module ) throw new Error( `missing module ${id}` ); // TODO...
|
|||
|
|||
return module.code; |
|||
} |
|||
}).then( bundle => { |
|||
const generated = bundle.generate( options ); |
|||
|
|||
output.set( 'code', generated.code ); |
|||
output.set( 'error', null ); |
|||
}) |
|||
.catch( error => output.set( 'error', error ) ); |
|||
} |
|||
|
|||
input.observe( 'modules', update ); |
|||
output.observe( 'options', update ); |
|||
|
|||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,92 @@ |
|||
Copyright (c) 2011, Raph Levien (firstname.lastname@gmail.com), Copyright (c) 2012, Cyreal (cyreal.org) |
|||
This Font Software is licensed under the SIL Open Font License, Version 1.1. |
|||
This license is copied below, and is also available with a FAQ at: |
|||
http://scripts.sil.org/OFL |
|||
|
|||
|
|||
----------------------------------------------------------- |
|||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 |
|||
----------------------------------------------------------- |
|||
|
|||
PREAMBLE |
|||
The goals of the Open Font License (OFL) are to stimulate worldwide |
|||
development of collaborative font projects, to support the font creation |
|||
efforts of academic and linguistic communities, and to provide a free and |
|||
open framework in which fonts may be shared and improved in partnership |
|||
with others. |
|||
|
|||
The OFL allows the licensed fonts to be used, studied, modified and |
|||
redistributed freely as long as they are not sold by themselves. The |
|||
fonts, including any derivative works, can be bundled, embedded, |
|||
redistributed and/or sold with any software provided that any reserved |
|||
names are not used by derivative works. The fonts and derivatives, |
|||
however, cannot be released under any other type of license. The |
|||
requirement for fonts to remain under this license does not apply |
|||
to any document created using the fonts or their derivatives. |
|||
|
|||
DEFINITIONS |
|||
"Font Software" refers to the set of files released by the Copyright |
|||
Holder(s) under this license and clearly marked as such. This may |
|||
include source files, build scripts and documentation. |
|||
|
|||
"Reserved Font Name" refers to any names specified as such after the |
|||
copyright statement(s). |
|||
|
|||
"Original Version" refers to the collection of Font Software components as |
|||
distributed by the Copyright Holder(s). |
|||
|
|||
"Modified Version" refers to any derivative made by adding to, deleting, |
|||
or substituting -- in part or in whole -- any of the components of the |
|||
Original Version, by changing formats or by porting the Font Software to a |
|||
new environment. |
|||
|
|||
"Author" refers to any designer, engineer, programmer, technical |
|||
writer or other person who contributed to the Font Software. |
|||
|
|||
PERMISSION & CONDITIONS |
|||
Permission is hereby granted, free of charge, to any person obtaining |
|||
a copy of the Font Software, to use, study, copy, merge, embed, modify, |
|||
redistribute, and sell modified and unmodified copies of the Font |
|||
Software, subject to the following conditions: |
|||
|
|||
1) Neither the Font Software nor any of its individual components, |
|||
in Original or Modified Versions, may be sold by itself. |
|||
|
|||
2) Original or Modified Versions of the Font Software may be bundled, |
|||
redistributed and/or sold with any software, provided that each copy |
|||
contains the above copyright notice and this license. These can be |
|||
included either as stand-alone text files, human-readable headers or |
|||
in the appropriate machine-readable metadata fields within text or |
|||
binary files as long as those fields can be easily viewed by the user. |
|||
|
|||
3) No Modified Version of the Font Software may use the Reserved Font |
|||
Name(s) unless explicit written permission is granted by the corresponding |
|||
Copyright Holder. This restriction only applies to the primary font name as |
|||
presented to the users. |
|||
|
|||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font |
|||
Software shall not be used to promote, endorse or advertise any |
|||
Modified Version, except to acknowledge the contribution(s) of the |
|||
Copyright Holder(s) and the Author(s) or with their explicit written |
|||
permission. |
|||
|
|||
5) The Font Software, modified or unmodified, in part or in whole, |
|||
must be distributed entirely under this license, and must not be |
|||
distributed under any other license. The requirement for fonts to |
|||
remain under this license does not apply to any document created |
|||
using the Font Software. |
|||
|
|||
TERMINATION |
|||
This license becomes null and void if any of the above conditions are |
|||
not met. |
|||
|
|||
DISCLAIMER |
|||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
|||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF |
|||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT |
|||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE |
|||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, |
|||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL |
|||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING |
|||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM |
|||
OTHER DEALINGS IN THE FONT SOFTWARE. |
|||
Binary file not shown.
|
After Width: | Height: | Size: 301 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,16 @@ |
|||
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 4, 2015 */ |
|||
|
|||
|
|||
|
|||
@font-face { |
|||
font-family: 'questrialregular'; |
|||
src: url('questrial-regular-webfont.eot'); |
|||
src: url('questrial-regular-webfont.eot?#iefix') format('embedded-opentype'), |
|||
url('questrial-regular-webfont.woff2') format('woff2'), |
|||
url('questrial-regular-webfont.woff') format('woff'), |
|||
url('questrial-regular-webfont.ttf') format('truetype'), |
|||
url('questrial-regular-webfont.svg#questrialregular') format('svg'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
|
|||
} |
|||
@ -0,0 +1,30 @@ |
|||
Font license info |
|||
|
|||
|
|||
## Font Awesome |
|||
|
|||
Copyright (C) 2012 by Dave Gandy |
|||
|
|||
Author: Dave Gandy |
|||
License: SIL () |
|||
Homepage: http://fortawesome.github.com/Font-Awesome/ |
|||
|
|||
|
|||
## Elusive |
|||
|
|||
Copyright (C) 2013 by Aristeides Stathopoulos |
|||
|
|||
Author: Aristeides Stathopoulos |
|||
License: SIL (http://scripts.sil.org/OFL) |
|||
Homepage: http://aristeides.com/ |
|||
|
|||
|
|||
## Modern Pictograms |
|||
|
|||
Copyright (c) 2012 by John Caserta. All rights reserved. |
|||
|
|||
Author: John Caserta |
|||
License: SIL (http://scripts.sil.org/OFL) |
|||
Homepage: http://thedesignoffice.org/project/modern-pictograms/ |
|||
|
|||
|
|||
@ -0,0 +1,75 @@ |
|||
This webfont is generated by http://fontello.com open source project. |
|||
|
|||
|
|||
================================================================================ |
|||
Please, note, that you should obey original font licences, used to make this |
|||
webfont pack. Details available in LICENSE.txt file. |
|||
|
|||
- Usually, it's enough to publish content of LICENSE.txt file somewhere on your |
|||
site in "About" section. |
|||
|
|||
- If your project is open-source, usually, it will be ok to make LICENSE.txt |
|||
file publically available in your repository. |
|||
|
|||
- Fonts, used in Fontello, don't require a clickable link on your site. |
|||
But any kind of additional authors crediting is welcome. |
|||
================================================================================ |
|||
|
|||
|
|||
Comments on archive content |
|||
--------------------------- |
|||
|
|||
- /font/* - fonts in different formats |
|||
|
|||
- /css/* - different kinds of css, for all situations. Should be ok with |
|||
twitter bootstrap. Also, you can skip <i> style and assign icon classes |
|||
directly to text elements, if you don't mind about IE7. |
|||
|
|||
- demo.html - demo file, to show your webfont content |
|||
|
|||
- LICENSE.txt - license info about source fonts, used to build your one. |
|||
|
|||
- config.json - keeps your settings. You can import it back into fontello |
|||
anytime, to continue your work |
|||
|
|||
|
|||
Why so many CSS files ? |
|||
----------------------- |
|||
|
|||
Because we like to fit all your needs :) |
|||
|
|||
- basic file, <your_font_name>.css - is usually enough, it contains @font-face |
|||
and character code definitions |
|||
|
|||
- *-ie7.css - if you need IE7 support, but still don't wish to put char codes |
|||
directly into html |
|||
|
|||
- *-codes.css and *-ie7-codes.css - if you like to use your own @font-face |
|||
rules, but still wish to benefit from css generation. That can be very |
|||
convenient for automated asset build systems. When you need to update font - |
|||
no need to manually edit files, just override old version with archive |
|||
content. See fontello source code for examples. |
|||
|
|||
- *-embedded.css - basic css file, but with embedded WOFF font, to avoid |
|||
CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain. |
|||
We strongly recommend to resolve this issue by `Access-Control-Allow-Origin` |
|||
server headers. But if you ok with dirty hack - this file is for you. Note, |
|||
that data url moved to separate @font-face to avoid problems with <IE9, when |
|||
string is too long. |
|||
|
|||
- animate.css - use it to get ideas about spinner rotation animation. |
|||
|
|||
|
|||
Attention for server setup |
|||
-------------------------- |
|||
|
|||
You MUST setup server to reply with proper `mime-types` for font files - |
|||
otherwise some browsers will fail to show fonts. |
|||
|
|||
Usually, `apache` already has necessary settings, but `nginx` and other |
|||
webservers should be tuned. Here is list of mime types for our file extensions: |
|||
|
|||
- `application/vnd.ms-fontobject` - eot |
|||
- `application/x-font-woff` - woff |
|||
- `application/x-font-ttf` - ttf |
|||
- `image/svg+xml` - svg |
|||
@ -0,0 +1,46 @@ |
|||
{ |
|||
"name": "", |
|||
"css_prefix_text": "icon-", |
|||
"css_use_suffix": false, |
|||
"hinting": true, |
|||
"units_per_em": 1000, |
|||
"ascent": 850, |
|||
"glyphs": [ |
|||
{ |
|||
"uid": "d35a1d35efeb784d1dc9ac18b9b6c2b6", |
|||
"css": "pencil", |
|||
"code": 59392, |
|||
"src": "fontawesome" |
|||
}, |
|||
{ |
|||
"uid": "f47srtt9pew19q6kg9jniwtzsb8q1rhy", |
|||
"css": "attention", |
|||
"code": 59397, |
|||
"src": "modernpics" |
|||
}, |
|||
{ |
|||
"uid": "ce7452abce8b55ded1c393997a51e6b3", |
|||
"css": "ok", |
|||
"code": 59395, |
|||
"src": "elusive" |
|||
}, |
|||
{ |
|||
"uid": "499b745a2e2485bdd059c3a53d048e5f", |
|||
"css": "cancel", |
|||
"code": 59393, |
|||
"src": "elusive" |
|||
}, |
|||
{ |
|||
"uid": "55e2ff85b1c459c383f46da6e96014b0", |
|||
"css": "plus", |
|||
"code": 59394, |
|||
"src": "elusive" |
|||
}, |
|||
{ |
|||
"uid": "3ab229dd9bccaaaf6c71096da4b72c04", |
|||
"css": "error", |
|||
"code": 59396, |
|||
"src": "elusive" |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,85 @@ |
|||
/* |
|||
Animation example, for spinners |
|||
*/ |
|||
.animate-spin { |
|||
-moz-animation: spin 2s infinite linear; |
|||
-o-animation: spin 2s infinite linear; |
|||
-webkit-animation: spin 2s infinite linear; |
|||
animation: spin 2s infinite linear; |
|||
display: inline-block; |
|||
} |
|||
@-moz-keyframes spin { |
|||
0% { |
|||
-moz-transform: rotate(0deg); |
|||
-o-transform: rotate(0deg); |
|||
-webkit-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
100% { |
|||
-moz-transform: rotate(359deg); |
|||
-o-transform: rotate(359deg); |
|||
-webkit-transform: rotate(359deg); |
|||
transform: rotate(359deg); |
|||
} |
|||
} |
|||
@-webkit-keyframes spin { |
|||
0% { |
|||
-moz-transform: rotate(0deg); |
|||
-o-transform: rotate(0deg); |
|||
-webkit-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
100% { |
|||
-moz-transform: rotate(359deg); |
|||
-o-transform: rotate(359deg); |
|||
-webkit-transform: rotate(359deg); |
|||
transform: rotate(359deg); |
|||
} |
|||
} |
|||
@-o-keyframes spin { |
|||
0% { |
|||
-moz-transform: rotate(0deg); |
|||
-o-transform: rotate(0deg); |
|||
-webkit-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
100% { |
|||
-moz-transform: rotate(359deg); |
|||
-o-transform: rotate(359deg); |
|||
-webkit-transform: rotate(359deg); |
|||
transform: rotate(359deg); |
|||
} |
|||
} |
|||
@-ms-keyframes spin { |
|||
0% { |
|||
-moz-transform: rotate(0deg); |
|||
-o-transform: rotate(0deg); |
|||
-webkit-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
100% { |
|||
-moz-transform: rotate(359deg); |
|||
-o-transform: rotate(359deg); |
|||
-webkit-transform: rotate(359deg); |
|||
transform: rotate(359deg); |
|||
} |
|||
} |
|||
@keyframes spin { |
|||
0% { |
|||
-moz-transform: rotate(0deg); |
|||
-o-transform: rotate(0deg); |
|||
-webkit-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
100% { |
|||
-moz-transform: rotate(359deg); |
|||
-o-transform: rotate(359deg); |
|||
-webkit-transform: rotate(359deg); |
|||
transform: rotate(359deg); |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
|
|||
.icon-pencil:before { content: '\e800'; } /* '' */ |
|||
.icon-cancel:before { content: '\e801'; } /* '' */ |
|||
.icon-plus:before { content: '\e802'; } /* '' */ |
|||
.icon-ok:before { content: '\e803'; } /* '' */ |
|||
.icon-error:before { content: '\e804'; } /* '' */ |
|||
.icon-attention:before { content: '\e805'; } /* '' */ |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,7 @@ |
|||
|
|||
.icon-pencil { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-ok { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-error { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-attention { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
@ -0,0 +1,18 @@ |
|||
[class^="icon-"], [class*=" icon-"] { |
|||
font-family: 'fontello'; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
|
|||
/* fix buttons height */ |
|||
line-height: 1em; |
|||
|
|||
/* you can be more comfortable with increased icons size */ |
|||
/* font-size: 120%; */ |
|||
} |
|||
|
|||
.icon-pencil { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-ok { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-error { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-attention { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
@ -0,0 +1,62 @@ |
|||
@font-face { |
|||
font-family: 'fontello'; |
|||
src: url('../font/fontello.eot?33620024'); |
|||
src: url('../font/fontello.eot?33620024#iefix') format('embedded-opentype'), |
|||
url('../font/fontello.woff?33620024') format('woff'), |
|||
url('../font/fontello.ttf?33620024') format('truetype'), |
|||
url('../font/fontello.svg?33620024#fontello') format('svg'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ |
|||
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ |
|||
/* |
|||
@media screen and (-webkit-min-device-pixel-ratio:0) { |
|||
@font-face { |
|||
font-family: 'fontello'; |
|||
src: url('../font/fontello.svg?33620024#fontello') format('svg'); |
|||
} |
|||
} |
|||
*/ |
|||
|
|||
[class^="icon-"]:before, [class*=" icon-"]:before { |
|||
font-family: "fontello"; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
speak: none; |
|||
|
|||
display: inline-block; |
|||
text-decoration: inherit; |
|||
width: 1em; |
|||
margin-right: .2em; |
|||
text-align: center; |
|||
/* opacity: .8; */ |
|||
|
|||
/* For safety - reset parent styles, that can break glyph codes*/ |
|||
font-variant: normal; |
|||
text-transform: none; |
|||
|
|||
/* fix buttons height, for twitter bootstrap */ |
|||
line-height: 1em; |
|||
|
|||
/* Animation center compensation - margins should be symmetric */ |
|||
/* remove if not needed */ |
|||
margin-left: .2em; |
|||
|
|||
/* you can be more comfortable with increased icons size */ |
|||
/* font-size: 120%; */ |
|||
|
|||
/* Font smoothing. That was taken from TWBS */ |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
|
|||
/* Uncomment for 3D effect */ |
|||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ |
|||
} |
|||
|
|||
.icon-pencil:before { content: '\e800'; } /* '' */ |
|||
.icon-cancel:before { content: '\e801'; } /* '' */ |
|||
.icon-plus:before { content: '\e802'; } /* '' */ |
|||
.icon-ok:before { content: '\e803'; } /* '' */ |
|||
.icon-error:before { content: '\e804'; } /* '' */ |
|||
.icon-attention:before { content: '\e805'; } /* '' */ |
|||
@ -0,0 +1,316 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> |
|||
<meta charset="UTF-8"><style>/* |
|||
* Bootstrap v2.2.1 |
|||
* |
|||
* Copyright 2012 Twitter, Inc |
|||
* Licensed under the Apache License v2.0 |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Designed and built with all the love in the world @twitter by @mdo and @fat. |
|||
*/ |
|||
.clearfix { |
|||
*zoom: 1; |
|||
} |
|||
.clearfix:before, |
|||
.clearfix:after { |
|||
display: table; |
|||
content: ""; |
|||
line-height: 0; |
|||
} |
|||
.clearfix:after { |
|||
clear: both; |
|||
} |
|||
html { |
|||
font-size: 100%; |
|||
-webkit-text-size-adjust: 100%; |
|||
-ms-text-size-adjust: 100%; |
|||
} |
|||
a:focus { |
|||
outline: thin dotted #333; |
|||
outline: 5px auto -webkit-focus-ring-color; |
|||
outline-offset: -2px; |
|||
} |
|||
a:hover, |
|||
a:active { |
|||
outline: 0; |
|||
} |
|||
button, |
|||
input, |
|||
select, |
|||
textarea { |
|||
margin: 0; |
|||
font-size: 100%; |
|||
vertical-align: middle; |
|||
} |
|||
button, |
|||
input { |
|||
*overflow: visible; |
|||
line-height: normal; |
|||
} |
|||
button::-moz-focus-inner, |
|||
input::-moz-focus-inner { |
|||
padding: 0; |
|||
border: 0; |
|||
} |
|||
body { |
|||
margin: 0; |
|||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
color: #333; |
|||
background-color: #fff; |
|||
} |
|||
a { |
|||
color: #08c; |
|||
text-decoration: none; |
|||
} |
|||
a:hover { |
|||
color: #005580; |
|||
text-decoration: underline; |
|||
} |
|||
.row { |
|||
margin-left: -20px; |
|||
*zoom: 1; |
|||
} |
|||
.row:before, |
|||
.row:after { |
|||
display: table; |
|||
content: ""; |
|||
line-height: 0; |
|||
} |
|||
.row:after { |
|||
clear: both; |
|||
} |
|||
[class*="span"] { |
|||
float: left; |
|||
min-height: 1px; |
|||
margin-left: 20px; |
|||
} |
|||
.container, |
|||
.navbar-static-top .container, |
|||
.navbar-fixed-top .container, |
|||
.navbar-fixed-bottom .container { |
|||
width: 940px; |
|||
} |
|||
.span12 { |
|||
width: 940px; |
|||
} |
|||
.span11 { |
|||
width: 860px; |
|||
} |
|||
.span10 { |
|||
width: 780px; |
|||
} |
|||
.span9 { |
|||
width: 700px; |
|||
} |
|||
.span8 { |
|||
width: 620px; |
|||
} |
|||
.span7 { |
|||
width: 540px; |
|||
} |
|||
.span6 { |
|||
width: 460px; |
|||
} |
|||
.span5 { |
|||
width: 380px; |
|||
} |
|||
.span4 { |
|||
width: 300px; |
|||
} |
|||
.span3 { |
|||
width: 220px; |
|||
} |
|||
.span2 { |
|||
width: 140px; |
|||
} |
|||
.span1 { |
|||
width: 60px; |
|||
} |
|||
[class*="span"].pull-right, |
|||
.row-fluid [class*="span"].pull-right { |
|||
float: right; |
|||
} |
|||
.container { |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
*zoom: 1; |
|||
} |
|||
.container:before, |
|||
.container:after { |
|||
display: table; |
|||
content: ""; |
|||
line-height: 0; |
|||
} |
|||
.container:after { |
|||
clear: both; |
|||
} |
|||
p { |
|||
margin: 0 0 10px; |
|||
} |
|||
.lead { |
|||
margin-bottom: 20px; |
|||
font-size: 21px; |
|||
font-weight: 200; |
|||
line-height: 30px; |
|||
} |
|||
small { |
|||
font-size: 85%; |
|||
} |
|||
h1 { |
|||
margin: 10px 0; |
|||
font-family: inherit; |
|||
font-weight: bold; |
|||
line-height: 20px; |
|||
color: inherit; |
|||
text-rendering: optimizelegibility; |
|||
} |
|||
h1 small { |
|||
font-weight: normal; |
|||
line-height: 1; |
|||
color: #999; |
|||
} |
|||
h1 { |
|||
line-height: 40px; |
|||
} |
|||
h1 { |
|||
font-size: 38.5px; |
|||
} |
|||
h1 small { |
|||
font-size: 24.5px; |
|||
} |
|||
body { |
|||
margin-top: 90px; |
|||
} |
|||
.header { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 50%; |
|||
margin-left: -480px; |
|||
background-color: #fff; |
|||
border-bottom: 1px solid #ddd; |
|||
padding-top: 10px; |
|||
z-index: 10; |
|||
} |
|||
.footer { |
|||
color: #ddd; |
|||
font-size: 12px; |
|||
text-align: center; |
|||
margin-top: 20px; |
|||
} |
|||
.footer a { |
|||
color: #ccc; |
|||
text-decoration: underline; |
|||
} |
|||
.the-icons { |
|||
font-size: 14px; |
|||
line-height: 24px; |
|||
} |
|||
.switch { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 10px; |
|||
color: #666; |
|||
} |
|||
.switch input { |
|||
margin-right: 0.3em; |
|||
} |
|||
.codesOn .i-name { |
|||
display: none; |
|||
} |
|||
.codesOn .i-code { |
|||
display: inline; |
|||
} |
|||
.i-code { |
|||
display: none; |
|||
} |
|||
@font-face { |
|||
font-family: 'fontello'; |
|||
src: url('./font/fontello.eot?10735318'); |
|||
src: url('./font/fontello.eot?10735318#iefix') format('embedded-opentype'), |
|||
url('./font/fontello.woff?10735318') format('woff'), |
|||
url('./font/fontello.ttf?10735318') format('truetype'), |
|||
url('./font/fontello.svg?10735318#fontello') format('svg'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
|
|||
.demo-icon |
|||
{ |
|||
font-family: "fontello"; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
speak: none; |
|||
|
|||
display: inline-block; |
|||
text-decoration: inherit; |
|||
width: 1em; |
|||
margin-right: .2em; |
|||
text-align: center; |
|||
/* opacity: .8; */ |
|||
|
|||
/* For safety - reset parent styles, that can break glyph codes*/ |
|||
font-variant: normal; |
|||
text-transform: none; |
|||
|
|||
/* fix buttons height, for twitter bootstrap */ |
|||
line-height: 1em; |
|||
|
|||
/* Animation center compensation - margins should be symmetric */ |
|||
/* remove if not needed */ |
|||
margin-left: .2em; |
|||
|
|||
/* You can be more comfortable with increased icons size */ |
|||
/* font-size: 120%; */ |
|||
|
|||
/* Font smoothing. That was taken from TWBS */ |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
|
|||
/* Uncomment for 3D effect */ |
|||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ |
|||
} |
|||
</style> |
|||
<link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/fontello-ie7.css"><![endif]--> |
|||
<script> |
|||
function toggleCodes(on) { |
|||
var obj = document.getElementById('icons'); |
|||
|
|||
if (on) { |
|||
obj.className += ' codesOn'; |
|||
} else { |
|||
obj.className = obj.className.replace(' codesOn', ''); |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
</head> |
|||
<body> |
|||
<div class="container header"> |
|||
<h1> |
|||
fontello |
|||
<small>font demo</small> |
|||
</h1> |
|||
<label class="switch"> |
|||
<input type="checkbox" onclick="toggleCodes(this.checked)">show codes |
|||
</label> |
|||
</div> |
|||
<div id="icons" class="container"> |
|||
<div class="row"> |
|||
<div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-pencil"></i> <span class="i-name">icon-pencil</span><span class="i-code">0xe800</span></div> |
|||
<div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-cancel"></i> <span class="i-name">icon-cancel</span><span class="i-code">0xe801</span></div> |
|||
<div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-plus"></i> <span class="i-name">icon-plus</span><span class="i-code">0xe802</span></div> |
|||
<div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-ok"></i> <span class="i-name">icon-ok</span><span class="i-code">0xe803</span></div> |
|||
</div> |
|||
<div class="row"> |
|||
<div title="Code: 0xe804" class="the-icons span3"><i class="demo-icon icon-error"></i> <span class="i-name">icon-error</span><span class="i-code">0xe804</span></div> |
|||
<div title="Code: 0xe805" class="the-icons span3"><i class="demo-icon icon-attention"></i> <span class="i-name">icon-attention</span><span class="i-code">0xe805</span></div> |
|||
</div> |
|||
</div> |
|||
<div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div> |
|||
</body> |
|||
</html> |
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
@ -0,0 +1,25 @@ |
|||
button { |
|||
font-family: inherit; |
|||
font-size: inherit; |
|||
border: none; |
|||
outline: none; |
|||
cursor: pointer; |
|||
background-color: #eee; |
|||
} |
|||
|
|||
button:hover, button:active { |
|||
background-color: #eaeaea; |
|||
} |
|||
|
|||
button:disabled { |
|||
cursor: default; |
|||
} |
|||
|
|||
.icon { |
|||
font-size: 0.8em; |
|||
} |
|||
|
|||
select { |
|||
font-size: inherit; |
|||
font-family: inherit; |
|||
} |
|||
@ -0,0 +1,12 @@ |
|||
.CodeMirror { |
|||
border-radius: 3px; |
|||
font-family: 'Inconsolata'; |
|||
} |
|||
|
|||
.CodeMirror { |
|||
height: auto; |
|||
} |
|||
|
|||
.CodeMirror-scroll { |
|||
max-height: 80vh; |
|||
} |
|||
@ -0,0 +1,74 @@ |
|||
body > footer { |
|||
background-color: #424242; |
|||
color: #ccc; |
|||
padding: 1em; |
|||
line-height: 1; |
|||
clear: fix; |
|||
z-index: 999 !important; |
|||
overflow: hidden; |
|||
|
|||
a { |
|||
color: white; |
|||
} |
|||
} |
|||
|
|||
.expanded { |
|||
height: auto; |
|||
} |
|||
|
|||
.collapsed { |
|||
height: 4em; |
|||
} |
|||
|
|||
.quickstart { |
|||
float: right; |
|||
width: 33.33%; |
|||
|
|||
button, a { |
|||
display: block; |
|||
width: calc(50% - 0.5em); |
|||
float: left; |
|||
|
|||
color: #333; |
|||
padding: 0.5em; |
|||
text-align: center; |
|||
line-height: 1; |
|||
} |
|||
|
|||
button { |
|||
margin: 0 0.5em 0 0; |
|||
} |
|||
|
|||
a { |
|||
margin: 0 0 0 0.5em; |
|||
background-color: #eee; |
|||
} |
|||
|
|||
a:hover { |
|||
background-color: #eaeaea; |
|||
} |
|||
} |
|||
|
|||
.blurb { |
|||
float: left; |
|||
width: 66.667%; |
|||
padding: 0 2em 0 0; |
|||
|
|||
h2 { |
|||
color: white; |
|||
margin: 0.2em 0 0.2em 0; |
|||
} |
|||
|
|||
p { |
|||
margin: 0.5em 0 1em 0; |
|||
} |
|||
} |
|||
|
|||
.gradient { |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 1em; |
|||
background: linear-gradient(to bottom, rgba(66,66,66,0) 0%,rgba(66,66,66,1) 100%); |
|||
} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,16 @@ |
|||
@import './layout.css'; |
|||
@import './button.css'; |
|||
@import './typography.css'; |
|||
|
|||
/* sections */ |
|||
@import './header.css'; |
|||
@import './main.css'; |
|||
@import './footer.css'; |
|||
|
|||
/* overrides */ |
|||
@import './codemirror.css'; |
|||
|
|||
/* misc */ |
|||
.clearfix { |
|||
clear: fix; |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
* { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
html, body { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
margin: 0; |
|||
} |
|||
|
|||
body { |
|||
padding: 6em 0 4em 0; |
|||
|
|||
& > header { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 6em; |
|||
} |
|||
|
|||
& > main { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
& > footer { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
/*height: 4em;*/ |
|||
} |
|||
} |
|||
@ -0,0 +1,28 @@ |
|||
body > main { |
|||
min-height: 100%; |
|||
overflow: hidden; |
|||
|
|||
.left, .right { |
|||
width: 50%; |
|||
height: 100%; |
|||
float: left; |
|||
overflow-y: auto; |
|||
padding: 1em; |
|||
} |
|||
|
|||
.left { |
|||
border-right: 1px solid #eee; |
|||
} |
|||
} |
|||
|
|||
.blurb { |
|||
h2 { |
|||
font-size: 1.4em; |
|||
margin: 1em 0 0 0; |
|||
line-height: 1; |
|||
} |
|||
|
|||
p { |
|||
margin: 1em 0; |
|||
} |
|||
} |
|||
@ -0,0 +1,78 @@ |
|||
@font-face{ |
|||
font-family: 'Voltaire'; |
|||
src: url('fonts/Voltaire/Voltaire.eot'); |
|||
src: url('fonts/Voltaire/Voltaire.eot?#iefix') format('embedded-opentype'), |
|||
url('fonts/Voltaire/Voltaire.woff') format('woff'), |
|||
url('fonts/Voltaire/Voltaire.ttf') format('truetype'), |
|||
url('fonts/Voltaire/Voltaire.svg#webfont') format('svg'); |
|||
} |
|||
|
|||
@font-face{ |
|||
font-family: 'Questrial'; |
|||
src: url('fonts/Questrial/Questrial.eot'); |
|||
src: url('fonts/Questrial/Questrial.eot?#iefix') format('embedded-opentype'), |
|||
url('fonts/Questrial/Questrial.woff') format('woff'), |
|||
url('fonts/Questrial/Questrial.ttf') format('truetype'), |
|||
url('fonts/Questrial/Questrial.svg#webfont') format('svg'); |
|||
} |
|||
|
|||
@font-face{ |
|||
font-family: 'Inconsolata'; |
|||
src: url('fonts/Inconsolata/Inconsolata-Regular.ttf') format('truetype'); |
|||
} |
|||
|
|||
@font-face{ |
|||
font-family: 'Inconsolata'; |
|||
src: url('fonts/Inconsolata/Inconsolata-Bold.ttf') format('truetype'); |
|||
font-weight: 500; |
|||
} |
|||
|
|||
body { |
|||
font-family: 'Questrial'; |
|||
color: #555; |
|||
line-height: 1.5; |
|||
-webkit-font-smoothing: antialiased; |
|||
} |
|||
|
|||
h1, h2 { |
|||
font-family: 'Questrial'; |
|||
margin: 0; |
|||
font-weight: normal; |
|||
color: #222; |
|||
} |
|||
|
|||
h1 { |
|||
color: white; |
|||
} |
|||
|
|||
h3, h4, h5, h6 { |
|||
font-family: 'Questrial'; |
|||
font-weight: 500; |
|||
margin: 0 0 0.5em 0; |
|||
color: #222; |
|||
} |
|||
|
|||
p { |
|||
margin: 0 0 1em 0; |
|||
} |
|||
|
|||
a { |
|||
color: rgb(103, 58, 183); |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:hover { |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
pre, code { |
|||
font-family: Inconsolata; |
|||
} |
|||
|
|||
strong, b { |
|||
font-weight: 500; |
|||
} |
|||
|
|||
li { |
|||
margin: 0 0 0.5em 0; |
|||
} |
|||
Loading…
Reference in new issue