@import 'css/variables';
@import 'css/classes';
@import 'css/code-book';

$font-title: Menlo, Monaco, "Ubuntu Mono", "Courier New", monospace;
$font-subtitle: "Courier New", monospace;
$font-text: Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$color-primary: #fe2977;
$color-secondary: #000;
$color-body: #444;
$color-background: #fafafa;

@mixin bookWrapper() {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;

    @media (max-width: $width-base) {
        padding-right: 20px;
        padding-left: 20px
    }
}

body {
    background-color: $color-background;
    font-size: 18px;
    margin: 0;
    padding: 0;
}

.page,
article,
p {
    font-family: $font-text;
    font-weight: 200;
}

.banner-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    //box-shadow: inset 0 0 0 10px #fe2977;
}

.banner {
    color: $color-primary;
    padding: 1em 2em;
}

.banner h1 {
    font-size: 3em;
    font-family: $font-title;
    font-weight: 700;

    abbr {
        font-family: $font-title;
        font-variant: small-caps;
        font-size: .9em;
        font-weight: 700;
        letter-spacing: 3px;
    }
}

.banner h2,
.banner p {
    width: 400px;
    margin-top: 1rem;
}

.banner h2 {
    text-align: left;
    color: $color-secondary;
    margin-right: 0;
    font-weight: 500;
    width: 500px;
    font-size: 1.5em;
    font-family: $font-subtitle;
    margin-bottom: 1rem;
}

.banner .menu {
    margin-top: 3rem;
    font-size: 1.1em;
    text-align: right;
}

.link-separator {
    font-weight: bold;
    line-height: .5rem;
    margin-left: 8px;
    margin-right: 8px;
}

.page article {
    @include bookWrapper;
    margin: 0 auto;
}

.container {
    @include bookWrapper;
}

.new-page {
    margin-top: 5rem;
}

h1 {
    color: $color-primary;
    font-family: $font-title;
    font-weight: 700;
    font-size: 2.5em;
}

.banner i,
h1 + i {
    color: $color-secondary;
    font-style: italic;
    font-size: 1em;
    font-family: $font-text;
    font-weight: 200;
}

h2 {
    color: $color-primary;
    font-family: $font-title;
    font-weight: 700;
    font-size: 1.8em;
}

blockquote {
    color: $color-secondary;
    font-family: $font-subtitle;
    font-weight: 500;
    font-size: 1.3em;
    padding: 0;
    border: none;
    margin: 2rem 0;
    z-index: 0;

    p {
        font-family: inherit;
    }
}

p + blockquote + p {
    margin-top: 2rem;
}

h1 + blockquote + p {
    margin-top: 2rem;
}

li + li {
    margin-top: .33rem;
}

li,
p {
    font-size: 1.1em;
    line-height: 1.45em;
}

article {
    color: $color-body;
}

article > * {
    margin-bottom: 1rem;
}

a {
    color: #000;
    text-decoration: underline;
    text-decoration-skip: auto;
    font-family: $font-subtitle;
    font-size: 1.1em;
    text-decoration-color: $color-primary;

    &:hover {
        text-decoration: none;
    }
}


.banner i a,
article a {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.page article + article {
    margin-top: 5rem;
}

#menu {
    display: flex;
}

#menu > nav {
    display: none;
}

#menu.shown > nav {
    display: flex;
}

.menu-open {
    top: .5rem;
    left: 0;
    margin: .5rem;
    position: fixed;
    //box-shadow: inset 0 0 0 3px $color-primary;
}

#menu.shown > .menu-open {
    display: none;
}

nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    font-size: 1rem;
    padding: 3rem 1rem 3rem 1rem;
    background-color: darken($color-background, 3);
    overflow: scroll;
    z-index: 99;
    height: 100vh;
}

nav .menu-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
}

.menu-open,
nav > * {
    margin-top: 0;
    font-size: 1.3em;
    text-decoration: none;
    padding: .5em;
}

.menu-open:hover,
nav > *:hover {
    background-color: $color-primary;
    color: #fff;
    text-decoration: underline;
}

nav > * + * {
    margin-top: .5rem;
}

nav > *.nested {
    margin-left: 1rem;
}

nav hr {
    margin: 1.5rem 0 1rem;
    width: 50%;
    background-color: $color-primary;
    height: 2px;
    padding: 1px;
}

li code {
    font-size: .8em;
}

.page .footer {
    margin-top: 2rem;
    margin-bottom: 50vh;
    font-size: 1.1em;
}

.previous {
    text-align: left;
}

.next {
    text-align: right;
}

.next + .previous {
    margin-top: 1rem;
}

button,
input {
    padding: .5rem;
    font-size: .9em;
    border: 1px solid #999;
    color: #444;
    font-family: $font-title;

    &:active,
    &:focus {
        color: $color-secondary;
        border-color: $color-primary;
        box-shadow: inset 0 0 0 2px $color-primary;
        outline:none;
    }
}

button {
    cursor: pointer;
    padding-left: 1rem;
    padding-right: 1rem;

    &:hover {
        color: $color-primary;
        border-color: $color-primary;
        box-shadow: inset 0 0 0 2px $color-primary;
    }
}

.newsletter h2 {
    font-size: 1.1em;
    margin-bottom: 1rem;
}

article em {
    font-style: italic;
}

pre {
    page-break-inside:avoid;

    width: calc(100% + 20mm);
    margin: 2rem 0 2rem -10mm;

    overflow-x: auto;
    display: block;

    border: 1px solid darken(#fff, 7);
    background-color: darken(#fff, 3);
}

pre > code {
    line-height: 1.7em;
    font-size: .9em;
    letter-spacing: 0;
    margin-right: 0;

    padding: 8mm 10mm;

    display: block;
    background-color: darken(#fff, 3);
}

code {
    font-size: .7em;
    letter-spacing: 1px;

    padding: .2em .4em;
    margin-right: 2px;

    font-family: $font-code;
    background-color: darken(#fff, 3);
    color: #000;
}

p > code {
    font-size: .8em;
    background-color: darken(#fff, 6);
}

article hr {
    border: 1px solid $color-primary;
    width: 33%;
    margin: 5rem auto;
}
