GatsbyCentral/gatsby-v2-starter-lumen

@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";

.sidebar {
    width: 100%;
    &__inner {
        position: relative;
        padding: 25px 20px 0;
    }
    &__author {
        &-photo {
            display: inline-block;
            margin-bottom: 0;
            border-radius: 50%;
            background-clip: padding-box;
        }
        &-title {
            font-size: $typographic-base-font-size * 1.125;
            font-weight: 500;
            @include line-height(1.125);
            @include margin(.5, 0, .5, 0);
            &-link {
                color: $color-base;
                &:hover,
                &:focus {
                    color: $color-base;
                }
            }
        }
        &-subtitle {
            color: $color-gray;
            @include line-height(1);
            @include margin-bottom(1);
        }
    }
    &__copyright {
        color: lighten($color-gray, 18%);
        font-size: $typographic-small-font-size;
    }
}

@include breakpoint-sm {
    .sidebar {
        lost-column: 5/12;
        &__inner {
            padding: 30px 20px 0;
            &:after {
                background: $color-gray-border;
                background: linear-gradient(to bottom, $color-gray-border 0%, $color-gray-border 48%, $color-white 100%);
                position: absolute;
                content: "";
                width: 1px;
                height: 540px;
                top: 30px;
                right: -10px;
                bottom: 0;
            }
        }
    }
}

@include breakpoint-md {
    .sidebar {
        lost-column: 1/3;
        &__inner {
            padding: 40px;
        }
    }
}