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">