.post { width: 100%; max-width: 800px; text-align: left; padding: 20px; margin: 20px auto; @media #{$media-size-tablet} { max-width: 600px; } &-date { &:after { content: '—'; } } &-title { font-size: 2.625rem; margin: 0 0 20px; @media #{$media-size-phone} { font-size: 2rem; } a { text-decoration: none; } } &-tags { display: block; margin-bottom: 20px; font-size: 1rem; opacity: .5; a { text-decoration: none; } } &-content { margin-top: 30px; } &-cover { border-radius: 8px; margin: 40px -50px; width: 860px; max-width: 860px; @media #{$media-size-tablet} { margin: 20px 0; width: 100%; } } &-info { margin-top: 30px; font-size: .8rem; line-height: normal; @include dimmed; p { margin: .8em 0; } a:hover { border-bottom: 1px solid white; } svg { margin-right: .8em; } .tag { margin-right: .5em; &::before { content: "#" } } .feather { display: inline-block; vertical-align: -.125em; width: 1em; height: 1em; } } .flag { border-radius: 50%; margin: 0 5px; } } .pagination { margin-top: 20px; &__title { display: flex; text-align: center; position: relative; margin: 30px 0 20px; &-h { text-align: center; margin: 0 auto; padding: 5px 10px; background: $light-background; color: $light-color-secondary; font-size: .8rem; text-transform: uppercase; text-decoration: none; letter-spacing: .1em; z-index: 1; .dark-theme & { background: $dark-background; color: $dark-color-secondary; } } hr { position: absolute; left: 0; right: 0; width: 100%; margin-top: 15px; z-index: 0; } } &__buttons { display: flex; align-items: center; justify-content: center; a { text-decoration: none; font-weight: bold; } } } .button { position: relative; display: inline-flex; align-items: center; justify-content: center; background: $light-background-secondary; font-size: 1rem; font-weight: 600; border-radius: 8px; max-width: 40%; padding: 0; cursor: pointer; appearance: none; .dark-theme & { background: $dark-background-secondary; } + .button { margin-left: 10px; } a { display: flex; padding: 8px 16px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } &__text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } &.next .button__icon { margin-left: 8px; } &.previous .button__icon { margin-right: 8px; } }