path: root/docs/css/default.css

@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
@import url(https://fonts.googleapis.com/css?family=Lobster);
@import url(https://fonts.googleapis.com/css?family=Raleway:700);
@import url(https://fonts.googleapis.com/css?family=Lato:700);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900);

html, body {
    box-sizing: border-box;
}

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

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #de332e;
    font-family: 'Source Sans Pro', sans-serif;
    overflow-x: hidden;
}

div#header {
    height: 59px;
    width: 100%;
    z-index: 1;
    position: relative;
    overflow: hidden;
}

div#mobile-header {
    display: none;
}

div.page {
    min-height: 100vh;
    width: 100%;
    padding: 15px 10px;
    min-width: 700px;
    position: relative;
    font-weight: 300;
}

div.page.exactly-one-page {
    max-height: 100vh;
}

div.page > div.centered {
    max-width: 640px;
    margin: 0 auto;
}

div.page > div.centered.questions > h1 {
    font-family: 'Lobster', sans-serif;
    font-size: 4em;
    text-align: center;
    margin: 32px 0 24px;
}

div.page > div.centered.questions > p+h1 {
    margin-top: 64px;
}

div.page.blue a,
div.page.teal a {
    color: #f26527;
}

div.page.blue a:focus,
div.page.blue a:hover,
div.page.teal a:focus,
div.page.teal a:hover {
    color: #da4323;
}

div.page.blue a:visited,
div.page.teal a:visited {
    color: #f26527;
}

div.page.blue > div.questions > div.contributors {
    width: 596px;
    margin: 0 auto;
    overflow: hidden;
}

div.page.blue > div.questions > div.contributors+div {
    margin-top: 16px;
}

div.page.blue > div.questions > div.contributors > div.contributors-cell {
    margin: 0 auto 1em;
    width: 348px;
    overflow: hidden;
}

div.page.blue > div.questions > div.contributors > div.contributors-cell > div.contributor {
    float: left;
    display: inline;
    width: 100px;
}

div.page.blue > div.questions > div.contributors > div.contributors-cell > div.contributor {
    text-align: center;
    font-size: 12px;
    color: #fff;
}

div.page.blue > div.questions > div.contributors > div.contributors-cell > div.contributor > a:hover {
    opacity: 0.9;
}

div.page.blue > div.questions > div.contributors > div.contributors-cell > div.contributor > a > img {
    width: 100%;
    border-radius: 50%;
    margin-bottom: 9px;
}

div.page.blue > div.questions > div.contributors > div.contributors-cell > div.contributor+div {
    margin-left: 24px;
}

div.page > div.centered > h2 {
    margin: 32px 0;
}

div#header nav.nav {
    float: right;
    line-height: 43px;
    font-family: 'Source Sans Pro', sans-serif;
}

div#header nav img#github-logo {
    margin-right: 10px;
    width: 40px;
    height: auto;
}

div#header li.nav-item > a.nav-link {
    color: #fff;
}

div.scala-logo-container {
    width: 232px;
    height: calc(400px + 13em);
    margin: auto;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

div.scala-logo-container > p {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

div.scala-logo-container > p > img {
    width: 100%;
    height: auto;
}

h1#dotty {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    text-align: center;
    font-size: 3.5em;
    margin-top: 20px;
}

div.centered-subtitle {
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

div.centered-subtitle > a {
    color: #fff;
}

div.centered-subtitle > a > i#scroll-down-arrow {
    font-size: 3em;
}

pre {
    background-color: #efefef;
    border-radius: 4px;
    padding: 4px 10px;
}

pre.bright {
    background-color: #efefef;
    border-radius: 4px;
    padding: 4px 10px;
    color: #bd4147;
    text-align: left;
}

h1#getting-started {
    margin-top: 25px;
}

div.centered-table > table {
    width: 100%;
}

div.centered-table+p {
    text-align: center;
    margin-top: 2em;
}

/* Decorator classes */
.centered-text {
    text-align: center;
    clear: both;
}

.no-top-padding {
    padding-top: 0 !important;
}

.page.no-top-padding {
    margin-top: -32px;
}

.red {
    background: rgb(202, 68, 94);
    color: #fff;
}

.white {
    background: #fff;
    color: #000;
}

.blue {
    background: #002B36;
    color: #fff;
}

.teal {
    background: #224951;
    color: #fff;
}

div#build-status > div.centered > div.project {
    margin-bottom: 2em;
    position: relative;
}

div#build-status progress.progress {
    position: relative;
    height: 38px !important;
}

div#build-status progress.progress-animate:after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image: linear-gradient(
        60deg,
        rgba(255, 255, 255, .2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, .2) 50%,
        rgba(255, 255, 255, .2) 75%,
        transparent 75%,
        transparent
    );
    z-index: 1;
    background-size: 30px 52px;
    animation: move 2s linear infinite;
    border-top-right-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
    border-top-left-radius: 0.2em;
    border-bottom-left-radius: 0.2em;
    overflow: hidden;
    animation: move 0.5s linear infinite;
}

@keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 88px 50px;
    }
}

