.article-page { h1 { @include font-size(4rem); line-height: 1.1; margin-top: 0.5em; } h2 { line-height: 1.1; } img { max-width: 100%; } .shout__header { margin-bottom: 2em; @include media-breakpoint-up(md) { margin: 0 0 2em; } } .shout__cover { background-size: cover; height: 0; padding-bottom: 56.2%; } .shout__body { font-size: 1.7rem; line-height: 1.6; img { display: block; margin-bottom: 0.5em; } blockquote { border-left: 4px solid; font-size: 2rem; font-weight: 500; font-style: italic; line-height: 1.4; margin: 1.5em 0; padding: 0 0 0 1em; @include media-breakpoint-up(md) { margin-left: -16.6666%; } } mark { background: none; font-size: 2rem; font-weight: bold; line-height: 1.4; } } .shout__author, .shout__date { @include font-size(1.5rem); } .shout__author { margin-bottom: 1.5em; a { border: none; color: rgb(0 0 0 / 60%); &:hover { color: #fff; } } } .shout__authors-list { margin-top: 2em; h4 { color: #696969; font-size: 1.5rem; font-weight: normal; } } .write-comment { border: 2px solid #f6f6f6; @include font-size(1.7rem); outline: none; padding: 0.2em 0.4em; width: 100%; &::placeholder { color: #858585; } } .comment-warning { background: #f6f6f6; @include font-size(2.2rem); margin-bottom: 1em; padding: 2.4rem 1.8rem; } .topic a { /* white-space: nowrap; */ color: black; padding: 0.3vh; &:hover { font-weight: 500; } } .shout-stats { border-bottom: 1px solid #e8e8e8; border-top: 4px solid #000; display: flex; justify-content: flex-start; padding: 3.2rem 0; } .shout-stats__item { @include font-size(1.7rem); font-weight: 500; display: inline-block; margin: 0 3.2rem 1em 0; vertical-align: baseline; .icon { display: inline-block; margin-right: 0.2em; transition: filter 0.2s; vertical-align: middle; } img { display: block; } a { border: none; &:hover { .icon { filter: invert(1); } } } } .shout-stats__item--likes { .icon { vertical-align: baseline; } .icon:last-of-type { // transform: rotate(180deg); transform-origin: center; margin-left: 0.3em; vertical-align: middle; } } .shout-stats__item--date { color: rgb(0 0 0 / 40%); font-weight: normal; justify-self: flex-end; margin-right: 0; margin-left: auto; } .topics-list { @include font-size(1.2rem); letter-spacing: 0.08em; margin: 1.6rem 0; .shout__topic { display: inline-block; margin: 0.8rem 0.8rem 0.8rem 0; a { background: #f6f6f6; color: #000; border: none; padding: 0.4rem 0.8rem; transition: background-color 0.2s; text-transform: uppercase; &:hover { background-color: rgb(0 0 0 / 20%); } } } } }