mod: стили и меню...

etpgrf_site/blog/templates/blog/page_detail.html

@@ -3,6 +3,7 @@
 
 {% block title %}{{ page.seo_title|default:page.title }} — ETPGRF{% endblock %}
 {% block description %}{{ page.seo_description|default:page.content|striptags|truncatechars:160 }}{% endblock %}
+{% block keywords %}{{ page.seo_keywords|default:'типограф, типографика, онлайн типограф, подготовка текста для веба, html типограф, неразрывные пробелы, кавычки елочки, длинное тире, очистка текста от мусора, интернет верстка, муравьев' }} seo_keywords  {% endblock %}
 {% block og_title %}{{ page.seo_title|default:page.title }}{% endblock %}
 {% block og_description %}{{ page.seo_description|default:page.content|striptags|truncatechars:160 }}{% endblock %}
 {% block og_image %}{% if page.image %}{{ request.scheme }}://{{ request.get_host }}{{ page.image.url }}{% else %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}{% endif %}{% endblock %}
@@ -22,15 +23,15 @@
       </p>
       <p>
           {% if post.image %}
-            <img src="{{ post.image.url }}" class="w-100 rounded" alt="{{ post.title|safe }}" />
+            <img src="{{ post.image.url }}" class="w-100" alt="{{ post.title|safe }}" />
           {% else %}
