// print media exceptions @media print {

.mode, header nav, footer a.edit {
        display: none;
}

main article aside {
        margin-right: 0 !important;
}

}

// placeholder for responsive mode indication footer nav .mode {

font-size: 70%;
text-transform: uppercase;
color: lighten($footer-color, 50%);
&:before { content: '~'; }

}

// desktop @media all and (min-width: 801px) {

.mode:before {
        content: 'Desktop' !important;
}

}

// tablet & mobile @media all and (max-width: 800px) {

body {
        text-align: left !important;
}

main, header, footer {
        width: 90% !important;
        min-width: 300px !important;
        margin: 0;
}

main article blockquote {
        &:before {
            content: '' !important;
        }
}

main ul.index li.year {
        float: none !important;
        text-align: left !important;
        margin: .5em 0 0 0 !important;
}

main article aside {
        margin-right: 0 !important;
}

// for tablet & mobile move year to top of ul of posts
main {
        h2.year {
                // clear: both;
                float: none !important;
                // width: 4.5em;
                margin: 0 !important;
                text-align: left !important;
                font-size: 1.5em !important;
                color: $main-heading-color !important;
        }

        ul.index {
                margin-top: 0 !important;
        }
}

.mode:before {
        content: 'Tablet' !important;
}

}

// mobile @media all and (max-width: 500px) {

body {
        text-align: left !important;
}

main, header, footer {
        // font-size: 200%;
        width: 95% !important;
        min-width: 100px !important;
        margin: 0;
}

.mode:before {
        content: 'Mobile' !important;
}

main article aside {
        margin-right: 0 !important;
}

footer nav p span.copy {
        position: relative;
        margin-left: 0;
}

}

::selection {

color: $selection-color;
background-color: $selection-background-color;

}

// size the width for comfortable reading main, header, footer {

width: 70%;
max-width: 700px;
margin: 0 auto;
clear: both;

}

body {

font-family: $body-serif;
font-size: 1.3em;
color: $body-color;
background-color: $body-background-color;

}

header {

nav {
        color: $header-color;
        font-family: $header-serif;
        font-size: 80%;
        font-weight: normal;
        margin: .5em 0;
        float: left;

        // site menu shows posts in "global" category
        ul {
                padding: 0;
                margin: 0;
                li:first-child {
                        padding-left: 0;
                }
                li {
                        color: $header-link-color;
                        list-style: none;
                        padding-left: .5rem;
                        display: inline-block;

                        &:before { content: '\2022'; padding-right: .5rem; }
                        &:first-child:before { content: ''; padding-right: 0; }

                        a {
                                &:hover { text-decoration: underline; }
                                &, &:active, &:visited {
                                        text-decoration: none;
                                        color: darken($header-link-color,20%);
                                }
                        }
                }
        }
}

}

a {

color: darken($link-color,15%);
&:hover, &:active, &:visited {
        color: $link-color;
}

}

// main area of the page main {

p {
        margin: 1em 0;
        line-height: 1.3em; 

        code {
                // TODO: need better styling
                font-size: .9em;
                background-color: white;
                border: solid 1px #ccc;
                border-radius: 3px;
                padding: 0 .2em;
        }
}

// figure is a composition of the image and caption
figure {
        margin: 1em auto;
        width: 80%;
        figcaption {
                //font-size: .8em;
                text-align: center;
                padding: .5rem;
                font-family: $image-caption-serif;
                color: $image-caption-color;
        }

        img {
                border-radius: 6px;
                // width: 100%;
        }
}

p img {
        border-radius: 6px;
        width: 100%;
}

p img + em {
        font-family: $image-caption-serif;
        color: $image-caption-color;
        font-style: normal;
        text-align: center;
        display: block;
        width: 100%;
}

figure.frame img {
        border: 1px solid $header-color;
}

// for slideshows show the first figure, hide rest
div.slideshow figure {
        display: none;
        &:first-child {
                display: block;
        }
}

div.gallery {
        width: 100%;
        float: left;
        margin-bottom: 1em;

        img {
                width: 100%;

                // height: 200px;
                // float: left;
        }

        div.images {
                position: relative;
                height: 500px;
                overflow: hidden;

                will-change: height;
                transition: 300ms ease;

                img.transition {
                        will-change: left;
                        transition: 300ms ease;
                }

                img.left   { left: -100% !important; }
                img.right  { left:  100% !important; }
                img.center { left:    0  !important; }

                img.thumbnail {
                        margin: 10px;
                        float: left;
                        position: static;
                }

                img {
                        cursor: pointer;
                        border-radius: 6px;

                        position: absolute;
                        top: 0;
                        left: 100%;
                }

                img:first-child {
                        left: 0;
                }
        }

        nav {
                width: 100%;
                text-align: center;
                i {
                        cursor: pointer;
                        margin: .5rem;
                        display: inline-block;
                        width: 1rem;
                        height: 1rem;
                        border-radius: .5rem;
                        transition: 300ms ease;
                        will-change: background-color;

                        background-color: hsl($hue,10,80);
                        &.selected {
                                background-color: hsl($hue,50,40);
                        }
                }

                // slightly modified version of
                // https://css-tricks.com/making-pure-css-playpause-button/
                .play {
                        float: left;

                        label {
                                margin: .5rem;
                                display: inline-block;
                                box-sizing: border-box;
                                width: 0;
                                height: 1rem;
                                cursor: pointer;
                                border-color: transparent transparent transparent hsl($hue,50,40); // same color as i.selected

                                transition: 300ms all ease;
                                will-change: border-width;

                                // paused state
                                border-style: double;
                                border-width: 0 0 0 1rem;
                        }
                        input[type='checkbox'] {
                                display: none;
                                &:checked + label {
                                        border-style: solid;
                                        border-width: .5rem 0 .5rem 1rem;
                                }
                        }
                }

                .preview {
                        position: relative;
                        cursor: pointer;
                        float: right;
                        margin: .5rem;
                        width: 14px;
                        height: 14px;
                        background-color: hsl($hue,50,40);
                        .vg, .hg {
                                border: 1px solid $body-background-color;
                                position: absolute;
                        }
                        .vg {
                                top: -1px;
                                left:4px;
                                width: 4px;
                                height: 100%;
                        }
                        .hg {
                                left: -1px;
                                top:4px;
                                height: 4px;
                                width: 100%;
                        }
                }
        }
}

div.gallery + p {
        clear: both;
}

// drop caps
// TODO: this needs work
@if $drop-caps {
        h1, h2, h3, h4, h5 {
                + p:first-letter {
                        color: $main-dropcaps-color;
                        float: left;
                        font-family: $header-serif;
                        font-size: $main-dropcaps-font-size;
                        line-height: 60px;
                        padding-top: 4px;
                        padding-right: 8px;
                        padding-left: 3px;
                }
        }
}

h1,h2,h3,h4,h5 {
        margin: 1em 0 .5em 0;
        color: $main-heading-color;
        font-family: $header-serif;
        text-align: left;
}

// h4 should sit right on top of the paragraph
h4 {
        margin-bottom: 0;
        color: $body-color;
}
h4 + p { margin-top: .2em }  // .2em to match line height spacing

// ul.posts {
//      padding-left: 0;
//      li {
//              list-style: none;
//              padding-left: 0;
//              margin-left: 0;
//              margin-top: .5rem;
//              margin-bottom: .5rem;
//      }
// }

// styling for the main article
article {

        // styling for in-article unordered lists
        ul {
                padding-left: 0;
                li {
                        list-style: none;
                        padding-left: 1.2em;
                        padding-bottom: .3em;
                        margin-left: 0;

                        // mdash for unordered list items
                        &::before {
                                content: "\2014";
                                margin-left: -1.2em;
                                margin-right: .2em;
                        }

                        // custom checkboxes for task list items
                        &.task-list-item {
                                padding-left: 1em;

                                &::before {
                                        content: none;
                                }
                                & input::before {
                                        content: "\2610";
                                        padding-right: .3em;
                                }
                                & input[checked]::before {
                                        content: "\2611";
                                }
                                & input {
                                        appearance: none;
                                        -moz-appearance: none;
                                        -webkit-appearance: none;
                                        margin-left: -1.2em;
                                        height: 1em;
                                }
                        }

                }
        }

        // TODO: probably needs work
        blockquote {
                clear: both;
                margin: .5rem 0;
                padding: 0;
                margin-left: 2em;
                position: relative;
                font-size: 1.2em;
                font-style: italic;

                color: $main-blockquote-color;

                &:before {
                    content: '\201c';
                    position: absolute;
                    top: -.15em;
                    left: -.7em;
                    font-size: 4em;
                    color: $main-blockquote-before-color;
                }

                :first-child { margin-top: 0; }
                :last-child { margin-bottom: 0; }
        }

        // inset side note
        aside {
                clear: both;
                float: right;
                margin: 0 -20% 0 1rem;
                padding: 0.5em 1rem;
                position: relative;
                font-size: .9em;
                text-align: left;
                width: 40%;
                color: $main-aside-color;
                border-left: 1px solid $main-aside-color;
        }

        > table {
                width: 100%;
                &, th, td {
                        border-collapse: collapse;
                        border: 1px solid $main-table-header-bg-color;
                }
                thead {
                        th {
                                font-weight: bold;
                                text-align: center;
                                background-color: $main-table-header-bg-color;
                                font-family: $sans-serif;
                                color: $body-color;
                                font-size: 80%;
                        }
                }
                th, td { padding: 7px; }
        }

        dt { font-weight: bold; }
        dd { margin: 0 0 .5em 0; }

        // styling for the QED brick
        .qed { color: #ccc; }
}

// styling for years in the index timeline of posts
// TODO: hoist color to _config.sass
// TODO: shold better scope selector
h2.year {
        clear: both;
        color: hsl($hue,10,80);
        float: left;
        width: 4.5em;
        margin: -.2em 0 0 -5em;
        padding: 5px 0 0 0;
        font-family: $header-serif;
        font-size: 2em;
        font-weight: normal;
        text-align: right;
}

// styling for index of posts
ul.index {
        padding-left: 0;

        li {
                padding: .5em 0 .3em 0;
                list-style-type: none;
                color: $main-index-color;

                a {
                        text-decoration: none;
                        &:hover {
                                text-decoration: underline;
                        }
                }

                // space posted date off post title
                span.posted {
                        font-size: .8em;
                        margin-left: 1.2em;
                        &:before {
                                content: "\2014";
                                margin-left: -1em;
                                margin-right: .2em;
                        }
                }
        }
}

}

span.badge {

border-radius: 1em;
display: inline-block;
padding: 2px .5em;
margin-left: 1em;
font-size: 50%;
font-weight: bold;
color: white;
text-transform: uppercase;
font-family: $sans-serif;

&.draft      { background: linear-gradient(hsl(0,90,60), hsl(0,90,40)); }
&.collection { background: linear-gradient(hsl(210,60,60), hsl(210,60,40)); }
&.private    { background: linear-gradient(hsl(20,10,40), hsl(20,10,20)); }
&.blog       { background: linear-gradient(hsl(280,90,60), hsl(280,90,40)); }

}

// site footer footer {

color: $footer-color;
font-size: 80%;
margin-top: 2em;
font-family: $footer-serif;
&, a, a:active, a:hover, a:visited { color: $footer-link-color }

// dont underline links in the footer
nav a {
        text-decoration: none;
        &:hover {
                text-decoration: underline;
        }
}

// hang copyright symbol
span.copy {
        position: absolute;
        margin-left: -1.2rem;
}

}