Redesign typography, add image rounding and smooth loading

- Global headings: drop ALL CAPS, use sentence case + weight 700
- Post cards: refined date (small/uppercase/muted), cleaner title hierarchy
- Single post: date metadata style, subtitle no-italic, body line-height 1.75
- Logo frame (#header .logo): border-radius 12px
- All images: border-radius 8px (posts), 6px (gallery)
- Smooth lazy-load: CSS fadeIn animation + JS fallback (image-fade.js)
- Cache-busting: typography CSS with Hugo timestamp query string
- Trip card: replace broken gallery link with direct Elbrus S3 image URL

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

layouts/partials/scripts/index.html

@@ -0,0 +1,15 @@
+{{ $jQuery := resources.Get "js/jquery.min.js" }}
+{{ $scrollex := resources.Get "js/jquery.scrollex.min.js" }}
+{{ $scrolly := resources.Get "js/jquery.scrolly.min.js" }}
+{{ $browser := resources.Get "js/browser.min.js" }}
+{{ $breakpoints := resources.Get "js/breakpoints.min.js" }}
+{{ $util := resources.Get "js/util.js" }}
+{{ $main := resources.Get "js/main.js" }}
+
+{{ $js := slice $jQuery $scrollex $scrolly $browser $breakpoints $util $main | resources.Concat "assets/js/bundle.js" }}
+
+<!-- Scripts -->
+<script src='{{ $js.RelPermalink }}' defer></script>
+
+<!-- Плавное появление lazy-loaded изображений -->
+<script src="/js/image-fade.js" defer></script>

static/css/typography-improvements.css

@@ -1,65 +1,243 @@
-/* Деликатные улучшения типографики только для контента постов */
+/*
+ * PTP Typography — единая система типографики
+ *
+ * Тема использует: body = Georgia (serif), headings = Helvetica (sans-serif)
+ * Проблема: заголовки ALL CAPS + 900 weight + letter-spacing → агрессивно для travel-блога.
+ * Решение: убираем uppercase, снижаем weight, создаём ясную иерархию через размер.
+ */
+
+/* =================================================================
+   1. ГЛОБАЛЬНЫЕ ЗАГОЛОВКИ — убираем uppercase, смягчаем
+   ================================================================= */
+
+h1, h2, h3, h4, h5, h6 {
+    text-transform: none;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    line-height: 1.3;
+}
+
+/* =================================================================
+   2. INTRO (главный экран "Пока ты спал")
+   ================================================================= */
+
+/* Логотип "Пока ты спал" — скруглённые углы на рамке */
+#header .logo {
+    border-radius: 12px !important;
+}
+
+/* Заголовок intro — оставляем uppercase (это логотип/бренд) */
+#intro h1 {
+    text-transform: uppercase;
+    font-weight: 900;
+    letter-spacing: 0.1em;
+}
+
+/* =================================================================
+   3. НАВИГАЦИЯ — оставляем uppercase (стандарт для nav)
+   ================================================================= */
+
+#nav ul.links a,
+#nav .links a {
+    text-transform: uppercase;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    font-size: 0.85rem;
+}
+
+/* =================================================================
+   4. КАРТОЧКИ ПОСТОВ (главная)
+   ================================================================= */
+
+#main > .posts > article {
+    padding: 2rem !important;
+    text-align: center !important;
+    transition: box-shadow 0.2s ease;
+}
+
+/* Header карточки */
+#main > .posts > article header {
+    min-height: 5.5rem;
+    padding-top: 1.2rem;
+}
+
+/* Дата — metadata: маленькая, uppercase, приглушённая */
+#main > .posts > article header .date {
+    font-size: 0.7rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    opacity: 0.5;
+    margin-bottom: 0.5rem;
+    font-weight: 400;
+}
+
+/* Заголовок карточки — sentence case, не uppercase */
+#main > .posts > article header h2 {
+    font-size: 1.2rem;
+    font-weight: 700;
+    line-height: 1.35;
+    text-transform: none;
+    letter-spacing: 0.01em;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    margin-bottom: 0;
+    text-align: center;
+}
+
+#main > .posts > article header h2 a {
+    text-decoration: none;
+}
+
+/* Описание под карточкой */
+#main > .posts > article > p {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-align: center;
+    font-size: 0.85rem;
+    color: #666;
+    margin-bottom: 1rem;
+    line-height: 1.55;
+    font-weight: 300;
+}
+
+/* Фото карточки */
+#main > .posts > article .image.main {
+    margin: 1rem 0 !important;
+}
+
+#main > .posts > article .image.main img {
+    border-radius: 8px;
+}
+
+/* Скрываем "Подробнее" — карточка кликабельна по заголовку */
+#main > .posts > article .actions {
+    display: none !important;
+}
+
+/* =================================================================
+   5. ПЕРВЫЙ ПОСТ (закреплённый, "О чём этот сайт")
+   ================================================================= */
+
+#main > section.posts:first-of-type article {
+    text-align: center !important;
+}
+
+#main > section.posts:first-of-type article header h2 {
+    text-align: center !important;
+    font-size: 1.5rem;
+    font-weight: 700;
+    -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: 1rem auto !important;
+    display: block !important;
+}
+
+#main > section.posts:first-of-type article > p {
+    text-align: center !important;
+}
+
+/* =================================================================
+   6. ВНУТРИ ПОСТА (single page)
+   ================================================================= */
+
+/* Подзаголовок поста ("на рассвете") — убираем курсив темы */
+#main > .post header.major > p,
+header.major > h1 + p {
+    font-style: normal;
+    opacity: 0.7;
+    font-size: 1.1rem;
+}
+
+/* Дата — metadata стиль */
+#main > .post header.major > .date {
+    font-size: 0.8rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    opacity: 0.45;
+    margin-top: -0.5rem;
+    margin-bottom: 1.8rem;
+    font-weight: 400;
+}
+
+/* Контент */
+#main article {
+    max-width: 720px;
+    margin: 0 auto;
+    color: #2c3e50;
+}
 
