main.css

/* Reset */
/* Reset based on Eric Meyer's 2.0 Reset: http://meyerweb.com/eric/tools/css/reset/
   plus box-sizing, of course */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; }

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

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

*, *::before, *::after {
  box-sizing: border-box; }

/* Variables */
:root {
  font-family: 'Avenir Next', 'Helvetica Neue', 'Open Sans', 'Fira Sans'; }

[am-Example] code {
  font-family: "Consolas", "Menlo", "Courier", monospace; }

[am-HomepageHero] h1::before, [am-HomepageHero] h1::after {
  font-size: 6rem; }

[am-HomepageHero] h1, [am-HomepageHero] h1::before, [am-HomepageHero] h1::after {
  font-size: 4.5rem; }

[am-HomepageHero] h1 {
  font-size: 3.5rem; }

[am-HomepageHero] h2 {
  font-size: 2.5rem; }

[am-HomepageHero] h2, [am-Example] h2, [am-Example] h3 {
  font-size: 1.5rem; }

[am-Example] ul strong {
  font-size: 1.2rem; }

[am-Contributors] {
  font-size: 0.9rem; }

[am-Contributors] > h3 {
  font-size: 0.8rem; }

[am-Example] pre code, [am-Example] code {
  font-size: 0.7rem; }

/* Modules */
[am-HomepageHero] {
  position: relative;
  padding: 4rem 1rem;
  margin-bottom: 2rem;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
  color: #fdfdfb;
  font-weight: 300; }
  [am-HomepageHero]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 120%;
    z-index: -1;
    transform-origin: 0 100%;
    transform: rotate(-2deg) translateZ(0);
    background: linear-gradient(90deg, #965ddc 0%, #b087e5 100%); }
    @media screen and (min-width: 320px) and (max-width: 339px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd382 0%, #87dea1 100%); } }
    @media screen and (min-width: 340px) and (max-width: 359px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd388 0%, #87dea4 100%); } }
    @media screen and (min-width: 360px) and (max-width: 379px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd38d 0%, #87deaa 100%); } }
    @media screen and (min-width: 380px) and (max-width: 399px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd393 0%, #87deae 100%); } }
    @media screen and (min-width: 400px) and (max-width: 419px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd399 0%, #87deb3 100%); } }
    @media screen and (min-width: 420px) and (max-width: 439px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd39f 0%, #87deb5 100%); } }
    @media screen and (min-width: 440px) and (max-width: 459px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd3a5 0%, #87debb 100%); } }
    @media screen and (min-width: 460px) and (max-width: 479px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd3aa 0%, #87dec0 100%); } }
    @media screen and (min-width: 480px) and (max-width: 499px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd3b0 0%, #87dec4 100%); } }
    @media screen and (min-width: 500px) and (max-width: 519px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd3b6 0%, #87dec8 100%); } }
    @media screen and (min-width: 520px) and (max-width: 539px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd3bc 0%, #87decd 100%); } }
    @media screen and (min-width: 540px) and (max-width: 559px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd3c2 0%, #87ded1 100%); } }
    @media screen and (min-width: 560px) and (max-width: 579px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd3c8 0%, #87ded5 100%); } }
    @media screen and (min-width: 580px) and (max-width: 599px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd3cd 0%, #87deda 100%); } }
    @media screen and (min-width: 600px) and (max-width: 619px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fd3d3 0%, #87dede 100%); } }
    @media screen and (min-width: 620px) and (max-width: 639px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fcdd3 0%, #87dbde 100%); } }
    @media screen and (min-width: 640px) and (max-width: 659px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fc8d3 0%, #87d5de 100%); } }
    @media screen and (min-width: 660px) and (max-width: 679px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fc2d3 0%, #87d2de 100%); } }
    @media screen and (min-width: 680px) and (max-width: 699px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fbcd3 0%, #87cede 100%); } }
    @media screen and (min-width: 700px) and (max-width: 719px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fb6d3 0%, #87cade 100%); } }
    @media screen and (min-width: 720px) and (max-width: 739px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fb0d3 0%, #87c4de 100%); } }
    @media screen and (min-width: 740px) and (max-width: 759px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5faad3 0%, #87c0de 100%); } }
    @media screen and (min-width: 760px) and (max-width: 779px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5fa5d3 0%, #87bbde 100%); } }
    @media screen and (min-width: 780px) and (max-width: 799px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5f9fd3 0%, #87b8de 100%); } }
    @media screen and (min-width: 800px) and (max-width: 819px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5f99d3 0%, #87b4de 100%); } }
    @media screen and (min-width: 820px) and (max-width: 839px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5f93d3 0%, #87b0de 100%); } }
    @media screen and (min-width: 840px) and (max-width: 859px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5f8dd3 0%, #87abde 100%); } }
    @media screen and (min-width: 860px) and (max-width: 879px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5f88d3 0%, #87a7de 100%); } }
    @media screen and (min-width: 880px) and (max-width: 899px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5f82d3 0%, #87a3de 100%); } }
    @media screen and (min-width: 900px) and (max-width: 919px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5f7cd3 0%, #879ede 100%); } }
    @media screen and (min-width: 920px) and (max-width: 939px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5f76d3 0%, #8798de 100%); } }
    @media screen and (min-width: 940px) and (max-width: 959px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5f70d3 0%, #8794de 100%); } }
    @media screen and (min-width: 960px) and (max-width: 979px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5f6ad3 0%, #8791de 100%); } }
    @media screen and (min-width: 980px) and (max-width: 999px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5f65d3 0%, #878dde 100%); } }
    @media screen and (min-width: 1000px) and (max-width: 1019px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #5f5fd3 0%, #8787de 100%); } }
    @media screen and (min-width: 1020px) and (max-width: 1039px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #655fd3 0%, #8b87de 100%); } }
    @media screen and (min-width: 1040px) and (max-width: 1059px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #6a5fd3 0%, #9087de 100%); } }
    @media screen and (min-width: 1060px) and (max-width: 1079px) {
      [am-HomepageHero]::before {
        background: linear-gradient(90deg, #705fd3 0%, #9487de 100%); } }
  [am-HomepageHero] h1::before {
    content: '['; }
  [am-HomepageHero] h1::after {
    content: ']'; }
  [am-HomepageHero] h2 {
    transform: rotate(-2deg);
    padding-top: 3rem;
    font-style: italic; }
    [am-HomepageHero] h2 > span {
      font-weight: 400; }
  @media screen and (max-width: 600px) { }

[am-Example] {
  max-width: 720px;
  padding: 1rem;
  margin: 2rem auto 0; }
  [am-Example] h2, [am-Example] h3 {
    margin-bottom: 2rem; }
  [am-Example] h2, [am-Example] strong {
    font-weight: 700; }
  [am-Example] p {
    margin: 1rem 0;
    line-height: 1.4; }
  [am-Example] em {
    font-style: italic; }
  [am-Example] strong {
    font-weight: 600; }
  [am-Example] pre {
    margin: 1rem 0 2rem; }
    [am-Example] pre code {
      line-height: 1.8;
      padding: 0.5rem;
      margin: 0;
      box-shadow: none;
      color: #575757;
      display: block;
      max-width: 100%;
      overflow: auto; }
  [am-Example] code {
    line-height: 1.2;
    white-space: pre;
    box-shadow: 0 0 0 1px #ddd;
    padding: 0.2rem;
    margin: 0.2rem; }
  [am-Example] ul {
    margin-bottom: 1rem;
    line-height: 1.4; }
    [am-Example] ul li {
      margin-bottom: 1rem; }

[am-Code] {
  padding: 2px;
  border-radius: 2px; }

[am-Code~="removed"] {
  color: rgba(244, 69, 74, 0.4);
  background: rgba(244, 69, 74, 0.2); }

[am-Code~="added"] {
  color: rgba(43, 120, 43, 0.8);
  background: rgba(43, 120, 43, 0.2); }

[am-Code~="comment"] {
  color: #a1a1a1; }

[am-Contributors] {
  padding: 1rem;
  text-align: center;
  line-height: 1.6; }
  [am-Contributors]::before {
    content: '';
    color: inherit;
    display: block;
    width: 50%;
    margin: 1rem auto;
    border-top: 1px solid;
    opacity: 0.2; }
  [am-Contributors] > h3 {
    text-transform: uppercase;
    padding-top: 0.5rem;
    color: #575757; }
  [am-Contributors] > ol {
    padding-bottom: 0.5rem;
    display: flex;
    justify-content: center; }
    [am-Contributors] > ol img {
      margin: 1rem 2rem;
      display: block;
      height: 80px;
      width: 80px;
      border-radius: 50%;
      box-shadow: 0 0 0 1px #eee, 0 0 0 7px white, 0 0 0 8px #ddd; }
  [am-Contributors] > ul {
    padding-bottom: 1rem; }

/* Set global styles */
:root {
  font-size: 16px;
  min-height: 100%; }

@media screen and (min-width: 960px) {
  :root {
    font-size: 20px; } }

body {
  min-height: 100%;
  text-rendering: optimizeLegibility;
  background: #fdfdfb;
  color: #111; }

a {
  transition: color 0.1s; }
  a, a:hover, a:visited {
    color: #993333;
    text-decoration: none; }
  a:hover {
    color: #bf4040; }
  a:active {
    transition: none;
    color: #bf4040;
    text-decoration: underline; }