/*
Theme Name: blacknwhite
Theme URI: https://thenoviceoof.com/
Author: thenoviceoof
Description: A mildly black and white theme.
Version: 0.0.1
License: MIT
License URI: license.txt
Text Domain: earth
Domain Path: /languages/
Tags: fluid-layout
*/

/* Load some fonts. */

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

/* List styling removal. */
.blog-nav ul,
.blog-archive ul {
    list-style: none;
    margin:0;
    padding:0;
}

.blog-nav li,
.blog-archive li {
    margin:0;
    padding:0;
}

/* Top level container ------------------------------------------------------ */

body {
    margin:0;
    padding:0;

    display:flex;
    flex-direction:column;
    min-height:100vh;
}

/* Top navbar --------------------------------------------------------------- */

.blog-nav {
    flex-shrink:0;
    display:flex;
    flex-direction:row;
    justify-content:center;

    font:16pt 'Ubuntu', sans-serif;

    margin:0;
    padding:0;
    width:100%;
}

@media (max-width: 700px) {
    .blog-nav {
        flex-wrap:wrap;
    }
}

.blog-title {
    flex:1 2 40%;
    text-align:right;

    padding-right:2em;
    padding-top:0.1em;
    padding-bottom:0.1em;
    background-color:black;
    border-bottom:2px black solid;
}

.blog-title a {
    display:inline-block;
}

.blog-title img {
    height:24pt;
    vertical-align:middle;
}

@media (max-width: 700px) {
    .blog-title {
        text-align:center;
        padding-right:0;
        min-width:100%;
    }
}

.blog-nav ul {
    flex:1 1 60%;
    display:flex;
    flex-direction:row;
    justify-content:flex-start;

    padding-left:2em;
    padding-top:0.25em;
    padding-bottom:0.25em;
    background-color:hsl(210, 15%, 85%);
    border-bottom: 2px #808080 solid;
}

@media (max-width: 700px) {
    .blog-nav ul {
        padding:0.25em;
        justify-content:center;
    }
}

.blog-nav li {
    display:inline-block;
    flex:1 1 auto;
    padding:0 0.1em;
    text-align:center;
}

/* Manually align the nav items */
.blog-nav-about {
    max-width:3.8em;
}
.blog-nav-blog {
    max-width:2.8em;
}
.blog-nav-projects {
    max-width:4.5em;
}
.blog-nav-news {
    max-width:3em;
}

.blog-nav li a {
    color:#303030;
}

/* blog post body ----------------------------------------------------------- */

.blog-body {
    flex:1 0 auto;
    display:flex;
    flex-direction:row;
    justify-content:center;
}

@media (max-width: 700px) {
    .blog-body {
        flex-wrap:wrap-reverse;
    }
}

.blog-body img {
    max-width:100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family:'Ubuntu', sans-serif;
}

/* Sidebar ------------------------------------------------------------------ */

.blog-archive {
    flex:1 2 40%;
    font:12pt 'Lato', sans-serif;
    text-align:right;
    /* Push the archive list down, leaving the post title higher. */
    padding-top:3em;
    padding-right:2em;
}

.blog-archive h1 {
    font:bold 18pt 'Ubuntu', sans-serif;
}

.blog-archive h1:not(:first-child) {
    margin-top:2em;
}

@media (max-width: 700px) {
    .blog-archive {
        border-top:5px black solid;
        padding:0.5em;
        background-color:hsl(210, 15%, 85%);
    }
}

.blog-archive li {
    margin:0.8em 0;
}

.blog-archive a {
    color: #202020;
}

/* Article ------------------------------------------------------------------ */

.blog-width-constrainer {
    max-width:100vw;
}

.blog-container-container {
    flex:1 1 60%;
}

.blog-container {
    padding-left:2em;
    padding-right:1em;
    padding-bottom:1em;
    font:14pt 'Lato', sans-serif;
}

@media (max-width: 700px) {
    .blog-container {
        padding-left:1em;
    }
}

.blog-container a {
    color: black;
}

.blog-article {}

.blog-article-title {
    font-size:2.5em;
    margin-bottom:0.2em;
}

.blog-article-metadata {
    font:14pt 'Lato', sans-serif;
    color:hsl(0, 0%, 40%);
    padding-left:1em;
}

.blog-article-contents {
    max-width:35em;
    min-width:15em;
}

/* Add some spacing between subsequent posts. */
.blog-article-contents:not(:first-child) {
    margin-top:4em;
}

.blog-article-body p {
    margin:1em 0;
    line-height:1.25em;
    word-spacing:0.08em;
    letter-spacing:0.01em;
}

.blog-article-body li {
    margin:0.75em 0;
    line-height:1.25em;
    word-spacing:0.08em;
    letter-spacing:0.01em;
}

/* Single-page styling ------------------------------------------------------ */

.blog-page-content {
    max-width:40em;
    padding:0 1em;
    font:14pt 'Lato', sans-serif;
}

.blog-page-content p {
    margin:1em 0;
    line-height:1.25em;
    word-spacing:0.08em;
    letter-spacing:0.01em;
}

.blog-article-body li {
    margin:0.75em 0;
    line-height:1.25em;
    word-spacing:0.08em;
    letter-spacing:0.01em;
}

.blog-page-content a {
    color: black;
}

/* Footer ------------------------------------------------------------------- */

.blog-footer {
    flex-shrink:0;
    background-color:black;
    color:white;
    text-align:center;
    padding:0.5em 0;
    font:14pt 'Ubuntu', sans-serif;
}

/* KaTeX/code specific styling ---------------------------------------------- */

.tno-katex-display {
    max-width:100%;
    overflow:auto;
}

.blog-body pre {
    max-width:100%;
    overflow:auto;
}

.blog-body table {
    max-width:100%;
    overflow:auto;
}

/* Wordpress/page specific hacks -------------------------------------------- */

#respond { display:none;cursor:pointer; }
#comment {
    width:100%;
}

.entry {
    margin-bottom:1em;
    padding:1em;
    background-color:#F5F5F5;
    border-radius:1em;
}
.entry-tag {
    display:inline-block;
    margin:0.2em;
    padding:0.5em;
    font-family:sans-serif;
    border-radius:0.5em;
}
.entry-tag-time {
    background-color:#DDD;
}
.entry-tag-hack {
    background-color:#DAA;
}
.entry-tag-event {
    background-color:#ADA;
}
.entry-tag-project { /* meaning seriuz bizness */
    background-color:#AAD;
}
.entry-tag-wip {
   background-color:#ACC;
}

#cat_name{
    margin:0;
    font-size:1.5em;
}

.strike { text-decoration:line-through; }

pre {
    padding:0.5em;
    border:1px black dashed;
    background-color:white;
}

.abstract {
    padding:1em 3em;
}