retrospace-website/_sass/_default.scss

/* =Base */
body {
    font-family: "Inconsolata";
    color: $iron;
    background-color: $dorian;
}

a {
    color: $cloudy;
    font-weight: bold;
    text-decoration: none;

    &:hover {
    }
}

p {
    font-size: 20px;
    line-height: 32px;
}

img {
    margin: 40px auto;
    display: block;
    max-width: 100%;
}

blockquote {
    letter-spacing: 3px;
    margin: 0px;
    margin-top: 40px;
    margin-bottom: 70px;
    padding: 0px;
    text-align: center;
    position: relative;

    footer {
        position: absolute;
        bottom: -35px;
        font-size: 15px;
        color: $iron;
        letter-spacing: 0px;
        left: 0px;
        right: 0px;

        &:before {
            content: "** ";
        }
        &:after {
            content: " **";
        }
    }

    p {
        display: inline;
        font-size: 20px;
        color: $cloudy;
        font-weight: 400;
        &:before {
            content: "“ ";
        }
        &:after {
            content: " ”";
        }
    }
}

strong {
    color: $iron;
}

/* =Header */
.wrapper {
    max-width: 800px;
    margin: 50px auto 100px auto;
}

.header {
    overflow: hidden;
}

.navigation {
    float: left;
}

.logo {
    font-size: 50px;
    font-weight: 700;
    color: $iron;
    display: block;
}

.logo__image {
    margin: 0 10px;
    display: inline !important;
    float: left;
}

.menu {
    color: $cloudy;
    font-size: 18px;
    margin: 0px;
    margin-top: 6px;
    padding: 0px;
    list-style-type: none;
}

.menu__entry {
    display: inline-block;
    margin-right: 15px;

    &:before {
        content: "» ";
    }
    &:last-child {
        margin-right: 0px;
    }
}

.menu__entry a {
    font-weight: 400;
    &:hover {
        text-decoration: underline;
    }
}

.social-links {
    float: right;
    font-size: 18px;
    color: $cloudy;
    list-style-type: none;
}

.social-links__entry {
    display: inline-block;
    margin-left: 10px;
}

/* =Titles */
.page-title {
    margin-top: 100px;
    margin-bottom: 50px;
    text-align: center;
}

.page-title__text {
    font-weight: 700;
    font-size: 70px;
}

.page-title__subtitle {
    font-weight: 400;
    font-size: 22px;
    color: $cloudy;
}

.post-title {
    margin-bottom: 110px;
}

.post-title__text {
    font-size: 40px;
}

.post-title__subtitle {
    font-size: 20px;
}

/* =Post teasers */

.list-posts {
    list-style-type: none;
    padding: 0px;
}

.post-teaser {
    margin-bottom: 45px;
    font-weight: 700;
}

.post-teaser__title {
    font-size: 22px;
    color: $iron;
}

.post-teaser__date {
    font-size: 16px;
    float: right;
    vertical-align: middle;
    color: $cloudy;
}

.empty-post-list {
    font-size: 22px;
    font-weight: 700;
    color: $iron;
    text-align: center;
}

/* =Explore */
.explore {
    text-align: center;
    color: $cloudy;
    margin-top: 140px;
}

.explore__devider {
    font-size: 18px;
    letter-spacing: 8.18px;
}

.explore__label {
    font-size: 14px;
    margin-top: 15px;
}

.categories {
    list-style-type: none;
    margin-top: 15px;
    padding: 0px;
}

.categories__item {
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
}

.categories__item a {
    color: $iron;
}

.categories__item:after {
    content: "/";
    margin-left: 6px;
    color: $cloudy;
}

.categories__item:last-child:after {
    content: "";
    margin-left: 0px;
}

/* =Post page */
.about {
    color: $cloudy;
    margin-top: 70px;
    text-align: center;
    line-height: 24px;
}

.about__devider {
    font-size: 20px;
    margin-bottom: 50px;
    letter-spacing: 9.09px;
}

.about__text {
    font-size: 18px;
}

@media (max-width: 800px) {
    /* =Base */
    p {
        font-size: 16px;
        line-height: 1.6;
    }

    .wrapper {
        width: 80%;
    }

    .navigation,
    .social-links {
        @include centered-block();
    }

    .social-links {
        font-size: 30px;
        margin-top: 35px;
    }

    .page-title {
        margin-top: 40px;
        margin-bottom: 60px;
    }

    .page-title__text {
        font-size: 40px;
    }

    .page-title__subtitle {
        font-size: 18px;
    }

    .post-teaser__title {
        font-size: 18px;
        @include centered-block();
    }

    .post-teaser__date {
        font-size: 16px;
        margin-top: 10px;
        float: none;
        @include centered-block();
    }

    .explore {
        margin-top: 80px;
    }

    .post-title__text {
        font-size: 28px;
    }

    .post-title__subtitle {
        font-size: 18px;
    }
}

.language-links {
    float: right;
    font-size: 18px;
    color: $cloudy;
    list-style-type: none;
}

.language-links__entry {
    display: inline-block;
    margin-left: 0;
}

a.language-links__entry {
    font-weight: 100;
}

.en:lang(en),
.nl:lang(nl) {
    font-weight: bold;
}

.nl:before {
    content: "| ";
}