// text

body {
    font-size: 1.8em;
}

.panel-title {
    font-size: 1.1em;
}


// a few niceties for lab/assignment content
$noteColour: #f1c40f;
$helpWantedColour: #3498db;
$futureColour: #1abc9c;
$deprecatedColour: #ff4ce8;
$extensionColour: #9b59b6;

@mixin lab-content-box ($heading, $colour){
    padding: 10px;

    &::before {
        background: $colour;
        color: #fff;
        padding-left: 1em;
        content: $heading;
        display: block;
        font-weight: 600;
        margin-bottom: 1em;
    }
}

.note-box {
    @include lab-content-box("note", $noteColour);
    background: lighten($noteColour, 25%);
}
.non-vscode-box {
    @include lab-content-box("non-VSCode users", $helpWantedColour);
    background: lighten($helpWantedColour, 30%);
}
.future-box {
    @include lab-content-box("future plans", $futureColour);
    background: lighten($futureColour, 40%);
}
.deprecated-box {
    @include lab-content-box("deprecation warning", $deprecatedColour);
    background: lighten($deprecatedColour, 22%);
}
.extension-box {
    @include lab-content-box("extension", $extensionColour);
    background: lighten($extensionColour, 30%);
    border-color: $extensionColour;
}

// header

// for search box
.navbar-form {
    margin-top: 0px;
    margin-bottom: 0px;
}

// for "Search by" string
.navbar-form.navbar-left {
    line-height: 0;
}

@media screen and (min-width: 768px) {
    // for github link
    .fa {
        font-size: 35px;
    }
    .navbar-nav.github {
        li > a {
            padding-top: 15px;
            padding-bottom: 10px;
        }
    }
}

@media screen and (max-width: 768px) {

    // for "docs" and "blog" link
    .nav.navbar-nav {
        margin-top: 0;
        margin-bottom: 0;
        li > a {
            padding-top: 3px;
            padding-bottom: 3px;
        }
    }

    // for serach box
    .navbar-form.navbar-left {
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    // for github link
    .navbar-nav.github {
        display: none;
    }
}

// because we're now using these for keyboard shortcuts
kbd {
	// size & shape
	font-size: 0.95em;
	padding: 0.1em 0.15em;
	border-radius: 0.2em;
	// colours
	color: #222;
	border: 1px solid #666;
	box-shadow: 0.15em 0.15em #888;
	background: #eee;
	text-decoration: none;
}
