/***************
 * cascading style sheet for taviso, taviso@gmail.com
 * $Revision: 1.6 $
 ***************************************************************/

@import url('https://fonts.googleapis.com/css?family=Inconsolata');

header, nav, footer {
    border:             2px dashed #333;
    background-color:   #ccc;
    color:              #000;
    margin:             1em;
    padding:            1em;
}

figcaption:not(.visible) {
    display:            none;
}

figcaption, caption {
    font-size:          small;
    text-align:         center;
}

h1.title {
    margin:             auto;
}

p.author {
    font-size:          x-small;
    margin:             auto;
}

p.author::before {
    content:            "by ";
}

p.date {
    overflow-wrap:      anywhere;
    display:            none;
}

footer {
    text-align:         center;
}

header~* {
    margin:             1em;
    padding:            1em;
}

body {
    max-width:          50em;
    margin:             auto;
    font-family:        "Inconsolata", monospace;
    font-size:          1.1em;
    background-color:   #eee;
    color:              #000;
}

h1, h2, h3, h4, h5, h6 {
    font-family:        "Inconsolata", monospace;
    clear:              both;
}

img, video {
    padding:            2px;
    border:             2px dashed #333;
    background-color:   #fff;
    color:              #000;
    height:             12em;
    float:              right;
    clear:              right;
    margin-left:        1em;
    margin-bottom:      1em;
}

img.noclear {
    clear:              none;
}

/* codeblocks *and* quoted blocks */
blockquote, pre, pre.sourceCode {
    padding:            1em;
    border:             2px dashed #333;
    background-color:   #fff;
    color:              #000;
    clear:              both;
    display:            table;
    margin-left:        auto;
    margin-right:       auto;
    padding-top:        0.25em;
    padding-bottom:     0.25em;
}

/* add {.bare} to an img to hide the margins if its in a quote */
blockquote:has(.bare) {
    display:            contents;
}

.bare {
    float:              none;
    clear:              both;
}

pre.nomargin {
    margin-left:        unset;
    margin-right:       unset;
}

/* images inside quoted blocks */
blockquote img, blockquote video {
    clear: none;
    height: auto;
    max-height: 32em;
    max-width: 100%;
}

/* If it's just an image, no need to draw two borders */
blockquote > p:only-child > a:only-child > img:only-child {
    border: none;
    padding: 0;
}

/* just codeblocks */
pre, code, pre.sourceCode {
    background-color:   lightyellow;
    font-family:        "Inconsolata", monospace;
    border-radius:      0.5em;
}

object {
    padding:            2px;
    border:             2px dashed #333;
    background-color:   #fff;
    color:              #000;
    float:              right;
    margin-left:        1em;
    margin-right:       2em;
}

table {
    padding:            2px;
    border-style:       solid;
    border-color:       #000;
    border-collapse:    collapse;
    width:              100%;
    caption-side:       bottom;
}

td {
    border:             1px solid #000;
    text-align:         left;
}

th {
    border:             1px solid #000;
    background-color:   #ccc;
    color:              #000;
    text-align:         left;
}

.noborder, .noborder * {
    border:             none!important;
    padding:            0!important;
}

hr {
    height:             1px;
    border:             0px none #000;
    border-top:         1px solid #000;
    clear:              both;
}

/* This is used for keyboard shortcuts */
kbd {
    padding:            0.05em 0.2em 0.05em 0.2em;
    border-width:       medium;
    border-style:       outset;
    text-align:         center;
    text-transform:     capitalize;
    font-size:          smaller;
    font-weight:        bold;
    outline:            outset;
    outline-width:      0.1em;
    border-radius:      0.25em;
    background-image:   linear-gradient(to right, #bbb, #eee);
}

summary {
    list-style-position: outside;
}

/* This is so I can use {color=red} in markdown */
[color="red"]    { color: red; }
[color="green"]  { color: green; }
[color="blue"]   { color: blue; }
[color="yellow"] { color: yellow; }
[color="white"]  { color: white; }
[color="black"]  { color: black; }