.profile-timeline { border-top: 1px solid $whitish; %profile-activity { border-bottom: 1px solid $whitish; padding: .8rem 1rem; position: relative; .activity-info { align-items: center; display: flex; margin-right: 100px; } .activity-date { color: $gray-light; font-size: .75rem; position: absolute; right: .5rem; top: 1.2rem; } .profile-contact-picture { flex-basis: 38px; flex-shrink: 0; margin-right: 1rem; vertical-align: center; width: 38px; img { width: 100%; } } p { margin-bottom: .5rem; a { color: $green-taiga; } } } .activity-simple, .activity-comment, .activity-image, .activity-notification, .activity-member, .activity-project { @extend %profile-activity; } .activity-comment, .activity-project, .activity-image { blockquote { margin-bottom: .5rem; margin-left: calc(35px + 1rem); margin-top: .5rem; img { max-height: 640px; max-width: 100%; } } } .activity-notification { .activity-notification-list { border-left: 2px solid $whitish; margin-bottom: .5rem; margin-left: calc(35px + 1rem); margin-top: .5rem; padding: .2rem 1rem; li { margin-bottom: .5rem; } } } .activity-member-view { display: flex; margin-bottom: .5rem; margin-left: calc(35px + 1rem); margin-top: .5rem; .activity-member-info { flex: 1; } a { @extend %bold; } p { color: $gray-light; } } .profile-member-picture { img { margin-right: 1rem; max-width: 64px; min-width: 32px; width: 100%; } } }