No OneTemporary
Actions

Size

33 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/frontend/lib/components/cheatsheet.jsx b/frontend/lib/components/cheatsheet.jsx
	index 68c25d8..5b13b98 100644
	--- a/frontend/lib/components/cheatsheet.jsx
	+++ b/frontend/lib/components/cheatsheet.jsx
	@@ -1,63 +1,63 @@
	var React = require('react');
	var PropTypes = React.PropTypes;
	var edits = require('../../../common/text-edits.js').edits;


	var Cheatsheet = React.createClass({
	loadCheatsheet: function() {
	var shortcuts = [];

	for (var key in edits) {
	var current_shortcut = [];
	var keys = edits[key].desc.split('+');
	if (key !== 'insert_char') {
	if (keys.length > 1) {
	for (var i = 0; i < keys.length; i++) {
	current_shortcut.push(<kbd key={i} className="key">{keys[i]}</kbd>)
	if (keys.length - i > 1) current_shortcut.push(' + ')
	}
	} else current_shortcut = [<kbd className="key">{keys[0]}</kbd>]
	shortcuts.push({keys: current_shortcut, description: edits[key].spec});
	}
	}
	shortcuts = shortcuts.sort(function(a, b){
	return a.keys.length > b.keys.length;
	});
	return shortcuts;
	},
	render: function() {

	var shortcuts = this.loadCheatsheet().map(function(shortcut, index){
	return <tr key={index}>
	<td>{shortcut.keys}</td>
	<td>{shortcut.description}</td>
	</tr>
	});
	return (
	<div>
	{(this.props.showCheatsheet === true)
	? <div id="overlay">
	<div>
	<div className="shortcuts">
	- <a className="cancel" onClick={this.props.coverCheatsheet}>
	+ <button className="cancel" onClick={this.props.coverCheatsheet}>
	x
	- </a>
	+ </button>
	<div className="content">
	<h2 className="descripiton">Shortcuts</h2>
	<table>
	<tbody>
	{shortcuts}
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</div>
	: null
	}
	</div>
	);
	}
	});

	module.exports = Cheatsheet;
	diff --git a/frontend/lib/components/container.jsx b/frontend/lib/components/container.jsx
	index 45c10bf..64c3229 100644
	--- a/frontend/lib/components/container.jsx
	+++ b/frontend/lib/components/container.jsx
	@@ -1,58 +1,58 @@
	var React = require('react');
	var PropTypes = React.PropTypes;
	var ReactRouter = require('react-router')
	var Link = ReactRouter.Link;
	var TypingGolf = require('../typing-golf-components.js');

	var UserData = require("../sealious-mixins/user-data.jsx");

	var Container = React.createClass({
	mixins: [UserData],
	getInitialState: function() {
	return {
	showCheatsheet: false
	};
	},
	coverCheatsheet: function() {
	var new_value = (this.state.showCheatsheet == true) ? false : true;
	this.setState({ showCheatsheet : new_value });
	},

	render: function() {
	var new_task_option = <div></div>;
	if(this.state.logged_in){
	new_task_option = <div className="nav-item">
	<Link className="link" to='new-task' activeClassName="active" title="create a new task">new task</Link>
	</div>
	}
	return (
	<div className="main-column">
	<div className="logo-item">
	<a href="#/" title="go to home"><span className="logo animated flipInX">typing·golf</span></a>
	</div>
	<div className="nav">
	<div className="nav-item">
	<Link className="link" to='tasks' activeClassName="active" title="show a list of all available tasks">tasks</Link>
	</div>
	<div className="nav-item">
	<Link className="link" to='ranking' activeClassName="active" title="view best scores so far">ranking</Link>
	</div>
	{new_task_option}
	</div>
	<div className="main-view">
	{this.props.children}
	</div>

	<TypingGolf.Cheatsheet
	showCheatsheet={this.state.showCheatsheet}
	coverCheatsheet={this.coverCheatsheet}/>
	- <a
	+ <button
	className="cheatsheet-box"
	- onClick={this.coverCheatsheet}>?</a>
	+ onClick={this.coverCheatsheet}>?</button>
	</div>
	);
	}

	});

	module.exports = Container;
	diff --git a/frontend/mockup/css/style.css b/frontend/mockup/css/style.css
	index c8d2609..10c7264 100644
	--- a/frontend/mockup/css/style.css
	+++ b/frontend/mockup/css/style.css
	@@ -1,397 +1,402 @@
	* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	text-rendering: optimizelegibility;
	font-smooth: auto;
	-webkit-font-smoothing: auto;
	}

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	main,
	nav,
	section,
	summary {
	display: block;
	}

	body {
	font-family: "Source Sans Pro Regular", "Open Sans", "Liberation Sans",
	"Nimbus Sans L", "Trebuchet MS", "Arial";
	font-weight: 300;
	color: hsl(0, 0%, 27%);
	/background: #E1E3E4;/
	/background-color: #f1f1f1;/
	/background: hsl(52, 68%, 72%);/
	/background: #F9FFCB;/
	/background: #fff;/
	/background: #f4f4f8;/
	background-image: url(../images/bckgd_body.png);
	background-repeat: repeat;
	background-attachment: fixed;
	}

	#app {
	/padding-top: 1rem;/
	margin: 0 auto;
	width: 64rem;
	background-color: #fff;
	}

	.nav {
	position: fixed;
	width: 16rem;
	left: 0;
	top: 0;
	background-color: #fff;
	padding: 0;
	display: inline-block;
	}

	.flex-container {
	/! height: 100%; /
	padding: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
	background-color: hsl(0, 0%, 100%);
	}
	.link {
	color: hsl(231, 18%, 66%);
	}

	.nav-item .link {
	width: 100%;
	line-height: 2.8rem;
	font-size: 1.4rem;
	padding-left: 0.7rem;
	vertical-align: middle;
	}

	.nav-item .link:hover {
	background-color: #f9ffcb;
	}

	.logo-item {
	background-color: hsl(265, 6%, 42%);
	font-size: 1.6rem;
	text-align: center;
	padding: 1.6rem;
	}
	.logo {
	font-family: "Lobster";
	font-size: 1.8rem;
	color: #fff;
	}

	#overlay {
	/visibility: hidden;/
	position: absolute;
	z-index: 1000;
	top: 4rem;
	left: 0;
	width: 100%;
	}

	#overlay .flex-container,
	#overlay .shortcuts {
	display: table;
	margin: 0 auto;
	}

	#overlay .cancel {
	position: absolute;
	top: 1rem;
	font-size: 2rem;
	font-family: "Inconsolata", monospace;
	vertical-align: bottom;
	cursor: pointer;
	width: 2rem;
	height: 2rem;
	+ padding: 0rem;
	+ background-color: transparent;
	+ border-style: none;
	color: white;
	}

	img {
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: contain;
	height: 3rem;
	width: 3rem;
	cursor: pointer;
	padding: 0.4rem;
	}

	.cheatsheet-box {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	height: 4.6rem;
	width: 4.6rem;
	z-index: 1;
	display: inline;
	background-color: #48a0dc;
	border-radius: 50%;
	font-size: 4rem;
	margin: 0 auto;
	vertical-align: middle;
	text-align: center;
	line-height: 4.6rem;
	+ padding: 0rem;
	+ border-style: none;
	color: #fff;
	}

	.content {
	width: 100%;
	padding: 1rem;
	}

	#overlay .content {
	height: 80vh;
	overflow-y: scroll;
	}

	.end-text,
	.descripiton {
	font-size: 1.8rem;
	line-height: 2rem;
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
	color: hsl(231, 18%, 30%);
	}

	.descripiton {
	text-align: center;
	color: #fff;
	}

	.end-text {
	font-family: "Inconsolata", monospace;
	}

	.end-text-title,
	.end-text-details {
	font-size: 1.4rem;
	text-align: center;
	color: hsl(231, 18%, 66%);
	}

	.row {
	width: auto;
	}

	.shortcuts,
	.counters {
	max-width: 60rem;
	margin: 0 auto;
	background: #282a36;
	color: #fff;
	border-radius: 0.4rem;
	/! border: 2rem solid transparent; /
	padding: 2rem;
	}

	table {
	margin-top: 1rem;
	margin-bottom: 1rem;
	border-collapse: collapse;
	}

	table,
	thead {
	/border: 1px dashed #ddd;/
	}
	/*
	tr:nth-child(2n+1) {
	background-color: #F5F5F5;
	}*/

	td {
	/border-left: 1px dashed #ddd;/
	/border-bottom: 1px dashed #ddd;/
	min-width: 12rem;
	padding-bottom: 1rem;
	}

	td:nth-child(2n + 1) {
	font-weight: bold;
	text-align: right;
	padding-right: 1rem;
	}

	thead td {
	font-weight: bold;
	}

	.counter {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	margin: 1rem;
	background-color: hsl(231, 18%, 90%);
	}

	.key {
	padding: 0.4rem;
	color: #000;
	font-family: "Inconsolata", monospace;
	background: hsl(265, 6%, 50%);
	}

	a {
	text-decoration: none;
	display: inline-block;
	transition: all 400ms;
	color: #fff;
	}

	a:hover {
	/color: hsl(231, 18%, 66%);/
	/border-bottom: solid 0.05rem hsl(54, 96%, 85%);/
	}

	a:active {
	color: hsl(231, 18%, 66%);
	}

	.input {
	padding: 1rem;
	font-size: 1.8rem;
	color: hsl(231, 10%, 37%);
	margin: 0 0px 0px;
	width: 100%;
	height: auto;
	overflow: visible;
	background-color: hsl(66, 100%, 90%);
	border: 0px solid hsl(0, 0%, 100%);
	transition: all 400ms;
	font-family: "Inconsolata", monospace;
	resize: none;
	}

	@-webkit-keyframes fadeIn {
	0% {
	opacity: 0%;
	}
	50% {
	opacity: 50%;
	}
	100% {
	opacity: 100%;
	}
	}

	@-moz-keyframes fadeIn {
	0% {
	opacity: 0%;
	}
	50% {
	opacity: 50%;
	}
	100% {
	opacity: 100%;
	}
	}

	@-ms-keyframes fadeIn {
	0% {
	opacity: 0%;
	}
	50% {
	opacity: 50%;
	}
	100% {
	opacity: 100%;
	}
	}

	.end-text {
	-webkit-animation: fadeIn 1.6s 1;
	-moz-animation: fadeIn 1.6s 1;
	-ms-animation: fadeIn 1.6s 1;
	}

	footer {
	position: fixed;
	bottom: 0;
	padding-top: 1rem;
	padding-bottom: 1rem;
	text-align: center;
	width: 100%;
	/bottom: 1rem;/
	/color: hsl(230, 18%, 86%);/
	/background: #FFF;/
	}

	/for burger menu/
	.bm-burger-button {
	position: fixed;
	width: 36px;
	height: 30px;
	left: 36px;
	top: 36px;
	}

	/* Color/shape of burger icon bars */
	.bm-burger-bars {
	background: hsl(0, 10%, 45%);
	}

	/* Position and sizing of clickable cross button */
	.bm-cross-button {
	height: 24px;
	width: 24px;
	}

	/* Color/shape of close button cross */
	.bm-cross {
	background: hsl(204, 8%, 76%);
	}

	/* General sidebar styles */
	.bm-menu {
	background: hsl(0, 10%, 15%);
	padding: 2.5em 1.5em 0;
	font-size: 1.15em;
	}

	/* Morph shape necessary with bubble or elastic */
	.bm-morph-shape {
	fill: hsl(228, 12%, 24%);
	}

	/* Wrapper for item list */
	.bm-item-list {
	color: hsl(54, 7%, 70%);
	padding: 0.8em;
	}

	/* Styling of overlay */
	.bm-overlay {
	background: rgba(0, 0, 0, 0.3);
	}

	@media all and (max-width: 80rem) {
	.nav {
	position: relative;
	width: 100%;
	left: 0;
	top: 0;
	background-color: #fff;
	padding: 0;
	display: table;
	}
	#app {
	width: 100%;
	}
	}
	diff --git a/frontend/mockup/index.html b/frontend/mockup/index.html
	index 3921be1..1fe5f70 100644
	--- a/frontend/mockup/index.html
	+++ b/frontend/mockup/index.html
	@@ -1,270 +1,270 @@
	<!DOCTYPE html>
	<html>

	<head>
	<title>typing…·golf</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link href="css/animate.min.css" rel="stylesheet" type="text/css">
	<link href="css/fonts.css" rel="stylesheet" type="text/css">
	<meta name="robots" content="all" />
	<meta name="viewport" content="width=device-width" />
	</head>
	<body>
	<div id="app">
	<div class="nav">
	<div class="logo-item">
	<div class="logo animated flipInY">typing…·golf</div>
	</div>
	<div class="nav-item">
	<a href="index.html" class="link">random task </a>
	</div>
	<div class="nav-item">
	<a href="ranking.html" class="link">ranking</a>
	</div>
	</div>
	<div class="flex-container">
	<div class="content">
	<p class="end-text-title">turn this ⤵</p>
	</div>
	</div>
	<div class="flex-container">
	<textarea spellcheck='false' class="input" value="begin-text"></textarea>
	</div>
	<div class="flex-container">
	<div class="content">
	<p class="end-text-details">into this ⤵</p>
	<p class="end-text">Laboriosam consequuntur non eos aliquid nesciunt ex molestiae eligendi et. Deserunt placeat</p>
	<p class="end-text-details">
	in 6 steps
	</p>
	</div>
	</div>
	<div class="cheatsheet-box">
	- <a href="#" onclick="overlay()" class="link">?</a>
	+ <button href="#" onclick="overlay()" class="link">?</button>
	</div>
	<div id="overlay">
	<div>
	<div class="shortcuts">
	- <div class="cancel" onclick="overlay()">
	+ <button class="cancel" onclick="overlay()">
	x
	- </div>
	+ </button>
	<div class="content">
	<p class="descripiton">Shortcuts</p>
	</div>
	<table>
	<tbody>
	<tr>
	<td>
	<kbd class="key">BACKSPACE</kbd>
	</td>
	<td>
	Deletes one character to the left of caret.
	</td>
	<tr>
	<td>
	<kbd class="key">DELETE</kbd>
	</td>
	<td>
	Deletes one character to the right of caret.
	</td>
	</tr>


	<tr>
	<td>
	<kbd class="key">HOME</kbd>
	</td>
	<td>
	Moves to beginning of the line.
	</td>

	</tr>
	<tr>
	<td>
	<kbd class="key">END</kbd>
	</td>
	<td>
	Moves to end of the line.
	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">SHIFT</kbd> + <kbd class="key">HOME</kbd>
	</td>
	<td>
	Selects all characters from caret position to beginning of the line.
	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">SHIFT</kbd> + <kbd class="key">END</kbd>
	</td>
	<td>
	Selects characters from caret position to end of the line.
	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">CTRL</kbd> + <kbd class="key">BACKSPACE</kbd>
	</td>
	<td>
	Deletes one word or punctuation mark to the left of caret.
	</td>

	</tr>

	<tr>
	<td>
	<kbd class="key">CTRL</kbd> + <kbd class="key">DELETE</kbd>
	</td>
	<td>
	Deletes one word or punctuation mark to the right of caret.
	</td>

	</tr>
	<tr>
	<td>
	<kbd class="key">CTRL</kbd> + <kbd class="key">←</kbd>
	</td>
	<td>
	Depending on the caret position moves

	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">CTRL</kbd> + <kbd class="key">→</kbd>

	</td>
	<td>
	Depending on the caret position moves to

	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">CTRL</kbd> + <kbd class="key">A</kbd>

	</td>
	<td>
	Selects all content.

	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">SHIFT</kbd> + <kbd class="key">↑</kbd>
	</td>
	<td>
	Depending on the caret position moves t

	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">SHIFT</kbd> + <kbd class="key">↓</kbd>

	</td>
	<td>
	Depending on the caret position moves

	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">SHIFT</kbd> + <kbd class="key">→</kbd>
	</td>
	<td>
	Depending on the caret position moves t

	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">SHIFT</kbd> + <kbd class="key">←</kbd>

	</td>
	<td>
	Depending on the caret position moves

	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">SHIFT</kbd> + <kbd class="key">CTRL</kbd> + <kbd class="key">→</kbd>
	</td>
	<td>
	Depending on the caret position moves t

	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">SHIFT</kbd> + <kbd class="key">CTRL</kbd> + <kbd class="key">←</kbd>

	</td>
	<td>
	Depending on the caret position moves

	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">CTRL</kbd> + <kbd class="key">HOME</kbd>

	</td>
	<td>
	Depending on the caret position moves

	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">CTRL</kbd> + <kbd class="key">END</kbd>

	</td>
	<td>
	Depending on the caret position moves

	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">CTRL</kbd> + <kbd class="key">SHIFT</kbd> + <kbd class="key">HOME</kbd>

	</td>
	<td>
	Depending on the caret position moves

	</td>
	</tr>
	<tr>
	<td>
	<kbd class="key">CTRL</kbd> + <kbd class="key">SHIFT</kbd> + <kbd class="key">END</kbd>

	</td>
	<td>
	Depending on the caret position moves

	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</div>
	</div>
	<footer>
	made by a 🏌 from <a class="link" href="http://sealcode.org">sealcode.org</a>
	</footer>
	<script>
	function overlay() {
	el = document.getElementById("overlay");
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
	}
	</script>
	</body>

	</html>
	diff --git a/frontend/public/css/style.css b/frontend/public/css/style.css
	index fd6c5e5..8858527 100644
	--- a/frontend/public/css/style.css
	+++ b/frontend/public/css/style.css
	@@ -1,770 +1,779 @@
	-@keyframes enter{
	+@keyframes enter {
	0% {
	opacity: 0;
	transform: scale(0.9);
	}
	- 80%{
	+ 80% {
	opacity: 1;
	transform: scale(1);
	}
	}

	-
	* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	text-rendering: optimizelegibility;
	font-smooth: auto;
	-webkit-font-smoothing: auto;
	}

	-html{
	+html {
	font-size: 1em;
	}

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	main,
	nav,
	section,
	summary {
	display: block;
	}

	body {
	- font-family: 'Source Sans Pro Regular', 'Open Sans', 'Liberation Sans', 'Nimbus Sans L', 'Trebuchet MS', 'Arial';
	+ font-family: "Source Sans Pro Regular", "Open Sans", "Liberation Sans",
	+ "Nimbus Sans L", "Trebuchet MS", "Arial";
	font-weight: 300;
	padding: 0;
	/color: hsl(0, 0%, 27%);/
	color: #575757;
	background-repeat: repeat;
	background-attachment: fixed;
	- display: flex;
	- flex-flow: column nowrap;
	- min-height: 100vh;
	+ display: flex;
	+ flex-flow: column nowrap;
	+ min-height: 100vh;
	}

	-h1, h2, h3, p, span{
	+h1,
	+h2,
	+h3,
	+p,
	+span {
	color: HSL(0, 0%, 35%);
	}

	h2 {
	height: 3rem;
	line-height: 3rem;
	border-bottom: 1px solid HSL(0, 0%, 85%);
	font-size: 2rem;
	margin-bottom: 1rem;
	}

	-.sweet-alert h2{
	+.sweet-alert h2 {
	border: 0;
	}

	h2.complex-header {
	- display:flex;
	+ display: flex;
	}

	h2.complex-header span {
	- font-size:2rem;
	- line-height:3rem;
	- flex-grow:1;
	+ font-size: 2rem;
	+ line-height: 3rem;
	+ flex-grow: 1;
	}

	-h3{
	+h3 {
	line-height: 2rem;
	font-size: 1.25rem;
	}

	h3.complex-header {
	display: flex;
	}

	-h3.complex-header span{
	+h3.complex-header span {
	line-height: 2rem;
	font-size: 1.25rem;
	flex-grow: 1;
	}

	#app {
	margin: 0 auto;
	width: 64rem;
	padding-bottom: 4rem;
	flex-grow: 1;
	}

	-.main-view{
	- background-color: #FFF;
	+.main-view {
	+ background-color: #fff;
	background-image: url(../images/bckgd_body.png);
	background-position: calc(50% + 8px) 0%;
	flex-grow: 1;
	- position:relative;
	+ position: relative;
	}

	.flex-container {
	padding: 0 1rem;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
	}
	-.link{
	-
	+.link {
	}

	-.nav-item .link{
	+.nav-item .link {
	width: 100%;
	line-height: 2.8rem;
	font-size: 1.4rem;
	vertical-align: middle;
	color: hsl(231, 18%, 66%);
	padding: 0.2rem 1rem;
	- outline: .25rem solit transparent;
	+ outline: 0.25rem solit transparent;
	color: white;
	}

	.nav-item .link.active {
	background-color: white;
	color: inherit;
	- outline: .25rem solid white;
	+ outline: 0.25rem solid white;
	box-shadow: 0 -3px 21px rgba(0, 0, 0, 0.35);
	}

	-.nav-item .link:hover{
	+.nav-item .link:hover {
	background-color: rgba(255, 255, 255, 0.3);
	}

	.nav-item .link.active:hover {
	background-color: white;
	}

	.logo-item {
	background-color: hsl(265, 6%, 42%);
	font-size: 1.6rem;
	text-align: center;
	padding: 1.6rem;
	}
	.logo {
	- font-family: 'Lobster';
	+ font-family: "Lobster";
	font-size: 1.8rem;
	color: #fff;
	}

	#overlay {
	position: absolute;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	margin-top: 4rem;
	}

	#overlay .flex-container,
	-#overlay .shortcuts{
	+#overlay .shortcuts {
	display: table;
	margin: 0 auto;
	}

	-#overlay .cancel{
	+#overlay .cancel {
	position: absolute;
	top: 1rem;
	font-size: 2rem;
	- font-family: 'Inconsolata', monospace;
	+ font-family: "Inconsolata", monospace;
	vertical-align: bottom;
	cursor: pointer;
	width: 2rem;
	height: 2rem;
	+ background-color: transparent;
	+ border-style: none;
	color: white;
	}

	#overlay table td:first-child {
	white-space: nowrap;
	font-size: 1rem;
	}

	#overlay table td:nth-child(2) {
	- line-height:1.5rem;
	+ line-height: 1.5rem;
	font-size: 1rem;
	}

	-img{
	+img {
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: contain;
	height: 3rem;
	width: 3rem;
	cursor: pointer;
	padding: 0.4rem;
	}

	-.cheatsheet-box{
	+.cheatsheet-box {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	height: 4.6rem;
	width: 4.6rem;
	z-index: 1;
	display: inline;
	- background-color: #48A0DC;
	+ background-color: #48a0dc;
	border-radius: 50%;
	font-size: 4rem;
	margin: 0 auto;
	vertical-align: middle;
	text-align: center;
	line-height: 4.6rem;
	- color: #FFF;
	+ color: #fff;
	cursor: pointer;
	+ padding: 0rem;
	+ border-style: none;
	+ color: #fff;
	}

	.content {
	width: 100%;
	padding: 1rem;
	- max-width:40rem;
	+ max-width: 40rem;
	margin: 0 auto;
	}

	-.shortcuts .content{
	- max-width:60rem;
	+.shortcuts .content {
	+ max-width: 60rem;
	}

	-#overlay .content{
	+#overlay .content {
	height: calc(100vh - 10rem);
	overflow-y: scroll;
	padding: 0;
	}

	-#overlay table{
	+#overlay table {
	max-width: 45rem;
	margin: 0 4rem;
	}

	.end-text {
	- padding: 1rem!important;
	+ padding: 1rem !important;
	background-color: white;
	}

	.end-text,
	.descripiton {
	font-size: 1.8rem;
	line-height: 2rem;
	padding-top: 0;
	padding-bottom: 1.2rem;
	color: hsl(231, 18%, 30%);
	}

	.descripiton {
	text-align: center;
	- color: #fff
	+ color: #fff;
	}

	.end-text-title,
	.end-text-details {
	font-size: 1.4rem;
	text-align: center;
	color: hsl(231, 18%, 66%);
	}

	-.selection{
	+.selection {
	background-color: rgb(72, 160, 220);
	- color: #FFF;
	+ color: #fff;
	font-size: inherit;
	background-image: url(../images/selection-right.png);
	}

	-.selection.b{
	- background-image: url(../images/selection-left.png);
	+.selection.b {
	+ background-image: url(../images/selection-left.png);
	}

	-
	.blink {
	- /* -webkit-animation: blink 1s linear infinite; */
	- /* -moz-animation: blink 1s linear infinite; */
	- /* -ms-animation: blink 1s linear infinite; */
	- /* -o-animation: blink 1s linear infinite; */
	- /* animation: blink 1s linear infinite; */
	+ /* -webkit-animation: blink 1s linear infinite; */
	+ /* -moz-animation: blink 1s linear infinite; */
	+ /* -ms-animation: blink 1s linear infinite; */
	+ /* -o-animation: blink 1s linear infinite; */
	+ /* animation: blink 1s linear infinite; */
	height: 2rem;
	line-height: 2rem;
	color: rgb(72, 160, 220);
	- background-color: rgb(72, 160, 220);
	- width: 0.2rem;
	- display: inline-block;
	+ background-color: rgb(72, 160, 220);
	+ width: 0.2rem;
	+ display: inline-block;
	vertical-align: top;
	}

	@keyframes blink {
	- 0% { opacity: 0.0; }
	- 99% { opacity: 0.99; }
	+ 0% {
	+ opacity: 0;
	+ }
	+ 99% {
	+ opacity: 0.99;
	+ }
	}

	.row {
	width: auto;
	}

	-.shortcuts, .counters {
	+.shortcuts,
	+.counters {
	/! max-width: 60rem; /
	margin: 0 auto;
	background: HSL(268, 6%, 28%);
	color: #fff;
	border-radius: 0.4rem;
	padding: 2rem;
	}

	-table{
	+table {
	margin-top: 1rem;
	margin-bottom: 1rem;
	border-collapse: collapse;
	}

	-table, thead{
	+table,
	+thead {
	}

	td {
	- min-width: 12rem;
	+ min-width: 12rem;
	padding-bottom: 1rem;
	}

	-td:nth-child(2n+1){
	+td:nth-child(2n + 1) {
	font-weight: bold;
	text-align: right;
	padding-right: 1rem;
	}

	-
	-thead td{
	+thead td {
	font-weight: bold;
	}

	-.counter{
	+.counter {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	margin: 1rem;
	background-color: hsl(231, 18%, 90%);
	}

	-.key{
	+.key {
	line-height: 1rem;
	height: 1.5rem;
	- margin: .25rem 0;
	- font-size:.8rem;
	- display:inline-block;
	- padding: 0 .5rem;
	- color: #FFF;
	- font-family: 'Inconsolata', monospace;
	+ margin: 0.25rem 0;
	+ font-size: 0.8rem;
	+ display: inline-block;
	+ padding: 0 0.5rem;
	+ color: #fff;
	+ font-family: "Inconsolata", monospace;
	font-weight: bold;
	border-style: outset;
	background: hsl(265, 6%, 40%);
	- border-color: hsl(265, 6%, 40%);
	+ border-color: hsl(265, 6%, 40%);
	}

	a {
	text-decoration: none;
	display: inline-block;
	transition: all 400ms;
	color: hsl(0, 0%, 27%);
	cursor: pointer;
	}

	a:hover {
	-
	}

	a:active {
	color: hsl(231, 18%, 66%);
	}

	-
	-.input, .end-text{
	+.input,
	+.end-text {
	min-height: 5rem;
	margin: 0;
	- font-family: 'Inconsolata', monospace;
	+ font-family: "Inconsolata", monospace;
	border: 1px solid hsl(0, 0%, 80%);
	width: 100%;
	max-wdth: none;
	overflow-y: auto;
	white-space: pre;
	font-size: 1.2rem;
	}

	.input {
	padding: 1rem;
	line-height: 2rem;
	color: hsl(231, 10%, 37%);
	overflow: visible;
	- background-color: #F9FFCB;
	+ background-color: #f9ffcb;
	transition: all 400ms;
	resize: none;
	- vertical-align:bottom;
	+ vertical-align: bottom;
	}

	@-webkit-keyframes fadeIn {
	0% {
	opacity: 0%;
	}
	50% {
	opacity: 50%;
	}
	100% {
	opacity: 100%;
	}
	}

	@-moz-keyframes fadeIn {
	0% {
	opacity: 0%;
	}
	50% {
	opacity: 50%;
	}
	100% {
	opacity: 100%;
	}
	}

	@-ms-keyframes fadeIn {
	0% {
	opacity: 0%;
	}
	50% {
	opacity: 50%;
	}
	100% {
	opacity: 100%;
	}
	}

	.end-text {
	/*-webkit-animation: fadeIn 1.6s 1;
	-moz-animation: fadeIn 1.6s 1;
	-ms-animation: fadeIn 1.6s 1;*/
	}

	footer {
	bottom: 0;
	padding-top: 1rem;
	padding-bottom: 1rem;
	- text-align: center;;
	+ text-align: center;
	width: 100%;
	font-size: 1rem;
	}

	-footer *{
	+footer * {
	font-size: 1rem;
	}

	@media all and (max-width: 80rem) {
	/For presentation/
	}

	-.nav{
	+.nav {
	position: relative;
	width: 100%;
	left: 0;
	top: 0;
	padding: 0;
	display: flex;
	background-color: hsl(268, 6%, 60%);
	justify-content: center;
	}
	-#app{
	+#app {
	width: 100%;
	}

	-.steps-list{
	+.steps-list {
	padding-left: 0;
	}

	-.steps-list li{
	+.steps-list li {
	display: inline-block;
	- margin-right: .5rem;
	+ margin-right: 0.5rem;
	}

	-.tasklist{
	+.tasklist {
	list-style: none;
	padding: 0 1rem;
	max-width: none;
	}

	-.task-li{
	+.task-li {
	font-size: 1.5rem;
	line-height: 2rem;
	background-color: white;
	border: 1px solid #bcbcbc;
	margin-bottom: 1rem;
	box-sizing: border-box;
	height: 4rem;
	box-shadow: 2px 2px 1px rgba(106, 100, 113, 0.1);
	transition: transform 100ms;
	max-width: none;
	animation: enter 400ms;
	animation-fill-mode: backwards;
	- animation-timing-function: cubic-bezier(.17,.22,.7,3);
	+ animation-timing-function: cubic-bezier(0.17, 0.22, 0.7, 3);
	}

	-.task-li:hover{
	+.task-li:hover {
	transform: scale(1.05);
	}

	-.tasklist li a{
	+.tasklist li a {
	padding: 1rem;
	display: inline-block;
	height: 100%;
	width: 100%;
	line-height: 2rem;
	color: hsl(268, 6%, 45%);
	- font-weight:bold;
	+ font-weight: bold;
	font-size: 1.5rem;
	}

	-input.task-title{
	+input.task-title {
	height: 3rem;
	font-size: 1.3rem;
	}

	button {
	font-size: 1rem;
	height: 2rem;
	padding-left: 1rem;
	padding-right: 1rem;
	}

	-.button-wrapper{
	- line-height:3rem;
	- height:3rem;
	+.button-wrapper {
	+ line-height: 3rem;
	+ height: 3rem;
	}

	-.main-column{
	- display:flex;
	+.main-column {
	+ display: flex;
	flex-flow: column nowrap;
	height: 100%;
	- min-height: calc(100vh - 7rem);
	+ min-height: calc(100vh - 7rem);
	}

	-.steps-count{
	+.steps-count {
	text-align: right;
	font-weight: normal;
	}

	-select{
	+select {
	height: 2rem;
	margin: 0px;
	line-height: 2rem;
	font-size: 0.9rem;
	padding: 0 1rem;
	}

	-.resource-list{
	+.resource-list {
	list-style: none;
	outline: 1rem solid rgb(106, 100, 113);
	margin-left: 1rem;
	padding-left: 0;
	}

	-.ranking-entry{
	+.ranking-entry {
	max-width: 32rem;
	background-color: rgba(255, 255, 255, 0.67);
	border-bottom: 1px solid #797979;
	margin-bottom: -1px;
	line-height: 3rem;
	font-size: 1.5rem;
	padding: 1rem;
	- display:flex;
	+ display: flex;
	animation: enter 200ms;
	animation-fill-mode: backwards;
	}

	-.ranking-entry:last-child{
	+.ranking-entry:last-child {
	border: 0;
	margin-bottom: 0;
	}

	-.ranking-entry span{
	+.ranking-entry span {
	line-height: 3rem;
	font-size: 1.5rem;
	}

	.ranking-entry .nick {
	flex-grow: 1;
	}

	.ranking-entry .index {
	width: 3rem;
	}

	-.ranking-entry .score{
	- text-align:right;
	+.ranking-entry .score {
	+ text-align: right;
	}

	-.ranking-container{
	- height:100%;
	+.ranking-container {
	+ height: 100%;
	background-image: url("/images/winner.svg");
	background-repeat: no-repeat;
	background-position: 75% 0%;
	background-size: auto 100%;
	}

	-.medal-container{
	- width:3rem;
	+.medal-container {
	+ width: 3rem;
	}

	-
	-@keyframes jump{
	+@keyframes jump {
	0% {
	transform: translateY(0);
	}
	- 7%{
	+ 7% {
	transform: scaleY(0.8) scaleX(1.2) translateY(2px);
	}
	- 10%{
	+ 10% {
	transform: scaleY(0.8) scaleX(1.2) translateY(2px);
	}
	- 19%{
	- transform: scaleX(0.9) scaleY(1.1) translateY(-.5rem);
	+ 19% {
	+ transform: scaleX(0.9) scaleY(1.1) translateY(-0.5rem);
	}
	37% {
	transform: translateY(-1rem);
	}
	- 55%{
	- transform: scaleX(0.9) scaleY(1.1) translateY(-.5rem);
	+ 55% {
	+ transform: scaleX(0.9) scaleY(1.1) translateY(-0.5rem);
	}
	- 70%{
	+ 70% {
	transform: scaleY(0.8) scaleX(1.2) translateY(2px);
	}
	- 100%{
	+ 100% {
	transform: translateY(0);
	}
	}

	-.loading-container{
	+.loading-container {
	text-align: center;
	padding-top: 4rem;
	}

	-.loading-box{
	+.loading-box {
	width: 1rem;
	height: 1rem;
	background-color: hsl(268, 40%, 42%);
	display: inline-block;
	vertical-align: bottom;
	animation: jump 700ms;
	animation-iteration-count: infinite;
	}

	.loading-shadow {
	display: inline-block;
	margin-right: 1rem;
	width: 1rem;
	margin-left: -1rem;
	width: 1rem;
	box-shadow: 0px 4px 2px 1px rgba(0, 0, 0, 0.16);
	}

	-
	-.loading-text{
	+.loading-text {
	margin-top: 1rem;
	font-size: 1.5rem;
	line-height: 2rem;
	}

	.content > * {
	animation: enter 200ms;
	animation-fill-mode: backwards;
	}

	-.content > *:nth-child(1){
	+.content > *:nth-child(1) {
	animation-delay: 100ms;
	}

	-.content > *:nth-child(2){
	+.content > *:nth-child(2) {
	animation-delay: 200ms;
	}

	-.content > *:nth-child(3){
	+.content > *:nth-child(3) {
	animation-delay: 300ms;
	}

	-.content > *:nth-child(4){
	+.content > *:nth-child(4) {
	animation-delay: 400ms;
	}

	-.content > *:nth-child(5){
	+.content > *:nth-child(5) {
	animation-delay: 500ms;
	}

	-.content > *:nth-child(6){
	+.content > *:nth-child(6) {
	animation-delay: 600ms;
	}

	-.content > *:nth-child(7){
	+.content > *:nth-child(7) {
	animation-delay: 700ms;
	}

	-.content > *:nth-child(8){
	+.content > *:nth-child(8) {
	animation-delay: 800ms;
	}

	-@keyframes popup{
	+@keyframes popup {
	from: {
	transform: scale(0.5);
	opacity: 0;
	}
	to: {
	transform: scale(1);
	- opacity:1;
	+ opacity: 1;
	}
	}

	.shortcuts {
	animation: enter 300ms;
	}

	.welcome p,
	-.welcome p *{
	+.welcome p * {
	line-height: 2rem;
	font-size: 1.1rem;
	}

	.welcome h3 {
	- margin-top:1rem;
	+ margin-top: 1rem;
	}

	-.welcome a{
	- position:relative;
	- text-shadow: -1px 0px 0px #fff,1px 0px 0px #fff,-2px 0px 0px #fff,2px 0px 0px #fff,-3px 0px 0px #fff,3px 0px 0px #fff;
	- background-image: linear-gradient(to bottom,black 0%,#333 75%,#333 100%);
	+.welcome a {
	+ position: relative;
	+ text-shadow: -1px 0px 0px #fff, 1px 0px 0px #fff, -2px 0px 0px #fff,
	+ 2px 0px 0px #fff, -3px 0px 0px #fff, 3px 0px 0px #fff;
	+ background-image: linear-gradient(to bottom, black 0%, #333 75%, #333 100%);
	background-size: 1px 1px;
	background-position: 3px 24px;
	background-repeat: repeat-x;
	}

	strong {
	font-weight: bold;
	}

	code.q {
	- background-color: #48A0DC;
	+ background-color: #48a0dc;
	border-radius: 50%;
	color: white;
	width: 2rem;
	display: inline-block;
	- text-align:center;
	+ text-align: center;
	}

	option {
	font-size: 1rem;
	}

	.find-solution {
	- margin-top:1rem;
	+ margin-top: 1rem;
	}
	-

File Metadata

Mime Type: text/x-diff
Expires: Sat, Nov 8, 15:00 (2 h, 51 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1034679
Default Alt Text: (33 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions