# Read me Jekyll. kthxbye


$header : #922610; $h-line : e69a28; $body : #212121; $back : eee5ce; $bar : $h-line;

$link : $header; $alink : cf2d0c;

$tag : $h-line; $h-tag : ff9b05; $category : $header; $h-cat : $alink;

html, body {

background-color: $back;
background-image: url({{ 'assets/background.jpg' | absolute_url }});
background-size: cover;
font-family: 'Noto Sans', sans-serif;
text-align: justify;
color: $body;

}

h1, h2, h3, h4 {

font-family: 'Libre Baskerville', serif;
font-variant: small-caps;
font-weight: 600;
color: $header;

} h1 {

font-size: 2.5em;
header & {
  font-size: 1.5em;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: justify;
  margin-top: 1em;
}
& + p:not(.subtitle):not(.meta)::first-letter {
  float: left;
  font-family: 'UnifrakturCook', cursive;
  font-size: 4em;
  line-height: 1em;
  margin-right: .1em;
  text-transform: uppercase;
}
& + p.subtitle {
  margin-top: -1.5em;
  margin-bottom: 2.5em;
  font-family: 'Montserrat', sans-serif;
  font-variant: small-caps;
}

} h2 { font-size: 2.0em; } h3 {

border-bottom: 2px solid $h-line;
font-size: 1.8em;

} h4 { font-size: 1.5em; } h5, h6 {

font-family: 'Montserrat', sans-serif;
font-variant: small-caps;
font-weight: 700;

} h5 { font-size: 1.5em; } h6 { font-size: 1.0em; }

a {

text-decoration: none;
color: $link;
&:visited { color: $link; }
&:hover, &:active { color: $alink; }

}

header {

overflow: auto;
background-color: transparent;
background-image: url({{ 'assets/header.png' | absolute_url }});
background-position: bottom;
background-size: auto 125%;
margin-bottom: 3em;
p.version {
  margin-top: -3.5em;
  margin-bottom: 4em;
  font-family: 'Noto Sans', sans-serif;
  font-size: .75em;
}

}

div.metadata {

p:nth-child(2), p.chapter {
  margin-top: -1.5em;
  font-family: 'Montserrat', sans-serif;
  font-variant: small-caps;
  font-weight: 700;
  overflow: auto;
}
p.species {
  margin-top: -1.5em;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight: 700;
  overflow: auto;
}
span {
  display: inline-block;
  float: left;
  border-radius: 0.3em;
  vertical-align: middle;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.8em;
  font-weight: 500;
  min-width: 5em;
  margin-right: 0.5em;
  padding: 0.3em 0.6em;
  color: white;
  transition: background-color 0.3s;
  &.tag {
    background-color: $tag;
    &:hover { background-color: $h-tag; }
  }
  &.category {
    background-color: $category;
    &:hover { background-color: $h-cat; }
  }
}

}

div.spell {

p { margin-bottom: 0; }
&.header {
  p.meta {
    margin-top: -1.5em;
    margin-bottom: 1.0em;
    font-family: 'Montserrat', sans-serif;
    font-variant: small-caps;
    font-weight: 700;
    overflow: auto;
  }
  div {
    margin-left: 2em;
    margin-bottom: 1em;
    p:first-child {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.2em;
      font-variant: small-caps;
      font-weight: 700;
    }
  }
}
&.components {
  h6 {
    margin-bottom: 0;
    margin-top: 0.7em;
  }
  p { margin-left: 1em; }
}

}

.page-404 {

h2, p {
  text-align: center;
  margin-bottom: 0.3em;
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  max-width: 256px;
}

}

.building {

margin-bottom: 1.5em;
p { margin-bottom: 0.3em; }
p.type {
  margin-top: -1.0em;
  font-family: 'Montserrat', sans-serif;
  font-variant: small-caps;
  font-weight: 700;
  overflow: auto;
}
h5 { margin-bottom: 0.3em; }
h6 {
  font-size: 1.1em;
  margin-bottom: 0;
  margin-top: 0.5em;
}
ul { margin-bottom: 0; }
li {
  list-style: none;
  margin-left: 1.5em;
  margin-bottom: 0.3em;
}

}

.chapter.links {

overflow: auto;
a {
  text-align: center;
  display: inline-block;
  width: 100%;
  @media screen and (min-width: 550px) {
    width: 40%;
    &.prev {
      text-align: left;
      float: left;
    }
    &.next {
      text-align: right;
      float: right;
    }
  }
}

}

h2.collections {

margin-top: 2em;
margin-bottom: 0.5em;

} .collection {

margin-bottom: 2em;
h5 { margin-bottom: 0.2em; }
ul { margin-bottom: 0; }
li {
  list-style: none;
  margin-left: 1.5em;
  margin-bottom: 0.3em;
}

}