redi/astro_avtourist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Новые изменения в компоенты

Browse source
This commit is contained in:
Web-serfer 2026-04-29 03:54:03 +05:00
parent 1838fd302d
commit 0c6c8fe4d8
7 changed files with 24 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/layouts/ArticleLayout.astro
View file

@ -19,6 +19,7 @@ export interface Props {
heroImage: string;
heroAlt: string;
category: string;
categoryColor?: string;
postTitle: string;
date: string;
author: string;
@ -39,6 +40,7 @@ const {
heroImage,
heroAlt,
category,
categoryColor = 'bg-gold',
postTitle,
date,
author,
@ -87,8 +89,8 @@ const {
<div class="site-container h-full">
<div class="article-hero-inner">
<div class="article-hero-top">
<div class="category-strip">
<span class="category-text">{category}</span>
<div class={`category-strip ${categoryColor}`}>
<span>{category}</span>
</div>
<h1 class="article-title">{postTitle}</h1>
</div>
@ -206,8 +208,12 @@ const {
.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; }
.category-strip { padding: 0.5rem 1.5rem; display: inline-block; border-radius: 0.5rem; margin-bottom: 2rem; font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-family: 'Merriweather', Georgia, serif; }
.category-strip.bg-gold { background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%); color: #1e293b; }
.category-strip.bg-blue { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); color: #ffffff; }
.category-strip.bg-red { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); color: #ffffff; }
.category-strip.bg-green { background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%); color: #ffffff; }
.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); }
@ -240,10 +246,9 @@ const {
.article-hero { height: auto; min-height: 385px; }
.article-title { font-size: 1.5rem; text-align: center; }
.article-hero-top { text-align: center; display: flex; flex-direction: column; align-items: center; }
.category-strip { margin-bottom: 1.5rem; padding: 0.4rem 1rem; }
.category-text { font-size: 0.7rem; }
.category-strip { margin-bottom: 1.5rem; padding: 0.4rem 1rem; font-size: 0.7rem; }
.article-hero-bottom { flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.article-actions { width: 100%; justify-content: center; align-items: center; gap: 1.5rem; }
.article-actions { width: 100%; justify-content: center; 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; }