// ============================= // post.scss // ============================= // Used for single post view.
.post{
justify-self: center; margin: 0 2rem; max-width: 1000px; @include flexbox{ flex-direction: column; justify-content: flex-start; align-items: center; } &__title{ &__text{ text-align: center; color: var(--c-postTitle); margin-bottom: 0; } } &__meta{ @include flexbox; width: 100%; &__divider{ color: var(--c-postText); margin: 0 1rem; @include for-size('tablet'){ display: none; } } &__category{ text-transform: uppercase; margin: 0; @include flexbox; &__title{ color: var(--c-noCategoryText); background: var(--c-noCategoryBackground); padding: .2rem .5rem; } @include for-size('tablet'){ display: none; margin-top: 1rem; p{ margin: 0; width: 100%; text-align: center; } flex-direction: column; } } &__date{ color: var(--c-postText); @include for-size('tablet'){ margin-top: .5rem; } } &__author{ color: var(--c-postText); width: fit-content; @include flexbox; &__photo{ margin: 0 1rem; width: 2rem; border-radius: 100%; } } @include for-size('tablet'){ flex-direction: column; } } &__content{ color: var(--c-postText); h1{ font-size: 1.8rem; } img{ max-width: 100%; } } &__navigator{ margin-top: 1rem; width: 100%; &__buttons{ @include flexbox{ justify-content: space-between; }; a{ transition: $t-smooth; text-decoration: none; font-weight: bold; font-size: 1.25rem; color: var(--c-navigator); filter: var(--c-navigatorFilter); display: flex; align-items: center; &:hover{ letter-spacing: .25rem; } .arrow-left{ margin-right: .5rem; height: 1em; } .arrow-right{ margin-left: .5rem; height: 1em; } } } }
}