style-guide/style-guide.html

<!doctype html>

<head>
  <style>
    *, *::before, *::after {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    html {
      font-family: roboto, sans-serif;
      line-height: 1.5;
      color: rgba(0, 0, 0, 0.87);
      -webkit-text-size-adjust: 100%;  /* http://stackoverflow.com/a/2711132/2816199 */
    }

    h1 {
      font-weight: 900;
      font-size: 3rem;
      line-height: 0.62;
      padding: 2rem 0 0.7rem;
    }

    h2 {
      padding-top: 3rem;
      font-weight: 300;
      font-size: 1.7rem;
      padding-bottom: 0.4rem;
    }

    .skeleton {
      position: relative;
      -webkit-animation: 800ms ease-out 200ms skeleton both;
      animation: 800ms ease-out 200ms skeleton both;
    }
    .skeleton::before {
      content: '';
      display: inline-block;
      vertical-align: baseline;
      position: absolute;
      width: 100%;
      height: 1ex;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 0.5ex;
    }
    .skeleton::after {
      content: '\00A0';
    }
    @-webkit-keyframes skeleton {
      0% { opacity: 0; transform: translateY(-0.5em); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes skeleton {
      0% { opacity: 0; transform: translateY(-0.5em); }
      100% { opacity: 1; transform: translateY(0); }
    }
  </style>

  <link rel="import" href="/vendor/font-roboto/roboto.html" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:900" />
</head>