public/styles/readerMode.css

/* Padding and Readability */

article {
    box-sizing: border-box;
    padding: 0 40px !important;

    max-width: 800px !important;
    margin: 0 auto !important;
}

.content__article-body {
    line-height: 30px !important;
}

.content__article-body p {
    margin-bottom: 25px !important;
}

/* Link Colours */

article a,
.content__standfirst a {
    display: inline !important;
    color: #005689 !important;
}

/* Show Figures and Asides */

#article figure {
    display: block !important;
}

#article aside {
    display: block !important;
    width: 200px !important;
    float: none !important;
    margin: 0 auto !important;
    margin-bottom: 25px !important;
    border: 1px solid #dcdcdc !important;
    padding: 10px !important;
}

#article figcaption {

    font-size: 15px !important;
    line-height: 22px;
    margin-bottom: 20px !important;
    text-align: center;
}

#article figcaption:before {
    content: "Caption: ";
    display: inline;
}

/* Image Fixes */

#article img,
#article .responsive-img,
#article .gu-image {
    position: relative !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* Image Fixes */

#article iframe {
    display: none !important;
}


.social,
svg,
.submeta,
.content__dateline {
    display: none !important;
}

/* Hide Guardian Logo */

.content--article:before {
    content: "" !important;
}

/* Placeholders */

article .tweet,
article .twitter-tweet {
    display: none !important;
}

article .element-tweet:before,
article .element-interactive:before,
article .element-video:before,
article .element-embed:before,
article figure[itemprop~="video"]:before  {
    display: block;
    width: 100%;

    padding: 20px;
    margin: 0 auto;
    margin-bottom: 25px;

    color: #666;

    background-color: #ECECEC;
    text-align: center;

    font-size: 13px
}

article .element-tweet:before {
    content: "Tweet placeholder. To view tweet switch to mobile or desktop views." !important;
}

article .element-interactive:before {
    content: "Interactive placeholder. To view interactive switch to mobile or desktop views." !important;
}

article .element-video:before,
article figure[itemprop~="video"]:before {
    content: "Video placeholder. To view video switch to mobile or desktop views." !important;
    margin-bottom: 5px;
}

article .element-embed:before {
    content: "Embed placeholder. To view embed switch to mobile or desktop views." !important;
}

.gallery__figcaption {
    position: relative !important;
    width: 100%;
}