webawesome/source/css/_docs.css

body {
  border-top: solid .3rem var(--color-aqua);
}

#head {
  padding: 0 2rem;
  margin: var(--component-spacing-big) 0;
}

#head a {
  display: inline-block;
}

#head img {
  width: 24rem;
  margin: 0 auto;
  display: block;
}

#wrap {
  max-width: 60rem;
  padding: 0 2rem;
  margin: 2rem auto;
  display: grid;
  grid-template-columns: 12rem calc(100% - 12rem);
}

#nav {
  text-align: right;
  border-right: solid var(--component-border-width) var(--component-border-color);
  padding-right: 1rem;
  margin-right: 2rem;
}

#nav a {
  border-radius: var(--component-border-radius);
  margin: .5rem 0;
  display: block;
}

#nav a.current {
  color: var(--text-muted);
  cursor: default;
}

#nav a.current:hover {

}

#foot {
  text-align: center;
  margin: var(--component-spacing-big) 0;
}

#foot img {
  width: 14rem;
  display: inline-block;
  margin: .5rem 0;
}

#homepage #wrap {
  max-width: 48rem;
  display: block;
}

@media (max-width: 60rem) {
  #head {
    padding: 0 1rem;
  }

  #wrap {
    padding: 0 1rem;
    display: block;
  }

  #nav {
    font-size: .9rem;
    border: none;
    text-align: center;
    margin: 0 0 2rem 0;
  }

  #nav a {
    margin: .3rem;
    display: inline-block;
  }
}

/* Fallback to block nav for unsupportive browsers */
@supports (not (display: grid)) {
  #nav {
    border: none;
    text-align: center;
    margin: 0 0 2rem 0;
  }

  #nav a {
    margin: .5rem;
    display: inline-block;
  }
}

h1[id]:not(:first-child),
h2[id]:not(:first-child),
h3[id]:not(:first-child),
h4[id]:not(:first-child) {
  margin-top: 3rem;
}

h3[id],
h4[id] {
  color: var(--color-gray);
}

pre {
  margin-bottom: 1rem !important; /* Prism overrides our bottom margin */
}

pre code {
  white-space: pre;
  padding: 0;
  display: block;
}

a code {
  color: inherit;
}

@media (max-width: 45rem) {
  a.bookmark {
    width: auto;
    margin-left: 0;
  }
}

/* Column helpers */
.two-column {
  column-count: 2;
  column-gap: 1rem;
}

@media (max-width: 50rem) {
  .two-column {
    column-count: 1;
    column-gap: 0;
  }
}

/* Sizing examples */
.width-sizing-example {
  border: solid 1px var(--component-border-color);
  padding: 1rem;
  margin-bottom: 1rem;
}

.width-sizing-example div {
  background: var(--color-primary);
  color: white;
  text-align: center;
  padding: .25rem;
  margin-bottom: 1rem;
}

.width-sizing-example div:last-child {
  margin-bottom: 0;
}

.height-sizing-example {
  border: solid 1px var(--component-border-color);
  height: 15rem;
  padding: 1rem .5rem;
  margin-bottom: 1rem;
}

.height-sizing-example div {
  width: calc(25% - 1rem);
  float: left;
  background: var(--color-primary);
  color: white;
  text-align: center;
  padding: .25rem;
  margin: 0 .5rem;
}

/* Loader example */
.loader-example div {
  float: left;
  width: 6rem;
  height: 6rem;
  border: dashed 1px var(--component-border-color);
  margin-right: .5rem;
}

/* Tabs example */
.tabs-vertical-example {
  display: grid;
  grid-template-columns: 30% 70%;
}

.tabs-vertical-example .tabs-nav {
  padding-right: 2rem;
}

.tabs-vertical-example .tabs-nav a {
  display: block;
}