task 17075 | сделал основу для первого блока
This commit is contained in:
web_103.2 committed
1 parent
714d00cc6e
commit
9e21c34547
2 files changed
+212
-15
No files matched your search
@@ -5944,3 +5944,162 @@ h4 {
|
|||||||
color: var(--color-red);
|
color: var(--color-red);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* новые */
|
||||||
|
|
||||||
|
.h-article-hero {
|
||||||
|
--h-hero-accent: #d52d49;
|
||||||
|
--h-hero-text: #202b35;
|
||||||
|
--h-hero-muted: #68747f;
|
||||||
|
--h-hero-line: #e7eaf0;
|
||||||
|
--h-hero-bg: #f7f8fa;
|
||||||
|
--h-hero-radius: 26px;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 1100px;
|
||||||
|
color: var(--h-hero-text);
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero *,
|
||||||
|
.h-article-hero *::before,
|
||||||
|
.h-article-hero *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(400px, 500px) minmax(0, 1fr);
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 64px;
|
||||||
|
width: calc(100% - 80px);
|
||||||
|
max-width: 1360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__picture {
|
||||||
|
min-height: 600px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: var(--h-hero-radius);
|
||||||
|
background: #e4e8ec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__image {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 600px;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 5px 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__breadcrumb-divider {
|
||||||
|
flex: none;
|
||||||
|
color: #a9b0b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__breadcrumb-current {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: var(--h-hero-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__categories {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__category {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 29px;
|
||||||
|
padding: 5px 12px;
|
||||||
|
border: 1px solid rgba(213, 45, 73, .17);
|
||||||
|
border-radius: 100px;
|
||||||
|
background: #fff0f3;
|
||||||
|
color: var(--h-hero-accent);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__title {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--h-hero-text);
|
||||||
|
font-size: 44px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.12;
|
||||||
|
letter-spacing: -.035em;
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__title > span {
|
||||||
|
background: linear-gradient(98deg, #f05d6b 0%, #bc203f 100%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__description {
|
||||||
|
max-width: 710px;
|
||||||
|
margin: 24px 0 34px;
|
||||||
|
color: #535f6c;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: auto;
|
||||||
|
padding-top: 25px;
|
||||||
|
border-top: 1px solid var(--h-hero-line);
|
||||||
|
color: #4e5a65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__meta-item {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
flex: none;
|
||||||
|
min-height: 31px;
|
||||||
|
padding: 0 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.35;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__meta-item:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__meta-item + .h-article-hero__meta-item {
|
||||||
|
border-left: 1px solid #d7dce3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__meta-item svg {
|
||||||
|
display: block;
|
||||||
|
flex: none;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
color: var(--h-hero-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-article-hero__meta-item strong {
|
||||||
|
color: var(--h-hero-text);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
@@ -6,6 +6,7 @@
|
|||||||
|
|
||||||
<?php
|
<?php
|
||||||
$parent_id = is_singular('news') ? 82 : 42;
|
$parent_id = is_singular('news') ? 82 : 42;
|
||||||
|
$terms = get_the_terms(get_the_ID(), 'article_category');
|
||||||
$article_content = get_field('article_content');
|
$article_content = get_field('article_content');
|
||||||
if ($article_content) :
|
if ($article_content) :
|
||||||
$generated = generate_toc($article_content);
|
$generated = generate_toc($article_content);
|
||||||
@@ -17,23 +18,60 @@
|
|||||||
<div class="article-goback">
|
<div class="article-goback">
|
||||||
<a href="<?php echo get_permalink($parent_id); ?>" class="article-goback__btn">Назад</a>
|
<a href="<?php echo get_permalink($parent_id); ?>" class="article-goback__btn">Назад</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="article-header">
|
|
||||||
<h1 class="article-title"><?php the_title(); ?></h1>
|
<div class="h-article-hero" aria-labelledby="h-article-hero-title">
|
||||||
<div class="article-img"><?php the_post_thumbnail('extra_large'); ?></div>
|
<div class="h-article-hero__container">
|
||||||
<div class="article-meta">
|
<div class="h-article-hero__picture">
|
||||||
<time class="article-date" datetime="<?php echo get_the_date('c'); ?>"><?php echo get_the_date('d.m.Y'); ?></time>
|
<?php the_post_thumbnail('extra_large', array('class' => 'h-article-hero__image')); ?>
|
||||||
<?php
|
</div>
|
||||||
$terms = get_the_terms(get_the_ID(), 'article_category');
|
|
||||||
if ($terms) :
|
<div class="h-article-hero__content">
|
||||||
?>
|
<?php if ($terms && !is_wp_error($terms)) : ?>
|
||||||
<ul class="article-tags">
|
<div class="h-article-hero__categories">
|
||||||
<?php foreach ($terms as $term) : ?>
|
<?php foreach ($terms as $term) : ?>
|
||||||
<li class="article-tags__item"><?php echo $term->name; ?></li>
|
<span class="h-article-hero__category"><?php echo esc_html($term->name); ?></span>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</ul>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<h1 class="h-article-hero__title" id="h-article-hero-title">
|
||||||
|
<?php the_title(); ?>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<?php $brief_description = get_field('brief_description'); ?>
|
||||||
|
<?php if ($brief_description) : ?>
|
||||||
|
<p class="h-article-hero__description"><?php echo nl2br(esc_html($brief_description)); ?></p>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<div class="h-article-hero__meta" aria-label="Информация о статье">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>—</strong></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>—</strong></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
<div class="article-content content"><?php echo wrap_tables($content); ?></div>
|
<div class="article-content content"><?php echo wrap_tables($content); ?></div>
|
||||||
|
|||||||
Reference in new issue
Block a user