v2: prepare to move

v2/website/blog/2018-08-08-sakura.md

@@ -0,0 +1,11 @@
+---
+title: Sakura
+author: Endilie
+authorURL: https://github.com/endiliey
+authorFBID: 100000251103620
+authorTwitter: endiliey
+---
+
+![Sakura](/img/sakura.png)
+
+Sakura Miyawaki (宮脇 咲良 Miyawaki Sakura, born 19 March 1998) is a Japanese singer and a member of the Japanese idol girl groups HKT48 and AKB48. She is vice-captain of HKT48's Team KIV and former concurrent member of AKB48's Team A.

v2/website/components/Tictactoe/board.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Square from './square';
+import styles from './styles.css';
+
+export default class Board extends React.Component {
+  renderSquare(i) {
+    return (
+      <Square
+        value={this.props.squares[i]}
+        onClick={() => this.props.onClick(i)}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <div className={styles.boardRow}>
+          {this.renderSquare(0)}
+          {this.renderSquare(1)}
+          {this.renderSquare(2)}
+        </div>
+        <div className={styles.boardRow}>
+          {this.renderSquare(3)}
+          {this.renderSquare(4)}
+          {this.renderSquare(5)}
+        </div>
+        <div className={styles.boardRow}>
+          {this.renderSquare(6)}
+          {this.renderSquare(7)}
+          {this.renderSquare(8)}
+        </div>
+      </div>
+    );
+  }
+}

v2/website/components/Tictactoe/index.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+import Layout from '@theme/Layout';
+import Board from './board';
+import styles from './styles.css';
+
+class Game extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      history: [
+        {
+          squares: Array(9).fill(null)
+        }
+      ],
+      stepNumber: 0,
+      xIsNext: true
+    };
+  }
+
+  calculateWinner(squares) {
+    const lines = [
+      [0, 1, 2],
+      [3, 4, 5],
+      [6, 7, 8],
+      [0, 3, 6],
+      [1, 4, 7],
+      [2, 5, 8],
+      [0, 4, 8],
+      [2, 4, 6]
+    ];
+    for (let i = 0; i < lines.length; i++) {
+      const [a, b, c] = lines[i];
+      if (
+        squares[a] &&
+        squares[a] === squares[b] &&
+        squares[a] === squares[c]
+      ) {
+        return squares[a];
+      }
+    }
+    return null;
+  }
+
+  handleClick(i) {
+    const history = this.state.history.slice(0, this.state.stepNumber + 1);
+    const current = history[history.length - 1];
+    const squares = current.squares.slice();
+    if (this.calculateWinner(squares) || squares[i]) {
+      return;
+    }
+    squares[i] = this.state.xIsNext ? 'X' : 'O';
+    this.setState({
+      history: history.concat([
+        {
+          squares: squares
+        }
+      ]),
+      stepNumber: history.length,
+      xIsNext: !this.state.xIsNext
+    });
+  }
+
+  jumpTo(step) {
+    this.setState({
+      stepNumber: step,
+      xIsNext: step % 2 === 0
+    });
+  }
+
+  render() {
+    const history = this.state.history;
+    const current = history[this.state.stepNumber];
+    const winner = this.calculateWinner(current.squares);
+
+    const moves = history.map((step, move) => {
+      const desc = move ? 'Go to move #' + move : 'Go to game start';
+      return (
+        <li key={move}>
+          <button onClick={() => this.jumpTo(move)}>{desc}</button>
+        </li>
+      );
+    });
+
+    let status;
+    if (winner) {
+      status = 'Winner: ' + winner;
+    } else {
+      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+    }
+
+    return (
+      <div className={styles.game}>
+        <div className={styles.gameBoard}>
+          <Board squares={current.squares} onClick={i => this.handleClick(i)} />
+        </div>
+        <div className={styles.gameInfo}>
+          <div>{status}</div>
+          <ol>{moves}</ol>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Game;

v2/website/components/Tictactoe/square.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './styles.css';
+
+export default props => {
+  return (
+    <button className={styles.square} onClick={props.onClick}>
+      {props.value}
+    </button>
+  );
+};

v2/website/components/Tictactoe/styles.css

@@ -0,0 +1,44 @@
+.boardRow:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.square:focus {
+  outline: none;
+}
+
+.game {
+  display: flex;
+  flex-direction: row;
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: center;
+}
+
+.gameInfo {
+  margin-left: 20px;
+}
+
+.gameBoard {
+  margin-left: 10px;
+}

v2/website/components/Todo/TodoItem.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+
+const ESCAPE_KEY = 27;
+const ENTER_KEY = 13;
+
+export default class TodoItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      editText: props.todo.title
+    };
+    this.handleEdit = this.handleEdit.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      nextProps.todo !== this.props.todo ||
+      nextProps.editing !== this.props.editing ||
+      nextState.editText !== this.state.editText
+    );
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.editing && this.props.editing) {
+      const node = ReactDOM.findDOMNode(this.refs.editField);
+      node.focus();
+      node.setSelectionRange(node.value.length, node.value.length);
+    }
+  }
+
+  handleSubmit() {
+    const val = this.state.editText.trim();
+    if (val) {
+      this.props.onSave(val);
+      this.setState({editText: val});
+    } else {
+      this.props.onDestroy();
+    }
+  }
+
+  handleEdit() {
+    this.props.onEdit();
+    this.setState({editText: this.props.todo.title});
+  }
+
+  handleKeyDown(event) {
+    if (event.which === ESCAPE_KEY) {
+      this.setState({editText: this.props.todo.title});
+      this.props.onCancel(event);
+    } else if (event.which === ENTER_KEY) {
+      this.handleSubmit(event);
+    }
+  }
+
+  handleChange(event) {
+    if (this.props.editing) {
+      this.setState({editText: event.target.value});
+    }
+  }
+
+  render() {
+    return (
+      <li
+        className={classNames({
+          completed: this.props.todo.completed,
+          editing: this.props.editing
+        })}>
+        <div className="view">
+          <input
+            className="toggle"
+            type="checkbox"
+            checked={this.props.todo.completed}
+            onChange={this.props.onToggle}
+          />
+          <label onDoubleClick={this.handleEdit}>{this.props.todo.title}</label>
+          <button className="destroy" onClick={this.props.onDestroy} />
+        </div>
+        <input
+          ref="editField"
+          className="edit"
+          value={this.state.editText}
+          onBlur={this.handleSubmit}
+          onChange={this.handleChange}
+          onKeyDown={this.handleKeyDown}
+        />
+      </li>
+    );
+  }
+}

v2/website/components/Todo/TodoList.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import TodoItem from './TodoItem';
+
+export default function TodoList(props) {
+  const todoItems = props.todos.map(todo => (
+    <TodoItem
+      key={todo.id}
+      todo={todo}
+      onToggle={() => {
+        props.onToggle(todo);
+      }}
+      onDestroy={() => {
+        props.onDestroy(todo);
+      }}
+      onEdit={() => {
+        props.onEdit(todo);
+      }}
+      editing={props.editing(todo)}
+      onSave={text => {
+        props.onSave(todo, text);
+      }}
+      onCancel={() => {
+        props.onCancel();
+      }}
+    />
+  ));
+
+  return <div>{todoItems}</div>;
+}

v2/website/components/Todo/index.js

@@ -0,0 +1,205 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+import TodoList from './TodoList';
+
+const ENTER_KEY = 13;
+
+function uuid() {
+  function s4() {
+    return Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1);
+  }
+  return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+}
+
+const todos = [
+  {
+    id: 'ed0bcc48-bbbe-5f06-c7c9-2ccb0456ceba',
+    title: 'Build this Todo App.',
+    completed: true
+  },
+  {
+    id: '42582304-3c6e-311e-7f88-7e3791caf88c',
+    title: '?????',
+    completed: true
+  },
+  {
+    id: '1cf63885-5f75-8deb-19dc-9b6765deae6c',
+    title: '1,000 stars on GitHub.',
+    completed: false
+  },
+  {
+    id: '63a871b2-0b6f-4427-9c35-304bc680a4b7',
+    title: 'Write a popular medium post.',
+    completed: false
+  },
+  {
+    id: '63a871b2-0b6f-4422-9c35-304bc680a4b7',
+    title: 'Contribute to open source.',
+    completed: false
+  },
+  {
+    id: '036af7f9-1181-fb8f-258f-3f06034c020f',
+    title: 'Write a blog post.',
+    completed: false
+  }
+];
+
+class TodoApp extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      editing: null,
+      newTodo: '',
+      todos: todos
+    };
+  }
+
+  handleChange(event) {
+    this.setState({newTodo: event.target.value});
+  }
+
+  handleNewTodoKeyDown(event) {
+    if (event.keyCode !== ENTER_KEY) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const val = this.state.newTodo.trim();
+
+    if (val) {
+      this.setState({
+        todos: this.state.todos.concat({
+          id: uuid(),
+          title: val,
+          completed: false
+        }),
+        newTodo: ''
+      });
+    }
+  }
+
+  toggleAll(event) {
+    const {checked} = event.target;
+    this.setState({
+      todos: this.state.todos.map(todo =>
+        Object.assign({}, todo, {completed: checked})
+      )
+    });
+  }
+
+  toggle(todoToToggle) {
+    this.setState({
+      todos: this.state.todos.map(todo => {
+        if (todo === todoToToggle) {
+          return Object.assign({}, todo, {
+            completed: !todo.completed
+          });
+        }
+        return todo;
+      })
+    });
+  }
+
+  destroy(passedTodo) {
+    this.setState({
+      todos: this.state.todos.filter(todo => todo !== passedTodo)
+    });
+  }
+
+  edit(todo) {
+    this.setState({editing: todo.id});
+  }
+
+  save(todoToSave, text) {
+    this.setState({
+      todos: this.state.todos.map(todo => {
+        if (todo === todoToSave) {
+          return Object.assign({}, todo, {
+            title: text
+          });
+        }
+        return todo;
+      }),
+      editing: null
+    });
+  }
+
+  cancel() {
+    this.setState({editing: null});
+  }
+
+  clearCompleted() {
+    this.setState({
+      todos: this.state.todos.filter(todo => !todo.completed)
+    });
+  }
+
+  render() {
+    let main;
+    const {todos} = this.state;
+
+    const activeTodoCount = todos.reduce(
+      (accum, todo) => (todo.completed ? accum : accum + 1),
+      0
+    );
+
+    if (todos.length) {
+      main = (
+        <section className="main">
+          <input
+            className="toggle-all"
+            type="checkbox"
+            onChange={this.toggleAll}
+            checked={activeTodoCount === 0}
+          />
+          <ul className="todo-list">
+            <TodoList
+              todos={todos}
+              onToggle={todo => {
+                this.toggle(todo);
+              }}
+              onDestroy={todo => {
+                this.destroy(todo);
+              }}
+              onEdit={todo => {
+                this.edit(todo);
+              }}
+              editing={todo => this.state.editing === todo.id}
+              onSave={(todo, text) => {
+                this.save(todo, text);
+              }}
+              onCancel={() => this.cancel()}
+            />
+          </ul>
+        </section>
+      );
+    }
+
+    return (
+      <div className="todoapp">
+        <header className="header">
+          <h1>todos</h1>
+          <input
+            className="new-todo"
+            placeholder="What needs to be done?"
+            value={this.state.newTodo}
+            onKeyDown={event => {
+              this.handleNewTodoKeyDown(event);
+            }}
+            onChange={event => {
+              this.handleChange(event);
+            }}
+            autoFocus
+          />
+        </header>
+        {main}
+      </div>
+    );
+  }
+}
+
+export default TodoApp;

v2/website/package.json

@@ -0,0 +1,9 @@
+{
+	"scripts": {
+		"start": "node ../bin/munseo start",
+		"build": "node ../bin/munseo build"
+	},
+	"dependencies": {
+		"munseo": "../../munseo/"
+	}
+}

v2/website/pages/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+import Layout from '@theme/Layout';
+import Todo from '@site/components/Todo';
+
+export default class Home extends React.Component {
+  render() {
+    return (
+      <Layout {...this.props}>
+        <Helmet>
+          <title>Todo App</title>
+          <link rel="stylesheet" type="text/css" href="/css/basic.css" />
+        </Helmet>
+        <Todo />
+      </Layout>
+    );
+  }
+}

v2/website/pages/tictactoe.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+import Layout from '@theme/Layout';
+import Tictactoe from '@site/components/Tictactoe';
+
+export default class Home extends React.Component {
+  render() {
+    return (
+      <Layout {...this.props}>
+        <Helmet>
+          <title>Tic Tac Toe</title>
+        </Helmet>
+        <Tictactoe />
+      </Layout>
+    );
+  }
+}

v2/website/pages/youtube.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+import YouTube from 'react-youtube';
+import Layout from '@theme/Layout';
+
+export default class Player extends React.Component {
+  render() {
+    const opts = {
+      height: '390',
+      width: '640',
+      playerVars: {
+        autoplay: 1
+      }
+    };
+
+    return (
+      <Layout {...this.props}>
+        <Helmet>
+          <title>My Youtube</title>
+        </Helmet>
+        <p align="center">
+        {/* this is a React-youtube component */  }
+        <YouTube videoId="d9IxdwEFk1c" opts={opts} onReady={this._onReady} />
+        </p>
+      </Layout>
+    );
+  }
+
+  _onReady(event) {
+    // access to player in all event handlers via event.target
+    event.target.playVideo();
+  }
+}

v2/website/sidebars.json

@@ -0,0 +1,13 @@
+{
+  "docs": {
+    "Foo": [
+      "foo/bar",
+      "foo/baz"
+    ],
+    "Endi": [
+      "docusaurus",
+      "highlight",
+      "hello"
+    ]
+  }
+}

v2/website/siteConfig.js

@@ -0,0 +1,7 @@
+module.exports = {
+  title: 'Munseo',
+  tagline: '📝⚡️ Transform your document (문서) to a website',
+  organizationName: 'endiliey',
+  projectName: 'munseo',
+  baseUrl: '/'
+};

v2/website/static/css/basic.css

@@ -0,0 +1,378 @@
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	font-weight: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	appearance: none;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #f5f5f5;
+	color: #4d4d4d;
+	min-width: 230px;
+	max-width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+	font-weight: 300;
+}
+
+button,
+input[type="checkbox"] {
+	outline: none;
+}
+
+.hidden {
+	display: none;
+}
+
+.todoapp {
+	background: #fff;
+	margin: 130px 0 40px 0;
+	position: relative;
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp input::-moz-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp input::input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp h1 {
+	position: absolute;
+	top: -155px;
+	width: 100%;
+	font-size: 100px;
+	font-weight: 100;
+	text-align: center;
+	color: rgba(175, 47, 47, 0.15);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	font-weight: inherit;
+	line-height: 1.4em;
+	border: 0;
+	outline: none;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+.new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.003);
+	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px solid #e6e6e6;
+}
+
+label[for='toggle-all'] {
+	display: none;
+}
+
+.toggle-all {
+	position: absolute;
+	top: -55px;
+	left: -12px;
+	width: 60px;
+	height: 34px;
+	text-align: center;
+	border: none; /* Mobile Safari */
+}
+
+.toggle-all:before {
+	content: '❯';
+	font-size: 22px;
+	color: #e6e6e6;
+	padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked:before {
+	color: #737373;
+}
+
+.todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+	border-bottom: none;
+}
+
+.todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+.todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 13px 17px 12px 17px;
+	margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+	display: none;
+}
+
+.todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	appearance: none;
+}
+
+.todo-list li .toggle:after {
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
+}
+
+.todo-list li .toggle:checked:after {
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
+}
+
+.todo-list li label {
+	white-space: pre-line;
+	word-break: break-all;
+	padding: 15px 60px 15px 15px;
+	margin-left: 45px;
+	display: block;
+	line-height: 1.2;
+	transition: color 0.4s;
+}
+
+.todo-list li.completed label {
+	color: #d9d9d9;
+	text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 30px;
+	color: #cc9a9a;
+	margin-bottom: 11px;
+	transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+	color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+	content: '×';
+}
+
+.todo-list li:hover .destroy {
+	display: block;
+}
+
+.todo-list li .edit {
+	display: none;
+}
+
+.todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+.footer {
+	color: #777;
+	padding: 10px 15px;
+	height: 20px;
+	text-align: center;
+	border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 50px;
+	overflow: hidden;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+	            0 8px 0 -3px #f6f6f6,
+	            0 9px 1px -3px rgba(0, 0, 0, 0.2),
+	            0 16px 0 -6px #f6f6f6,
+	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+	float: left;
+	text-align: left;
+}
+
+.todo-count strong {
+	font-weight: 300;
+}
+
+.filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+.filters li {
+	display: inline;
+}
+
+.filters li a {
+	color: inherit;
+	margin: 3px;
+	padding: 3px 7px;
+	text-decoration: none;
+	border: 1px solid transparent;
+	border-radius: 3px;
+}
+
+.filters li a.selected,
+.filters li a:hover {
+	border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li a.selected {
+	border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	cursor: pointer;
+	position: relative;
+}
+
+.clear-completed:hover {
+	text-decoration: underline;
+}
+
+.info {
+	margin: 65px auto 0;
+	color: #bfbfbf;
+	font-size: 10px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+	text-align: center;
+}
+
+.info p {
+	line-height: 1;
+}
+
+.info a {
+	color: inherit;
+	text-decoration: none;
+	font-weight: 400;
+}
+
+.info a:hover {
+	text-decoration: underline;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	.toggle-all,
+	.todo-list li .toggle {
+		background: none;
+	}
+
+	.todo-list li .toggle {
+		height: 40px;
+	}
+
+	.toggle-all {
+		-webkit-transform: rotate(90deg);
+		transform: rotate(90deg);
+		-webkit-appearance: none;
+		appearance: none;
+	}
+}
+
+@media (max-width: 430px) {
+	.footer {
+		height: 50px;
+	}
+
+	.filters {
+		bottom: 10px;
+	}
+}