Mobile: center pinned post, pagination fixes, minor layout tweaks
- First (pinned) post on mobile: title and image centered - Pagination: restored page counter on mobile, buttons above footer - Typography and layout minor improvements Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Kirik
@@ -1,33 +1,21 @@
|
||||
/* Улучшение видимости copyright текста */
|
||||
/* Copyright */
|
||||
#copyright {
|
||||
opacity: 1 !important;
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
font-weight: 600 !important;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
|
||||
background: rgba(0, 0, 0, 0.3) !important;
|
||||
padding: 10px 20px !important;
|
||||
border-radius: 5px !important;
|
||||
backdrop-filter: blur(5px) !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
#copyright ul {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
list-style: none !important;
|
||||
}
|
||||
|
||||
#copyright li {
|
||||
display: inline-block !important;
|
||||
margin: 0 5px !important;
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
|
||||
#copyright li:after {
|
||||
content: " | " !important;
|
||||
color: rgba(255, 255, 255, 0.6) !important;
|
||||
font-weight: 400 !important;
|
||||
text-shadow: none !important;
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
#copyright li:last-child:after {
|
||||
/* Убираем ::after — у темы уже есть border-left */
|
||||
#copyright li:after {
|
||||
content: "" !important;
|
||||
}
|
||||
|
||||
#copyright ul li {
|
||||
color: rgba(255, 255, 255, 0.6) !important;
|
||||
border-left-color: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
@@ -1,30 +1,33 @@
|
||||
/*
|
||||
Simple Gallery CSS - Small thumbnails in rows
|
||||
Gallery CSS — responsive grid with aspect-ratio thumbnails
|
||||
*/
|
||||
|
||||
/* Основные стили галереи */
|
||||
/* Основной контейнер — CSS Grid */
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5%;
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 6px;
|
||||
padding: 0;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Контейнер изображения */
|
||||
.gallery .box {
|
||||
width: 23%;
|
||||
height: 250px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Эффект наведения */
|
||||
.gallery .box:hover {
|
||||
transform: scale(1.05);
|
||||
transform: scale(1.03);
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Figure элемент */
|
||||
@@ -34,7 +37,6 @@ Simple Gallery CSS - Small thumbnails in rows
|
||||
margin: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Изображение */
|
||||
@@ -44,7 +46,12 @@ Simple Gallery CSS - Small thumbnails in rows
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 15px;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.gallery .box:hover .img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
/* Скрываем обычные img теги */
|
||||
@@ -57,72 +64,48 @@ Simple Gallery CSS - Small thumbnails in rows
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Подпись скрыта для компактности */
|
||||
/* Подписи скрыты */
|
||||
.gallery figcaption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Адаптивность */
|
||||
@media (max-width: 768px) {
|
||||
.gallery .box {
|
||||
width: 23%;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
/* Планшет — 3 колонки */
|
||||
@media (max-width: 900px) {
|
||||
.gallery {
|
||||
gap: 1.5%;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
/* Мобиль — 2 колонки */
|
||||
@media (max-width: 600px) {
|
||||
.gallery {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
align-items: center;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
|
||||
.gallery .box {
|
||||
width: 95%;
|
||||
max-width: 400px;
|
||||
height: 250px;
|
||||
border-radius: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.gallery .img {
|
||||
border-radius: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Эффекты для подписей */
|
||||
.gallery.caption-effect-fade figcaption {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
transform: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
/* Убираем hover-scale на тач-устройствах */
|
||||
.gallery .box:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.gallery.caption-effect-fade .box:hover figcaption {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gallery.caption-position-center figcaption {
|
||||
top: 50%;
|
||||
bottom: auto;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.gallery.caption-position-center .box:hover figcaption {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.gallery.caption-position-none figcaption {
|
||||
display: none;
|
||||
.gallery .box:hover .img {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Отдельные figure элементы (не в галерее) */
|
||||
@@ -145,4 +128,4 @@ Simple Gallery CSS - Small thumbnails in rows
|
||||
height: 200px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,104 +1 @@
|
||||
/* Скрываем номера страниц на мобильных устройствах */
|
||||
@media (max-width: 768px) {
|
||||
/* Скрываем все элементы с номерами страниц */
|
||||
.pagination .page-number-item {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Дополнительная защита - скрываем по классам */
|
||||
.pagination .page,
|
||||
.pagination .page.active,
|
||||
.pagination .extra {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Центрируем оставшиеся кнопки */
|
||||
.pagination {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
gap: 1rem !important;
|
||||
margin: 1rem 0 !important;
|
||||
}
|
||||
|
||||
.pagination ul {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
list-style: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
gap: 1rem !important;
|
||||
}
|
||||
|
||||
/* Стилизуем кнопки Назад/Далее */
|
||||
.pagination .previous,
|
||||
.pagination .next {
|
||||
padding: 0.8rem 1.2rem !important;
|
||||
font-size: 0.9rem !important;
|
||||
min-width: 80px !important;
|
||||
text-align: center !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
line-height: 1.2 !important;
|
||||
white-space: nowrap !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* Показываем только навигационные кнопки */
|
||||
.pagination li:has(.previous),
|
||||
.pagination li:has(.next) {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Дополнительное выравнивание для li элементов */
|
||||
.pagination li {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
/* Убираем возможные конфликты со стилями темы */
|
||||
.pagination .previous a,
|
||||
.pagination .next a {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
text-align: center !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* Скрываем информацию о страницах */
|
||||
.pagination-info,
|
||||
.pagination .info,
|
||||
.pagination .page-info,
|
||||
.pagination-status {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.pagination .previous,
|
||||
.pagination .next {
|
||||
padding: 0.7rem 1rem !important;
|
||||
font-size: 0.8rem !important;
|
||||
min-width: 70px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
text-align: center !important;
|
||||
line-height: 1.2 !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
/* Этот файл намеренно пуст — стили пагинации перенесены в pagination-info.css */
|
||||
|
||||
@@ -185,6 +185,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Мобильный: первый (закреплённый) пост — центрировать */
|
||||
@media screen and (max-width: 736px) {
|
||||
#main > section.posts:first-of-type article {
|
||||
text-align: center !important;
|
||||
padding: 1.5rem 1.25rem !important;
|
||||
}
|
||||
|
||||
#main > section.posts:first-of-type article header h2 {
|
||||
text-align: center !important;
|
||||
font-size: 1.45rem !important;
|
||||
-webkit-line-clamp: unset !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
#main > section.posts:first-of-type article header h2 a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#main > section.posts:first-of-type article .image.main {
|
||||
margin: 0.75rem auto !important;
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Адаптивность для мобильных */
|
||||
@media (max-width: 768px) {
|
||||
#main article h1 {
|
||||
|
||||
Reference in New Issue
Block a user