cbillowes/curious-programmer-helium

@import "../../third-parties/bootstrap/custom-variables";
@import "../../third-parties/bootstrap/scss/print";

@mixin gutter() {
    margin-left: 5%;
    margin-right: 5%;
}

$background: $black;
$background-darker: darken($black, 2%);
$background-lighter: $gray-900;

$foreground: $gray-200;
$foreground-lighter: $gray-100;
$foreground-darker: $gray-300;
$container-width: 1024px;
$menubar-width: 250px;
$menu-bar-accent: #9A9C16;
$border-radius: 5px;

$font-size-base: 1.86rem;
$font-size-medium: $font-size-base - 0.15;
$font-size-small: $font-size-base - 0.25;

$font-size-lg-h1: $font-size-base + 1.5;
$font-size-lg-h2: $font-size-base + 1;
$font-size-lg-h3: $font-size-base + 0.25;
$font-size-lg-rest: $font-size-base + 0;

$font-size-md-h1: $font-size-medium + 1.5;
$font-size-md-h2: $font-size-medium + 1;
$font-size-md-h3: $font-size-medium + 0.25;
$font-size-md-rest: $font-size-medium + 0;

$font-size-sm-h1: $font-size-small + 1;
$font-size-sm-h2: $font-size-small + 0.5;
$font-size-sm-h3: $font-size-small + 0.15;
$font-size-sm-rest: $font-size-small + 0;

$text-shadow: $background-darker 1px 1px;
$line-height: $font-size-base * 2;
$font-family-serif: $font-family-base;

$font-family-serif: "Crimson Text", "Times New Roman", serif;
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-sans-serif-heavy: 800;
$font-family-sans-serif-light: 400;
$font-family-serif-heavy: 700;
$font-family-serif-light: 400;

$background-serious-highlight: lighten($accent, 45%);

$background-darker: $background-darker;
$foreground-serious-highlight: $accent;
$foreground-serious-highlight-anchor: $background;
$foreground-serious-highlight-anchor-visited: lighten($background, 20%);

$background-serious-highlight: lighten($accent, 45%);
$foreground-serious-highlight: #cc0000;
$foreground-serious-highlight-anchor: $background;
$foreground-serious-highlight-anchor-visited: lighten($background, 20%);

$scrollbar-track: lighten($background, 15%);
$scrollbar-thumb: $secondary;
$visited: lighten($secondary, 10%);

$table-background: darken($background, 5%);
$table-head-background: darken($background, 7%);
$table-border: $background;
$table-hover-text: lighten($background, 5%);
$table-hover-link: darken($foreground, 40%);

@mixin button {
    font-weight: $font-family-sans-serif-light;
    font-family: $font-family-sans-serif;
    text-shadow: none;
    background-color: $primary;
    color: $background-darker;
    padding: 0 0.5em;
    display: inline-block;
    border-radius: 4px;
    line-height: 1.75em;
    cursor: pointer;
    font-size: $font-size-base - 0.5;

    &:hover,
    &:visited:hover {
        color: $background;
        background-color: $secondary;
    }

    @include medium-media {
        font-size: $font-size-medium - 0.5;
    }

    @include small-media {
        font-size: $font-size-small - 0.5;
    }
}

@mixin medium-media {
    @media screen and (min-width: 800px + 1) and (max-width: 1024px) {
        @content;
    }
}

@mixin small-media {
    @media screen and (max-width: 800px) {
        @content;
    }
}

@mixin highlighted-section {
    background-color: $background-darker;
    padding: 1em 3em 2em 3em;
}

@mixin media-query-sm {
    @media screen and (min-width: 0px) and (max-width: 840px) {
        @content;
    }
}

@mixin media-query-md {
    @media screen and (min-width: 841px) and (max-width: 1200px) {
        @content;
    }
}

@mixin media-query-lg {
    @media screen and (min-width: 1201px) {
        @content;
    }
}