mod: Переработаны дизайн и компоновка. Минималистичный код.

2026-02-22 01:23:46 +03:00
parent c1bcb2895d
commit 5bfd50efd5
8 changed files with 431 additions and 376 deletions
--- a/dicquo/templates/base.html
+++ b/dicquo/templates/base.html
@@ -1,58 +1,34 @@
-<!DOCTYPE html>
-{% load static %}<html lang="ru">
+<!DOCTYPE html>{% load static %}
+<html lang="ru">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-  <!-- SEO & Meta -->
-  <title>{% block Title %}{% endblock %}</title>
-  <meta name="description" content="{% block Description %}{% endblock %}" />
-  <meta name="keywords" content="{% block Keywords %}{% endblock %}" />
-  <meta name="copyright" content="Sergei Erjemin (дизайн){% block CopyrightAuthor4Meta %}{% endblock %}." />
-  <meta name="robots" content="index,follow" />
-
-  <!-- Open Graph / Social Media -->
-  <meta property="og:type" content="article" />
-  <meta property="og:title" content="{% block OgTitle %}{{ DQ.szContent|truncatechars:60 }}{% endblock %}" />
-  <meta property="og:description" content="{% block OgDescription %}{{ DQ.szIntro|default:'' }} {{ DQ.szContent }} {{ AUTHOR.szAuthor|default:'' }}{% endblock %}" />
-  <meta property="og:url" content="{{ request.build_absolute_uri }}" />
-  <meta property="og:site_name" content="DicQuo" />
-  {% if IMAGE %}<meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ IMAGE.url }}" />{% endif %}
-
-  <!-- Technical Meta -->
-  <meta http-equiv="Last-Modified" content="{% block Last4Meta %}{% endblock %}" />
-  <meta name="generator" content="Django" />
-
-  <!-- Favicons -->
-  <link rel="shortcut icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}" />
-  <link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}" />
-
-  <!-- Styles -->
-  <link rel="stylesheet" href="{% static 'css/dicquo.css' %}" />
-
-  <style>
-    body {
-        margin: 0;
-        min-height: 100vh;
-        background-color: #111; /* Изначально темный фон */
-        opacity: 0; /* Скрываем контент до расчета цвета */
-        transition: opacity 0.9s ease-in-out; /* Очень плавное появление */
-    }
-  </style>
-
-  <noscript>
-    <style>body { opacity: 1; }</style>
-  </noscript>
-
-  {% block ExtraHead %}{% endblock %}
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  {# SEO & Meta #}<title>{% block Title %}{% endblock %}</title>
+  <meta name="description" content="{% block Description %}{% endblock %}"/>
+  <meta name="keywords" content="{% block Keywords %}{% endblock %}"/>
+  <meta name="copyright" content="Sergei Erjemin (дизайн){% block CopyrightAuthor4Meta %}{% endblock %}."/>
+  <meta name="robots" content="index,follow"/>
+  {# Open Graph / Social Media #}<meta property="og:type" content="article"/>
+  <meta property="og:title" content="{% block OgTitle %}{{ DQ.szContent|truncatechars:85 }}{% endblock %}"/>
+  <meta property="og:description" content="{% block OgDescription %}{{ DQ.szIntro|default:'' }} {{ DQ.szContent }} {{ AUTHOR.szAuthor|default:'' }}{% endblock %}"/>
+  <meta property="og:url" content="{{ request.build_absolute_uri }}"/>
+  <meta property="og:site_name" content="DicQuo"/>
+  {% if IMAGE %}<meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ IMAGE.url }}"/>{% endif %}
+  {# Шутка #}<meta name="generator" content="Microsoft FrontPage 1.0"/>
+  {# Canonical #}<link rel="canonical" href="{{ request.build_absolute_uri }}"/>
+  {# Favicons #}<link rel="shortcut icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}"/>
+  <link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}"/>
+  {# Technical Meta #}<meta http-equiv="Last-Modified" content="{% block Last4Meta %}{% endblock %}"/>
+  {# CSS #}<link rel="stylesheet" href="{% static 'css/dicquo.css' %}"/>
+  <noscript><style>body { opacity: 1; }</style></noscript>{# Показать все если JS не поддерживатся #}
+  {% block ExtraHead %}{# Если нужно что=то добавить в `<head>` #}{% endblock %}
 </head>
-<body>
-  {% if DQ %}
-  <span id="dq-content-raw" style="display:none;">{{ DQ.szContent }}</span>
-  {% endif %}
-
-  {% block CONTENT %}{% endblock %}
-  {% include "blocks/counters.html" %}
+<body>{% if DQ %}
+  {# Этот блок для передачи JavaScript-скрипту `bg-generator.js` текст цитаты ({{ DQ.szContent }}) и скрипт на основе него делает уникальный, но постоянный для этой цитаты фон (градиент) #}<span id="dq-content-raw" style="display:none;">{{ DQ.szContent }} ({% if AUTHOR %}{{ AUTHOR.szAuthorHTML|default:AUTHOR.szAuthor }}{% endif %})</span>{% endif %}
+  {% include "blocks/header_nav.html" %}
+  {% block CONTENT %}{% endblock %}{% if not cookie_accept %}
+  {% include "blocks/cookie_warning.html" %}{% endif %}
  <script src="{% static 'js/bg-generator.js' %}"></script>
+  {% include "blocks/counters.html" %}
 </body>
 </html>
--- a/dicquo/templates/blocks/cookie_warning.html
+++ b/dicquo/templates/blocks/cookie_warning.html
@@ -1,11 +1,6 @@
-<!-- ПОДВАЛ: НАЧАЛО -- соглашение о сборе технической информации -->
-  <div name="cookies_accept">
-    <small>Тут используют cookie и&nbsp;ведут сбор технических данных о&nbsp;посещениях, потому как без этого <nobr>интернет-сайты</nobr> вообще почти <nobr>не&nbsp;работают&hellip;</small>
-    <button onclick="CookieAcceptDate = new Date();
-                     CookieAcceptDate.setTime(CookieAcceptDate.getTime() + 7948800000);
-                     document.cookie = 'cookie_accept=yes;expires=' + CookieAcceptDate;
-                     document.getElementsByName('cookies_accept')[0].remove();">
-      Я согласен!
-    </button></nobr>
-  </div>
-<!-- ПОДВАЛ: КОНЕЦ -->
+<footer data-nosnippet>
+    <!--noindex-->
+    <small>Следы на песке смывает волна, но цифровые следы (cookie) помогают нам помнить вас, пока вы здесь.</small>
+    <button>Осознаю</button>
+    <!--/noindex-->
+  </footer>
--- a/dicquo/templates/blocks/counters.html
+++ b/dicquo/templates/blocks/counters.html
@@ -1,4 +1,2 @@
-<!-- Rating Mail.ru counter -->
-<script type="text/javascript">var _tmr = window._tmr || (window._tmr = []);_tmr.push({id:"1603042",type:"pageView",start:(new Date()).getTime()});(function(d,w,id){if(d.getElementById(id)) return;var ts=d.createElement("script");ts.type="text/javascript";ts.async=true;ts.id=id;ts.src="https://top-fwz1.mail.ru/js/code.js";var f=function(){var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(ts,s);};if(w.opera == "[object Opera]"){ d.addEventListener("DOMContentLoaded",f,false);}else{f();}})(document,window,"topmailru-code");</script><noscript><div><img src="https://top-fwz1.mail.ru/counter?id=1603042;js=na" style="border:0;position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></div></noscript>
-<!-- //Rating Mail.ru counter -->
-
+{% load static %}<script src="{% static 'js/counters.js' %}"></script>
+  <noscript><div><img src="https://top-fwz1.mail.ru/counter?id=3744288;js=na" class="counter-pixel" alt="Top.Mail.Ru"/></div></noscript>
--- a/dicquo/templates/blocks/header_nav.html
+++ b/dicquo/templates/blocks/header_nav.html
@@ -1,25 +1,15 @@
-{% load static %}
-<!-- ШАПКА: НАЧАЛО -->
-<div class="container">
-  <header>
-      <a href="/" id="logo">
-        <img src='{% static "svgs/dq-logo.svg" %}' alt="Dictum & Quotes" title="Dictum & Quotes"
-             width="50" height="46"/>
-      </a>
-      <div>
-        <span id="stats-menu" style="display: none; color: silver; font-size: 0.9em; margin-right: 15px; text-align: right;">
-          <!-- Манифест проекта -->
-          <div style="margin-bottom: 5px; color: #aaa; font-style: italic; max-width: 300px; display: inline-block;">
-             Dicquo&nbsp;— это коллекция отобранных вручную цитат, оформленных с&nbsp;уважением к&nbsp;типографике. Место для&nbsp;вдумчивого чтения.
-          </div>
-          <br/>
-          <!-- Статистика -->
-          {% if ticks %}<i class="stats-icon icon-time" title="Время генерации"></i>{{ ticks|floatformat:1 }}ms{% endif %}
-          {% if DQ %} &nbsp;|&nbsp; <i class="stats-icon icon-views" title="Просмотры"></i>{{ DQ.iViewCounter }}{% endif %}
-           &nbsp;|&nbsp; <a href="/add_quote/" style="color: silver; text-decoration: none;" title="Добавить цитату"><i class="stats-icon icon-add"></i></a> &nbsp;|&nbsp;
-        </span>
-        <a href="#" onclick="var m=document.getElementById('stats-menu'); m.style.display = (m.style.display === 'none' ? 'inline-block' : 'none'); return false;" style="color: silver; text-decoration: none; font-size: 1.2em;">≡</a>
-      </div>
-  </header>
-</div>
-<!-- ШАПКА: КОНЕЦ -->
+{% load static %}{# ШАПКА #}<header>
+    <a href="/" id="logo">
+      <img src='{% static "svgs/dq-logo.svg" %}' alt="Dictum & Quotes" title="Dictum & Quotes"/>
+    </a>
+    <nav>
+      <span id="stats-menu">
+        {# Манифест проекта #}<p>
+           DicQuo&nbsp;— это коллекция отобранных вручную цитат, оформленных с&nbsp;уважением к&nbsp;типографике.<br/>
+          Место для&nbsp;вдумчивого&nbsp;чтения.
+        </p>
+        {# МЕНЮ #}{% if ticks %}<i class="stats-icon icon-time" title="Время генерации"></i>{{ ticks|floatformat:3|default:"1,023" }} ms{% endif %}{% if DQ %} <b>|</b> <i class="stats-icon icon-views" title="Просмотры"></i> {{ DQ.iViewCounter }}{% endif %} <a href="/add_quote/" title="Добавить цитату">＋</a> &nbsp;
+      </span>
+      {# БУРГЕР #}<a href="#" onclick="var m=document.getElementById('stats-menu'); m.style.display = (m.style.display === 'none' ? 'inline-block' : 'none'); return false;" title="О проекте">≡</a>
+    </nav>
+  </header>
--- a/dicquo/templates/index.html
+++ b/dicquo/templates/index.html
@@ -13,84 +13,53 @@
 <!--- ТИТУЛ --->
 {% block Title %}{% if AUTHOR %}{{ AUTHOR.szAuthor }} — {% endif %}{{ DQ.szContent|truncatewords:7 }} | Dicquo{% endblock %}

-{% block ExtraHead %}
-<script type="application/ld+json">
-{
-  "@context": "https://schema.org",
-  "@type": "Quotation",
-  "name": "Цитата #{{ DQ.id }}",
-  "text": "{{ DQ.szContent|escapejs }}",
-  "creator": {
-    "@type": "Person",
-    "name": "{% if AUTHOR %}{{ AUTHOR.szAuthor|escapejs }}{% else %}Неизвестный автор{% endif %}"
-  },
-  "url": "{{ request.build_absolute_uri }}",
-  {% if IMAGE %}"image": "{{ request.scheme }}://{{ request.get_host }}{{ IMAGE.url }}",{% endif %}
-  "keywords": "афоризмы, цитаты, {% for i in TAGS %}{{ i.name|escapejs }}{% if not forloop.last %}, {% endif %}{% endfor %}",
-  "inLanguage": "ru",
-  "isPartOf": {
-    "@type": "WebSite",
-    "name": "Dicquo",
-    "url": "{{ request.scheme }}://{{ request.get_host }}"
-  },
-  "dateCreated": "{{ DQ.dtCreated|date:'Y-m-d' }}",
-  "dateModified": "{{ DQ.dtEdited|date:'Y-m-d' }}"
-}
-</script>
-{% endblock %}
+{% block ExtraHead %}<script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Quotation",
+      "name": "Цитата #{{ DQ.id }}",
+      "text": "{{ DQ.szContent|escapejs }}",
+      "creator": {
+        "@type": "Person",
+        "name": "{% if AUTHOR %}{{ AUTHOR.szAuthor|escapejs }}{% else %}Неизвестный автор{% endif %}"
+      },
+      "url": "{{ request.build_absolute_uri }}",
+      {% if IMAGE %}"image": "{{ request.scheme }}://{{ request.get_host }}{{ IMAGE.url }}",{% endif %}
+      "keywords": "афоризмы, цитаты, {% for i in TAGS %}{{ i.name|escapejs }}{% if not forloop.last %}, {% endif %}{% endfor %}",
+      "inLanguage": "ru",
+      "isPartOf": {
+        "@type": "WebSite",
+        "name": "Dicquo",
+        "url": "{{ request.scheme }}://{{ request.get_host }}"
+      },
+      "dateCreated": "{{ DQ.dtCreated|date:'Y-m-d' }}",
+      "dateModified": "{{ DQ.dtEdited|date:'Y-m-d' }}"
+    }
+  </script>{% endblock %}


-{% block CONTENT %}{% include "blocks/header_nav.html" %}
-<div class="container main-content">
-  <!-- Основной контент: Текст + Картинка -->
-  <div class="content-row">
-
-    <!-- Текстовая колонка -->
-    <div class="text-col">
-        <!-- Интро/Вступление -->
-        {% if DQ.szIntroHTML %}
-        <div id="info">{{ DQ.szIntroHTML|safe }}</div>
-        {% endif %}
-
-        <!-- Цитата: Семантический blockquote -->
-        <blockquote id="bb" style="border:none; margin:0; padding:0;">
-            {{ DQ.szContentHTML|safe }}
-        </blockquote>
-
-        <!-- Автор: Семантический cite -->
-        <div id="author">
-            <cite>
-              {% if AUTHOR %}
-                {{ AUTHOR.szAuthorHTML|default:AUTHOR.szAuthor|safe }}
-              {% endif %}
-            </cite>
+{% block CONTENT %}<main>{# Основной контент: Текст + Картинка #}
+    <article>{# Текстовая ряб. Задает высоту двум колонкам: текст и картина #}
+      <figure>{# КОЛОНКА С ТЕКСТОМ #}{% if DQ.szIntroHTML %}
+        {# Интро/Вступление (например "Вася Пупкин как-то сказа". Может отсутствовать #}<p>{{ DQ.szIntroHTML|safe }}</p>{% endif %}
+        <blockquote>{{ DQ.szContentHTML|safe }}</blockquote>{% if AUTHOR %}
+        <cite>{# Автор #}{{ AUTHOR.szAuthorHTML|default:AUTHOR.szAuthor|safe }}</cite>{% endif %}
+      </figure>{% if IMAGE %}
+      <div>{# КОЛОНКА С КАРТИНКОЙ #}
+        <div style="background:rgba(87,0,0,0.7);">
+         <div>
+           <img src="{{IMAGE.url}}" alt="{% if AUTHOR %}{{ AUTHOR.szAuthor }}{% else %}Dictum & Quotes{% endif %}" title="{% if AUTHOR %}{{ AUTHOR.szAuthor }}{% else %}Dictum & Quotes{% endif %}" />
+         </div>
        </div>
-    </div>
-
-    <!-- Колонка с картинкой (если есть) -->
-    {% if IMAGE %}
-    <div class="image-col" id="image">
-        <center>
-          <div style="background:rgba(87,0,0,0.7);">
-             <div><img src="{{IMAGE.url}}" alt="{% if AUTHOR %}{{ AUTHOR.szAuthor }}{% else %}Dictum & Quotes{% endif %}" title="{% if AUTHOR %}{{ AUTHOR.szAuthor }}{% else %}Dictum & Quotes{% endif %}" /></div>
-          </div>
-        </center>
-    </div>
-    {% endif %}
-  </div>
-
-  <!-- Блок тегов и навигации -->
-  <div class="tags">
-      {% for i in TAGS %}<a href="/?tag={{ i.slug }}">{{ i.name|safe }}</a> {% endfor %}
+      </div>{% endif %}
+    </article>
+  </main>
+  <nav>
+    <div>{# ТЕГИ #}{% for i in TAGS %}
+      <a href="/?tag={{ i.slug }}">{{ i.name|safe }}</a> {% endfor %}
      <div id="next"><a href="/{{ NEXT }}_{{ NEXT_TXT }}{% if CURRENT_TAG %}?tag={{ CURRENT_TAG }}{% endif %}">&rightarrow;</a></div>
-  </div>
-</div>
-
-
-<noscript>
-   <meta http-equiv="refresh" content="15; url=/{{ NEXT}}_{{ NEXT_TXT }}{% if CURRENT_TAG %}?tag={{ CURRENT_TAG }}{% endif %}">
-</noscript>
-
-
-{% if not cookie_accept %}{% include "blocks/cookie_warning.html" %}{% endif %}
-{% endblock %}
+    </div>
+  </nav>
+  <noscript>
+    <meta http-equiv="refresh" content="15; url=/{{ NEXT}}_{{ NEXT_TXT }}{% if CURRENT_TAG %}?tag={{ CURRENT_TAG }}{% endif %}">
+  </noscript>{% endblock %}