diff --git a/src/styles/article.css b/src/styles/article.css new file mode 100644 index 0000000..d9c0d8f --- /dev/null +++ b/src/styles/article.css @@ -0,0 +1,117 @@ +.article-wrapper { + position: relative; + max-width: 90%; + padding-bottom: 2rem; +} + +.article-wrapper h4{ + font-size: .5rem; +} + +.news-single h1{ + font-size: 2.375rem; + line-height: 1.2; + margin: 0 0 0.625rem; +} + +.news-single h2{ + font-size: 1.5rem; + line-height: 1.1; + margin: 2.0625rem 0 .375rem; +} + +.news-single :global(p a) { + color: #0d6efd; +} + +.article_info { + display: flex; + align-items: center; + gap: .475rem; + margin-top: 1.9375rem; + margin-bottom: .9375rem; + font-size: 0.875rem; + color: #666; +} + +.divider { + display: block; + width: 1px; + height: 12px; + background-color: #999; + flex-shrink: 0; +} + +.publication__author :global(a){ + text-decoration: underline; +} + +/* Стили для блока тегов */ +.tags-block { + display: flex; + align-items: center; + gap: 0.75rem; + margin: 1.5rem 0; + flex-wrap: wrap; +} + +.tags-label { + font-size: 0.875rem; + font-weight: 500; + color: #333; +} + +.tags-list { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.tag-link { + display: inline-block; + padding: 0.25rem 0.75rem; + font-size: 0.8125rem; + line-height: 1.5; + color: black; + font-weight: 700; + background-color: #ececec; + border-radius: 4px; + text-decoration: none; + transition: all 0.2s ease; +} + +.tag-link:hover { + background-color: #d3d3d3; + border-color: #d3d3d3; +} + +.featured-image { + margin: 1.5rem 0; + width: 100%; +} + +.post-image { + width: 100%; + height: auto; + display: block; + border-radius: 8px; + object-fit: cover; +} + +.image-caption { + font-size: 0.875rem; + color: #666; + margin-top: 0.5rem; + text-align: left; +} + +.image-caption p { + margin: 0 0 0.25rem 0; +} + +.image-caption span { + font-style: italic; + white-space: nowrap; +} + +