@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/outfit-v4-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/outfit-v4-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

// Sizes
$max-width: {{ .Param "style.pageWidth" | default "750px;" }};
$avatar-size: {{ .Param "style.avatarSize" | default "90px;" }};

// Colors
$white: {{ .Param "style.colorWhite" | default "#ffffff" }};
$black: {{ .Param "style.colorBlack" | default "#222222" }};
$blue: {{ .Param "style.colorRed" | default "#6B60E3" }};
$orange: {{ .Param "style.colorOrange" | default "#DB4D2C" }};
$darkOrange: {{ .Param "style.colorRed" | default "#581303" }};
$gray: {{ .Param "style.colorGray" | default "#FAF9F5" }};
$darkGray: {{ .Param "style.colorDarkGray" | default "#333333" }};

// Font
$font-family: {{ .Param "style.fontFamily" | default "Inconsolata" }};

// Margins
$y-small: 0.6rem;
$y-medium: 1.0rem;

// Placeholders
%link-default {
    color: $blue;
    text-decoration: none;
    & * {
        color: $blue;
    }
    &:hover {
        color: $blue;
        text-decoration: underline;
    }
}
%link-dark {
    color: $black;
    text-decoration: none;
    & * {
        color: $black;
    }
    &:hover {
        color: $black;
        text-decoration: underline;
    }
}
%table-cell {
    border: 1px solid #cccccc;
    padding: 6px 12px;
    text-align: left;
}

// Style
* {
    color: $black;
    font-family: $font-family;
    line-height: 1.2;
}
.container {
    max-width: $max-width;
}
.navbar-brand {
    @extend %link-dark;
    font-size: 2rem;
}
.nav-link {
    @extend %link-default;
}
#content {
    a {
        @extend %link-default;
    }
    p {
        margin-bottom: $y-small;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: medium;
        font-weight: bold;
        margin: $y-medium 0 $y-small 0;
        color: $darkGray;
    }
    @for $i from 1 through 4 {
        h#{$i} {
            font-size: 1.2rem + 0.2 * (4 - $i);
        }
    }
    img {
        display: block;
        margin: $y-medium left;
        max-width: 100%;
    }
    .avatar > img {
        border-radius: 50%;
        float: right;
        margin: -8px 0 0 16px;
        height: $avatar-size;
        width: $avatar-size;
    }
    ol {
        counter-reset: list;
        list-style: none;
        padding-left: 2rem;
        & > li {
            display: table-row;
        }
        & > li:before {
            content: "[" counter(list, decimal) "] ";
            counter-increment: list;
            display: table-cell;
            text-align: right;
            padding-right: .5em;
        }
    }
    .container > ol, .footnotes > ol {
        padding-left: 0;
    }
    ul {
        list-style: inside;
        padding-left: 2rem;
        & > li {
            list-style-position: outside;
            margin-left: 1em;
        }
    }
    .container > ul, .footnotes > ul {
        padding-left: 0;
    }
    table {
        margin: $y-medium auto;
        width: 100%;
        & th {
            @extend %table-cell;
            font-weight: bold;
        }
        & td {
            @extend %table-cell;
        }
        & tr:nth-child(2n) {
            background-color: #f8f8f8;
        }
    }
    blockquote {
        border-left: 4px solid;
        font-style: italic;
        margin: $y-medium 0;
        padding: 8px 8px;
	color: $orange;
    }
    pre{
	color: $darkOrange;
    }
    code {
        color: $black;
        background-color: #f8f8f8;
        border: 1px solid #cccccc;
        border-radius: 10%;
        padding: 0px 4px;
    }
    pre code {
        all: unset;
    }
    .highlight {
        margin: $y-medium auto;
        & > pre {
            padding: 8px 8px;
        }
    }
    b, strong {
	    color: $darkGray;
    }
}
#footer {
    a {
        @extend %link-dark;
	color: $darkGray;
    }
}