.social-link {
display: flex; align-items: center; flex-direction: row; justify-content: center; margin-bottom: 0.5rem; > :not(:last-child) { margin-right: .625rem; } a { display: flex; align-items: center; text-decoration: none; &:hover { opacity: 0.6; } } &__profile { display: flex; align-items: center; flex-direction: row; justify-content: flex-start; > :not(:last-child) { margin-right: 0.5rem; } a { display: flex; align-items: center; text-decoration: none; } } &__item { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 1rem; &--github { background-color: $color-github; @extend .social-link__item; } &--twitter { background-color: $color-twitter; @extend .social-link__item; } &--facebook { background-color: $color-facebook; @extend .social-link__item; } &--hatena { background-color: $color-hatena; @extend .social-link__item; } &--pocket { background-color: $color-pocket; @extend .social-link__item; } }
}
.fa {
&-social-link { display: flex; align-content: center; justify-content: center; color: white; font-size: 1.5rem; } &-github { @extend .fa-social-link; } &-twitter { @extend .fa-social-link; } &-facebook { @extend .fa-social-link; } &-hatena { @extend .fa-social-link; &:before { content: "B!"; font-weight: bold; font-style: normal; font-size: 1.125rem; font-family: Verdana; } } &-get-pocket { font-size: 1.125rem; @extend .fa-social-link; }
}