task 17075 | переделал article-intro
This commit is contained in:
web_103.2 committed
1 parent
a2fde2a193
commit
dd612eac43
2 files changed
+488
-59
No files matched your search
@@ -5975,6 +5975,23 @@ h4 {
|
||||
padding: 5px 0 4px;
|
||||
}
|
||||
|
||||
.h-article-hero .breadcrumbs {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.h-article-hero .breadcrumbs > .container {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.h-article-hero .breadcrumbs__inner {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.h-article-hero__breadcrumb-divider {
|
||||
flex: none;
|
||||
color: var(--color-grey-light);
|
||||
@@ -6996,4 +7013,436 @@ h4 {
|
||||
margin-top: 20px;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
/* Article intro adapted from the supplied layout. */
|
||||
.article-intro,
|
||||
.article-intro * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.article-intro {
|
||||
--article-background: #f6f6f6;
|
||||
--article-heading: #1b2d34;
|
||||
--article-text: #5e5e5e;
|
||||
--article-muted: #9e9e9e;
|
||||
--article-icon: #d9dadd;
|
||||
margin-top: 130px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 16px 40px 24px;
|
||||
border-radius: 40px;
|
||||
background: var(--article-background);
|
||||
color: var(--article-text);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.article-intro__topline,
|
||||
.article-intro__author,
|
||||
.article-intro__stats,
|
||||
.article-intro__stat,
|
||||
.article-intro__meta,
|
||||
.article-intro__meta > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.article-intro__topline {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.article-intro__author,
|
||||
.article-intro__stat,
|
||||
.article-intro__meta > span {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.article-intro__icon {
|
||||
display: block;
|
||||
flex: 0 0 20px;
|
||||
color: var(--article-icon);
|
||||
}
|
||||
|
||||
.article-intro__stats {
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.article-intro__hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 524fr) minmax(0, 656fr);
|
||||
column-gap: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.article-intro__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 131 / 85;
|
||||
border-radius: 20px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.article-intro__heading {
|
||||
min-width: 0;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.article-intro .breadcrumbs {
|
||||
margin-bottom: 12px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.article-intro .breadcrumbs__list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.article-intro .breadcrumbs__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--article-muted);
|
||||
}
|
||||
|
||||
.article-intro .breadcrumbs__item + .breadcrumbs__item::before {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-top: 1px solid #c9c9c9;
|
||||
border-right: 1px solid #c9c9c9;
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.article-intro .breadcrumbs__item.is-active {
|
||||
color: var(--article-text);
|
||||
}
|
||||
|
||||
.article-intro__tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 0 0 16px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.article-intro__tags li {
|
||||
padding: 4px 10px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.article-intro__title {
|
||||
margin: 0;
|
||||
color: var(--article-heading);
|
||||
font-size: clamp(36px, 4.1vw, 56px);
|
||||
font-weight: 700;
|
||||
line-height: 1.107142857;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.article-intro__meta {
|
||||
flex-wrap: wrap;
|
||||
gap: 12px 32px;
|
||||
margin-top: 40px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.article-intro__summary {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.article-intro__summary h2 {
|
||||
margin: 0 0 16px;
|
||||
color: var(--article-heading);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.article-intro__summary p {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.article-intro__credit {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.article-intro__credit a {
|
||||
color: inherit;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-style: dotted;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.article-intro__credit a:hover {
|
||||
color: var(--article-heading);
|
||||
}
|
||||
|
||||
.article-intro__credit a:focus-visible {
|
||||
border-radius: 2px;
|
||||
outline: 2px solid var(--article-heading);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.article-intro__breadcrumb{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.article-intro__tags{
|
||||
gap: 6px;
|
||||
}
|
||||
.article-intro__tags li{
|
||||
background: none;
|
||||
}
|
||||
|
||||
.article-intro__breadcrumb{
|
||||
display: block;
|
||||
}
|
||||
.article-intro__heading .breadcrumbs{
|
||||
display: none;
|
||||
}
|
||||
.article-intro {
|
||||
margin-top: 20px;
|
||||
|
||||
padding-right: 32px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.article-intro__meta {
|
||||
gap: 12px 24px;
|
||||
margin-top: 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* На планшете заголовок и метаданные располагаются над фотографией. */
|
||||
@media (max-width: 1023px) {
|
||||
|
||||
.article-intro {
|
||||
padding: 20px 24px 24px;
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.article-intro__hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.article-intro__heading {
|
||||
order: -1;
|
||||
width: 100%;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.article-intro .breadcrumbs {
|
||||
position: static;
|
||||
margin: 0 0 12px;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.article-intro .breadcrumbs__list,
|
||||
.article-intro .breadcrumbs__item {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.article-intro .breadcrumbs__item.is-active {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.article-intro .breadcrumbs__item.is-active::before {
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
|
||||
.article-intro__title {
|
||||
font-size: clamp(28px, 4.5vw, 44px);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.article-intro__image {
|
||||
max-height: 420px;
|
||||
aspect-ratio: 77 / 50;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.article-intro__credit {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* Мобильный макет: Figma, узел 1:2011. */
|
||||
@media (max-width: 600px) {
|
||||
|
||||
.article-intro {
|
||||
padding: 12px 16px 16px;
|
||||
border-radius: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.article-intro__author,
|
||||
.article-intro__stat,
|
||||
.article-intro__meta > span {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.article-intro__icon {
|
||||
flex-basis: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.article-intro__topline {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.article-intro__author {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.article-intro__stats {
|
||||
flex-shrink: 0;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.article-intro__hero {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.article-intro .breadcrumbs {
|
||||
font-size: 8px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.article-intro .breadcrumbs__list,
|
||||
.article-intro .breadcrumbs__item {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.article-intro .breadcrumbs__item + .breadcrumbs__item::before {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.article-intro .breadcrumbs__item.is-active::before {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.article-intro__tags {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.article-intro__tags li {
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.article-intro__title {
|
||||
font-size: 26px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.article-intro__title-ending {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.article-intro__meta {
|
||||
gap: 8px 24px;
|
||||
margin-top: 28px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.article-intro__image {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.article-intro__summary {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.article-intro__summary h2 {
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.article-intro__summary p {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.article-intro__credit {
|
||||
margin-top: 12px;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-intro .breadcrumbs {
|
||||
width: 100%;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.article-intro .breadcrumbs > .container {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
}
|
||||
.article-intro .breadcrumbs__inner { margin: 0; padding: 0; }
|
||||
.article-intro .breadcrumbs__item { font-size: inherit; line-height: inherit; }
|
||||
.article-intro .breadcrumbs__item::after { display: none; }
|
||||
.article-intro .breadcrumbs__link { padding: 0; white-space: normal; }
|
||||
.article-intro .breadcrumbs__item.is-active .breadcrumbs__link { color: var(--article-text); }
|
||||
.article-intro .breadcrumbs__list {
|
||||
width: 100%;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.article-intro .breadcrumbs__item {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.article-intro .breadcrumbs__item.is-active {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.article-intro .breadcrumbs__item + .breadcrumbs__item::before {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.article-intro .breadcrumbs__item.is-active .breadcrumbs__link {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
Reference in new issue
Block a user