text-npr.css

/*
    Designed for https://text.npr.org/ to make it readable in a desktop browser,
    while keeping it no-frills and accessible

    Xkeeper, 2018

    (The website uses exclusively <p> for everything instead of semantic elements,
     so this is really ugly. A native solution could also use media queries to
     present a mobile-optimized experience as well...)
*/

/* Make the page light-on-dark instead, with a max width of ~800 pixels on the screen.

Your preferred font and size will probably be different; Georgia was a simple choice for me
*/

html {
    background: #444;
}

body {
    background: #111;
    color: #ccc;
    max-width: 800px;
    margin: 2em auto;
    padding: .5em 2em;
    box-shadow: 0 0 240px 10px black;
    border-radius: 20px;
    font-family: Georgia, serif;
    font-size: 110%;
}

/* Make links readable with light-on-dark and slightly less fully-saturated. They still change colors on hover and visit, though
*/

a:link {
    color: #88f;
}

a:visited {
    color: #a7b;
}

a:hover, a:active {
    color: #33f;
}

/* "Text-only NPR" link, shoved to top right and made smaller */

script + p {
    float: right;
    font-size: 80%;
    font-style: italic;
    color: #aaa;
}

/* "Home" link text, shoved to top left and made smaller as well */

script + p + p {
    float: left;
    font-size: 80%;
    font-style: italic;
    color: #aaa;
}

/* Heading of the page. You may want something other than sans-serif */

script + p + p + p {
    clear: both;
    font-size: 200%;
    font-weight: bold;
    font-family: Verdana, Tahoma, sans-serif;
    color: white;
    margin-bottom: 0em;
}

/* The byline and time of article publication, or the first thing on the index pages (oops) - move them to one line, and... */

script + p + p + p + p, script + p + p + p + p + p {
    display: inline-block;
    color: #888;
    font-size: 90%;
    margin-bottom: 0.5em;
    font-family: Verdana, Tahoma, sans-serif;
}

/* ...add a little separator between them */

script + p + p + p + p + p:before {
    content: ' — ';
    color: #555;
}

/* First paragraph; adjust the spacing and give the top a border to set it apart from the header */

script + p + p + p + p + p + p {
    border-top: 2px solid #aaa;
    padding-top: 1.5em;
}

/* Rest of paragraphs; increase the line height a little bit and add some breathing room between paragraphs */

script + p + p + p + p + p + p, script + p + p + p + p + p + p ~ p {
    line-height: 150%;
    margin-bottom: 1.5em;
}