-/* Улучшения только для основного контента статей */
 #main article p {
-    line-height: 1.7;
+    line-height: 1.75;
     text-align: left;
     margin-bottom: 1.25rem;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
 }
 
-/* Заголовки только в статьях */
 #main article h1,
 #main article h2,
-#main article h3 {
+#main article h3,
+#main article h4,
+#main article h5,
+#main article h6 {
+    color: #1a252f;
     text-transform: none;
     font-weight: 700;
-    text-rendering: optimizeLegibility;
+    letter-spacing: 0.01em;
 }
 
 #main article h1 {
-    font-size: 2.5rem;
+    font-size: 2.2rem;
     line-height: 1.2;
     margin-bottom: 1.5rem;
 }
 
 #main article h2 {
-    font-size: 2rem;
+    font-size: 1.6rem;
-    line-height: 1.25;
+    line-height: 1.3;
     margin-bottom: 1.25rem;
 }
 
 #main article h3 {
-    font-size: 1.6rem;
+    font-size: 1.3rem;
     margin-bottom: 1rem;
 }
 
-/* Ссылки в статьях - только подсветка при наведении */
+/* Ссылки */
 #main article a {
     text-decoration: none;
     transition: color 0.3s ease;
 }
 
 #main article a:hover {
-    color: #5b9bd5;
+    color: #18bfef;
 }
 
-/* Списки в статьях */
+/* Списки */
 #main article ul,
 #main article ol {
-    line-height: 1.6;
+    line-height: 1.65;
     margin-bottom: 1.5rem;
 }
 
 #main article li {
-    margin-bottom: 0.4rem;
+    margin-bottom: 0.3rem;
-    line-height: 1.6;
 }
 
-/* Цитаты в статьях */
+/* Цитаты */
 #main article blockquote {
-    line-height: 1.6;
+    line-height: 1.65;
     padding: 1.25rem 1.5rem;
     margin: 1.5rem 0;
     background: rgba(24, 191, 239, 0.03);
