Новые правки в компоенты
This commit is contained in:
Web-serfer
parent
107b7f461f
commit
a14c18542e
15 changed files with 417 additions and 233 deletions
|
|
@ -106,11 +106,9 @@ const {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div class="article-actions">
|
||||
<div class="article-actions">
|
||||
<PostReactionButtons postId={postId} initialLikes={initialLikes} initialDislikes={initialDislikes} />
|
||||
<div class="share-wrapper">
|
||||
<PostSocialShare title={postTitle} url={postUrl} />
|
||||
</div>
|
||||
<PostSocialShare title={postTitle} url={postUrl} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -123,9 +121,7 @@ const {
|
|||
<div class="site-container">
|
||||
<div class="article-layout-grid">
|
||||
<div class="article-main">
|
||||
<article class="article-content-wrapper" id="post-content">
|
||||
<slot />
|
||||
</article>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<aside class="article-sidebar" id="sticky-sidebar">
|
||||
|
|
@ -137,6 +133,117 @@ const {
|
|||
</main>
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
/* ЧЕРНАЯ НУМЕРАЦИЯ */
|
||||
.article-content-wrapper { counter-reset: post-h2; }
|
||||
.article-content-wrapper .post-content h2 { counter-reset: post-h3; counter-increment: post-h2; display: flex; align-items: baseline; gap: 0.6rem; color: #1e3050; font-weight: 800; }
|
||||
.article-content-wrapper .post-content h2::before { content: counter(post-h2) "."; color: #1e3050 !important; flex-shrink: 0; }
|
||||
.article-content-wrapper .post-content h3 { counter-increment: post-h3; display: flex; align-items: baseline; gap: 0.5rem; color: #1e3050; font-weight: 700; }
|
||||
.article-content-wrapper .post-content h3::before { content: counter(post-h2) "." counter(post-h3) "."; color: #1e3050 !important; font-size: 0.9em; flex-shrink: 0; }
|
||||
|
||||
/* Исключаем заголовок "Читайте также" из нумерации */
|
||||
.article-content-wrapper .related-posts .section-title {
|
||||
counter-increment: none !important;
|
||||
display: block !important;
|
||||
}
|
||||
.article-content-wrapper .related-posts .section-title::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Исключаем секцию комментариев из нумерации */
|
||||
.article-content-wrapper .comments-wrapper h2,
|
||||
.article-content-wrapper .comments-wrapper h2::before {
|
||||
counter-increment: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
.article-content-wrapper .comments-wrapper h3,
|
||||
.article-content-wrapper .comments-wrapper h3::before {
|
||||
counter-increment: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
.article-content-wrapper .comments-wrapper .section-title,
|
||||
.article-content-wrapper .comments-wrapper .section-title::before {
|
||||
counter-increment: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* СКРОЛЛ-ФИКС */
|
||||
.article-content-wrapper h2, .article-content-wrapper h3 { scroll-margin-top: 125px; }
|
||||
|
||||
/* СТИЛЬ АКТИВНОГО ПУНКТА В TOC */
|
||||
.toc-item.active .toc-link {
|
||||
color: #eac26e !important;
|
||||
font-weight: 700;
|
||||
background: rgba(234, 194, 110, 0.1);
|
||||
}
|
||||
.toc-item.active .toc-link::before { color: #eac26e !important; }
|
||||
|
||||
html, body { overflow-x: clip !important; }
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.h-full { height: 100%; }
|
||||
.main-content { padding-top: 0; overflow: visible; }
|
||||
.breadcrumbs-wrapper { padding-top: 5.5rem; background: #f8fafc; }
|
||||
|
||||
/* HERO SECTION */
|
||||
.article-hero { position: relative; width: 100%; height: 550px; background: #0a1a2e; overflow: hidden; }
|
||||
.article-hero-image { position: absolute; inset: 0; z-index: 1; }
|
||||
.article-hero-image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.35) grayscale(0.2); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); transform: scale(1.04); }
|
||||
.article-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(10, 26, 46, 0.9) 100%); z-index: 2; transition: opacity 0.7s ease; }
|
||||
|
||||
.article-hero:hover .article-hero-image img { filter: brightness(1) grayscale(0); transform: scale(1); }
|
||||
.article-hero:hover .article-hero-overlay { opacity: 0.4; }
|
||||
|
||||
.article-hero-content { position: relative; z-index: 10; height: 100%; }
|
||||
.article-hero-inner { display: flex; flex-direction: column; height: 100%; padding: 3rem 0; }
|
||||
.article-hero-top { margin-bottom: 2rem; }
|
||||
|
||||
.category-strip { background: #eac26e; padding: 0.5rem 1.5rem; display: inline-block; border-radius: 4px; margin-bottom: 2rem; }
|
||||
.category-text { color: #0a1a2e; font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-family: 'Merriweather', Georgia, serif; }
|
||||
.article-title { color: #fff; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.15; max-width: 950px; text-shadow: 0 4px 15px rgba(0,0,0,0.4); font-family: 'Merriweather', Georgia, serif; }
|
||||
|
||||
.article-hero-bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.15); }
|
||||
.article-actions { display: flex; align-items: center; gap: 2rem; }
|
||||
.article-meta { display: flex; gap: 2rem; justify-content: flex-start; width: auto; }
|
||||
.meta-item { display: flex; align-items: center; gap: 0.6rem; color: #fff; font-size: 0.95rem; white-space: nowrap; }
|
||||
.meta-icon { width: 1.1rem; height: 1.1rem; color: #eac26e; }
|
||||
.meta-author { color: #eac26e; font-weight: 700; }
|
||||
|
||||
/* GRID & STICKY SIDEBAR */
|
||||
.article-body { padding: 0 0 4rem; background: #f8fafc; overflow: visible; }
|
||||
.article-layout-grid { display: flex; gap: 3.5rem; align-items: flex-start; }
|
||||
.article-main { flex: 1; min-width: 0; }
|
||||
.article-content-wrapper { background: #fff; padding: 1.5rem 2.5rem 2.5rem; border-radius: 2rem; box-shadow: 0 4px 30px rgba(0,0,0,0.02); }
|
||||
|
||||
.article-sidebar { width: 320px; flex-shrink: 0; position: sticky; top: 110px; z-index: 50; }
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.article-sidebar { display: none; }
|
||||
.article-layout-grid { flex-direction: column; }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.article-hero-bottom { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
|
||||
.article-actions { width: 100%; justify-content: flex-start; }
|
||||
.article-meta { gap: 1.5rem; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.article-hero { height: auto; min-height: 385px; }
|
||||
.article-title { font-size: 1.5rem; }
|
||||
.article-hero-bottom { flex-direction: column; align-items: flex-start; gap: 2rem; }
|
||||
.article-actions { width: 100%; justify-content: flex-start; align-items: flex-end; gap: 1.5rem; }
|
||||
.share-wrapper { display: flex; align-items: flex-end; }
|
||||
.article-content-wrapper { padding: 2.5rem 1.5rem; padding-top: 0; }
|
||||
.article-hero-inner { padding: 2rem 0; }
|
||||
.meta-item { font-size: 0.85rem; }
|
||||
.article-meta { gap: 0.75rem; flex-wrap: wrap; }
|
||||
.category-strip { margin-bottom: 1.5rem; padding: 0.4rem 1rem; }
|
||||
.category-text { font-size: 0.7rem; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function setupArticleLogic() {
|
||||
const sidebar = document.getElementById('sticky-sidebar');
|
||||
|
|
@ -199,103 +306,4 @@ const {
|
|||
|
||||
document.addEventListener("DOMContentLoaded", setupArticleLogic);
|
||||
document.addEventListener("astro:page-load", setupArticleLogic);
|
||||
</script>
|
||||
|
||||
<style is:global>
|
||||
/* ЧЕРНАЯ НУМЕРАЦИЯ */
|
||||
#post-content { counter-reset: post-h2; }
|
||||
#post-content h2 { counter-reset: post-h3; counter-increment: post-h2; display: flex; align-items: baseline; gap: 0.6rem; color: #1e3050; font-weight: 800; }
|
||||
#post-content h2::before { content: counter(post-h2) "."; color: #1e3050 !important; flex-shrink: 0; }
|
||||
#post-content h3 { counter-increment: post-h3; display: flex; align-items: baseline; gap: 0.5rem; color: #1e3050; font-weight: 700; }
|
||||
#post-content h3::before { content: counter(post-h2) "." counter(post-h3) "."; color: #1e3050 !important; font-size: 0.9em; flex-shrink: 0; }
|
||||
|
||||
/* Исключаем заголовок "Читайте также" из нумерации */
|
||||
#post-content .related-posts .section-title {
|
||||
counter-increment: none !important;
|
||||
display: block !important;
|
||||
}
|
||||
#post-content .related-posts .section-title::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Исключаем секцию комментариев из нумерации */
|
||||
#post-content .comments-wrapper h2,
|
||||
#post-content .comments-wrapper h2::before {
|
||||
counter-increment: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
#post-content .comments-wrapper h3,
|
||||
#post-content .comments-wrapper h3::before {
|
||||
counter-increment: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
#post-content .comments-wrapper .section-title,
|
||||
#post-content .comments-wrapper .section-title::before {
|
||||
counter-increment: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* СКРОЛЛ-ФИКС */
|
||||
#post-content h2, #post-content h3 { scroll-margin-top: 125px; }
|
||||
|
||||
/* СТИЛЬ АКТИВНОГО ПУНКТА В TOC */
|
||||
.toc-item.active .toc-link {
|
||||
color: #eac26e !important;
|
||||
font-weight: 700;
|
||||
background: rgba(234, 194, 110, 0.1);
|
||||
}
|
||||
.toc-item.active .toc-link::before { color: #eac26e !important; }
|
||||
|
||||
html, body { overflow-x: clip !important; }
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.h-full { height: 100%; }
|
||||
.main-content { padding-top: 0; overflow: visible; }
|
||||
.breadcrumbs-wrapper { padding-top: 5.5rem; background: #f8fafc; }
|
||||
|
||||
/* HERO SECTION */
|
||||
.article-hero { position: relative; width: 100%; height: 550px; background: #0a1a2e; overflow: hidden; }
|
||||
.article-hero-image { position: absolute; inset: 0; z-index: 1; }
|
||||
.article-hero-image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.35) grayscale(0.2); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); transform: scale(1.04); }
|
||||
.article-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(10, 26, 46, 0.9) 100%); z-index: 2; transition: opacity 0.7s ease; }
|
||||
|
||||
.article-hero:hover .article-hero-image img { filter: brightness(1) grayscale(0); transform: scale(1); }
|
||||
.article-hero:hover .article-hero-overlay { opacity: 0.4; }
|
||||
|
||||
.article-hero-content { position: relative; z-index: 10; height: 100%; }
|
||||
.article-hero-inner { display: flex; flex-direction: column; height: 100%; padding: 3rem 0; }
|
||||
.article-hero-top { margin-bottom: 2rem; }
|
||||
|
||||
.category-strip { background: #eac26e; padding: 0.5rem 1.5rem; display: inline-block; border-radius: 4px; margin-bottom: 2rem; }
|
||||
.category-text { color: #0a1a2e; font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }
|
||||
.article-title { color: #fff; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.15; max-width: 950px; text-shadow: 0 4px 15px rgba(0,0,0,0.4); }
|
||||
|
||||
.article-hero-bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.15); }
|
||||
.article-actions { display: flex; align-items: center; gap: 2rem; }
|
||||
.article-meta { display: flex; gap: 2.5rem; }
|
||||
.meta-item { display: flex; align-items: center; gap: 0.6rem; color: #fff; font-size: 0.95rem; }
|
||||
.meta-icon { width: 1.1rem; height: 1.1rem; color: #eac26e; }
|
||||
.meta-author { color: #eac26e; font-weight: 700; }
|
||||
|
||||
/* GRID & STICKY SIDEBAR */
|
||||
.article-body { padding: 4rem 0; background: #f8fafc; overflow: visible; }
|
||||
.article-layout-grid { display: flex; gap: 3.5rem; align-items: flex-start; }
|
||||
.article-main { flex: 1; min-width: 0; }
|
||||
.article-content-wrapper { background: #fff; padding: 1.5rem 2.5rem 2.5rem; border-radius: 2rem; box-shadow: 0 4px 30px rgba(0,0,0,0.02); }
|
||||
|
||||
.article-sidebar { width: 320px; flex-shrink: 0; position: sticky; top: 110px; z-index: 50; }
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.article-sidebar { display: none; }
|
||||
.article-layout-grid { flex-direction: column; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.article-hero { height: auto; min-height: 550px; }
|
||||
.article-title { font-size: 1.75rem; }
|
||||
.article-hero-bottom { flex-direction: column; align-items: flex-start; gap: 2rem; }
|
||||
.article-actions { width: 100%; justify-content: space-between; }
|
||||
.article-content-wrapper { padding: 2.5rem 1.5rem; }
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -25,6 +25,9 @@ const { title, description, canonicalLink, breadcrumbs } = Astro.props;
|
|||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
|
||||
<link rel="icon" href="/favicons/favicon.ico" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&display=swap" rel="stylesheet" />
|
||||
<title>{title} {SITE_TITLE_SUFFIX}</title>
|
||||
<meta name="description" content={description} />
|
||||
{canonicalLink && <link rel="canonical" href={canonicalLink} />}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue