Leolik

import React from 'react'
import { BrowserRouter as Router, Switch } from 'react-router-dom'
import routes from './routes'
import FancyRoute from './components/tools/FancyRoute'

const App = props =>
  <Router>
    <Switch>
      {routes.map((route, i) =>
        <FancyRoute key={i} {...route} />

Leolik

import React from 'react'
import { BrowserRouter as Router, Switch } from 'react-router-dom'
import routes from './routes'
import FancyRoute from './components/tools/FancyRoute'

const App = props =>
  <Router>
    <Switch>
      {routes.map((route, i) =>
        <FancyRoute key={i} {...route} />

Leolik

.table {
	width: 100px;
	border-collapse: collapse;
	border: solid 1px #000;
}
.table td {
	padding: 10px;
	border: 1px solid #000;
	word-break: break-all;
}

Leolik

function scrollTo(to = 0, duration= 1000) {
  const start = window.pageYOffset;
  const change = to - start;
  const increment = 20;
  let currentTime = 0;

  const animateScroll = (() => {
    currentTime += increment;
    const val = Math.easeInOutQuad(currentTime, start, change, duration);
    

Leolik

var box = document.querySelector('.box');
var message = document.querySelector('.message');

var player = box.animate([
  {
    transform: 'translateX(0)',
    opacity: 0
  },
  {
    transform: 'translateX(100px)',

Leolik

body {
	background: cyan;
	min-height: 100%;
}
li {
	display: inline-block;
	list-style: none;
	overflow: hidden;
}
li:first-child a {

Leolik

.fright, .fleft {
	border: 1px solid #000;
	width: 100%;
}
.fright {
	float: left;
	clear: both;
}
.fleft {
	float: right;

Leolik

table {
	width: 100%;
	border: 1px solid #000;
	border-collapse: collapse;
}
table th,
table td {
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	padding: 10px;

Leolik

/**
 * Attempt for Chrome-style progress-indicator with SVG and CSS animations
 */
 
@keyframes spin {
	0% {
		stroke: #00aeef
	}
	37.5% {
		stroke: #ed1c24;

Leolik

/**
 * Attempt for Chrome-style progress-indicator with SVG and CSS animations
 */
 
@keyframes spin {
	to {
		stroke-dashoffset: -264;
	}
}