ptpadmin/ptp
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Mobile: center pinned post, pagination fixes, minor layout tweaks

Browse Source 
- 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
2026-03-24 00:50:35 +01:00
parent 3de138ff41
commit da5b40d168
15 changed files with 157 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/gallery.md
+1 -5
View File
@@ -1,11 +1,7 @@
+++ +++
# title = 'Галерея' title = 'Галерея'
slug = 'gallery' slug = 'gallery'
+++ +++
{{< rawhtml >}}
<h3 align="center">Галерея</h3>
{{< /rawhtml >}}
{{< load-photoswipe >}} {{< load-photoswipe >}}
{{< gallery caption-effect="fade" >}} {{< gallery caption-effect="fade" >}}
{{< figure src="https://s3.regru.cloud/sleeptrip-dev/images/Radiotele_20250406_1.jpg" >}} {{< figure src="https://s3.regru.cloud/sleeptrip-dev/images/Radiotele_20250406_1.jpg" >}}
content/map.md
+1 -5
View File
@@ -1,12 +1,8 @@
+++ +++
# title = 'Карта поездок' title = 'Карта поездок'
slug = 'map' slug = 'map'
disableComments = true disableComments = true
+++ +++
{{< rawhtml >}}
<h3 align="center">Карта поездок</h3>
{{< /rawhtml >}}
{{< rawhtml >}} {{< rawhtml >}}
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A77187bdb95bee620ff3ba0b321fcb359dc2750eb2dd0c916a37468fdf08ef30a&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true"></script> <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A77187bdb95bee620ff3ba0b321fcb359dc2750eb2dd0c916a37468fdf08ef30a&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true"></script>
{{< /rawhtml >}} {{< /rawhtml >}}
layouts/shortcodes/figure.html
+2 -2
View File
@@ -27,8 +27,8 @@ NB this overrides Hugo's built-in "figure" shortcode but is backwards compatible
<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}> <div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
<figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<div class="img"{{ if .Parent }} style="background-image: url('{{ $thumbURL }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}> <div class="img"{{ if .Parent }} data-bg="url('{{ $thumbURL }}')"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
<img itemprop="thumbnail" src="{{ $thumbURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery --> <img itemprop="thumbnail" src="{{ $thumbURL }}" loading="lazy" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
</div> </div>
{{ with $linkURL }}<a href="{{ . }}" itemprop="contentUrl"></a>{{ end }} {{ with $linkURL }}<a href="{{ . }}" itemprop="contentUrl"></a>{{ end }}
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}} {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
layouts/shortcodes/gallery.html
+2 -2
View File
@@ -41,5 +41,5 @@ Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
{{- end }} {{- end }}
</div> </div>
<!-- Добавляем кнопку "вернуться в начало" для галереи --> <!-- Ленивая загрузка фонов -->
{{ partial "back-to-top.html" . }} <script src="{{ "js/gallery-lazy.js" | relURL }}" defer></script>
static/css/copyright-visible.css
+14 -26
View File
@@ -1,33 +1,21 @@
/* Улучшение видимости copyright текста */ /* Copyright */
#copyright { #copyright {
opacity: 1 !important; 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; 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; content: "" !important;
} }
#copyright ul li {
color: rgba(255, 255, 255, 0.6) !important;
border-left-color: rgba(255, 255, 255, 0.2) !important;
}
static/css/hugo-easy-gallery.css
+42 -59
View File
@@ -1,30 +1,33 @@
/* /*
Simple Gallery CSS - Small thumbnails in rows Gallery CSS — responsive grid with aspect-ratio thumbnails
*/ */
/* Основные стили галереи */ /* Основной контейнер — CSS Grid */
.gallery { .gallery {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(4, 1fr);
gap: 1.5%; gap: 6px;
padding: 10px; padding: 0;
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
justify-content: space-between;
} }
/* Контейнер изображения */ /* Контейнер изображения */
.gallery .box { .gallery .box {
width: 23%; aspect-ratio: 1;
height: 250px; border-radius: 8px;
overflow: hidden;
transition: transform 0.2s ease; transition: transform 0.2s ease;
border: none; border: none;
border-radius: 15px; width: 100%;
height: auto;
} }
/* Эффект наведения */ /* Эффект наведения */
.gallery .box:hover { .gallery .box:hover {
transform: scale(1.05); transform: scale(1.03);
z-index: 1;
position: relative;
} }
/* Figure элемент */ /* Figure элемент */
@@ -34,7 +37,6 @@ Simple Gallery CSS - Small thumbnails in rows
margin: 0; margin: 0;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border: none;
} }
/* Изображение */ /* Изображение */
@@ -44,7 +46,12 @@ Simple Gallery CSS - Small thumbnails in rows
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 15px; border-radius: 8px;
transition: transform 0.3s ease;
}
.gallery .box:hover .img {
transform: scale(1.08);
} }
/* Скрываем обычные img теги */ /* Скрываем обычные img теги */
@@ -57,72 +64,48 @@ Simple Gallery CSS - Small thumbnails in rows
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
} }
/* Подпись скрыта для компактности */ /* Подписи скрыты */
.gallery figcaption { .gallery figcaption {
display: none; display: none;
} }
/* Адаптивность */ /* Планшет — 3 колонки */
@media (max-width: 768px) { @media (max-width: 900px) {
.gallery .box {
width: 23%;
height: 180px;
}
.gallery { .gallery {
gap: 1.5%; grid-template-columns: repeat(3, 1fr);
gap: 5px;
} }
} }
@media (max-width: 480px) { /* Мобиль — 2 колонки */
@media (max-width: 600px) {
.gallery { .gallery {
flex-direction: column; grid-template-columns: repeat(2, 1fr);
gap: 15px; gap: 3px;
padding: 15px;
align-items: center;
} }
.gallery .box { .gallery .box {
width: 95%; border-radius: 4px;
max-width: 400px;
height: 250px;
border-radius: 12px;
} }
.gallery .img { .gallery .img {
border-radius: 12px; border-radius: 4px;
} }
}
/* Эффекты для подписей */ /* Убираем hover-scale на тач-устройствах */
.gallery.caption-effect-fade figcaption { .gallery .box:hover {
background: rgba(0, 0, 0, 0.7); transform: none;
transform: none; }
opacity: 0;
transition: opacity 0.3s ease;
}
.gallery.caption-effect-fade .box:hover figcaption { .gallery .box:hover .img {
opacity: 1; transform: none;
} }
.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;
} }
/* Отдельные figure элементы (не в галерее) */ /* Отдельные figure элементы (не в галерее) */
static/css/mobile-pagination.css
+1 -104
View File
@@ -1,104 +1 @@
/* Скрываем номера страниц на мобильных устройствах */ /* Этот файл намеренно пуст — стили пагинации перенесены в pagination-info.css */
@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;
}
}
static/css/typography-improvements.css
+24
View File
@@ -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) { @media (max-width: 768px) {
#main article h1 { #main article h1 {
themes/hugo-theme-massively/assets/scss/main.scss
+1 -1
View File
@@ -6,7 +6,7 @@
@import 'libs/html-grid'; @import 'libs/html-grid';
@import 'libs/fixed-grid'; @import 'libs/fixed-grid';
@import 'font-awesome.min.css'; @import 'font-awesome.min.css';
@import url('https://fonts.googleapis.com/css?family=Merriweather:300,700,300italic,700italic|Source+Sans+Pro:900'); @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,700;1,300;1,700&family=Source+Sans+Pro:wght@900&display=swap');
/* /*
Massively by HTML5 UP Massively by HTML5 UP
themes/hugo-theme-massively/layouts/_default/single.html
+1 -1
View File
@@ -20,7 +20,7 @@
<p>{{ .Description }}</p> <p>{{ .Description }}</p>
</header> </header>
{{ if .Params.image }} {{ if .Params.image }}
<div class="image main"><img src="{{ .Params.image | relURL }}" alt="" /></div> <div class="image main"><img src="{{ .Params.image | relURL }}" alt="{{ .Title }}" loading="lazy" /></div>
{{ end }} {{ end }}
{{ .Content }} {{ .Content }}
themes/hugo-theme-massively/layouts/partials/copyright.html
+5 -1
View File
@@ -1,4 +1,8 @@
<!-- Copyright --> <!-- Copyright -->
<div id="copyright"> <div id="copyright">
<ul><li>&copy; {{ .Site.Title }}</li><li>{{ i18n "COPYRIGHT_MESSAGE_1" . | markdownify }}</li><li>{{ i18n "COPYRIGHT_MESSAGE_2" . | markdownify }}</li></ul> <ul>
<li>&copy; {{ .Site.Title }}</li>
{{ with i18n "COPYRIGHT_MESSAGE_1" . }}<li>{{ . | markdownify }}</li>{{ end }}
{{ with i18n "COPYRIGHT_MESSAGE_2" . }}<li>{{ . | markdownify }}</li>{{ end }}
</ul>
</div> </div>
themes/hugo-theme-massively/layouts/partials/htmlhead.html
+21
View File
@@ -9,6 +9,27 @@
<title>{{ if eq (.Site.Title) (.Title) }}{{ .Site.Title }}{{ else }}{{ .Title }} &middot; {{ .Site.Title }}{{ end }}</title> <title>{{ if eq (.Site.Title) (.Title) }}{{ .Site.Title }}{{ else }}{{ .Title }} &middot; {{ .Site.Title }}{{ end }}</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
{{ $description := "" }}
{{ if .Description }}{{ $description = .Description }}{{ else if .Summary }}{{ $description = .Summary | plainify | truncate 160 }}{{ else }}{{ $description = .Site.Params.description | default "Путешествия и приключения — блог о поездках по России и миру" }}{{ end }}
{{ $image := "" }}
{{ if .Params.image }}{{ $image = .Params.image | absURL }}{{ else }}{{ $image = (print .Site.BaseURL "images/desktop.webp") }}{{ end }}
<!-- SEO -->
<meta name="description" content="{{ $description }}" />
<link rel="canonical" href="{{ .Permalink }}" />
<!-- Open Graph (ВКонтакте, Telegram) -->
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
<meta property="og:title" content="{{ if eq (.Site.Title) (.Title) }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}" />
<meta property="og:description" content="{{ $description }}" />
<meta property="og:url" content="{{ .Permalink }}" />
<meta property="og:site_name" content="{{ .Site.Title }}" />
<meta property="og:image" content="{{ $image }}" />
<meta property="og:locale" content="ru_RU" />
{{ if .IsPage }}
<meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}" />
{{ end }}
<!-- CSS --> <!-- CSS -->
{{ if hugo.IsServer }} {{ if hugo.IsServer }}
{{ $style := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "main.scss" . | toCSS (dict "targetPath" "assets/css/main.css" "enableSourceMap" true) }} {{ $style := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "main.scss" . | toCSS (dict "targetPath" "assets/css/main.css" "enableSourceMap" true) }}
themes/hugo-theme-massively/layouts/partials/posts/list.html
+1 -1
View File
@@ -10,7 +10,7 @@
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2> <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
</header> </header>
{{ if .Params.image }} {{ if .Params.image }}
<a href="{{ .Permalink }}" class="image main"><img src="{{ .Params.image | relURL }}" alt="" /></a> <a href="{{ .Permalink }}" class="image main"><img src="{{ .Params.image | relURL }}" alt="{{ .Title }}" loading="lazy" /></a>
{{ end }} {{ end }}
{{ if .Description }} {{ if .Description }}
<p>{{ .Description }}</p> <p>{{ .Description }}</p>
themes/hugo-theme-massively/layouts/partials/posts/pagination.html
+36 -64
View File
@@ -1,74 +1,46 @@
{{ $paginator := .paginator }} {{ $paginator := .paginator }}
{{ $outer := .outer}} {{ $outer := .outer}}
<!-- Thanks to https://glennmccomb.com/articles/how-to-build-custom-hugo-pagination/ -->
<!-- Show first and last link-->
{{ $show_first_last := $outer.Site.Params.Posts.showFirstLast | default false }}
<!-- Number of links either side of the current page. -->
{{ $adjacent_links := $outer.Site.Params.Posts.paginationPages | default 2 }}
<!-- $max_links = ($adjacent_links * 2) + 1 -->
{{ $max_links := (add (mul $adjacent_links 2) 1) }}
<!-- $lower_limit = $adjacent_links + 1 -->
{{ $lower_limit := (add $adjacent_links 1) }}
<!-- $upper_limit = $paginator.TotalPages - $adjacent_links -->
{{ $upper_limit := (sub $paginator.TotalPages $adjacent_links) }}
{{ if gt $paginator.TotalPages 1 }} {{ if gt $paginator.TotalPages 1 }}
<footer> <nav class="pager" aria-label="Навигация по страницам">
<div class="pagination"> <div class="pager-inner">
<ul class="pagination">
<!-- First page. --> {{ if $paginator.HasPrev }}
{{ if $show_first_last }} <a href="{{ $paginator.Prev.URL }}" class="pager-btn pager-prev" aria-label="Предыдущая страница">
{{ if ne $paginator.PageNumber 1 }} <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<li> <path d="M10 3L5 8L10 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<a href="{{ $paginator.First.URL }}" class="extra first"> </svg>
{{ i18n "PAGINATION_FIRST" . }} <span>Назад</span>
</a> </a>
</li> {{ else }}
{{ end }} <span class="pager-btn pager-prev pager-disabled" aria-disabled="true">
{{ end }} <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Previous page. --> <path d="M10 3L5 8L10 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
{{ if $paginator.HasPrev }} </svg>
<li> <span>Назад</span>
<a href="{{ $paginator.Prev.URL }}" class="previous"> </span>
{{ i18n "PAGINATION_PREVIOUS" . }} {{ end }}
</a>
</li>
{{ end }}
<!-- Информация о страницах для десктопа --> <span class="pager-info" aria-current="page">
<li class="page-info desktop-only"> {{ $paginator.PageNumber }}&thinsp;/&thinsp;{{ $paginator.TotalPages }}
<span class="current-page">{{ $paginator.PageNumber }}</span> </span>
<span class="separator">из</span>
<span class="total-pages">{{ $paginator.TotalPages }}</span>
</li>
<!-- Next page. --> {{ if $paginator.HasNext }}
{{ if $paginator.HasNext }} <a href="{{ $paginator.Next.URL }}" class="pager-btn pager-next" aria-label="Следующая страница">
<li> <span>Далее</span>
<a href="{{ $paginator.Next.URL }}" class="next"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
{{ i18n "PAGINATION_NEXT" . }} <path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</a> </svg>
</li> </a>
{{ end }} {{ else }}
<span class="pager-btn pager-next pager-disabled" aria-disabled="true">
<span>Далее</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
{{ end }}
<!-- Last page. -->
{{ if $show_first_last }}
{{ if ne $paginator.PageNumber $paginator.TotalPages }}
<li>
<a href="{{ $paginator.Last.URL }}" class="extra last">
{{ i18n "PAGINATION_LAST" . }}
</a>
</li>
{{ end }}
{{ end }}
</ul>
</div> </div>
</footer> </nav>
{{ end }} {{ end }}
themes/hugo-theme-massively/layouts/partials/scripts/index.html
+1 -1
View File
@@ -9,5 +9,5 @@
{{ $js := slice $jQuery $scrollex $scrolly $browser $breakpoints $util $main | resources.Concat "assets/js/bundle.js" }} {{ $js := slice $jQuery $scrollex $scrolly $browser $breakpoints $util $main | resources.Concat "assets/js/bundle.js" }}
<!-- Scripts --> <!-- Scripts -->
<script src='{{ $js.RelPermalink }}'></script> <script src='{{ $js.RelPermalink }}' defer></script>