164 lines
2.3 KiB
SCSS
164 lines
2.3 KiB
SCSS
h1 {
|
|
@include font-size(4rem);
|
|
|
|
line-height: 1.1;
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
h2 {
|
|
line-height: 1.1;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.article {
|
|
padding-top: 2em;
|
|
}
|
|
|
|
.article__header {
|
|
margin-bottom: 2em;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
margin: 0 -16.6666% 2em;
|
|
}
|
|
}
|
|
|
|
.article__cover {
|
|
background-size: cover;
|
|
height: 0;
|
|
padding-bottom: 56.2%;
|
|
}
|
|
|
|
.article__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 1.5em -16.6666%;
|
|
padding: 0 0 0 1em;
|
|
}
|
|
|
|
mark {
|
|
background: none;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
.article__author {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.article__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;
|
|
}
|
|
|
|
.article-stats {
|
|
border-bottom: 1px solid #e8e8e8;
|
|
border-top: 4px solid #000;
|
|
padding: 3.2rem 0;
|
|
}
|
|
|
|
.article-stats__item {
|
|
@include font-size(1.7rem);
|
|
|
|
font-weight: 500;
|
|
display: inline-block;
|
|
margin-right: $grid-gutter-width;
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.article-stats__item--likes {
|
|
.icon {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.icon:last-of-type {
|
|
// transform: rotate(180deg);
|
|
transform-origin: center;
|
|
margin-left: 0.3em;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.topics-list {
|
|
margin: 2.4rem 0;
|
|
|
|
.article__topic {
|
|
display: inline-block;
|
|
margin: 0 0.8rem 0.8rem 0;
|
|
|
|
a {
|
|
background: #f6f6f6;
|
|
color: #000;
|
|
padding: 0.4rem 0.8rem;
|
|
transition: background-color 0.2s;
|
|
|
|
&:hover {
|
|
background-color: rgb(0 0 0 / 20%);
|
|
}
|
|
}
|
|
}
|
|
}
|