@import "../node_modules/normalize.css/normalize.css";
@import "fonts.scss";

// Variables
$red: #670b0b;
$menu-width: 12em;
$large-screen: 1000px;
$medium-screen: 850px;
$space-grey: #efefef;

body {
  color: #222;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
  background-color: #fffff8;
  line-height: 1.5em;
}

html, body {
  padding: 0;
  margin: 0;
}

h1 {
  font-size: 2.6em;
  font-weight: normal;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

a {
  color: inherit;
}

pre {
  font-size: .9em;
  padding: .4em;
  background: #fdf6e3;
  overflow-x: scroll;
}

code {
  font-family: Source Code Pro, Consolas, Menlo, Courier, monospace;
}

table {
  border-collapse: collapse;
  display: block;
  overflow-x: scroll;
  th, td {
    border: 1px solid $space-grey;
    padding: .3em .5em;
  }
  tbody tr:nth-child(odd) {
    background: #f9f9f9;
  }
}

.header-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5em;
  background: $red;
  color: #fff;
  font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  text-align: center;
  .title-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    width: 12em;
    height: 12em;
  }
  h1 {
    font-weight: normal;
    font-size: 4.2em;
  }
  p {
    font-size: 1.3em;
  }
}

.container {
  display: flex;
  justify-content: center;
}

.content {
  padding: 1em;
  max-width: 44em;
  flex: 1;
}

.sidebar {
  align-self: flex-start;
  width: $menu-width;
  padding: 1em;
  .fixed {
    position: fixed;
    top: 0;
    bottom: 0;
    padding-top: 1em;
  }
  .sidebar-follow {
    width: $menu-width;
    overflow-y: scroll;
  }
}

#menu {
  a {
    color: #222;
    text-decoration: none;
  }
  a:hover {
    color: #000;
  }
  ul {
    line-height: 1.4em;
    list-style: none;
    margin: .3em 0;
    margin-left: .5em;
    padding-left: .5em;
  }
  & > ul {
    & > li > ul {
      font-size: 0.9em;
      margin: .2em;
      padding: 0;
      & > li > ul {
        a {
          color: #555;
          text-decoration: none;
        }
        border-left: 1px solid #eee;
        margin-left: .2em;
        padding-left: .5em;
        border-left: 1px solid #eee;
        li.active {
          border-left: 2px solid $red;
          padding-left: 8px;
          margin-left: -10px;
        }
      }
    }
  }
  li.active {
    & > a {
      font-weight: bold;
    }
  }
}

.section-anchor {
  color: #888888;
  text-decoration: none;
  font-weight: normal;
  position: absolute;
  padding: 0 .3em;
  margin-left: -1.1em;
  opacity: 0;
  &:hover {
    color: #555555;
  }
}

h3:hover > .section-anchor,
.signature:hover .section-anchor {
  opacity: 1;
}

.fn {
  border-top: 4px solid rgb(245, 245, 240);
  padding: .2em 0;
}

.signature {
  font-family: Source Code Pro, Consolas, Menlo, Courier, monospace;
  background-color: $space-grey;
  padding: .4em 0;
  margin: 1em 0;
  overflow-x: scroll;
  .name {
    font-weight: bold;
    font-size: 1.2em;
  }
  .type {
    margin-left: .5em;
    font-size: .9em;
  }
  span {
    display: inline-block;
    vertical-align: middle;
  }
}

.method {
  font-family: Source Code Pro, Consolas, Menlo, Courier, monospace;
  background-color: $space-grey;
  .name {
    font-weight: bold;
  }
}

.spec-table {
  overflow-x: scroll;
  border-spacing: 1em;
  td {
    vertical-align: top;
    > :first-child {
      margin-top: 0;
    }
  }
  tr td:nth-child(1) {
    font-weight: bold;
    width: 6em;
    text-align: right;
  }
}

.b {
  border: 1px solid black;
}

@media (max-width: $large-screen) {
  .container {
    flex-direction: column;
    align-items: center;
  }

  .sidebar .fixed {
    position: relative;
  }
}

@media (max-width: $medium-screen) {
  .container {
    align-items: stretch;
  }
}


/* http://prismjs.com/download.html?themes=prism-solarizedlight&languages=markup+css+clike+javascript */
/*
 Solarized Color Schemes originally by Ethan Schoonover
 http://ethanschoonover.com/solarized
 Ported for PrismJS by Hector Matos
 Website: https://krakendev.io
 Twitter Handle: https://twitter.com/allonsykraken)
*/

/*
SOLARIZED HEX
--------- -------
base03    #002b36
base02    #073642
base01    #586e75
base00    #657b83
base0     #839496
base1     #93a1a1
base2     #eee8d5
base3     #fdf6e3
yellow    #b58900
orange    #cb4b16
red       #dc322f
magenta   #d33682
violet    #6c71c4
blue      #268bd2
cyan      #2aa198
green     #859900
*/

code[class*="language-"],
pre[class*="language-"] {
  color: #657b83; /* base00 */
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;

  line-height: 1.3;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
  background: #073642; /* base02 */
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
  background: #073642; /* base02 */
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: .5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background-color: #fdf6e3; /* base3 */
}

/* Inline code */
:not(pre) > code {
  background: $space-grey;
  padding: 0 .2em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #93a1a1; /* base1 */
}

.token.punctuation {
  color: #586e75; /* base01 */
}

.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #268bd2; /* blue */
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.url,
.token.inserted {
  color: #2aa198; /* cyan */
}

.token.entity {
  color: #657b83; /* base00 */
  background: #eee8d5; /* base2 */
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #859900; /* green */
}

.token.function {
  color: #b58900; /* yellow */
}

.token.regex,
.token.important,
.token.variable {
  color: #cb4b16; /* orange */
}

.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}