@@ -67,7 +245,7 @@
     font-style: italic;
 }
 
-/* Код в статьях */
+/* Код */
 #main article code {
     background: rgba(0, 0, 0, 0.05);
     border: 1px solid rgba(0, 0, 0, 0.1);
@@ -91,145 +269,99 @@
     padding: 0;
 }
 
-/* Улучшения для контента страниц (не меню и карточки) */
+/* Страничный контент (не посты) */
 #main section > p {
     line-height: 1.7;
     text-align: left;
     margin-bottom: 1.25rem;
 }
 
-/* Ограничиваем ширину только для статей */
+/* =================================================================
-#main article {
+   7. ФОТО/ВИДЕО — скругление + плавная загрузка
-    max-width: 720px;
+   ================================================================= */
-    margin: 0 auto;
+
+/* Карточки */
+#main > .posts > article .image.main img {
+    border-radius: 8px;
 }
 
-/* Улучшения контрастности только для контента */
+/* Внутри поста — все img */
-#main article {
+#main .post .image.main img,
-    color: #2c3e50;
+#main .post .image img,
+#main .post p > img,
+#main .post p img,
+section.post img {
+    border-radius: 8px;
 }
 
-#main article h1,
+#main .post iframe,
-#main article h2,
+section.post iframe {
-#main article h3,
+    border-radius: 8px;
-#main article h4,
-#main article h5,
-#main article h6 {
-    color: #1a252f;
 }
 
-/* Карточки постов */
+/* Галерея */
-#main > .posts > article {
+.gallery .box .img img,
-    padding: 2rem !important;
+.gallery .box img,
-    text-align: center !important;
+.gallery img {
-    transition: box-shadow 0.2s ease;
+    border-radius: 6px;
 }
 
-#main > .posts > article:hover {
+/* Фото в теле поста — layout */
+#main > .post p > img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 1rem auto;
 }
 
-/* Фиксированная высота хедера — фото на одном уровне в ряду */
+/* Плавная загрузка */
-#main > .posts > article header {
+@keyframes imgFadeIn {
-    min-height: 5.5rem;
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
 
-/* Заголовок карточки */
+#main img,
-#main > .posts > article header h2 {
+.gallery img {
-    font-size: 1.3rem;
+    background: #f0f0f0;
-    line-height: 1.35;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    margin-bottom: 0;
-    text-align: center;
 }
 
-#main > .posts > article header h2 a {
+img[loading="lazy"] {
-    text-decoration: none;
+    animation: imgFadeIn 0.5s ease;
 }
 
-/* Убираем огромный отступ у фото (тема: 4rem 0) */
+/* =================================================================
-#main > .posts > article .image.main {
+   8. МОБИЛЬНАЯ АДАПТАЦИЯ
-    margin: 1rem 0 !important;
+   ================================================================= */
-}
 
-/* Описание — обрезаем до 2 строк */
+@media (max-width: 980px) {
-#main > .posts > article > p {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    text-align: center;
-    font-size: 0.88rem;
-    color: #666;
-    margin-bottom: 1rem;
-    line-height: 1.5;
-}
-
-/* Скрываем кнопку «Подробнее» — карточка и так кликабельна по заголовку */
-#main > .posts > article .actions {
-    display: none !important;
-}
-
-@media screen and (max-width: 980px) {
     #main > .posts > article {
         padding: 1.5rem !important;
+        text-align: center !important;
+    }
+
+    #main > .posts > article header,
+    #main > .posts > article header h2,
+    #main > .posts > article > p {
+        text-align: center !important;
     }
 }
 
-/* Первый (закреплённый) пост — центрировать на всех экранах */
+@media (max-width: 736px) {
     #main > section.posts:first-of-type article {
-    text-align: center !important;
+        padding: 2rem 1.25rem !important;
     }
 
     #main > section.posts:first-of-type article header h2 {
