increment.com inspired css for writefreely

wordsmith.css

body {
    background-color: #efefef;
}

/* Blog header on index and post pages */
#blog-title a { 
    color: #fff;
    background-color: #7a629d;
    padding: 0.5em;
    display: inline-block;
}
#blog-title a:hover { 
    color: #eee;
    background-color: #7a629d;
}

body#collection #wrapper article {
    max-height: 450px;
    overflow: hidden;
    position: relative;
}

body#collection #wrapper article:before{
    content: '';
    pointer-events: none;
    width: 100%;
    height: 70%;
    bottom: 0;
    position: absolute;
    background: linear-gradient(transparent 100px, #efefef);
}

/* Blog header on post pages ONLY */
body#post #blog-title a {
    padding: 4px 8px;
}

/* Blog description (underneath title) on index page */
header p.description {
    font-style: italic;
}

/* Post titles on blog index */
.post-title {
    font-weight: normal;
}
.post-title a.u-url:link, .post-title a.u-url:visited {
    color: #7278bf;
}

/* "Read more..." links */
body#collection a.read-more {
    text-decoration: underline;
}

body#post article {
    white-space: normal !important;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 1440px;
    padding: 0 5.88235%;
}

body#post article h2#title {
    padding: 1em 0;
    max-width: 100%;
    font-size: 1.6em;
}

body#post article .e-content{
    border-top: 4px solid #7a629d;
    margin: 0;
    margin-bottom: 100px;
    padding-top: 100px;
    position: relative;
}

body#post article .e-content >* {
    box-sizing: border-box;
    white-space: normal;
    width: 100%;
    display:block;
}

body#post article .e-content p {
    margin: 0 0 1em 0;
    padding: 0;
}

body#post article .e-content ul,
body#post article .e-content ol,
body#post article .e-content pre {
    margin: 2em 0;
}

body#post article .e-content li {
    margin: 1em 0;
}

body#post article .e-content p + h1, 
body#post article .e-content p + h2, 
body#post article .e-content p + h3, 
body#post article .e-content p + h4, 
body#post article .e-content p + h5, 
body#post article .e-content p + h6 {
    margin-top:2em;
}

body#post article .e-content h2, 
body#post article .e-content h3, 
body#post article .e-content h4, 
body#post article .e-content h5, 
body#post article .e-content h6 {
    text-transform: uppercase;
}

body#post article.norm h2, 
body#post article.norm h3, 
body#post article.norm h4, 
body#post article.norm h5, 
body#post article.norm h6,
body#post article.norm .e-content > blockquote p{
    font-family: 'Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
}

body#post article.sans h2, 
body#post article.sans h3, 
body#post article.sans h4, 
body#post article.sans h5, 
body#post article.sans h6,
body#post article.sans .e-content > blockquote p{
    font-family: Lora,'Palatino Linotype','Book Antiqua','New York','DejaVu serif',serif;
}

body#post article .e-content>:first-child {
    margin-top: 0;
}

body#post article .e-content > blockquote {
    width: 100%;
}

body#post article .e-content > blockquote p {
    color: #7a629d;
}

/* Links inside blog posts */
article p a {
    color: #444;
    text-decoration: none;
    border-bottom: 2px solid orangered;
}
article p a:hover {
    background-color: orangered;
    color: white;
    text-decoration: none;
}

/* Larger screen sizes */
@media (min-width: 880px){
    body#post article h2#title {
        max-width:62%;
        font-size: 2.5em;
    }
    
    body#post article .e-content >* {
        width: 64.44445%;
    }
    
    body#post article .e-content > blockquote > *:first-child{
        border-top: 6px solid #c0b7ce;
        padding-top:20px;
        margin-top: 0;
    }

    body#post article .e-content > blockquote > *:last-child{
        border-bottom: 4px solid #c0b7ce;
        padding-bottom: 20px;
        margin-bottom: 0;
    }
    
    body#post article .e-content > blockquote {
        border: none;
        padding: 0;
        margin-left: auto;
    }
    
    body#post article .e-content > blockquote p {
        clear: both;
        width: 28.88889%;
        float: right;
    }
}

List Page:

Article page: