$monokai-royal-blue: #204a87; $monokai-dark-blue: #243955; $monokai-gray-0: #272822; $monokai-gray-1: #31322c; $monokai-gray-2: #3c3d37; $monokai-forest: #46830c; $monokai-gray-3: #49483e; $monokai-gray-4: #64645e; $monokai-blue: #66d9ef; $monokai-tan: #75715e; $monokai-red: #8b0807; $monokai-gray-5: #90908a; $monokai-lime: #a6e22e; $monokai-violet: #ae81ff; $monokai-yellow: #e6db74; $monokai-light: #f8f8f0; $monokai-magenta: #f92672; $monokai-orange: #fd971f; $base-font-size: 22px; $monospace: Consolas, "Liberation Mono", Menlo, Courier, monospace !default; $container-width: 1200px; @mixin container { max-width: $container-width; padding: 0 1rem; margin-left: auto; margin-right: auto; } .muted { color: $monokai-gray-5; } body { font-family: $monospace; background-color: $monokai-gray-0; color: $monokai-light; font-size: $base-font-size; padding: 5rem 0 0 0; margin: 0; } header { position: fixed; top: 0; left: 0; width: 100%; height: 5rem; padding: 0; margin: 0; text-align: center; background-color: $monokai-gray-0; box-shadow: 0 1rem 1rem $monokai-gray-0; } footer { @extend .muted; padding: 2rem; text-align: center; } section { padding-left: 5rem; } h1 { @include container; color: $monokai-orange; font-size: 2rem; font-weight: bold; } h2 { @include container; color: $monokai-orange; font-size: 1.5rem; font-weight: bold; } table { width: 100%; } td { padding: 0.5rem; } p { @include container; line-height: 2rem; } ol, ul { @include container; } li { margin-left: 2rem; margin-right: 2rem; padding: 1rem; } pre { font-family: $monospace; overflow: auto; margin: 1rem 0; } kbd { color: $monokai-lime; } code { color: $monokai-gray-5; background-color: $monokai-gray-1; } hr { border: none; margin-top: $base-font-size; margin-bottom: $base-font-size; text-align: center; &:after { @extend .muted; content: '~ ~ ~'; } } .d3container { text-align: center; } blockquote { font-style: italic; p { box-sizing: border-box; border-left: 1rem solid $monokai-gray-1; padding: 0 1rem; } } a { color: $monokai-blue; text-decoration: none; &:hover { color: $monokai-magenta; } } time { @extend .muted; } aside { @extend .muted; } .text-center { text-align: center; } .flex-justify { display: flex; flex-wrap: wrap; justify-content: space-between; } .home { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; pre { margin-top: 2rem; display: inline-block; text-align: left; line-height: 2rem; overflow: auto; } } .highlight { margin: 0; padding: 1rem; background-color: $monokai-gray-1; } .highlight pre { @include container; } .hl.string { color: $monokai-yellow; }