div#build-status h1.title {
    margin-top: 1em;
}

div#build-status div.console-output {
    font-family: "Source Sans pro";
    font-weight: 600;
    font-size: 15px;
}

div#build-status button.console-output-button,
div#build-status button.console-output-button:hover,
div#build-status button.console-output-button:active,
div#build-status button.console-output-button:focus,
div#build-status button.console-output-button:visited {
    color: #f26527;
    font-size: 13px !important;
    position: absolute;
    top: 7px;
    right: 1px;
}

div#home-button-container {
    position: fixed;
    top: 2em;
    left: 2em;
    z-index: 2;
    text-align: center;
    color: #fff;
    width: 41px;
}

a#home-button {
    color: #fff;
}

a#home-button > img {
    width: 100%;
}

/** Blog */
#content > div.page.teal > div > h1.blog-title {
    margin-top: 1em;
}

#content > div.page.teal > div > h2.blog-sub-title {
    font-size: 1.5rem;
    margin: 0;
}

div.blog-post code {
    font-weight: 400;
    font-size: 100%;
    border-radius: 2px;
    background: transparent;
    padding: 0 0.15rem;
    color: #3ca7c7;
}

div.blog-post pre code {
    color: #000;
}

div.author-container {
    margin: 1em 0;
    width: 100%;
    overflow: hidden;
    font-weight: 400;
}

div.author-container > img {
    float: left;
    width: 100px;
    border-radius: 50%;
    border: 2px solid #aaa;
    margin-right: 1em;
}

div.author-container > div.float-container {
    float: left;
    margin-top: 1.3em;
}

div.author-container > div.float-container > div.author,
div.author-container > div.float-container > div.date {
    font-size: 1.1em;
}

div#old-posts {
    position: fixed;
    z-index: 2;
    top: 2em;
    right: 0.5em;
    color: #fff;
    width: 265px;
    overflow: ellipsis;
}

div#old-posts a,
div#old-posts a:hover,
div#old-posts a:focus,
div#old-posts a:visited {
    color: #f26527;
}

/** End Blog */

/** Media queries for smaller devices */
@media screen and (max-width: 1194px) {
    div#old-posts {
        display: none;
    }
}

@media screen and (max-width: 899px) {
    div.blog-post > div.centered > h1 {
        text-align: center;
    }
    div.blog-post > div.centered > div.author-container {
        width: 140px;
        text-align: center;
        margin: 1em auto;
    }
    div.blog-post > div.centered > div.author-container > img {
        width: 140px;
    }
    div.author-container > div.float-container {
        float: none;
        margin-top: 0;
    }
    div#home-button-container {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        padding: 15px 10px;
        min-width: 700px;
    }
    div#home-button-container > a#home-button > span {
        display: none;
    }
    div#home-button-container > a#home-button > img {
        width: 55px;
        height: auto;
    }
}

/* Media query rules specifically for mobile devices */
@media
screen /* HiDPI device like Nexus 5 */
and (max-device-width: 360px)
and (max-device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
,
screen /* Most mobile devices  */
and (max-device-width: 480px)
and (orientation: portrait)
,
only screen /* iPhone 6 */
and (max-device-width: 667px)
and (-webkit-device-pixel-ratio: 2)
{
    div#header {
        display: none;
    }

    div#mobile-header {
        display: block;
    }

    div#mobile-header > nav {
        z-index: 2;
    }

    div#mobile-header > nav #collapsed-header > div > ul {
        list-style-type: none;
        padding-left: 0;
        font-size: 2em;
    }

    #collapsed-header > div > ul > li > a {
        color: #fff;
    }

    div#mobile-header nav #github-logo {
        width: 41px;
    }

    div.page {
        min-width: 0;
    }

    div.page > div.centered.questions > h1 {
        font-size: 2.2em;
    }

    div#home-button-container {
        min-width: 0;
    }

    div.page.blue > div.questions > div.contributors {
        width: 338px;
    }

    div.page.blue > div.questions > div.contributors > div.contributors-cell {
        width: 194px;
        margin: 0 auto;
    }

    div.page.blue > div.questions > div.contributors > div.contributors-cell+div.contributors-cell {
        margin: 2em auto 0;
    }

    div.page.blue > div.questions > div.contributors > div.contributors-cell > div.contributor {
        width: 50px;
    }

    div.page.blue > div.questions > div.contributors > div.contributors-cell > div.contributor+div {
        margin-left: 22px;
    }

    div.scala-logo-container {
        width: 40%;
        height: 84%;
        top: 70px;
    }

    #content > div.page.red.exactly-one-page > div.scala-logo-container > div > p {
        font-size: 0.8em;
    }

    /* Feature */
    div.centered-table > table > tbody > tr > td:nth-child(1) {
        font-size: 0.8em;
    }

    /* Status */
    div.centered-table > table > tbody > tr > td:nth-child(2) {
        font-size: 0.8em;
        text-align: right;
    }

    div#header > nav.nav {
        float: none;
    }

    div#header > nav.nav.nav-pills .nav-item+.nav-item {
        margin-left: 0;
    }
}