task 17075 | переделал article-intro
This commit is contained in:
web_103.2 committed
1 parent
a2fde2a193
commit
dd612eac43
2 files changed
+479
-50
No files matched your search
@@ -5975,6 +5975,23 @@ h4 {
|
|||||||
padding: 5px 0 4px;
|
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 {
|
.h-article-hero__breadcrumb-divider {
|
||||||
flex: none;
|
flex: none;
|
||||||
color: var(--color-grey-light);
|
color: var(--color-grey-light);
|
||||||
@@ -6997,3 +7014,435 @@ h4 {
|
|||||||
|
|
||||||
display: flex;
|
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;
|
||||||
|
}
|
||||||
@@ -2,8 +2,6 @@
|
|||||||
|
|
||||||
<main class="main">
|
<main class="main">
|
||||||
|
|
||||||
<?php get_breadcrumbs(); ?>
|
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
$post_id = get_the_ID();
|
$post_id = get_the_ID();
|
||||||
$views = (int) get_field('viewers', $post_id);
|
$views = (int) get_field('viewers', $post_id);
|
||||||
@@ -53,64 +51,46 @@
|
|||||||
?>
|
?>
|
||||||
<section class="article">
|
<section class="article">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="article-goback">
|
<div class="article-intro__breadcrumb">
|
||||||
<a href="<?php echo get_permalink($parent_id); ?>" class="article-goback__btn">Назад</a>
|
<?php get_breadcrumbs(); ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="h-article-hero" aria-labelledby="h-article-hero-title">
|
<article class="article-intro" aria-labelledby="article-title">
|
||||||
<div class="h-article-hero__container">
|
<div class="article-intro__topline">
|
||||||
<div class="h-article-hero__picture">
|
<span class="article-intro__author" id="article-author"><svg class="article-intro__icon" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="5.5" r="3.5" fill="currentColor"/><path d="M3 17v-2a7 7 0 0 1 14 0v2H3Z" fill="currentColor"/></svg> <?php echo esc_html(get_the_author_meta('display_name', (int) get_post_field('post_author', $post_id))); ?></span>
|
||||||
<?php the_post_thumbnail('extra_large', array('class' => 'h-article-hero__image')); ?>
|
<div class="article-intro__stats" aria-label="Статистика статьи">
|
||||||
|
<span class="article-intro__stat" aria-label="Просмотры"><svg class="article-intro__icon" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M1.5 10s3-6 8.5-6 8.5 6 8.5 6-3 6-8.5 6-8.5-6-8.5-6Z" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="10" cy="10" r="2.8" fill="currentColor"/></svg> <?php echo esc_html(number_format_i18n($views)); ?></span>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="h-article-hero__content">
|
<div class="article-intro__hero">
|
||||||
|
<?php the_post_thumbnail('extra_large', ['class' => 'article-intro__image', 'fetchpriority' => 'high', 'loading' => 'eager']); ?>
|
||||||
|
<div class="article-intro__heading">
|
||||||
|
<?php get_breadcrumbs(); ?>
|
||||||
<?php if ($terms && !is_wp_error($terms)) : ?>
|
<?php if ($terms && !is_wp_error($terms)) : ?>
|
||||||
<div class="h-article-hero__categories">
|
<ul class="article-intro__tags" aria-label="Темы статьи">
|
||||||
<?php foreach ($terms as $term) : ?>
|
<?php foreach ($terms as $term) : ?>
|
||||||
<span class="h-article-hero__category"><?php echo esc_html($term->name); ?></span>
|
<li><?php echo esc_html($term->name); ?></li>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</ul>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
<h1 class="article-intro__title" id="article-title"><?php the_title(); ?></h1>
|
||||||
<h1 class="h-article-hero__title" id="h-article-hero-title">
|
<div class="article-intro__meta">
|
||||||
<?php the_title(); ?>
|
<span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M6.34369 2.31299C6.34369 2.18867 6.29431 2.06944 6.2064 1.98153C6.11849 1.89362 5.99926 1.84424 5.87494 1.84424C5.75062 1.84424 5.63139 1.89362 5.54349 1.98153C5.45558 2.06944 5.40619 2.18867 5.40619 2.31299V3.30049C4.50619 3.37236 3.91619 3.54861 3.48244 3.98299C3.04807 4.41674 2.87182 5.00736 2.79932 5.90674H15.2006C15.1281 5.00674 14.9518 4.41674 14.5174 3.98299C14.0837 3.54861 13.4931 3.37236 12.5937 3.29986V2.31299C12.5937 2.18867 12.5443 2.06944 12.4564 1.98153C12.3685 1.89362 12.2493 1.84424 12.1249 1.84424C12.0006 1.84424 11.8814 1.89362 11.7935 1.98153C11.7056 2.06944 11.6562 2.18867 11.6562 2.31299V3.25861C11.2406 3.25049 10.7743 3.25049 10.2499 3.25049H7.74994C7.22557 3.25049 6.75932 3.25049 6.34369 3.25861V2.31299Z" fill="#DADBDF"/> <path d="M2.75006 8.25C2.75006 7.72563 2.75006 7.25938 2.75819 6.84375H15.2419C15.2501 7.25938 15.2501 7.72563 15.2501 8.25V9.5C15.2501 11.8569 15.2501 13.0356 14.5176 13.7675C13.7851 14.4994 12.6069 14.5 10.2501 14.5H7.75006C5.39319 14.5 4.21444 14.5 3.48256 13.7675C2.75069 13.035 2.75006 11.8569 2.75006 9.5V8.25ZM12.1251 9.5C12.2908 9.5 12.4498 9.43415 12.567 9.31694C12.6842 9.19973 12.7501 9.04076 12.7501 8.875C12.7501 8.70924 12.6842 8.55027 12.567 8.43306C12.4498 8.31585 12.2908 8.25 12.1251 8.25C11.9593 8.25 11.8003 8.31585 11.6831 8.43306C11.5659 8.55027 11.5001 8.70924 11.5001 8.875C11.5001 9.04076 11.5659 9.19973 11.6831 9.31694C11.8003 9.43415 11.9593 9.5 12.1251 9.5ZM12.1251 12C12.2908 12 12.4498 11.9342 12.567 11.8169C12.6842 11.6997 12.7501 11.5408 12.7501 11.375C12.7501 11.2092 12.6842 11.0503 12.567 10.9331C12.4498 10.8158 12.2908 10.75 12.1251 10.75C11.9593 10.75 11.8003 10.8158 11.6831 10.9331C11.5659 11.0503 11.5001 11.2092 11.5001 11.375C11.5001 11.5408 11.5659 11.6997 11.6831 11.8169C11.8003 11.9342 11.9593 12 12.1251 12ZM9.62506 8.875C9.62506 9.04076 9.55921 9.19973 9.442 9.31694C9.32479 9.43415 9.16582 9.5 9.00006 9.5C8.8343 9.5 8.67533 9.43415 8.55812 9.31694C8.44091 9.19973 8.37506 9.04076 8.37506 8.875C8.37506 8.70924 8.44091 8.55027 8.55812 8.43306C8.67533 8.31585 8.8343 8.25 9.00006 8.25C9.16582 8.25 9.32479 8.31585 9.442 8.43306C9.55921 8.55027 9.62506 8.70924 9.62506 8.875ZM9.62506 11.375C9.62506 11.5408 9.55921 11.6997 9.442 11.8169C9.32479 11.9342 9.16582 12 9.00006 12C8.8343 12 8.67533 11.9342 8.55812 11.8169C8.44091 11.6997 8.37506 11.5408 8.37506 11.375C8.37506 11.2092 8.44091 11.0503 8.55812 10.9331C8.67533 10.8158 8.8343 10.75 9.00006 10.75C9.16582 10.75 9.32479 10.8158 9.442 10.9331C9.55921 11.0503 9.62506 11.2092 9.62506 11.375ZM5.87506 9.5C6.04082 9.5 6.19979 9.43415 6.317 9.31694C6.43421 9.19973 6.50006 9.04076 6.50006 8.875C6.50006 8.70924 6.43421 8.55027 6.317 8.43306C6.19979 8.31585 6.04082 8.25 5.87506 8.25C5.7093 8.25 5.55033 8.31585 5.43312 8.43306C5.31591 8.55027 5.25006 8.70924 5.25006 8.875C5.25006 9.04076 5.31591 9.19973 5.43312 9.31694C5.55033 9.43415 5.7093 9.5 5.87506 9.5ZM5.87506 12C6.04082 12 6.19979 11.9342 6.317 11.8169C6.43421 11.6997 6.50006 11.5408 6.50006 11.375C6.50006 11.2092 6.43421 11.0503 6.317 10.9331C6.19979 10.8158 6.04082 10.75 5.87506 10.75C5.7093 10.75 5.55033 10.8158 5.43312 10.9331C5.31591 11.0503 5.25006 11.2092 5.25006 11.375C5.25006 11.5408 5.31591 11.6997 5.43312 11.8169C5.55033 11.9342 5.7093 12 5.87506 12Z" fill-rule="evenodd" clip-rule="evenodd" fill="#DADBDF"/> </svg> <time datetime="<?php echo esc_attr(get_the_date('c')); ?>"><?php echo esc_html(get_the_date('d.m.Y')); ?></time></span>
|
||||||
</h1>
|
<?php if ($reading_minutes) : ?>
|
||||||
|
<span><svg class="article-intro__icon" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="8.5" fill="currentColor"/><path d="M10 5v5l2.5 2" fill="none" stroke="#f6f6f6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> Время чтения <?php echo esc_html($reading_minutes); ?> мин</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<?php $brief_description = get_field('brief_description'); ?>
|
<?php $brief_description = get_field('brief_description'); ?>
|
||||||
<?php if ($brief_description) : ?>
|
<?php if ($brief_description) : ?>
|
||||||
<p class="h-article-hero__description"><?php echo nl2br(esc_html($brief_description)); ?></p>
|
<section class="article-intro__summary" aria-labelledby="summary-title">
|
||||||
|
<h2 id="summary-title">Кратко</h2>
|
||||||
|
<p><?php echo nl2br(esc_html($brief_description)); ?></p>
|
||||||
|
</section>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
<footer class="article-intro__credit">Материал подготовлен <a href="#article-author">редакцией Hantico</a></footer>
|
||||||
<div class="h-article-hero__meta" aria-label="Информация о статье">
|
</article>
|
||||||
<div class="h-article-hero__meta-item">
|
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
||||||
<rect x="3" y="5" width="18" height="16" rx="2"></rect>
|
|
||||||
<path d="M7 3v4M17 3v4M3 10h18"></path>
|
|
||||||
</svg>
|
|
||||||
<time datetime="<?php echo esc_attr(get_the_date('c')); ?>"><?php echo esc_html(get_the_date('d.m.Y')); ?></time>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php if ($reading_minutes) : ?>
|
|
||||||
<div class="h-article-hero__meta-item">
|
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
||||||
<circle cx="12" cy="13" r="9"></circle>
|
|
||||||
<path d="M12 8v5l3 2M9 2h6"></path>
|
|
||||||
</svg>
|
|
||||||
<span>Время чтения: <strong>≈ <?php echo esc_html($reading_minutes); ?> мин</strong></span>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
<div class="h-article-hero__meta-item">
|
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
||||||
<path d="M2.2 12s3.7-6 9.8-6 9.8 6 9.8 6-3.7 6-9.8 6-9.8-6-9.8-6Z"></path>
|
|
||||||
<circle cx="12" cy="12" r="2.8"></circle>
|
|
||||||
</svg>
|
|
||||||
<span>Просмотры: <strong><?php echo esc_html(number_format_i18n($views)); ?></strong></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="article-body<?php if (!$toc_items) echo ' no-toc'; ?>">
|
<div class="article-body<?php if (!$toc_items) echo ' no-toc'; ?>">
|
||||||
<div class="article-main">
|
<div class="article-main">
|
||||||
|
|||||||
Reference in new issue
Block a user