@import "compass";
@import "_syntax";
@import "_repl-syntax";
@import "_sidebar";

$RATIO: 1.8;

$nav-active-color: #3498db;

$prose-padding: 30px;

// $repls-bg: rgba(#ecf0f4, 0.6);
$repls-bg: $ansi-bg;

$heading-color: #112;
$body-color: #333;

$sidebar-bg: #ecf0f1;

$blockquote-border-color: #95a5a6;

$asterisk-color: #3498db;
$asterisk-glow: #f1c40f;

$console-padding: 10px;
$console-height: 300px;
$console-bg: #fff;
$console-input: #222;
$console-output: darken(#16a085, 10%);
$console-prompt: $console-input;
$console-error: #e74c3c;
// $console-cursor: #2ecc71;
$console-cursor: #eee;
$console-preloaded: #95a5a6;



@function calc-grid-width($cols) {
    @return ((100% / 12.0) * $cols);
}



//~~~~~ override bootstrap
html {
    font-size: 16px;
}
//~~~~~


body {
    background: #fff;
    font-family: "Helvetica Neue", "Helvetica", sans-serif;
}

h1, h2, h3 {
    color: $heading-color;
    font-weight: 800;

    small {
        font-size: 0.675em;
        color: rgba($heading-color, 0.33);
        font-weight: normal;
    }
}

p {
    color: $body-color;
}

.inner p,
.inner pre {
    margin-top: 1.5em;
}

.inner h1 + p,
.inner h1 + pre,
.inner h2 + p,
.inner h2 + pre,
.inner h3 + p,
.inner h3 + pre {
    margin-top: 0;
}

/** hack: this is done because putting a <div> for a .runnable
          inside a <p> results in an empty paragraph, like:
                <p>...</p><div>...</div><p></p>
**/
.inner p:empty + h3 {
    margin-top: -10px;
}

.smile {
    letter-spacing: 2px;
    font-weight: normal;
    font-style: normal;
    margin-left: 5px;
    font-size: 0.875em;

    @include transform(rotate(90deg) translateX(2px));
    @include inline-block;

    &:before {
        content: ":";
        display: inline;
        font-weight: bold;
    }

    &:empty:after {
        content: ")";
        display: inline;
    }
}

section {
    margin: 0;
    padding: 0;
    position: relative;
}

blockquote {
    border-left: 3px solid $blockquote-border-color;
    margin-left: 10px;
    margin-top: 2em;
    display: block;
    padding-left: 13px;
    padding-bottom: 0.5em;
    @include opacity(0.8);

    h3 {
        padding-top: 0.25em;
    }
}

tt {
    background: #f8f9fc;
    border: 1px solid rgba(#008, 0.1);
    padding: 3px;
    @include border-radius(2px);
}

sup[data-toggle="tooltip"] {
    $_font-size: 0.675em;

    display: none;

    position: relative;
    cursor: help;

    &[data-original-title] {
        display: inline;
    }

    &:after {
        content: '\2605';
        color: $asterisk-color;
        font-size: $_font-size;
        line-height: $_font-size / 2;
        height: $_font-size / 2;

        position: absolute;
        top: 0;
        left: 0;
        margin-top: 6px;
        margin-left: -3px;

        text-decoration: underline;

        text-shadow: 1px 1px #fff,
                     -1px -1px #fff,
                     0 0 5px rgba($asterisk-glow, 0.35),;

        @include inline-block;
    }
}


/* Typography generated using http://lamb.cc/typograph/ */
body { font-size:100%; line-height:1.4; }
h1, h2, h3 { margin-top:0; margin-bottom:0; }
h1 { font-size:2.61538em; }
h1, h3 { padding:1.37228em 0; }
h2 { font-size:1.61538em; padding:1.39659em 0; }
h3 { font-size:1.30769em; }
p { margin: 0; }
h3 { text-transform:lowercase; font-variant:small-caps; font-weight:normal; letter-spacing:2px; }




/*******************************************************************************
* Main Layout
*/

body {
    padding: 0;
}

.prose, .sidebar {
}

.prose .inner, .repls, .sidebar-container {
    padding: 20px 0;
    min-height: 100%;
}

.prose {
    padding-right: 0;
    padding-left: 5px;
    background: #fff;

    &:after {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        background: rgba(#004, 0.05);
        right: 0;
        top: 0;
        z-index: 1;
    }

    .inner {
        padding-right: $prose-padding;
        background: #fff;
        padding-right: 25px;
    }
}

.repls {
    &:after {
        content: '';
        background: $repls-bg;
        top: 0;
        right: 0;
        width: calc-grid-width(5);
        height: 100%;
        position: fixed;
        z-index: -1;
    }
}

.final-spacer {
    &:after {
        content: '';
        display: block;
        height: 640px;
    }
}




/*******************************************************************************
* Prose
*/

.runnable {
    @include box-shadow(0 2px 5px rgba(#000, 0.04));

    [contenteditable] {
        outline: 1px dotted #aaa;
    }
}

pre.runnable {
    line-height: 1.75em;
}

.run-code {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 9px;
    margin-right: 9px;
    font-size: 0.5em;
    padding-top: 3px;

    @include opacity(0.5);

    &:hover {
        @include opacity(1);
        @include transition(0.2s);
    }   
}




/*******************************************************************************
* Sidebar
*/

.sidebar {
    font-size: 13px;
    @include opacity(0.75);

    @include box-sizing(border-box);

    position: relative;

    &:hover {
        @include opacity(1);
    }
}




/*******************************************************************************
* REPL
*/

.repl {
    @include box-sizing(border-box);

    font-family: "Source Code Pro", monospace;
    width: 100%;
    min-height: $console-height;

    position: absolute;

    font-size: 12px;

    overflow: visible;

    border-top: 1px solid rgba(#fff, 0.1);
    border-bottom: 1px solid rgba(#fff, 0.1);

    @include transition(opacity 0.2s ease-in-out);

    &:empty {
        background: $console-bg url(/loading.gif) center center no-repeat;
    }

    &.scrolled-past {
        @include opacity(0.6);
        @include transition(opacity 0.75s ease-in-out);
    }

    // override bootstrap
    pre {
        border: none;
        border-radius: none;
        margin: 0;
        font-size: 1em;
    }
}

.jqconsole {
    background: rgba(#fff, 0.04);
    padding: $console-padding;
    color: #eee;
    font-family: "Source Code Pro", "Monaco", "Consolas", monospace;
}

.jqconsole-cursor {
    background: $console-cursor;

    -webkit-animation: blink 2s linear 0s infinite;
      -moz-animation: blink 2s linear 0s infinite;
      -ms-animation: blink 2s linear 0s infinite;
      -o-animation: blink 2s linear 0s infinite;

    // hack because of https://github.com/replit/jq-console/commit/3646b1aac
    // i'm not sure wtf that's about
    position: static !important;
}

.jqconsole-blurred {
    @include opacity(0.75);
    @include transition(all 0.2s);

    cursor: pointer;

    .jqconsole-cursor {
        -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          -o-animation: none;

        background: none;
        outline: 1px solid $console-cursor;
        outline-offset: -1px;
    }

    &:hover {
        @include opacity(0.9);
        @include transition(none);
    }

    &:after {
        content: "Click for REPL";

        position: absolute;
        height: 1em;
        top: 50%;
        margin-top: -0.5em;
        left: 0;

        width: 100%;

        font-size: 2.5em;
        font-family: Helvetica, sans-serif;
        font-weight: 300;
        text-align: center;
        letter-spacing: 1px;
        color: rgba(#000, 0.1);

        text-transform: uppercase;
    }
}

.jqconsole-prompt,
.jqconsole-old-prompt,
.jqconsole-input,
.jqconsole-old-input,
.jqconsole-output,
.jqconsole-error {
    display: block;
    padding: 2px;
}




@-webkit-keyframes blink {
  0%   { @include opacity(0.1); }
  50%  { @include opacity(1); }
  100%  { @include opacity(0.1); }
}