path: root/docs/css/main.scss

---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";

@import 'https://fonts.googleapis.com/css?family=Source+Code+Pro';

// Our variables
$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
$base-font-size:   16px;
$code-font-family: 'Source Code Pro', sans-serif;
$base-font-weight: 400;
$small-font-size:  $base-font-size * 0.875;
$base-line-height: 1.5;

$spacing-unit:     30px;

$text-color:       #efefef;
$background-color: #002B36;
$brand-color:      #2a7ae2;


$blue:          #3498db;
$blue-light:    rgba(52, 152, 219, 0.12);
$grey:          #f8f8f8;
$red:           #de332e;

$link-color: $blue;

// content area
$distance-top:     80px;
$content-width:    1150px;
$on-palm:          600px;
$on-laptop:        800px;
$toc-width:        220px;
// Minima also includes a mixin for defining media queries.
// Use media queries like this:
// @include media-query($on-palm) {
//     .wrapper {
//         padding-right: $spacing-unit / 2;
//         padding-left: $spacing-unit / 2;
//     }
// }
@import "minima";

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

*:focus {
    outline: none;
}

a, a:focus, a:hover, a:visited {
    color: $link-color;
}

div#container {
    position: relative;
    max-width: $content-width;
    margin: 0 auto;
    overflow: hidden;

    > a.logo-container {
        display: none;
    }

    div#content {
        position: relative;
        margin-top: $distance-top;
        width: $content-width - $toc-width;
        float: right;
        display: inline;

        > h1.title {
            margin-bottom: 0;
        }

        > h2.subtitle {
            font-size: 20px;
        }
    }

    div#toc {
        float: left;
        margin-top: $distance-top;
        padding-right: 20px;
        width: $toc-width;

        form#search-form {
            input#search-box {
                width: 100%;
                border: 0;
                height: 24px;
                font-size: 14px;
                padding-left: 4px;
            }

            input#search-button {
                margin-top: 3px;
            }
        }

        > div {
            position: fixed;
            top: $distance-top;
            bottom: auto;
            max-width: $toc-width;

            a > div#scala-logo {
                width: 64px;
                margin-bottom: 25px;

                > svg path {
                    fill: $red;
                }
            }

            ul#categories {
                list-style-type: none;
                margin: 0;
                padding: 0;
                background-color: transparent;

                > li {
                    border-right: 2px solid transparent;
                    margin-bottom: 15px;

                    ul {
                        list-style-type: none;
                        margin: 0;
                        padding: 0;
                        background: transparent;

                        li:hover {
                            border-right: 3px solid $blue;
                            background-color: $blue-light;

                            a:link, a:visited, a:hover, a:focus {
                                text-decoration: none;
                            }
                        }
                    }
                }
            }
        }
    }
}

div.edit-docs {
    position: absolute;
    top: 8px;
    right: 0;
}

h1#search {
    margin-top: 50px;
}

form#search-bar {
    width: 100%;
    > input {
        width: 100%;
        border: 0;
        height: 24px;
        font-size: 14px;
        padding-left: 4px;
    }
}

div.author-container {
    height: 50px;
    margin-bottom: 15px;
    > img {
        float: left;
        width: 100px;
        border-radius: 50%;
    }

    > div.author-info {
        color: rgba(255,255,255,0.45);
        float: left;
    }
}

div.author-container.spaced {
    height: 100px;

    > div.author-info {
        margin: 28px 0 0 20px;
    }
}

ul.post-list {
    > li+li {
        margin-top: 15px;
    }

    > li {
        div.date {
            color: rgba(255,255,255,0.55);
        }
    }
}

pre, code, code.hljs {
    padding: 0;
    border: 0;
    border-radius: 3px;
    background-color: $grey;
    color: $background-color;
    font-family: $code-font-family;
}

code {
    padding-left: 0.1em;
    padding-right: 0.1em;
}

pre {
    padding: 0.5em;
    background-color: $grey !important;
}

body {
    font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: $text-color;
}

@include media-query(1166px) {
    div#container {
        max-width: 1000px;

        div#content {
            width: 1000px - $toc-width;
        }
    }
}

@include media-query(1016px) {
    div#container {
        max-width: 900px;

        div#content {
            width: 900px - $toc-width;
        }
    }
}

@include media-query(915px) {
    body {
        min-width: 0;
    }

    div#container {
        max-width: none;
        padding: 12px;

        a.logo-container {
            display: block;
            > div#scala-logo-mobile {
                width: 64px;
                margin: 15px auto 0;

                > svg path {
                    fill: $red;
                }
            }
        }

        div#toc {
            float: none;
            width: 100%;
            height: auto;
            margin-top: 0;

            > div {
                top: 0;
                position: relative;

                svg {
                    display: none;
                    top: auto;
                }
            }
        }
        div#content {
            float: none;
            width: 100%;
            height: auto;
            max-width: none;
        }
    }
}