//
// Crafting Guide - mod_page.scss
//
// Copyright © 2014-2016 by Redwood Labs
// All rights reserved.
//

.view__mod_page {
    @include layout-body-with-sidebar;

    .about {
        margin-bottom: $size-margin-xlarge;

        display: flex;

        .left {
            flex: 0 0 auto;
            margin-right: $size-margin-large;

            img {
                height: $size-minecraft-block * 5;
                width: $size-minecraft-block * 5;
            }
        }

        .center {
            flex: 1 1 100%;
            margin-right: $size-margin-large;

            .title {
                font-family: $font-family-header;
                font-size: $font-size-xxlarge;
            }

            .author {
                font-family: $font-family-text;
                font-size: $font-size-medium;

                &:before {
                    content: "by: "
                }
            }

            .description {
                margin-top: $size-margin-large;

                font-family: $font-family-text;
                font-size: $font-size-medium;
                line-height: $font-size-medium * 1.25;
            }

            .view__mod_version_selector {
                margin-top : $size-margin-large;
            }
        }

        .right {
            flex: 0 0 auto;
            @include layout-link-list;
        }
    }
}

@include screen-size(mobile) {
    .view__mod_page {
        .about {
            flex-direction: column;

            & > * {
                margin-left: $size-margin-medium;
                margin-right: $size-margin-medium;
            }

            .left {
                margin-bottom: $size-margin-large;
                margin-left: $size-margin-medium;
                margin-right: $size-margin-medium;

                display        : flex;
                flex-direction : column;
                align-items    : center;
            }

            .center {
                flex: 0 0 auto;
                margin-bottom: $size-margin-xlarge;
                margin-left: $size-margin-medium;
                margin-right: $size-margin-medium;

                .author, .title {
                    text-align: center;
                }
            }

            .right {
                margin-left: $size-margin-medium;
                margin-right: $size-margin-medium;
            }
        }
    }
}