Skip to content

Instantly share code, notes, and snippets.

<!-- Start Fullpage Hero -->
<figure class="ampstart-image-fullpage-hero m0 relative mb4">
<amp-img width="404" height="720" layout="responsive" src="/img/elephants_narrow.png" media="(max-width: 415px)"></amp-img>
<amp-img height="720" layout="fixed-height" src="/img/elephants_wide.jpg" media="(min-width: 416px)"></amp-img>
<figcaption class="absolute top-0 right-0 bottom-0 left-0">
<header class="p3">
<h1 class="ampstart-fullpage-hero-heading mb3">
<span class="ampstart-fullpage-hero-heading-text">
The Year's Best Animal Photos
</span>
@yomete
yomete / hamiltonlyrics.json
Created July 10, 2017 04:16
Hamilton lyrics
const lyrics = [
{
lyric: 'When he was ten his father split, full of it, debt-ridden. Two years later, see Alex and his mother bed-ridden. Half-dead sittin\' in their own sick, the scent thick',
options: [{name: 'Aaron Burr', correct: false}, {name: 'James Madison', correct: false}, {name: 'John Laurens', correct: false}, {name: 'Eliza Hamilton', correct: true}],
answer: 'Eliza Hamilton'
},
{
lyric: 'I am sailing off to London. I’m accompanied by someone who always pays. I have found a wealthy husband. Who will keep me in comfort for all my days. He is not a lot of fun, but there’s no one',
options: [{name: 'Eliza', correct: false}, {name: 'Peggy', correct: false}, {name: 'Angelica', correct: true}, {name: 'Maria', correct: false}],
answer: 'Angelica'
@yomete
yomete / Home.vue
Created July 24, 2017 06:44
Home.vue
<template>
<transition name="fade">
<div class="home" v-if="!secondplayer">
<div class="inner">
<h1>Do you know your Hamilton Lyrics?</h1>
<p>Test your knowledge of Hamilton: An American Musical by guessing who sang what lyric.</p>
<p>Invite a second player by sending them this link {{url}}.</p>
</div>
</div>
<!-- Start Navbar -->
<header class="ampstart-headerbar fixed flex justify-start items-center top-0 left-0 right-0 pl2 pr4">
<div role="button" aria-label="open sidebar" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger pr2">☰</div>
</header>
<!-- Start Sidebar -->
<amp-sidebar id="header-sidebar" class="ampstart-sidebar px3 " layout="nodisplay">
<div class="flex justify-start items-center ampstart-sidebar-header">
<div role="button" aria-label="close sidebar" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger items-start">✕</div>
</div>
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>The Live Blog</title>
<link rel="canonical" href="YOUR URL HERE">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-boilerplate>
import React, { Component } from 'react'
import {
BrowserRouter as Router,
Route,
Switch,
Link
} from 'react-router-dom'
import Loadable from 'react-loadable'
import LoadingPage from '../components/LoadingPage/LoadingPage'
const AsyncHome = Loadable({
loader: () => import('../components/Home/Home'),
loading: LoadingPage
})
const AsyncAbout = Loadable({
loader: () => import('../components/About/About'),
loading: LoadingPage,
delay: 300
})
const AsyncNotFound = Loadable({
function mapStyles(styles) {
return {
opacity: styles.opacity,
transform: `scale(${styles.scale})`,
};
}
// wrap the `spring` helper to use a bouncy config
function bounce(val) {
return spring(val, {
stiffness: 330,
class Routes extends Component {
render () {
return (
<Router history={history}>
<div>
<header className="header container">
<nav className="navbar">
<div className="navbar-brand">
<Link to="/">
<span className="navbar-item">Home</span>
import ScrollToTop from '../components/ScrollToTop/ScrollToTop'
class Routes extends Component {
render () {
return (
<Router history={history}>
<ScrollToTop>
<div>
<header className="header container">
<nav className="navbar">