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>

content/gallery.md

@@ -1,11 +1,7 @@
 +++
-# title = 'Галерея'
+title = 'Галерея'
 slug = 'gallery'
 +++
-{{< rawhtml >}}
-<h3 align="center">Галерея</h3>
-{{< /rawhtml >}}
-
 {{< load-photoswipe >}}
 {{< gallery caption-effect="fade" >}}
 {{< figure src="https://s3.regru.cloud/sleeptrip-dev/images/Radiotele_20250406_1.jpg" >}}

content/map.md

@@ -1,12 +1,8 @@
 +++
-# title = 'Карта поездок'
+title = 'Карта поездок'
 slug = 'map'
 disableComments = true
 +++
-{{< rawhtml >}}
-<h3 align="center">Карта поездок</h3>
-{{< /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>
 {{< /rawhtml >}}

layouts/shortcodes/figure.html

@@ -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}}>
   <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 }}>
-      <img itemprop="thumbnail" src="{{ $thumbURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
+    <div class="img"{{ if .Parent }} data-bg="url('{{ $thumbURL }}')"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
+      <img itemprop="thumbnail" src="{{ $thumbURL }}" loading="lazy" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
     </div>
     {{ with $linkURL }}<a href="{{ . }}" itemprop="contentUrl"></a>{{ end }}
     {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}

layouts/shortcodes/gallery.html

@@ -41,5 +41,5 @@ Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
 	{{- end }}
 </div>
 
-<!-- Добавляем кнопку "вернуться в начало" для галереи -->
-{{ partial "back-to-top.html" . }}
+<!-- Ленивая загрузка фонов -->
+<script src="{{ "js/gallery-lazy.js" | relURL }}" defer></script>

static/css/copyright-visible.css

@@ -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;
+}

static/css/hugo-easy-gallery.css

@@ -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 элементы (не в галерее) */

static/css/mobile-pagination.css

@@ -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 */

static/css/typography-improvements.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 {

themes/hugo-theme-massively/assets/scss/main.scss

@@ -6,7 +6,7 @@
 @import 'libs/html-grid';
 @import 'libs/fixed-grid';
 @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

themes/hugo-theme-massively/layouts/_default/single.html

@@ -20,7 +20,7 @@
                                 <p>{{ .Description }}</p>
                             </header>
                             {{ 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 }}
                             {{ .Content }}
 

themes/hugo-theme-massively/layouts/partials/copyright.html

@@ -1,4 +1,8 @@
 <!-- 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>

themes/hugo-theme-massively/layouts/partials/htmlhead.html

@@ -9,6 +9,27 @@
 		<title>{{ if eq (.Site.Title) (.Title) }}{{ .Site.Title }}{{ else }}{{ .Title }} &middot; {{ .Site.Title }}{{ end }}</title>
 		<meta charset="utf-8" />
 		<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 -->
 		{{ if hugo.IsServer }}
 		{{ $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

@@ -10,7 +10,7 @@
             <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
         </header>
         {{ 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 }}
         {{ if .Description }}
         <p>{{ .Description }}</p>

themes/hugo-theme-massively/layouts/partials/posts/pagination.html

@@ -1,74 +1,46 @@
 {{ $paginator := .paginator }}
 {{ $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 }}
-<footer>
-    <div class="pagination">
-        <ul class="pagination">
+<nav class="pager" aria-label="Навигация по страницам">
+    <div class="pager-inner">
 
-            <!-- First page. -->
-            {{ if $show_first_last }}
-                {{ if ne $paginator.PageNumber 1 }}
-                <li>
-                    <a href="{{ $paginator.First.URL }}" class="extra first">
-                        {{ i18n "PAGINATION_FIRST" . }}
-                    </a>
-                </li>
-                {{ end }}
-            {{ end }}
-            <!-- Previous page. -->
-            {{ if $paginator.HasPrev }}
-            <li>
-                <a href="{{ $paginator.Prev.URL }}" class="previous">
-                    {{ i18n "PAGINATION_PREVIOUS" . }}
-                </a>
-            </li>
-            {{ end }}
+        {{ if $paginator.HasPrev }}
+        <a href="{{ $paginator.Prev.URL }}" class="pager-btn pager-prev" aria-label="Предыдущая страница">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10 3L5 8L10 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <span>Назад</span>
+        </a>
+        {{ else }}
+        <span class="pager-btn pager-prev pager-disabled" aria-disabled="true">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10 3L5 8L10 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <span>Назад</span>
+        </span>
+        {{ end }}
 
-            <!-- Информация о страницах для десктопа -->
-            <li class="page-info desktop-only">
-                <span class="current-page">{{ $paginator.PageNumber }}</span>
-                <span class="separator">из</span>
-                <span class="total-pages">{{ $paginator.TotalPages }}</span>
-            </li>
+        <span class="pager-info" aria-current="page">
+            {{ $paginator.PageNumber }}&thinsp;/&thinsp;{{ $paginator.TotalPages }}
+        </span>
 
-            <!-- Next page. -->
-            {{ if $paginator.HasNext }}
-            <li>
-                <a href="{{ $paginator.Next.URL }}" class="next">
-                    {{ i18n "PAGINATION_NEXT" . }}
-                </a>
-            </li>
-            {{ end }}
+        {{ if $paginator.HasNext }}
+        <a href="{{ $paginator.Next.URL }}" class="pager-btn pager-next" aria-label="Следующая страница">
+            <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>
+        </a>
+        {{ 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>
-</footer>
+</nav>
 {{ end }}

themes/hugo-theme-massively/layouts/partials/scripts/index.html

@@ -9,5 +9,5 @@
 {{ $js := slice $jQuery $scrollex $scrolly $browser $breakpoints $util $main | resources.Concat "assets/js/bundle.js" }}
 
 <!-- Scripts -->
-<script src='{{ $js.RelPermalink }}'></script>
+<script src='{{ $js.RelPermalink }}' defer></script>