Commit a7a456c4 authored by Álex Cortiñas's avatar Álex Cortiñas
Browse files

Primera versión

parent 275383d1
<!doctype html>
<html ng-app>
<head>
<script src="../angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here"/>
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html ng-app="todoApp">
<head>
<script src="../angular.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoListController as todoList">
<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
[ <a ng-click="todoList.archive()">archive</a> ]
<ul>
<li ng-repeat="todo in todoList.todos">
<label class="checkbox">
<input type="checkbox" ng-model="todo.done"/>
<span class="done-{{todo.done}}">{{todo.text}}</span>
</label>
</li>
</ul>
<form ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here"/>
<input class="btn-primary" type="submit" value="add"/>
</form>
</div>
</body>
</html>
\ No newline at end of file
a {
cursor: pointer;
color: darkblue;
text-decoration: underline;
}
.done-true {
text-decoration: line-through;
color: grey;
}
\ No newline at end of file
angular.module('todoApp', []);
angular.module('todoApp').controller('TodoListController', TodoListController);
function TodoListController($scope) {
var vm = this;
vm.texto = 'asdf';
$scope.$watch(function() {
return vm.todos.length;
}, function(newValue, oldValue) {
});
vm.todos = [
{ text:'learn angular', done:true },
{ text:'build an angular app', done:false }
];
vm.addTodo = function() {
vm.todos.push({ text:vm.todoText, done:false });
vm.todoText = '';
};
vm.remaining = function() {
var count = 0;
vm.todos.forEach(function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
vm.archive = function() {
var oldTodos = vm.todos;
vm.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) vm.todos.push(todo);
});
};
}
a {
cursor: pointer;
color: darkblue;
text-decoration: underline;
}
.done-true {
text-decoration: line-through;
color: grey;
}
\ No newline at end of file
angular.module('app', []);
\ No newline at end of file
<!doctype html>
<html ng-app="app">
<head>
<script src="lib/angular.min.js"></script>
<script src="app.js"></script>
<script src="todo-list/todo-list.component.js"></script>
<script src="todo-editor/todo-editor.component.js"></script>
<script src="todo/todo.component.js"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<h2>Todo</h2>
<todo-list></todo-list>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
angular.module('app').component('todoEditor', {
templateUrl: 'todo-editor/todo-editor.html',
bindings: {
onSubmit: '&'
},
controller: function() {
var $ctrl = this;
$ctrl.todoText = '';
$ctrl.submit = function() {
var newTodo = { text: $ctrl.todoText, done: false };
$ctrl.onSubmit({ todo: newTodo });
$ctrl.todoText = '';
};
}
})
\ No newline at end of file
<div>
<input type="text" ng-model="$ctrl.todoText" size="30" placeholder="add new todo here"/>
<button class="btn-primary" ng-click="$ctrl.submit()">add</button>
</div>
\ No newline at end of file
angular.module('app').component('todoList', {
templateUrl: 'todo-list/todo-list.html',
controller: function() {
var $ctrl = this;
$ctrl.todos = [
{ text:'learn angular', done:true },
{ text:'build an angular app', done:false }
];
$ctrl.addTodo = function(todo) {
$ctrl.todos.push(todo);
};
$ctrl.remaining = function() {
return $ctrl.todos.filter(todoIsDone).length;
};
$ctrl.archive = function() {
$ctrl.todos = $ctrl.todos.filter(todoIsDone);
};
function todoIsDone(todo) {
return !todo.done;
}
}
});
\ No newline at end of file
<span>{{$ctrl.remaining()}} of {{$ctrl.todos.length}} remaining</span>
[ <a ng-click="$ctrl.archive()">archive</a> ]
<ul>
<li ng-repeat="aTodo in $ctrl.todos">
<todo data="aTodo"></todo>
</li>
</ul>
<todo-editor on-submit="$ctrl.addTodo(todo)"></todo-editor>
angular.module('app').component('todo', {
templateUrl: 'todo/todo.html',
bindings: {
data: '='
}
});
\ No newline at end of file
<label class="checkbox">
<input type="checkbox" ng-model="$ctrl.data.done">
<span class="done-{{$ctrl.data.done}}">{{$ctrl.data.text}}</span>
</label>
\ No newline at end of file
angular.module('helloworld', ['ui.router']);
angular.module('helloworld').config(function($stateProvider) {
var helloState = {
name: 'hello',
template: '<h3>hello world!</h3>'
}
var aboutState = {
name: 'about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});
\ No newline at end of file
<html>
<head>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-ui-router.min.js"></script>
<script src="helloworld.js"></script>
<style>.active { color: red; font-weight: bold; }</style>
</head>
<body ng-app="helloworld">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
The angular-ui-router "Hello Solar System" app
\ No newline at end of file
angular.module('hellosolarsystem').component('about', {
template: '<h3>Its the UI-Router<br>Hello Solar System app!</h3>'
})
\ No newline at end of file
angular.module('hellosolarsystem').component('hello', {
template: '<h3>{{$ctrl.greeting}} solar sytem!</h3>' +
'<button ng-click="$ctrl.toggleGreeting()">toggle greeting</button>',
controller: function() {
this.greeting = 'hello';
this.toggleGreeting = function() {
this.greeting = (this.greeting == 'hello') ? 'whats up' : 'hello'
}
}
})
\ No newline at end of file
angular.module('hellosolarsystem').component('people', {
bindings: { people: '<' },
template: '<h3>Some people:</h3>' +
'<ul>' +
' <li ng-repeat="person in $ctrl.people">' +
' <a ui-sref="person({ personId: person.id })">' +
' {{person.name}}' +
' </a>' +
' </li>' +
'</ul>'
})
\ No newline at end of file
angular.module('hellosolarsystem').component('person', {
bindings: { person: '<' },
template: '<h3>A person!</h3>' +
'<div>Name: {{$ctrl.person.name}}</div>' +
'<div>Id: {{$ctrl.person.id}}</div>' +
'<div>Company: {{$ctrl.person.company}}</div>' +
'<div>Email: {{$ctrl.person.email}}</div>' +
'<div>Address: {{$ctrl.person.address}}</div>' +
'<button ui-sref="people">Close</button>'
});
\ No newline at end of file
[
{
"id": "293",
"isActive": false,
"eyeColor": "brown",
"name": "Ingrid Townsend",
"company": "JASPER",
"email": "ingridtownsend@jasper.com",
"address": "690 Charles Place, Santel, Northern Mariana Islands, 3791"
},
{
"id": "581",
"isActive": true,
"eyeColor": "blue",
"name": "Estrada Nolan",
"company": "FIBRODYNE",
"email": "estradanolan@fibrodyne.com",
"address": "317 Seeley Street, Cade, Maryland, 3976"
},
{
"id": "29",
"isActive": true,
"eyeColor": "brown",
"name": "Laverne Andrews",
"company": "INTRAWEAR",
"email": "laverneandrews@intrawear.com",
"address": "760 Provost Street, Valle, Alaska, 4628"
},
{
"id": "856",
"isActive": false,
"eyeColor": "green",
"name": "Hull Woodward",
"company": "SENMAO",
"email": "hullwoodward@senmao.com",
"address": "452 Union Avenue, Hachita, Palau, 9166"
},
{
"id": "2321",
"isActive": false,
"eyeColor": "green",
"name": "Maria Stanley",
"company": "EYERIS",
"email": "mariastanley@eyeris.com",
"address": "350 Remsen Avenue, Abrams, Ohio, 6355"
}
]
\ No newline at end of file
var myApp = angular.module('hellosolarsystem', ['ui.router', 'ui.router.visualizer']);
myApp.config(function($stateProvider) {
// An array of state definitions
var states = [
{
name: 'hello',
url: '/hello',
// Using component: instead of template:
component: 'hello'
},
{
name: 'about',
url: '/about',
component: 'about'
},
{
name: 'people',
url: '/people',
component: 'people',
// This state defines a 'people' resolve
// It delegates to the PeopleService to HTTP fetch (async)
// The people component receives this via its `bindings: `
resolve: {
people: function(PeopleService) {
return PeopleService.getAllPeople();
}
}
},
{
name: 'person',
// This state takes a URL parameter called personId
url: '/people/{personId}',
component: 'person',
// This state defines a 'person' resolve
// It delegates to the PeopleService, passing the personId parameter
resolve: {
person: function(PeopleService, $transition$) {
return PeopleService.getPerson($transition$.params().personId);
}
}
}
]
// Loop over the state definitions and register them
states.forEach(function(state) {
$stateProvider.state(state);
});
});
// To account for plunker embeds timing out, preload the async data
myApp.run(function($http) {
$http.get('data/people.json', { cache: true });
});
\ No newline at end of file
<html>
<head>
<script src="//npmcdn.com/angular@latest/angular.js"></script>
<script src="//npmcdn.com/angular-ui-router@1.0.0-alpha.4/release/angular-ui-router.js"></script>
<!-- Hello solarsystem Code -->
<script src="hellosolarsystem.js"></script>
<script src="services/people.js"></script>
<script src="components/hello.js"></script>
<script src="components/about.js"></script>
<script src="components/people.js"></script>
<script src="components/person.js"></script>
<!-- Visualizer and url -->
<link rel="stylesheet" href="styles.css">
<script src="//npmcdn.com/d3@3"></script>
<script src="//npmcdn.com/ui-router-visualizer@1"></script>
</head>
<body ng-app="hellosolarsystem">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<a ui-sref="people" ui-sref-active="active">People</a>
<ui-view></ui-view>
<uir-state-vis class="statevis" width="300" height="100"></uir-state-vis>
</body>
</html>
\ No newline at end of file
angular.module('hellosolarsystem').service('PeopleService', function($http) {
var service = {
getAllPeople: function() {
return $http.get('data/people.json', { cache: true }).then(function(resp) {
return resp.data;
});
},
getPerson: function(id) {
function personMatchesParam(person) {
return person.id === id;
}
return service.getAllPeople().then(function (people) {
return people.find(personMatchesParam)
});
}
}
return service;
})
.active { color: red; font-weight: bold }
.statevis {
position: fixed;
right: 2em;
top: 2em;
z-index: -1;
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
/*
Language: remark markdown flavor
Author: Ole Petter Bang <olepbang@gmail.com>
*/
hljs.registerLanguage('remark', function () {
return {
contains: [
{
className: 'keyword',
begin: '^#+[^\n]+',
relevance: 10
},
{
className: 'comment',
begin: '^---?'
},
{
className: 'string',
begin: '^\\w+:'
},
{
className: 'literal',
begin: '\\{\\{', end: '\\}\\}'
},
{
className: 'string',
begin: '\\.\\w+'
}
]
};
});
\ No newline at end of file
/*!
SlidePack, a simple slides generator & viewer
http://trabe.github.io/slide-pack/
Copyright (C) 2014 Trabe Soluciones S.L.
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.hljs{display:block;overflow-x:auto;padding:.5em;background:#23241f;-webkit-text-size-adjust:none}.aspectj .hljs-function,.css .hljs-function .hljs-preprocessor,.css .hljs-rules,.css .hljs-value,.hljs,.hljs-pragma,.hljs-tag{color:#f8f8f2}.hljs-emphasis,.hljs-strong,.hljs-strongemphasis{color:#a8a8a2}.alias .hljs-keyword,.hljs-blockquote,.hljs-bullet,.hljs-hexcolor,.hljs-horizontal_rule,.hljs-literal,.hljs-number,.hljs-regexp{color:#ae81ff}.css .hljs-class,.hljs-class .hljs-title:last-child,.hljs-code,.hljs-tag .hljs-value,.hljs-title{color:#a6e22e}.hljs-link_url{font-size:80%}.hljs-strong,.hljs-strongemphasis{font-weight:700}.hljs-class .hljs-title:last-child,.hljs-emphasis,.hljs-strongemphasis,.hljs-typename{font-style:italic}.alias .hljs-keyword:first-child,.css .hljs-important,.css .hljs-tag,.css .unit,.hljs-attribute,.hljs-change,.hljs-flow,.hljs-function,.hljs-header,.hljs-keyword,.hljs-symbol,.hljs-symbol .hljs-string,.hljs-tag .hljs-title,.hljs-value,.hljs-winutils,.nginx .hljs-title,.ruby .hljs-class .hljs-keyword:first-child,.ruby .hljs-function .hljs-keyword,.tex .hljs-special{color:#f92672}.css .hljs-attribute,.hljs-aspect .hljs-keyword:first-child,.hljs-class .hljs-keyword:first-child,.hljs-constant,.hljs-function .hljs-keyword,.hljs-typename{color:#66d9ef}.hljs-aspect .hljs-title,.hljs-class .hljs-title,.hljs-params,.hljs-variable{color:#f8f8f2}.apache .hljs-cbracket,.apache .hljs-tag,.css .hljs-id,.django .hljs-filter .hljs-argument,.django .hljs-template_tag,.django .hljs-variable,.hljs-addition,.hljs-attr_selector,.hljs-built_in,.hljs-envvar,.hljs-link_label,.hljs-link_url,.hljs-prompt,.hljs-pseudo,.hljs-stream,.hljs-string,.hljs-subst,.hljs-type,.ruby .hljs-class .hljs-parent,.smalltalk .hljs-array,.smalltalk .hljs-class,.smalltalk .hljs-localvars,.tex .hljs-command{color:#e6db74}.apache .hljs-sqbracket,.hljs-annotation,.hljs-comment,.hljs-decorator,.hljs-deletion,.hljs-doctype,.hljs-javadoc,.hljs-pi,.hljs-shebang,.tex .hljs-formula{color:#75715e}.coffeescript .javascript,.javascript .xml,.php .xml,.tex .hljs-formula,.xml .css,.xml .hljs-cdata,.xml .javascript,.xml .php,.xml .vbscript{opacity:.5}html:not(.override){font-size:1em;line-height:1.5em;margin:0;background:#f0f0ea}@media (min-width:600px){html:not(.override){font-size:1.4em}}:not(.override) body{color:#373737;font-family:"Segoe UI",Candara,"Bitstream Vera Sans","DejaVu Sans","Bitstream Vera Sans","Trebuchet MS",Verdana,"Verdana Ref",sans-serif}:not(.override) h1,:not(.override) h2,:not(.override) h3{font-family:Ubuntu,Verdana,sans-serif}:not(.override) code{font-family:Menlo,Monaco,Consolas,monospace;border-radius:5px}:not(.override) article,:not(.override) section{position:absolute;height:100%;width:100%;top:0;bottom:0}:not(.override) section :not(pre) code{background:#ccc}:not(.override) h1,:not(.override) h2,:not(.override) h3,:not(.override) h4,:not(.override) h5,:not(.override) h6{color:#111;font-weight:400}:not(.override) h1{font-size:2.18rem;line-height:1.2em}:not(.override) h2{font-size:1.64rem;line-height:1.2em}:not(.override) h3{font-size:1.45rem;line-height:1.2em}:not(.override) h4,:not(.override) h5,:not(.override) h6{font-size:1.18rem;line-height:1.2em}:not(.override) a,:not(.override) a:visited{color:#0074D9}:not(.override) a:hover{color:#39CCCC}:not(.override) section{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;padding:0 5%;max-width:100%}:not(.override) pre{width:100%}:not(.override) pre code{font-size:.75rem;line-height:1.3em}:not(.override) li,:not(.override) p{font-size:1rem;line-height:1.4em}:not(.override) p{text-align:left}:not(.override) section:first-child{background:#0074D9}:not(.override) section:first-child blockquote,:not(.override) section:first-child h1,:not(.override) section:first-child h2,:not(.override) section:first-child h3,:not(.override) section:first-child h4,:not(.override) section:first-child h5,:not(.override) section:first-child h6,:not(.override) section:first-child li,:not(.override) section:first-child p{color:#fff}@media print{:not(.override) section:first-child h1,:not(.override) section:first-child h2,:not(.override) section:first-child h3,:not(.override) section:first-child h4,:not(.override) section:first-child h5,:not(.override) section:first-child h6{color:#111}}@media print{:not(.override) section:first-child blockquote,:not(.override) section:first-child li,:not(.override) section:first-child p{color:#555}}:not(.override) section:first-child h1{font-size:300%;font-weight:700}:not(.override) section:last-child{background:#111}:not(.override) section:last-child h1,:not(.override) section:last-child h2,:not(.override) section:last-child h3,:not(.override) section:last-child h4,:not(.override) section:last-child h5,:not(.override) section:last-child h6{color:#fff}@media print{:not(.override) section:last-child h1,:not(.override) section:last-child h2,:not(.override) section:last-child h3,:not(.override) section:last-child h4,:not(.override) section:last-child h5,:not(.override) section:last-child h6{color:#111}}:not(.override) section:last-child blockquote,:not(.override) section:last-child li,:not(.override) section:last-child p{color:#aaa}@media print{:not(.override) section:last-child blockquote,:not(.override) section:last-child li,:not(.override) section:last-child p{color:#555}}:not(.override) section:last-child h1{font-size:300%;font-weight:700}:not(.override) .section{background:#FF851B}:not(.override) .section blockquote,:not(.override) .section h1,:not(.override) .section h2,:not(.override) .section h3,:not(.override) .section h4,:not(.override) .section h5,:not(.override) .section h6,:not(.override) .section li,:not(.override) .section p{color:#fff}@media print{:not(.override) .section h1,:not(.override) .section h2,:not(.override) .section h3,:not(.override) .section h4,:not(.override) .section h5,:not(.override) .section h6{color:#111}}@media print{:not(.override) .section blockquote,:not(.override) .section li,:not(.override) .section p{color:#555}}:not(.override) .section h1{font-weight:700}:not(.override) .two-columns ol,:not(.override) .two-columns ul{-webkit-column-count:2;-moz-column-count:2;column-count:2}:not(.override) .no-bullet ul li{list-style:none}:not(.override) .quote{background:#222;position:relative}:not(.override) .quote blockquote,:not(.override) .quote li,:not(.override) .quote p{color:#fff}@media print{:not(.override) .quote blockquote,:not(.override) .quote li,:not(.override) .quote p{color:#555}}:not(.override) .quote blockquote{font-size:130%;text-align:left;margin:0;padding:0}:not(.override) cite{text-align:right;display:block;margin-top:1em;color:#aaa;font-size:.8em}@media screen{:not(.override) .full-image>*{z-index:15}:not(.override) .full-image img{z-index:0;min-height:100%;min-width:1024px;width:100%;height:auto;position:fixed;top:0;left:0}:not(.override) .full-image-overlay{background:#111}:not(.override) .full-image-overlay img{opacity:.5}:not(.override) .full-image-overlay *{color:#fff;text-shadow:0 1px 1px #000}:not(.override) .full-image-overlay a,:not(.override) .full-image-overlay code{text-shadow:none}:not(.override) .full-image-overlay a{color:#fff}:not(.override) .full-image-overlay code{color:#111}}@media (min-width:600px){:not(.override) section h1,:not(.override) section h2,:not(.override) section h3,:not(.override) section h4,:not(.override) section h5,:not(.override) section h6,:not(.override) section>ol,:not(.override) section>p,:not(.override) section>pre,:not(.override) section>ul{max-width:800px}:not(.override) section>ol,:not(.override) section>ul{list-style-position:inside;padding-left:0}:not(.override) section>ol ol,:not(.override) section>ol ul,:not(.override) section>ul ol,:not(.override) section>ul ul{padding-left:2em}}:not(.override) table td,:not(.override) table th{line-height:1.4em;padding:.2em .5em}:not(.override) table thead tr:last-child th{border-bottom:2px solid #ddd}:not(.override) table tbody tr:not(:last-child) td{border-bottom:1px solid #ddd}:not(.override) hr{display:none;border-bottom:1px solid #aaa}[data-slide-pack-processed],[data-slide-pack],article section:not(.active){display:none}section{text-align:center;margin:0 auto;max-width:800px;padding:1em}section code,section li{text-align:left}nav a{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:2rem;background:#111;color:#fff!important;line-height:100vh;width:10vw;height:100vh;position:absolute;z-index:100;cursor:pointer;text-align:center;opacity:0;transition:opacity .5s ease-in;right:0}nav a:hover{opacity:.7}nav a:active{color:#111!important}nav a:first-child{left:0}.mobile nav a{width:30vw}.mobile nav a:hover{opacity:0}progress{position:absolute;top:0;left:0;width:100vw;-webkit-appearance:none;appearance:none;height:3px;z-index:100;opacity:.3}progress[value]::-webkit-progress-bar{background-color:#fff}progress[value]::-webkit-progress-value{background-color:#111}@page{size:A4;margin:1cm 1.5cm}@media print{article{position:relative!important}section{box-sizing:border-box;height:auto;page-break-inside:avoid;position:relative!important;padding-bottom:2.5em}section:after{content:"";width:100%;display:block;border-bottom:1px solid #ddd;padding-bottom:2.5em}section:not(.active){display:block!important}img{max-width:100%!important}section code{font-size:10pt!important}}
\ No newline at end of file
This diff is collapsed.
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body {
font-family: 'Droid Serif';
}
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: 400;
margin-bottom: 0;