-    text-align: center !important;
+        font-size: 1.4rem !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: 1rem auto !important;
-    display: block !important;
     }
 
-#main > section.posts:first-of-type article > p {
+    #main article h1 { font-size: 1.8rem; }
-    text-align: center !important;
+    #main article h2 { font-size: 1.4rem; }
-}
+    #main article h3 { font-size: 1.2rem; }
-
-/* Мобильный: дополнительные корректировки */
-@media screen and (max-width: 736px) {
-    #main > section.posts:first-of-type article {
-        padding: 1.5rem 1.25rem !important;
-    }
-
-    #main > section.posts:first-of-type article header h2 {
-        font-size: 1.45rem !important;
-    }
-
-    #main > section.posts:first-of-type article .image.main {
-        margin: 0.75rem auto !important;
-    }
-}
-
-/* Адаптивность для мобильных */
-@media (max-width: 768px) {
-    #main article h1 {
-        font-size: 2rem;
-    }
-    
-    #main article h2 {
-        font-size: 1.7rem;
-    }
-    
-    #main article h3 {
-        font-size: 1.4rem;
-    }
 
     #main article {
         max-width: 95%;

static/data/upcoming-trips.json

@@ -5,7 +5,7 @@
       "title": "Расписание ближайших дронослётов",
       "period": "После 9 апреля 2026 года",
       "description": "В ближайшее время (март и начало апреля 2026 года) не планируется проведение открытых дронослётов (это для всех желающих по заявкам с сайта).\n\nВозможные даты проведения открытых дронослётов - не раньше 9 апреля 2026 года, следите за расписанием на сайте",
-      "image": "https://sleeptrip.ru/gallery/#&gid=1&pid=50",
+      "image": "https://s3.regru.cloud/sleeptrip-dev/images/Elbrus-20230128-1.jpg",
       "meta": [],
       "active": true,
       "order": 1

static/js/image-fade.js

@@ -0,0 +1,41 @@
+// Плавное появление lazy-loaded изображений
+// Работает с img[loading="lazy"] — добавляет класс .loaded после загрузки
+(function () {
+  function onImageLoad(img) {
+    img.classList.add('loaded');
+  }
+
+  // Обработать все lazy-loaded изображения
+  document.querySelectorAll('img[loading="lazy"]').forEach(function (img) {
+    if (img.complete && img.naturalHeight > 0) {
+      // Уже загружено (из кэша)
+      onImageLoad(img);
+    } else {
+      img.addEventListener('load', function () {
+        onImageLoad(img);
+      });
+      // На случай ошибки — всё равно показать (без анимации)
+      img.addEventListener('error', function () {
+        onImageLoad(img);
+      });
+    }
+  });
+
+  // Для динамически добавляемых изображений (MutationObserver)
+  if ('MutationObserver' in window) {
+    new MutationObserver(function (mutations) {
+      mutations.forEach(function (mutation) {
+        mutation.addedNodes.forEach(function (node) {
+          if (node.nodeName === 'IMG' && node.getAttribute('loading') === 'lazy') {
+            if (node.complete && node.naturalHeight > 0) {
+              onImageLoad(node);
+            } else {
+              node.addEventListener('load', function () { onImageLoad(node); });
+              node.addEventListener('error', function () { onImageLoad(node); });
+            }
+          }
+        });
+      });
+    }).observe(document.body, { childList: true, subtree: true });
+  }
+})();

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

@@ -48,7 +48,7 @@
 		<link rel="stylesheet" href="/css/footer-nav.css">
 		<link rel="stylesheet" href="/css/mobile-pagination.css">
 		<link rel="stylesheet" href="/css/back-to-top.css">
-		<link rel="stylesheet" href="/css/typography-improvements.css">
+		<link rel="stylesheet" href="/css/typography-improvements.css?v={{ now.Unix }}">
 		<link rel="stylesheet" href="/css/about-site.css">
 		<link rel="stylesheet" href="/css/copyright-visible.css">
 		<link rel="stylesheet" href="/css/nav-background.css">