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

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>