test

Layout CSS

/* =========================================
   RUI'S FRIENDREWIND BLOG
   Barbatos Room / Dark Forest Theme
   ========================================= */


/* ---------- PAGE BACKGROUND ---------- */

body {
    background-color: #1e201f;

    background-image:
        linear-gradient(
            rgba(3, 12, 9, 0.48),
            rgba(3, 12, 9, 0.48)
        ),
        url("https://obeymewiki.com/wiki/File:Barbatos%27s_Room.png");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;

    color: #c9ddd4;
}


/* ---------- MAIN BLOG ENTRY ---------- */

.blog-entry {
    background: rgba(25, 58, 49, 0.94);

    border: 1px solid #1d6c61;
    border-radius: 4px;

    padding: 25px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.65);

    max-width: 900px;
    margin: 25px auto;
}


/* ---------- BLOG TITLE ---------- */

.blog-entry .title {
    color: #3eb9a8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 32px;
    font-weight: normal;

    letter-spacing: 1px;
    text-align: center;

    margin-bottom: 8px;
}


/* decorative divider */

.blog-entry .title::after {
    content: "✦";

    display: block;

    color: #5aa371;

    font-size: 14px;

    margin-top: 8px;
}


/* ---------- AUTHOR INFO ---------- */

.blog-entry .author-details {
    color: #5aa371;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;
}


.blog-entry .profile-pic {
    border: 2px solid #1d6c61;
}


/* ---------- PUBLISH DATE ---------- */

.blog-entry .publish-date {
    color: #5aa371;

    font-size: 13px;

    text-align: center;

    margin-bottom: 20px;
}


/* ---------- ACTUAL BLOG CONTENT ---------- */

.blog-entry .content {
    background: rgba(30, 32, 31, 0.96);

    border: 1px solid #1d6c61;
    border-radius: 3px;

    padding: 25px;

    line-height: 1.8;
}


/* ---------- PARAGRAPHS ---------- */

.blog-entry .content p {
    color: #c9ddd4;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 18px;
}


/* ---------- HEADINGS ---------- */

.blog-entry .content h2 {
    color: #3eb9a8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;
    font-weight: normal;

    border-bottom: 1px solid #1d6c61;

    padding-bottom: 7px;

    margin-top: 30px;
}


.blog-entry .content h3 {
    color: #5aa371;

    font-size: 19px;
    font-weight: normal;
}


/* ---------- LINKS ---------- */

.blog-entry .content a {
    color: #3eb9a8;

    text-decoration: none;

    border-bottom: 1px dotted #3eb9a8;
}


.blog-entry .content a:hover {
    color: #5aa371;

    border-bottom-color: #5aa371;
}


/* ---------- IMAGES ---------- */

.blog-entry .content img {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 22px auto;

    border: 1px solid #1d6c61;
    border-radius: 3px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.55);
}


/* ---------- BLOCKQUOTES ---------- */

.blog-entry .content blockquote {
    background: #193a31;

    border-left: 3px solid #5aa371;

    margin: 22px 10px;

    padding: 15px 20px;

    color: #b9d8ca;

    font-style: italic;
}


/* ---------- KUDOS ---------- */

.blog-entry .kudos-container {
    border-top: 1px solid #1d6c61;

    margin-top: 25px;
    padding-top: 15px;

    color: #3eb9a8;
}


/* ---------- COMMENTS ---------- */

.comments-table {
    background: rgba(25, 58, 49, 0.94);

    border: 1px solid #1d6c61;

    color: #c9ddd4;

    border-radius: 3px;
}


/* ---------- ARTICLE ROW ---------- */

.row.article {
    background: transparent;
}