index.css

/**
 * Variables.
 */

:root {
  var-white: #fefefe;
  var-light-gray: #ededed;
  var-gray: #a3a3a4;
  var-dark-gray: #4a4848;
  var-black: #262727;
  var-gold: #daae20;

  var-sentinel: "Sentinel SSm A", "Sentinel SSm B", "Sentinel", "Georgia", sans-serif;
  var-tungsten: "Tungsten A", "Tungsten B", "Tungsten", "Impact", sans-serif;
  var-source-code: "Source Code", monospace;

  var-m: 1.25;
  var-much-smaller: calc(1em / var(m) / var(m));
  var-smaller: calc(1em / var(m));
  var-larger: calc(1em * var(m));
  var-much-larger: calc(1em * var(m) * var(m));
}

/**
 * Base.
 */

html {
  font: 500 16px/1.6 var(sentinel);
  color: var(dark-gray);
  background: url('images/ground.jpg') var(light-gray);
}

h1 {
  font-size: 2em;
  margin-bottom: .5em;
  font-family: var(tungsten);
  text-transform: uppercase;
  color: var(black);
  text-align: center;
}

p {
  margin: 1em 0;
}

p a {
  text-decoration: underline;
  color: var(black);
}

p a:hover {
  color: #000;
}

figure {
  margin: 1.5em 0;
}

ol {
  margin: 1em 0 1em 2.5em;
  list-style: decimal outside;
  font-size: var(smaller);
}

pre {
  font: 300 var(much-smaller)/1.3 var(source-code);
  position: relative;
  background-color: var(white);
  padding: 1.5em;
}

pre + pre {
  margin-top: 1px;
}

code b {
  color: var(black);
}

code i {
  font-style: normal;
  color: var(gold);
}

/**
 * Dividers.
 */

hr {
  border: none;
  height: 100px;
  width: 150px;
  margin: 8em auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

hr:nth-of-type(1) {
  background-image: url('images/divider-1.png');
}

hr:nth-of-type(2) {
  background-image: url('images/divider-2.png');
}

hr:nth-of-type(3) {
  background-image: url('images/divider-3.png');
}

hr:nth-of-type(4) {
  background-image: url('images/divider-4.png');
}

hr:nth-of-type(5) {
  background-image: url('images/divider-5.png');
}

hr:nth-of-type(6) {
  background-image: url('images/divider-6.png');
}

/**
 * Symbolset.
 */

[class*="ss-"]::before {
  color: var(gold);
  font-size: 1.2em;
  position: relative;
  top: .2em;
  padding-right: .4em;
}

/**
 * Highlight.
 */

.Highlight-boolean,
.Highlight-class,
.Highlight-keyword {
  font-weight: bold;
}

.Highlight-string {
  color: var(gold);
}

/**
 * Example.
 */

.Example {
  max-width: 17em;
  margin-top: 1px;
  padding: 1.5em;
  background-color: white;
}

.Example-title {
  font-size: 1.5em;
  margin-bottom: .4em;
  text-align: center;
}

.Example-step-list {
  list-style: none;
  line-height: 2;
  margin: 0;
}

/**
 * Plugin filter.
 */

.Plugin-filter {
  padding: 1em 2em;
  background-color: white;
  margin-bottom: 1px;
  display: block;
}

.Plugin-filter-icon {
  display: inline-block;
}

.Plugin-filter-icon::before {
  color: var(gray);
  padding-right: 0;
}

.Plugin-filter-input {
  border: none;
  background: transparent;
}

.Plugin-filter-input:focus {
  outline: none;
}

/**
 * Plugin.
 */
.Plugin {
  position: relative;
  padding: 1.5em;
  background-color: white;
}

.Plugin + .Plugin {
  margin-top: 1px;
}

.Plugin-title {
  font-size: 1.5em;
  margin-bottom: .25em;
  text-align: left;
}

.Plugin-icon {
  font-size: .7em;
  color: var(gold);
  margin-left: .4em;
}

.Plugin-icon::before {
  top: .075em;
}

.Plugin-description {
  font-size: .85em;
  margin: 0;
}

.Plugin-arrow {
  position: absolute;
  top: 1.2em;
  right: 1.5em;
  opacity: .3;
  transition: opacity .2s;
}

.Plugin-arrow::before {
  color: var(gray);
}

.Plugin:hover .Plugin-arrow {
  opacity: 1;
}

.Plugin:hover .Plugin-repository {
  display: block;
}

/**
 * Header.
 */

.Header {
  position: relative;
  padding-top: 8em;
  text-align: center;
  overflow: hidden;
}

.Header-title {
  font-size: 3em;
}

.Header-subtitle {
  font-size: 1.2em;
}

.Header-github {
  display: block;
  position: absolute;
  top: 1.5em;
  right: -6em;
  padding: .4em 1em;
  width: 15em;
  text-align: center;
  background-color: var(black);
  text-transform: uppercase;
  font-family: var(tungsten);
  font-size: .9em;
  color: var(white);
  text-decoration: none;
  white-space: nowrap;
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  transition: background-color .2s;
}

.Header-github:hover {
  background-color: var(gold);
}

.Header-slack {
  display: block;
  position: absolute;
  top: 5em;
  right: -10em;
  padding: .4em 1em;
  width: 30em;
  text-align: center;
  background-color: #6ec9dc;
  text-transform: uppercase;
  font-family: var(tungsten);
  font-size: .9em;
  color: var(white);
  text-decoration: none;
  white-space: nowrap;
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  transition: background-color .2s;
}

.Header-slack:hover {
  background-color: #3eb991;
}

/**
 * Body.
 */

.Body {
  max-width: 34em;
  margin: 0 auto;
  padding-right: 1em;
  padding-left: 1em;
}

/**
 * Footer.
 */

.Footer {
  text-align: center;
  padding-bottom: 7em;
}

.Footer-conjunction {
  display: block;
  text-transform: uppercase;
  font-family: var(tungsten);
  color: var(gray);
  font-size: var(smaller);
}

.Footer-logo {
  font-size: 1.6em;
}

/**
 * Large screens.
 */

@media (min-width: 768px) {

  body {
    font-size: 18px;
  }

  h1 {
    font-size: 2.5em;
  }

  pre {
    font-size: var(smaller);
    padding: 1.5em 2em;
  }

  /**
   * Example.
   */

  .Example-list {
    overflow: hidden;
    margin: 0 -4em;
    column-count: 2;
    column-gap: 1px;
    column-break-inside: avoid;
  }

  .Example {
    padding: 1.5em 2em;
    margin-top: 0;
  }

  .Example:nth-child(2n) {
    margin-top: 1px;
  }

  /**
   * Plugin.
   */

  .Plugin {
    padding: 1.5em 2em;
  }

  /**
   * Header.
   */

  .Header {
    padding-top: 15em;
  }

  .Header-title {
    font-size: 4em;
  }

  .Header-github {
    top: 2.5em;
    right: -4.75em;
  }

}