-            <img src="{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}" class="w-100 rounded opacity-50" alt="{{ post.title|safe }}" />
+            <img src="{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}" class="w-100" alt="{{ post.title|safe }}" />
           {% endif %}
       </p>
     </div>
 
     {# Правая колонка: Контент #}
-    <div class="col-lg-10 border-start ps-lg-4">
+    <div class="col-lg-10 border-start ps-lg-4 post-page-content">
 
         <h1 class="display-4 mb-4">{{ page.title|safe }}</h1>
 

etpgrf_site/blog/templates/blog/post_detail.html

@@ -23,9 +23,9 @@
       </p>
       <p>
           {% if post.image %}
-            <img src="{{ post.image.url }}" class="w-100 rounded" alt="{{ post.title }}" />
+            <img src="{{ post.image.url }}" class="w-100" alt="{{ post.title }}" />
           {% else %}
-            <img src="{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}" class="w-100 rounded opacity-50" alt="{{ post.title }}" />
+            <img src="{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}" class="w-100" alt="{{ post.title }}" />
           {% endif %}
       </p>
 
@@ -35,7 +35,7 @@
     </div>
 
     {# Правая колонка: Контент #}
-    <div class="col-lg-10 border-start ps-lg-4">
+    <div class="col-lg-10 border-start ps-lg-4 post-page-content">
 
         <h1 class="display-4 mb-4">{{ post.title }}</h1>
 
@@ -54,5 +54,5 @@
         </div>
 
     </div>
-  </div>
+</div>
 {% endblock %}

etpgrf_site/etpgrf_site/settings.py

@@ -34,8 +34,8 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
-    'typograph',
-    'blog', # Наше новое приложение
+    'typograph',    # Основное приложение типографа
+    'blog',         # Приложение для блога и страниц
 ]
 
 MIDDLEWARE = [

etpgrf_site/typograph/templates/typograph/base.html

@@ -7,7 +7,7 @@
   {# --- SEO & Meta Tags --- #}
   <title>{% block title %}ETPGRF — единая типографика для веба{% endblock %}</title>
   <meta name="description" content="{% block description %}Бесплатный онлайн-типограф для подготовки текстов к публикации в вебе. Расставка неразрывных пробелов, правильных кавычек («ёлочки»), тире, спецсимволы, отбивка, компоновка, висячая пунктуация. Идеально для верстки сайтов, статей и постов.{% endblock %}">
-  <meta name="keywords" content="типограф, типографика, онлайн типограф, подготовка текста для веба, html типограф, неразрывные пробелы, кавычки елочки, длинное тире, очистка текста от мусора, интернет верстка, муравьев">
+  <meta name="keywords" content="{% block keywords %}типограф, типографика, онлайн типограф, подготовка текста для веба, html типограф, неразрывные пробелы, кавычки елочки, длинное тире, очистка текста от мусора, интернет верстка, муравьев{% endblock %}">
   <meta name="author" content="Sergei Erjemin">
 
   {# --- Open Graph (Facebook, VK, LinkedIn, Telegram) --- #}
@@ -60,6 +60,23 @@
     <a class="navbar-brand" href="/" style="background-image: var(--bg-image-text);"
        title="ETPGRF — единая типографика для веба">
     </a>
+
+    {# Кнопка-бургер для мобильных #}
+    <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    {# Меню #}
+    <div class="collapse navbar-collapse justify-content-end text-end" id="navbarNav">
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link {% if '/blog/' in request.path %}active fw-bold{% endif %}" href="{% url 'blog:post_list' %}">Блог</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link {% if request.path == '/donate/' %}active fw-bold{% endif %}" href="/donate/">Поддержать</a>
+        </li>
+      </ul>
+    </div>
   </div>
 </nav>
 

etpgrf_site/typograph/templates/typograph/index.html

@@ -1,6 +1,12 @@
 {% extends 'typograph/base.html' %}
 {% load static %}
 
+{% block title %}ETPGRF — единая типографика для веба{% endblock %}
+
+{% block description %}Бесплатный онлайн-типограф для подготовки текстов к публикации в вебе. Расставка неразрывных пробелов, правильных кавычек («ёлочки»), тире, спецсимволы, отбивка, компоновка, висячая пунктуация. Идеально для верстки сайтов, статей и постов.{% endblock %}
+
+{% block keywords %}типограф, типографика, онлайн типограф, подготовка текста для веба, html типограф, неразрывные пробелы, кавычки елочки, длинное тире, очистка текста от мусора, интернет верстка, муравьев{% endblock %}
+
 {% block content %}
   <div class="row">
     <div class="col-md-12">

public/static/css/etpgrf.css

@@ -26,6 +26,9 @@
   --bs-link-color: #90caf9;
   --bs-link-hover-color: #bbdefb;
 
+  --bs-linkcolor: #14abda;
+  --bs-linkclolor-hover: #90caf9;
+
   --bs-border-color: #37474f;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
 
@@ -38,11 +41,12 @@
 }
 
 /* Небольшие стили для красоты */
-html, body {
+html {
   height: 100%;
 }
 
 body {
+  min-height: 100%; /* Используем min-height вместо height */
   background-color: var(--bs-body-bg);
   display: flex;
   flex-direction: column;
@@ -76,6 +80,7 @@ body {
 }
 
 #main-navbar > #logo > .navbar-brand {
+  padding: 0; /* Убираем отступы у бренда */
   display: block; /* Блок, чтобы работали размеры */
   background: no-repeat left;
   background-size: contain;
@@ -96,6 +101,50 @@ body {
   opacity: 0;
 }
 
+/* --- Стили для ссылок в меню --- */
+.navbar {
+  /* position: fixed;  Убрал fixed, так как у нас sticky */
+  /* top: 0; */
+  /* width: 100%; */
+  /* background: var(--bs-navbar-bg); */
+  /* display: flex; */
+  /* justify-content: center; */
+  /* transition: all 0.8s; */
+}
+.nav-item {
+  color: var(--bs-body-bg);
+  padding: 10px 15px;
+  text-decoration: none;
+  position: relative;
+}
+
+/* Фикс для мобильной версии: ширина по контенту и прижатие вправо */
+@media (max-width: 991.98px) {
+    .nav-item {
+        width: fit-content;
+        margin-left: auto;
+    }
+}
+
+.nav-item:hover {
+  background-color: var(--bs-navbar-bg);
+  transition: background-color 0.8s;
+}
+.nav-item::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 3px;
+  background: var(--bs-linkcolor);
+  bottom: 0;
+  left: 0;
+  transform: scaleX(0);
+  transition: transform 0.3s;
+}
+.nav-item:hover::after {
+  transform: scaleX(1);
+}
+
 /* Контент растягивается, чтобы прижать футер */
 #content-container {
   flex: 1 0 auto;
@@ -154,10 +203,8 @@ body {
   color: var(--bs-body-color);
   border: 1px solid var(--bs-border-color);
   border-radius: 0.375rem;
-  padding: 1rem;
   min-height: 300px;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
+  padding: 1rem 1.5rem;
   white-space: pre-wrap;
   font-family: inherit;
 }
@@ -250,3 +297,44 @@ body {
 #cookie-accept:hover {
   background: rgba(var(--bs-primary-rgb), 0.1);
 }
+
+/* --- Стили для контента блога (Typography) --- */
+.post-page-content h1, .post-page-content h2, .post-page-content h3,
+.post-page-content h4, .post-page-content h5, .post-page-content h6 {
+  color: var(--bs-body-color);
+  opacity: 90%;
+  font-weight: 300;
+  padding-top: 1rem;
+  padding-bottom: 0.5rem;
+}
+
+
+.post-page-content p, .post-page-content li  {
+  margin-bottom: 0.5rem;
+  line-height: 1.6;
+  font-size: 1.1rem;
+}
+
+.post-page-content ul, .post-page-conten ol {
+    margin-bottom: 1.5rem;
+}
+
+.post-page-content  blockquote {
+    border-left: 4px solid var(--bs-primary);
+    padding-left: 1rem;
+    margin: 1.5rem 0;
+    font-style: italic;
+    /*color: var(--bs-secondary-color);*/
+}
+
+.post-page-content a {
+    color: var(--bs-linkcolor);
+    text-decoration: none;
+    border-bottom: 1px dotted var(--bs-linkcolor);
+}
+
+.post-page-content a:hover {
+  color: var(--bs-linkclolor-hover);
+  border-bottom: 1px solid var(--bs-linkclolor-hover);
+
+}

public/static/js/base.js

@@ -18,6 +18,7 @@
     function updateLogo() {
         const navbar = document.getElementById('logo');
         if (!navbar) return;
+        
         const scrollY = window.scrollY;
 
         // Гистерезис: включаем после 60px, выключаем до 10px
@@ -32,6 +33,23 @@
     // Инициализация логотипа при загрузке и скролле
     window.addEventListener('scroll', updateLogo, { passive: true });
     
+    // --- МОБИЛЬНОЕ МЕНЮ (Скрытие логотипа при открытии) ---
+    document.addEventListener('DOMContentLoaded', function() {
+        const navbarNav = document.getElementById('navbarNav');
+        const navbarBrand = document.querySelector('.navbar-brand');
+        
+        if (navbarNav && navbarBrand) {
+            navbarNav.addEventListener('show.bs.collapse', function () {
+                navbarBrand.style.opacity = '0';
+                navbarBrand.style.transition = 'opacity 0.3s ease';
+            });
+            
+            navbarNav.addEventListener('hide.bs.collapse', function () {
+                navbarBrand.style.opacity = '1';
+            });
+        }
+    });
+
     // --- КУКИ И СЧЕТЧИКИ ---
     const COOKIE_KEY = 'cookie_consent';
     const TTL_MS = 90 * 24 * 60 * 60 * 1000; // 90 дней
@@ -78,7 +96,7 @@
             // Делаем gtag глобальной, чтобы вызывать из sendGoal
             window.gtag = gtag; 
             gtag('js', new Date());
-            gtag('config', GOOGLE_ID);
+            gtag('config', '\'' + GOOGLE_ID + '\'');
             
         } catch (e) {
             console.error("Ошибка загрузки счетчиков:", e);