# 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; }
}