KevinK.dev.js/src/pages/friends.module.scss

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

.friendsList {
    @include flexList;

    .friendProfile {
        @include cardGeneric;
        display: flex;
        flex-direction: column;
        width: 300px;
        flex-shrink: 0;

        .friendImage {
            width: 100%;
            height: 300px;
            background-position: center;
            background-size: cover;
            display: flex;
            padding: 10px;
            flex-direction: column-reverse;
            text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;

            .friendName {
                font-size: 2em;
                margin-top: -5px;
            }

            .friendTitle {
                margin-top: auto;
            }
        }

        .friendBio {
            padding: 15px;
            flex-grow: 1;
            text-align: justify;
            display: block;
            padding-bottom: 0;
        }

        .contactLinks {
            padding: 15px;
            margin: 0;
            display: flex;
            flex-direction: column;

            .contactLink {
                transition: text-decoration 0.5s;
                text-decoration: underline dotted rgba(0, 0, 0, 0);
                padding: 6px 0 6px 25px;
                color: $textColor;

                > i {
                    color: $accentColor;
                    margin-left: -25px;
                    margin-right: 5px;
                }
            }
        }
    }
}