valitovgaziz/tp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: main_dc/valitovgaziz/html/blog.html

Browse Source 
modified:   main_dc/valitovgaziz/html/style/blog.css
add css and renew design CSS
This commit is contained in:
Газиз Валитов
2026-01-25 01:43:36 +05:00
parent e77fa69e89
commit 9d7d83cdc2
2 changed files with 698 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main_dc/valitovgaziz/html/blog.html
+81 -605
View File
@@ -1,552 +1,16 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Блог Вадитова Газиза - мысли, проекты, обновления и размышления о разработке и предпринимательстве">
<meta name="description"
content="Блог Валитова Газиза - мысли, проекты, обновления и размышления о разработке и предпринимательстве">
<title>Блог | ValitovGaziz - Мысли и обновления</title>
<link rel="icon" href="./images/favicon/code_orange.png">
<style>
/* Базовые стили для блога */
:root {
--primary: #9ab09492;
--secondary: #3498db;
--accent: #2ecc71;
--light: #f8f9fa;
--dark: #1a252f;
--gray: #6c757d;
--light-gray: #e9ecef;
--border-radius: 12px;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.15);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--dark);
background-color: var(--light);
transition: var(--transition);
min-height: 100vh;
}
/* Стили для темной темы */
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
body.dark-mode .blog-nav {
background-color: #1e1e1e;
border-bottom: 1px solid #333;
}
body.dark-mode .blog-header {
background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
}
body.dark-mode .blog-container,
body.dark-mode .blog-sidebar,
body.dark-mode .blog-post {
background-color: #1e1e1e;
color: #e0e0e0;
}
body.dark-mode .blog-sidebar-section,
body.dark-mode .blog-post-content,
body.dark-mode .blog-post-footer {
border-color: #333;
}
body.dark-mode .blog-quote {
background-color: #2d2d2d;
border-left-color: var(--secondary);
}
body.dark-mode .blog-tag {
background-color: #2c3e50;
color: #e0e0e0;
}
body.dark-mode .blog-pagination-btn {
background-color: #2c3e50;
color: #e0e0e0;
}
body.dark-mode .blog-footer {
background-color: #1a252f;
color: #b0b0b0;
}
/* Кнопка переключения темы */
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
padding: 8px 16px;
background-color: var(--secondary);
color: white;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
transition: var(--transition);
box-shadow: var(--shadow);
}
.theme-toggle:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
/* Навигация */
.blog-nav {
background-color: white;
border-bottom: 1px solid var(--light-gray);
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 100;
transition: var(--transition);
}
.blog-nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.blog-nav-logo {
font-size: 1.5rem;
font-weight: bold;
color: var(--dark);
text-decoration: none;
transition: var(--transition);
}
.blog-nav-link {
color: var(--secondary);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
}
.blog-nav-link:hover {
color: var(--dark);
}
/* Заголовок блога */
.blog-header {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
padding: 4rem 2rem;
text-align: center;
color: white;
}
.blog-header-content {
max-width: 800px;
margin: 0 auto;
}
.blog-title {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.blog-subtitle {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.blog-meta {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.blog-meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
/* Основной контейнер */
.blog-container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 1fr 300px;
gap: 3rem;
}
/* Боковая панель */
.blog-sidebar {
position: sticky;
top: 100px;
height: fit-content;
}
.blog-sidebar-section {
background-color: white;
border-radius: var(--border-radius);
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: var(--shadow);
transition: var(--transition);
}
.blog-sidebar-section h3 {
margin-bottom: 1rem;
color: var(--dark);
}
.blog-categories {
list-style: none;
}
.blog-categories li {
margin-bottom: 0.5rem;
}
.blog-category {
display: block;
padding: 0.5rem 1rem;
color: var(--gray);
text-decoration: none;
border-radius: 6px;
transition: var(--transition);
}
.blog-category:hover {
background-color: var(--light-gray);
color: var(--dark);
}
.blog-recent {
list-style: none;
}
.blog-recent li {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--light-gray);
}
.blog-recent li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.blog-recent a {
color: var(--dark);
text-decoration: none;
transition: var(--transition);
}
.blog-recent a:hover {
color: var(--secondary);
}
/* Посты блога */
.blog-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.blog-post {
background-color: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.blog-post:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.blog-post-header {
padding: 2rem 2rem 1rem;
}
.blog-post-category {
display: inline-block;
padding: 0.25rem 0.75rem;
background-color: var(--light-gray);
color: var(--gray);
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
margin-bottom: 1rem;
}
.blog-post-title {
font-size: 1.8rem;
margin-bottom: 1rem;
color: var(--dark);
}
.blog-post-meta {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--gray);
font-size: 0.9rem;
}
.blog-post-content {
padding: 0 2rem 1rem;
border-bottom: 1px solid var(--light-gray);
}
.blog-post-content h3 {
margin: 1.5rem 0 1rem;
color: var(--dark);
}
.blog-post-content ul,
.blog-post-content ol {
margin: 1rem 0;
padding-left: 1.5rem;
}
.blog-post-content li {
margin-bottom: 0.5rem;
}
.blog-quote {
margin: 1.5rem 0;
padding: 1.5rem;
background-color: var(--light-gray);
border-left: 4px solid var(--secondary);
font-style: italic;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.blog-post-footer {
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.blog-post-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.blog-tag {
display: inline-block;
padding: 0.25rem 0.75rem;
background-color: var(--light-gray);
color: var(--gray);
border-radius: 20px;
font-size: 0.8rem;
text-decoration: none;
transition: var(--transition);
}
.blog-tag:hover {
background-color: var(--secondary);
color: white;
}
.blog-comment-btn {
padding: 0.5rem 1rem;
background-color: var(--secondary);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
}
.blog-comment-btn:hover {
background-color: #2980b9;
transform: translateY(-2px);
}
/* Пагинация */
.blog-pagination {
max-width: 1200px;
margin: 3rem auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.blog-pagination-btn {
padding: 0.75rem 1.5rem;
background-color: white;
color: var(--dark);
text-decoration: none;
border-radius: var(--border-radius);
transition: var(--transition);
border: 1px solid var(--light-gray);
display: flex;
align-items: center;
gap: 0.5rem;
}
.blog-pagination-btn:hover {
background-color: var(--secondary);
color: white;
border-color: var(--secondary);
}
.blog-pagination-current {
color: var(--gray);
}
/* Футер */
.blog-footer {
background-color: var(--dark);
color: white;
padding: 3rem 0;
margin-top: 4rem;
}
.blog-footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
}
.blog-footer-content p {
margin-bottom: 1rem;
}
.blog-footer-content a {
color: var(--light-gray);
text-decoration: none;
transition: var(--transition);
}
.blog-footer-content a:hover {
color: var(--secondary);
}
/* Кнопка для мобильного меню */
.blog-sidebar-toggle {
display: none;
width: 100%;
padding: 1rem;
background-color: var(--secondary);
color: white;
border: none;
border-radius: var(--border-radius);
margin-bottom: 1rem;
cursor: pointer;
font-weight: 500;
}
/* Адаптивность */
@media (max-width: 992px) {
.blog-container {
grid-template-columns: 1fr;
gap: 2rem;
}
.blog-sidebar {
position: static;
}
}
@media (max-width: 768px) {
.blog-title {
font-size: 2.5rem;
}
.blog-container {
padding: 0 1rem;
}
.blog-nav-container {
padding: 0 1rem;
}
.blog-header {
padding: 3rem 1rem;
}
.blog-meta {
flex-direction: column;
gap: 1rem;
}
.blog-post-header,
.blog-post-content,
.blog-post-footer {
padding: 1.5rem;
}
.blog-pagination {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.blog-sidebar-toggle {
display: block;
}
.blog-sidebar {
display: none;
}
.blog-sidebar.show {
display: block;
}
}
@media (max-width: 480px) {
.blog-title {
font-size: 2rem;
}
.blog-post-title {
font-size: 1.5rem;
}
.blog-post-footer {
flex-direction: column;
align-items: flex-start;
}
}
</style>
<link rel="stylesheet" href="style/blog.css" />
</head>
<body>
<!-- Кнопка переключения темы -->
<button class="theme-toggle" onclick="toggleTheme()">
@@ -580,35 +44,7 @@
📂 Меню блога
</button>
<!-- Боковая панель -->
<aside class="blog-sidebar">
<div class="blog-sidebar-section">
<h3>О блоге</h3>
<p>Здесь я делюсь мыслями о разработке, обновлениями проектов и размышлениями о технологическом предпринимательстве.</p>
</div>
<div class="blog-sidebar-section">
<h3>Категории</h3>
<ul class="blog-categories">
<li><a href="#" class="blog-category">Проекты</a></li>
<li><a href="#" class="blog-category">Разработка</a></li>
<li><a href="#" class="blog-category">Предпринимательство</a></li>
<li><a href="#" class="blog-category">Мысли</a></li>
<li><a href="#" class="blog-category">Обновления</a></li>
</ul>
</div>
<div class="blog-sidebar-section">
<h3>Последние записи</h3>
<ul class="blog-recent">
<li><a href="#post1">Новые возможности Yalarba.ru</a></li>
<li><a href="#post2">Переход на Vue 3</a></li>
<li><a href="#post3">О важности сообщества</a></li>
</ul>
</div>
</aside>
<!-- Основное содержание блога -->
<!-- Основное содержание блога - ЛЕВАЯ КОЛОНКА (70%) -->
<div class="blog-content">
<!-- Пример записи блога -->
<article class="blog-post" id="post1">
@@ -621,10 +57,12 @@
<span>5 минут чтения</span>
</div>
</header>
<div class="blog-post-content">
<p>Сегодня хочу поделиться важным обновлением по проекту Yalarba.ru. Мы завершили переход на новую архитектуру и готовимся к запуску нескольких ключевых функций, которые существенно улучшат пользовательский опыт.</p>
<p>Сегодня хочу поделиться важным обновлением по проекту Yalarba.ru. Мы завершили переход на новую
архитектуру и готовимся к запуску нескольких ключевых функций, которые существенно улучшат
пользовательский опыт.</p>
<h3>Что изменилось:</h3>
<ul>
<li>Полностью переработанный интерфейс поиска маршрутов</li>
@@ -632,16 +70,18 @@
<li>Улучшенная система рекомендаций</li>
<li>Подготовка к мобильному приложению</li>
</ul>
<p>Этот этап занял больше времени, чем планировалось, но результат того стоит. Особенно горжусь тем, как команда справилась с техническими вызовами.</p>
<p>Этот этап занял больше времени, чем планировалось, но результат того стоит. Особенно горжусь тем,
как команда справилась с техническими вызовами.</p>
<blockquote class="blog-quote">
"Технологии должны решать реальные проблемы людей, а не создавать новые"
</blockquote>
<p>В ближайших планах — запуск бета-тестирования новых функций и привлечение первых партнеров из туристической отрасли.</p>
<p>В ближайших планах — запуск бета-тестирования новых функций и привлечение первых партнеров из
туристической отрасли.</p>
</div>
<footer class="blog-post-footer">
<div class="blog-post-tags">
<a href="#" class="blog-tag">#Yalarba</a>
@@ -665,10 +105,11 @@
<span>7 минут чтения</span>
</div>
</header>
<div class="blog-post-content">
<p>После нескольких месяцев работы с Vue 3 в продакшене хочу поделиться наблюдениями о переходе с Vue 2.</p>
<p>После нескольких месяцев работы с Vue 3 в продакшене хочу поделиться наблюдениями о переходе с
Vue 2.</p>
<h3>Основные преимущества:</h3>
<ol>
<li><strong>Composition API</strong> — действительно улучшает переиспользование кода</li>
@@ -676,13 +117,15 @@
<li><strong>TypeScript поддержка</strong> — наконец-то полноценная интеграция</li>
<li><strong>Меньший размер бандла</strong> — tree-shaking работает лучше</li>
</ol>
<h3>Сложности перехода:</h3>
<p>Не всё прошло гладко. Некоторые библиотеки ещё не обновились, пришлось искать альтернативы или писать собственные решения. Также Composition API требует изменения мышления, особенно для разработчиков, долго работавших с Options API.</p>
<p>Не всё прошло гладко. Некоторые библиотеки ещё не обновились, пришлось искать альтернативы или
писать собственные решения. Также Composition API требует изменения мышления, особенно для
разработчиков, долго работавших с Options API.</p>
<p>В целом, переход оправдан. Особенно для новых проектов — рекомендую сразу начинать с Vue 3.</p>
</div>
<footer class="blog-post-footer">
<div class="blog-post-tags">
<a href="#" class="blog-tag">#Vue3</a>
@@ -706,22 +149,25 @@
<span>4 минуты чтения</span>
</div>
</header>
<div class="blog-post-content">
<p>В последнее время всё чаще задумываюсь о том, насколько важно окружение для профессионального роста. Особенно в IT, где технологии меняются так быстро.</p>
<p>Когда работаешь один, легко застрять в своих паттернах, не замечать новые подходы или повторять одни и те же ошибки. Сообщество — это не только нетворкинг, это:</p>
<p>В последнее время всё чаще задумываюсь о том, насколько важно окружение для профессионального
роста. Особенно в IT, где технологии меняются так быстро.</p>
<p>Когда работаешь один, легко застрять в своих паттернах, не замечать новые подходы или повторять
одни и те же ошибки. Сообщество — это не только нетворкинг, это:</p>
<ul>
<li><strong>Обратная связь</strong> — свежий взгляд на твои решения</li>
<li><strong>Совместное обучение</strong> — каждый знает что-то, чего не знаешь ты</li>
<li><strong>Поддержка</strong> — особенно важна в сложные периоды</li>
<li><strong>Вдохновение</strong> — видеть успехи других мотивирует</li>
</ul>
<p>Именно поэтому я решил больше инвестировать в развитие сообщества вокруг своих проектов. Если вы читаете это — возможно, нам стоит пообщаться :)</p>
<p>Именно поэтому я решил больше инвестировать в развитие сообщества вокруг своих проектов. Если вы
читаете это — возможно, нам стоит пообщаться :)</p>
</div>
<footer class="blog-post-footer">
<div class="blog-post-tags">
<a href="#" class="blog-tag">#Сообщество</a>
@@ -734,6 +180,35 @@
</footer>
</article>
</div>
<!-- Боковая панель - ПРАВАЯ КОЛОНКА (30%) -->
<aside class="blog-sidebar">
<div class="blog-sidebar-section">
<h3>О блоге</h3>
<p>Здесь я делюсь мыслями о разработке, обновлениями проектов и размышлениями о технологическом
предпринимательстве.</p>
</div>
<div class="blog-sidebar-section">
<h3>Категории</h3>
<ul class="blog-categories">
<li><a href="#" class="blog-category">Проекты</a></li>
<li><a href="#" class="blog-category">Разработка</a></li>
<li><a href="#" class="blog-category">Предпринимательство</a></li>
<li><a href="#" class="blog-category">Мысли</a></li>
<li><a href="#" class="blog-category">Обновления</a></li>
</ul>
</div>
<div class="blog-sidebar-section">
<h3>Последние записи</h3>
<ul class="blog-recent">
<li><a href="#post1">Новые возможности Yalarba.ru</a></li>
<li><a href="#post2">Переход на Vue 3</a></li>
<li><a href="#post3">О важности сообщества</a></li>
</ul>
</div>
</aside>
</main>
<!-- Пагинация -->
@@ -746,10 +221,10 @@
<!-- Футер блога -->
<footer class="blog-footer">
<div class="blog-footer-content">
<p>© 2024 Блог Вадитова Газиза. Все записи — личные размышления и опыт.</p>
<p>© 2024 Блог Валитова Газиза. Все записи — личные размышления и опыт.</p>
<p>
<a href="index.html">На главную</a> •
<a href="https://t.me/valitovgaziz">Telegram</a> •
<a href="index.html">На главную</a> •
<a href="https://t.me/valitovgaziz">Telegram</a> •
<a href="mailto:valitovgaziz@yandex.ru">Email</a>
</p>
</div>
@@ -760,7 +235,7 @@
function toggleTheme() {
document.body.classList.toggle('dark-mode');
const btn = document.querySelector('.theme-toggle');
if (document.body.classList.contains('dark-mode')) {
btn.textContent = '☀️ Светлая тема';
localStorage.setItem('blog-theme', 'dark');
@@ -771,10 +246,10 @@
}
// Загрузка сохраненной темы
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', function () {
const savedTheme = localStorage.getItem('blog-theme');
const btn = document.querySelector('.theme-toggle');
if (savedTheme === 'dark') {
document.body.classList.add('dark-mode');
btn.textContent = '☀️ Светлая тема';
@@ -786,7 +261,7 @@
if (window.innerWidth < 768) {
const sidebar = document.querySelector('.blog-sidebar');
const toggleBtn = document.querySelector('.blog-sidebar-toggle');
toggleBtn.style.display = 'block';
sidebar.style.display = 'none';
}
@@ -804,10 +279,10 @@
}
// Обработчик изменения размера окна
window.addEventListener('resize', function() {
window.addEventListener('resize', function () {
const sidebar = document.querySelector('.blog-sidebar');
const toggleBtn = document.querySelector('.blog-sidebar-toggle');
if (window.innerWidth >= 768) {
sidebar.style.display = 'block';
toggleBtn.style.display = 'none';
@@ -823,14 +298,14 @@
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 100,
behavior: 'smooth'
});
// Закрываем сайдбар на мобильных
if (window.innerWidth < 768) {
const sidebar = document.querySelector('.blog-sidebar');
@@ -841,4 +316,5 @@
});
</script>
</body>
</html>
main_dc/valitovgaziz/html/style/blog.css
+617
View File
@@ -0,0 +1,617 @@
/* Базовые стили для блога */
:root {
--primary: #9ab09492;
--secondary: #3498db;
--accent: #2ecc71;
--light: #f8f9fa;
--dark: #1a252f;
--gray: #6c757d;
--light-gray: #e9ecef;
--border-radius: 12px;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.15);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--dark);
background-color: var(--light);
transition: var(--transition);
min-height: 100vh;
}
/* Стили для темной темы */
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
body.dark-mode .blog-nav {
background-color: #1e1e1e;
border-bottom: 1px solid #333;
}
body.dark-mode .blog-header {
background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
}
body.dark-mode .blog-container,
body.dark-mode .blog-sidebar,
body.dark-mode .blog-post {
background-color: #1e1e1e;
color: #e0e0e0;
}
body.dark-mode .blog-sidebar-section,
body.dark-mode .blog-post-content,
body.dark-mode .blog-post-footer {
border-color: #333;
}
body.dark-mode .blog-quote {
background-color: #2d2d2d;
border-left-color: var(--secondary);
}
body.dark-mode .blog-tag {
background-color: #2c3e50;
color: #e0e0e0;
}
body.dark-mode .blog-pagination-btn {
background-color: #2c3e50;
color: #e0e0e0;
}
body.dark-mode .blog-footer {
background-color: #1a252f;
color: #b0b0b0;
}
/* Кнопка переключения темы */
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
padding: 8px 16px;
background-color: var(--secondary);
color: white;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
transition: var(--transition);
box-shadow: var(--shadow);
}
.theme-toggle:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
/* Навигация */
.blog-nav {
background-color: white;
border-bottom: 1px solid var(--light-gray);
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 100;
transition: var(--transition);
}
.blog-nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.blog-nav-logo {
font-size: 1.5rem;
font-weight: bold;
color: var(--dark);
text-decoration: none;
transition: var(--transition);
}
.blog-nav-link {
color: var(--secondary);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
}
.blog-nav-link:hover {
color: var(--dark);
}
/* Заголовок блога */
.blog-header {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
padding: 4rem 2rem;
text-align: center;
color: white;
}
.blog-header-content {
max-width: 1200px;
margin: 0 auto;
}
.blog-title {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.blog-subtitle {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.blog-meta {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.blog-meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
/* Основной контейнер - ИСПРАВЛЕНЫ ПРОПОРЦИИ */
.blog-container {
max-width: 1200px;
margin: 3rem auto;
padding: 0 2rem;
display: grid;
/* Основная колонка 70%, боковая 30% */
grid-template-columns: 1fr 280px;
gap: 2.5rem;
}
/* Боковая панель - компактная */
.blog-sidebar {
position: sticky;
top: 100px;
height: fit-content;
width: 100%;
}
.blog-sidebar-section {
background-color: white;
border-radius: var(--border-radius);
padding: 1.25rem;
margin-bottom: 1.25rem;
box-shadow: var(--shadow);
transition: var(--transition);
width: 100%;
}
.blog-sidebar-section h3 {
margin-bottom: 0.75rem;
color: var(--dark);
font-size: 1.1rem;
}
.blog-sidebar-section p {
font-size: 0.9rem;
line-height: 1.5;
}
.blog-categories {
list-style: none;
}
.blog-categories li {
margin-bottom: 0.4rem;
}
.blog-category {
display: block;
padding: 0.4rem 0.75rem;
color: var(--gray);
text-decoration: none;
border-radius: 6px;
transition: var(--transition);
font-size: 0.9rem;
}
.blog-category:hover {
background-color: var(--light-gray);
color: var(--dark);
}
.blog-recent {
list-style: none;
}
.blog-recent li {
margin-bottom: 0.8rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--light-gray);
}
.blog-recent li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.blog-recent a {
color: var(--dark);
text-decoration: none;
transition: var(--transition);
font-size: 0.9rem;
display: block;
}
.blog-recent a:hover {
color: var(--secondary);
}
/* Основное содержание - шире */
.blog-content {
display: flex;
flex-direction: column;
gap: 2.5rem;
width: 100%;
}
.blog-post {
background-color: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
width: 100%;
}
.blog-post:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.blog-post-header {
padding: 2rem 2rem 1rem;
}
.blog-post-category {
display: inline-block;
padding: 0.25rem 0.75rem;
background-color: var(--light-gray);
color: var(--gray);
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
margin-bottom: 1rem;
}
.blog-post-title {
font-size: 1.8rem;
margin-bottom: 1rem;
color: var(--dark);
line-height: 1.3;
}
.blog-post-meta {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--gray);
font-size: 0.9rem;
}
.blog-post-content {
padding: 0 2rem 1rem;
border-bottom: 1px solid var(--light-gray);
}
.blog-post-content p {
margin-bottom: 1rem;
font-size: 1.05rem;
line-height: 1.7;
}
.blog-post-content h3 {
margin: 1.5rem 0 1rem;
color: var(--dark);
font-size: 1.4rem;
}
.blog-post-content ul,
.blog-post-content ol {
margin: 1rem 0 1.5rem 1.5rem;
padding-left: 0.5rem;
}
.blog-post-content li {
margin-bottom: 0.75rem;
font-size: 1.05rem;
line-height: 1.6;
}
.blog-quote {
margin: 1.5rem 0;
padding: 1.5rem;
background-color: var(--light-gray);
border-left: 4px solid var(--secondary);
font-style: italic;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
font-size: 1.1rem;
line-height: 1.6;
}
.blog-post-footer {
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.blog-post-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.blog-tag {
display: inline-block;
padding: 0.25rem 0.75rem;
background-color: var(--light-gray);
color: var(--gray);
border-radius: 20px;
font-size: 0.8rem;
text-decoration: none;
transition: var(--transition);
}
.blog-tag:hover {
background-color: var(--secondary);
color: white;
}
.blog-comment-btn {
padding: 0.5rem 1rem;
background-color: var(--secondary);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}
.blog-comment-btn:hover {
background-color: #2980b9;
transform: translateY(-2px);
}
/* Пагинация */
.blog-pagination {
max-width: 1200px;
margin: 3rem auto 4rem;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.blog-pagination-btn {
padding: 0.75rem 1.5rem;
background-color: white;
color: var(--dark);
text-decoration: none;
border-radius: var(--border-radius);
transition: var(--transition);
border: 1px solid var(--light-gray);
display: flex;
align-items: center;
gap: 0.5rem;
}
.blog-pagination-btn:hover {
background-color: var(--secondary);
color: white;
border-color: var(--secondary);
}
.blog-pagination-current {
color: var(--gray);
}
/* Футер */
.blog-footer {
background-color: var(--dark);
color: white;
padding: 3rem 0;
margin-top: 4rem;
}
.blog-footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
}
.blog-footer-content p {
margin-bottom: 1rem;
}
.blog-footer-content a {
color: var(--light-gray);
text-decoration: none;
transition: var(--transition);
}
.blog-footer-content a:hover {
color: var(--secondary);
}
/* Кнопка для мобильного меню */
.blog-sidebar-toggle {
display: none;
width: 100%;
padding: 1rem;
background-color: var(--secondary);
color: white;
border: none;
border-radius: var(--border-radius);
margin-bottom: 1rem;
cursor: pointer;
font-weight: 500;
}
/* Адаптивность */
@media (max-width: 1100px) {
.blog-container {
grid-template-columns: 1fr 240px;
gap: 2rem;
}
}
@media (max-width: 992px) {
.blog-container {
grid-template-columns: 1fr;
gap: 2rem;
}
.blog-sidebar {
position: static;
max-width: 600px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.blog-title {
font-size: 2.5rem;
}
.blog-container {
padding: 0 1.5rem;
}
.blog-nav-container {
padding: 0 1.5rem;
}
.blog-header {
padding: 3rem 1.5rem;
}
.blog-meta {
flex-direction: column;
gap: 1rem;
}
.blog-post-header,
.blog-post-content,
.blog-post-footer {
padding: 1.5rem;
}
.blog-post-title {
font-size: 1.6rem;
}
.blog-pagination {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.blog-sidebar-toggle {
display: block;
}
.blog-sidebar {
display: none;
max-width: 100%;
}
.blog-sidebar.show {
display: block;
}
}
@media (max-width: 480px) {
.blog-title {
font-size: 2rem;
}
.blog-post-title {
font-size: 1.4rem;
}
.blog-container {
padding: 0 1rem;
}
.blog-post-header,
.blog-post-content,
.blog-post-footer {
padding: 1.25rem;
}
.blog-post-footer {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.blog-quote {
padding: 1rem;
font-size: 1rem;
}
}
/* Улучшения для темной темы */
body.dark-mode .blog-sidebar-section {
background-color: #2d2d2d;
}
body.dark-mode .blog-category {
color: #b0b0b0;
}
body.dark-mode .blog-category:hover {
background-color: #3d3d3d;
color: white;
}
body.dark-mode .blog-recent a {
color: #b0b0b0;
}
body.dark-mode .blog-recent a:hover {
color: var(--secondary);
}