Text layout changes.
authorRadek Czajka <rczajka@rczajka.pl>
Mon, 5 Feb 2024 07:33:49 +0000 (08:33 +0100)
committerRadek Czajka <rczajka@rczajka.pl>
Mon, 5 Feb 2024 07:33:49 +0000 (08:33 +0100)
18 files changed:
src/catalogue/templates/catalogue/book_text.html
src/wolnelektury/settings/static.py
src/wolnelektury/static/2022/images/about.svg [new file with mode: 0644]
src/wolnelektury/static/2022/images/pin.svg [new file with mode: 0644]
src/wolnelektury/static/2022/images/settings.svg [new file with mode: 0644]
src/wolnelektury/static/2022/images/toc.svg [new file with mode: 0644]
src/wolnelektury/static/2022/more.scss
src/wolnelektury/static/2022/styles/base/_fonts.scss
src/wolnelektury/static/2022/styles/layout/_container.scss
src/wolnelektury/static/2022/styles/layout/_module.scss
src/wolnelektury/static/2022/styles/layout/_text.scss [new file with mode: 0644]
src/wolnelektury/static/fonts/source-serif-pro/SIL Open Font License.txt [new file with mode: 0644]
src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Italic.otf.woff2 [new file with mode: 0644]
src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2 [new file with mode: 0644]
src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Roman.otf.woff2 [new file with mode: 0644]
src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2 [new file with mode: 0644]
src/wolnelektury/static/js/book_text/toc.js
src/wolnelektury/templates/base.html

index 67372b3..a494e24 100644 (file)
@@ -1,8 +1,11 @@
-{% extends "catalogue/viewer_base.html" %}
+{% extends "base.html" %}
+
+
 {% load i18n l10n %}
 {% load catalogue_tags %}
 {% load chunks %}
 {% load thumbnail %}
+{% load static %}
 {% load annoy_banners from annoy %}
 
 
@@ -18,6 +21,7 @@
           crossorigin=""></script>
 {% endblock %}
 
+
 {% block menu %}
   <li>
     <a href="{{ book.get_absolute_url }}" id="menu-book" data-box="book-short">
     </li>
   {% endif %}
 
-  <li id="menu-toc">
-    <a href="#" data-box="wltoc">
-      <span class="label">{% trans "Spis treści" %}</span>
-    </a>
-  </li>
-
-  <li id="menu-themes">
-    <a href="#" data-box="themes">
-      <span class="label">{% trans "Motywy" %}</span>
-    </a>
-  </li>
-
-  <li id="menu-nota_red">
-    <a href="#" data-box="nota_red">
-      <span class="label">{% trans "Nota red." %}</span>
-    </a>
-  </li>
-
-  <li id="menu-info">
-    <a href="#info" data-box="info">
-      <span class="label">{% trans "Informacje" %}</span>
-    </a>
-  </li>
-
   {% if extra_info.logo_mono %}
     {% thumbnail extra_info.logo_mono '200x200' as th %}
     <img src="{{ th.url }}" style="width: 100px; padding: 10px;"
   {% endthumbnail %}
   {% endif %}
 
-  <a href="#" class="settings-switch" id="settings-line-numbers"
-     data-setting="always-hide-line-numbers"><span>{% trans "Numeracja" %}</span></a>
-  <a href="#" class="settings-switch" id="settings-themes"
-     data-setting="always-hide-themes"><span>{% trans "Motywy" %}</span></a>
-  <a href="#" class="settings-switch" id="settings-annotations"
-     data-setting="no-annotations"><span>{% trans "Przypisy" %}</span></a>
-  <a href="#" class="settings-switch" id="settings-references"
-     data-setting="no-references"><span>{% trans "Pinezki" %}</span></a>
+
 
 {% endblock menu %}
 
 
-{% block big-pane %}
+
+{% block breadcrumb-right %}
+  <div class="l-text_toolbar" id="menu">
+    <a href="#info" data-box="info">
+      <img src="{% static '2022/images/about.svg' %}" alt="{% trans "Informacje" %}">
+    </a>
+
+    <a href="#" data-box="settings" style="display: none;">
+      <img src="{% static '2022/images/settings.svg' %}" alt="{% trans "Ustawienia" %}">
+    </a>
+
+    <a href="#wltoc" data-box="wltoc" style="display: none;">
+      <img src="{% static '2022/images/toc.svg' %}" alt="{% trans "Spis treści" %}">
+    </a>
+
+
+
+
+    <div id="info" class="box">
+      {% book_info book %}
+    </div>
+
+
+    <div id="settings" class="box">
+      <a href="#" class="settings-switch" id="settings-line-numbers"
+         data-setting="always-hide-line-numbers"><span>{% trans "Numeracja" %}</span></a>
+      <a href="#" class="settings-switch" id="settings-themes"
+         data-setting="always-hide-themes"><span>{% trans "Motywy" %}</span></a>
+      <a href="#" class="settings-switch" id="settings-annotations"
+         data-setting="no-annotations"><span>{% trans "Przypisy" %}</span></a>
+      <a href="#" class="settings-switch" id="settings-references"
+         data-setting="no-references"><span>{% trans "Pinezki" %}</span></a>
+    </div>
+
+
+    <div id="wltoc" class="box">
+      {% if book.parent %}
+        {% for b in book.ancestors %}
+          {% if forloop.counter > 1 %}
+            <li>
+          {% endif %}
+          <a href="{% if b.html_file %}{% url 'book_text' b.slug %}{% else %}{{ b.get_absolute_url }}{% endif %}">{{ b.title }}</a>
+          <ol>
+        {% endfor %}
+        {% for b in book.get_siblings %}
+          <li>
+            {% if b == book %}
+              <strong>{{ b.title }}</strong>
+              <div id="heretoc"></div>
+            {% else %}
+              <a href="{% url 'book_text' b.get_first_text.slug %}">{{ b.title }}</a>
+            {% endif %}
+          </li>
+        {% endfor %}
+
+        {% for b in book.ancestor.all %}
+          </ol>
+          {% if not forloop.counter.last %}
+            </li>
+          {% endif %}
+        {% endfor %}
+      {% else %}
+        <strong>{{ book.title }}</strong>
+        <div id="heretoc"></div>
+        <ol>
+          {% for c in book.get_children %}
+            <li><a href="{% url 'book_text' c.get_first_text.slug %}">{{ c.title }}</a></li>
+          {% endfor %}
+        </ol>
+      {% endif %}
+    </div>
+
+  </div>
+{% endblock %}
+
+
+
+
+{% block main %}
+  <div id="global-progress" class="l-container">
+    <div class="bar">
+      <span class="piece" style="flex-grow: 100;">
+        <span class="filled"></span>
+      </span>
+    </div>
+    <div class="progress-text">
+      Szacowany czas do końca: <span class="progress-text-value">56 min</span>
+    </div>
+  </div>
+
+  <header class="l-text_header">
+    <img class="l-text_header_cover" src="{% if book.cover_clean %}{{ book.cover_clean.url }}{% endif %}" alt="{{ book.pretty_title }}">
+
+    <div class="l-text_header__content">
+      <p class="l-text_header_author">{% for author in book.authors %}<a href="{{ author.get_absolute_url }}">{{ author.name }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
+      </p>
+      <h1 class="l-text_header_title"><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></h1>
+      {% with translators=book.translators %}
+        {% if translators %}
+          <p class="l-header__translators">
+            {% if translators.0 != 'tłumacz nieznany' %}
+              {% trans "tłum." %}
+            {% endif %}
+            {% for translator in translators %}
+              {{ translator }}{% if not forloop.last %}, {% endif %}
+            {% endfor %}
+          </p>
+        {% endif %}
+      {% endwith %}
+      <div style="margin-top:1em;">
+        {% content_warning book %}
+      </div>
+
+    </div>
+  </header>
+
 
   <article id="main-text">
     {% with next=book.get_next_text prev=book.get_prev_text %}
       {% if next %}
-        <a style="float:right; padding: 1em;" href="{% url 'book_text' next.slug %}">{{ next.title }}&nbsp;&rarr;</a>
+        <a class="text_next-book" href="{% url 'book_text' next.slug %}">{{ next.title }}&nbsp;&rarr;</a>
       {% endif %}
       {% if prev %}
-        <a style="display:inline-block;padding: 1em;" href="{% url 'book_text' prev.slug %}">&larr;&nbsp;{{ prev.title }}</a>
+        <a class="text_prev-book" href="{% url 'book_text' prev.slug %}">&larr;&nbsp;{{ prev.title }}</a>
       {% endif %}
-      <div style="text-align:center; margin-top:1em;">
-        {% content_warning book %}
-      </div>
-      <div style="clear:both;"></div>
       {{ book_text|safe }}
     {% endwith %}
-  </article>
 
 
 
-  <article id="other-text">
-    <a class="other-text-close" href="#">{% trans "Zamknij" %}</a>
-    <div id="other-text-waiter">{% trans "Proszę czekać..." %}</div>
-    <div id="other-text-body" style="display: none;"></div>
-  </article>
 
-  <div id="reference-box">
-    <div id="reference-map"></div>
-    <a id="reference-close" href="#">x</a>
-    <div id="reference-images">
+
+
+    <article id="other-text">
+      <a class="other-text-close" href="#">{% trans "Zamknij" %}</a>
+      <div id="other-text-waiter">{% trans "Proszę czekać..." %}</div>
+      <div id="other-text-body" style="display: none;"></div>
+    </article>
+
+    <div id="reference-box">
+      <div id="reference-map"></div>
+      <a id="reference-close" href="#">x</a>
+      <div id="reference-images">
+      </div>
+      <a id="reference-link" target="_blank"></a>
     </div>
-    <a id="reference-link" target="_blank"></a>
-  </div>
 
 
+    {% if book.other_versions.exists %}
+      <div class="box" id="other">
+        <h2>{% trans "Inne wersje utworu" %}</h2>
+        <a class="other-text-close" href="#">{% trans "Zamknij drugą wersję" %}</a>
+        <ul>
+          {% spaceless %}
+            {% for other_version in book.other_versions %}
+              <li>
+                <a class="display-other"
+                   data-other="{{ other_version.html_url }}"
+                   href="{% url 'book_text' other_version.slug %}">
+                  {{ other_version.mini_box_nolink }}
+                </a>
+              </li>
+            {% endfor %}
+          {% endspaceless %}
+        </ul>
+      </div>
+    {% endif %}
+
+    <div id="annoy-stubs">
+      {% annoy_banners 'book-text-intermission' %}
+
+      {% for insert in inserts %}
+        {% include 'annoy/dynamic_insert.html' %}
+      {% endfor %}
+    </div>
+
+  </article>
 
 
-{% endblock big-pane %}
 
-{% block footer %}
   {% if book.has_sync_file %}
     <div id="player-bar">
       {% include 'catalogue/snippets/jplayer_reader.html' %}
      {{ book.get_sync|safe }}
     </script>
   {% endif %}
-  <div id="wltoc" class="box">
-    {% if book.parent %}
-      {% for b in book.ancestors %}
-        {% if forloop.counter > 1 %}
-          <li>
-        {% endif %}
-        <a href="{% if b.html_file %}{% url 'book_text' b.slug %}{% else %}{{ b.get_absolute_url }}{% endif %}">{{ b.title }}</a>
-        <ol>
-      {% endfor %}
-      {% for b in book.get_siblings %}
-        <li>
-          {% if b == book %}
-            <strong>{{ b.title }}</strong>
-            <div id="heretoc"></div>
-          {% else %}
-            <a href="{% url 'book_text' b.get_first_text.slug %}">{{ b.title }}</a>
-          {% endif %}
-        </li>
-      {% endfor %}
-
-      {% for b in book.ancestor.all %}
-        </ol>
-        {% if not forloop.counter.last %}
-          </li>
-        {% endif %}
-      {% endfor %}
-    {% else %}
-      <strong>{{ book.title }}</strong>
-      <div id="heretoc"></div>
-      <ol>
-        {% for c in book.get_children %}
-          <li><a href="{% url 'book_text' c.get_first_text.slug %}">{{ c.title }}</a></li>
-        {% endfor %}
-      </ol>
-    {% endif %}
-  </div>
-
-  <div id="info" class="box">
-    {% book_info book %}
-  </div>
-
-  {% if book.other_versions.exists %}
-    <div class="box" id="other">
-      <h2>{% trans "Inne wersje utworu" %}</h2>
-      <a class="other-text-close" href="#">{% trans "Zamknij drugą wersję" %}</a>
-      <ul>
-        {% spaceless %}
-          {% for other_version in book.other_versions %}
-            <li>
-              <a class="display-other"
-                 data-other="{{ other_version.html_url }}"
-                 href="{% url 'book_text' other_version.slug %}">
-                {{ other_version.mini_box_nolink }}
-              </a>
-            </li>
-          {% endfor %}
-        {% endspaceless %}
-      </ul>
-    </div>
-  {% endif %}
-
-  <div class="box" id="book-short">
-    {% include 'catalogue/book_short.html' %}
-  </div>
-
-  <div id="annoy-stubs">
-    {% annoy_banners 'book-text-intermission' %}
-
-    {% for insert in inserts %}
-      {% include 'annoy/dynamic_insert.html' %}
-    {% endfor %}
-  </div>
 
 
   <div id="marker">
   </script>
 
   {% endlocalize %}
-{% endblock footer %}
+
+{% endblock main %}
index 584d71e..dfc84d1 100644 (file)
@@ -29,17 +29,21 @@ PIPELINE = {
                 '2022/styles/main.scss',
                 '2022/more.scss',
                 'chunks/edit.scss',
+
+                'scss/text.scss',
             ],
             'output_filename': 'css/compressed/main.css',
         },
         'book_text': {
             'source_filenames': [
                 'css/import/gelasio.css',
+
                 'scss/book_text.scss',
                 'css/new.book.css',
-                'annoy/banner.scss',
-                'annoy/book_text.scss',
-                '2022/styles/reader_player.scss',
+
+                'annoy/banner.scss',  # ?
+                'annoy/book_text.scss',  # ?
+                '2022/styles/reader_player.scss',  # ?
 
                 'css/master.picture.css',
             ],
@@ -66,6 +70,12 @@ PIPELINE = {
                 'js/contrib/jquery.cycle2.min.js',
                 'sponsors/js/sponsors.js',
                 'annoy/banner.js',
+                'js/book_text/info.js',
+                'js/book_text/menu.js',
+                'js/book_text/note.js',
+                'js/book_text/references.js',
+                'js/book_text/settings.js',
+                'js/book_text/toc.js',
 
                 'js/contrib/jquery.countdown.js', 'js/contrib/jquery.countdown-pl.js',
                 'js/contrib/jquery.countdown-de.js', 'js/contrib/jquery.countdown-uk.js',
diff --git a/src/wolnelektury/static/2022/images/about.svg b/src/wolnelektury/static/2022/images/about.svg
new file mode 100644 (file)
index 0000000..16f2e39
--- /dev/null
@@ -0,0 +1,4 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5391 14.4615C15.5391 11.2308 18.3758 8 22.0006 8C25.6254 8 28.4621 10.8654 28.4621 14.4615C28.4621 19.8462 22.0006 19.8462 22.0006 26.3077" stroke="#007880" stroke-width="3" stroke-linecap="round"/>
+<circle cx="21.9995" cy="33.8462" r="2.15385" fill="#007880"/>
+</svg>
diff --git a/src/wolnelektury/static/2022/images/pin.svg b/src/wolnelektury/static/2022/images/pin.svg
new file mode 100644 (file)
index 0000000..664080b
--- /dev/null
@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="7" fill="#1D97FF"/>
+<circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 6 5)" fill="white"/>
+<rect width="2" height="5" rx="1" transform="matrix(1 0 0 -1 6 11)" fill="white"/>
+<path d="M0 14V7L4 12L0 14Z" fill="#1D97FF"/>
+</svg>
diff --git a/src/wolnelektury/static/2022/images/settings.svg b/src/wolnelektury/static/2022/images/settings.svg
new file mode 100644 (file)
index 0000000..32101cb
--- /dev/null
@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.5042 24.9781C36.8253 24.041 37 23.0357 37 21.9899C37 20.944 36.8253 19.9387 36.5042 19.0016L33.0635 18.3207C32.8839 17.7822 32.6659 17.2612 32.4131 16.7607L34.362 13.8501C33.9265 12.9602 33.3391 12.1261 32.5995 11.3865C31.86 10.6469 31.0258 10.0595 30.1359 9.62404L27.2165 11.5787C26.7166 11.3281 26.1964 11.112 25.6587 10.9343L24.9783 7.49607C24.041 7.17468 23.036 7 21.9899 7C20.9437 7 19.9387 7.17468 19.0016 7.4958L18.3213 10.934C17.7805 11.1128 17.2573 11.3303 16.7547 11.5828L13.8501 9.63803C12.9602 10.0735 12.1261 10.6609 11.3865 11.4005C10.6469 12.14 10.0595 12.9742 9.62404 13.8641L11.5655 16.7634C11.3094 17.271 11.0889 17.7997 10.9082 18.3463L7.49634 19.0214C7.17468 19.959 7 20.964 7 22.0101C7 23.0563 7.17468 24.0613 7.4958 24.9984L10.9033 25.6727C11.0854 26.2247 11.3072 26.7586 11.5661 27.2708L9.6383 30.1499C10.0738 31.0398 10.6612 31.8739 11.4007 32.6135C12.1403 33.3531 12.9745 33.9405 13.8644 34.376L16.7467 32.446C17.2606 32.7048 17.7962 32.9267 18.3498 33.1085L19.0219 36.5042C19.959 36.8253 20.9643 37 22.0101 37C23.056 37 24.0613 36.8253 24.9984 36.5042L25.6732 33.0942C26.223 32.9116 26.7548 32.6889 27.2651 32.4301L30.1502 34.362C31.04 33.9265 31.8742 33.3391 32.6138 32.5995C33.3534 31.86 33.9408 31.0258 34.3762 30.1359L32.4328 27.2335C32.6862 26.7273 32.9037 26.2003 33.0825 25.6557L36.5042 24.9783V24.9781ZM21.9899 27.4628C18.9819 27.4628 16.5435 25.0244 16.5435 22.0165C16.5435 19.0085 18.9819 16.5701 21.9899 16.5701C24.9978 16.5701 27.4362 19.0085 27.4362 22.0165C27.4362 25.0244 24.9978 27.4628 21.9899 27.4628Z" fill="#007880"/>
+</svg>
diff --git a/src/wolnelektury/static/2022/images/toc.svg b/src/wolnelektury/static/2022/images/toc.svg
new file mode 100644 (file)
index 0000000..d09caa6
--- /dev/null
@@ -0,0 +1,8 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8.5" cy="13.5" r="1.5" fill="#007880"/>
+<rect x="13" y="12" width="24" height="3" rx="1.5" fill="#007880"/>
+<circle cx="8.5" cy="21.5" r="1.5" fill="#007880"/>
+<rect x="13" y="20" width="24" height="3" rx="1.5" fill="#007880"/>
+<circle cx="14.5" cy="29.5" r="1.5" fill="#007880"/>
+<rect x="19" y="28" width="18" height="3" rx="1.5" fill="#007880"/>
+</svg>
index 60c7a1e..1e6b692 100644 (file)
@@ -152,7 +152,7 @@ body.is-open {
 
     position:absolute;
     top: 60px;
-    z-index: 1;
+    z-index: 50;
 
     position: absolute;
     width: 186px;
@@ -259,10 +259,10 @@ form {
 
 
 .funding-promo-bar {
-    margin: 18px auto;
+    margin: auto;
 
     .l-checkout__support {
-        margin: 0;
+        margin: 18px 0;
         a {
             display: flex;
             align-items: start;
index a684ca5..eb30a63 100644 (file)
   src: url('/static/fonts/source-sans-pro/source-sans-pro-v21-cyrillic_greek_greek-ext_latin_latin-ext-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
        url('/static/fonts/source-sans-pro/source-sans-pro-v21-cyrillic_greek_greek-ext_latin_latin-ext-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
+
+
+
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Source Serif Pro';
+  font-style: normal;
+  src: url('/static/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');
+}
index 7de09e3..e52f637 100644 (file)
@@ -5,3 +5,9 @@
   padding-left: 16px;
   padding-right: 16px;
 }
+
+.l-breadcrumb-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
diff --git a/src/wolnelektury/static/2022/styles/layout/_text.scss b/src/wolnelektury/static/2022/styles/layout/_text.scss
new file mode 100644 (file)
index 0000000..3fcae7c
--- /dev/null
@@ -0,0 +1,555 @@
+#global-progress {
+    display: none;
+    position: sticky;
+    top: 0;
+    background: white;
+    z-index: 1;
+    border-bottom: 1px solid #F2F2F2;
+
+    .progress-text {
+        line-height: 24px;
+        padding: 4px;
+        color: #083F4D;
+        font-size: 16px;
+        .progress-text-value {
+            font-weight: 600;
+        }
+    }
+    
+    .bar {
+        display: flex;
+        height: 18px;
+        gap: 4px;
+        padding: 4px;
+        
+        .piece {
+            position: relative;
+            background: #F2F2F2;
+            overflow: hidden;
+            border-radius: 2px;
+
+            .filled {
+                position: absolute;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                background: #92BD39;
+            }
+        }
+    }
+}
+
+.l-text_toolbar {
+    display: flex;
+    gap: 16px;
+    margin-right: -7px;
+    position: relative;
+    a {
+        img {
+            display: block;
+        }
+    }
+
+    .box {
+        z-index: 5;
+    }
+}
+
+#main-text {
+    position: relative;
+    margin-bottom: 30px;
+    .text_next-book {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+    .text_prev-book {
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+    #book-text {
+        padding: 5px;
+        @include rwd($break-wide) {
+            width: 717px;
+            padding: 0;
+        }
+        margin: 0 auto;
+
+        color: #333333;
+
+        font-family: "Source Serif Pro";
+        font-size: 18px;
+        line-height: 28px;
+    }
+}
+
+
+#toc {
+    display: none;
+
+    
+}
+#menu .box {
+    display: none;
+    position: absolute;
+    right: 0px;
+    top: 50px;
+    width: 80vw;
+    height: 300px;
+    padding: 30px; 
+    overflow: auto;
+    background: #F7BA00;
+    box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
+    border-radius: 10px;
+}
+#menu #wltoc {
+    right: 0px;
+    width: 50vw;
+    height: 300px;
+}
+#menu #settings {
+    width: 200px;
+    height: 200px;
+}
+#themes {
+    display: none;
+}
+#other-text {
+    display: none;
+}
+#reference-box {
+    display: none;
+}
+#menu #info {
+    padding-top: 0;
+    display: none;
+    position: absolute;
+    right: 0px;
+    top: 50px;
+    width: 80vw;
+    height: 300px;
+    padding: 0px 30px 30px; 
+    overflow: auto;
+    background: #F7BA00;
+    box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
+    border-radius: 10px;
+    
+}
+#annoy-stubs {
+    display: none;
+}
+#nota_red {
+    display: none;
+}
+
+
+.l-text_header {
+    margin-top: 50px;
+    display: flex;
+    gap: 60px;
+
+    .l-text_header_cover {
+        width: 167px;
+        height: 236px;
+        
+    }
+    .l-text_header__content {
+        flex-grow: 1;
+    }
+
+    .l-text_header_author {
+        margin: 0;
+        font-weight: 600;
+        font-size: 21.5px;
+        line-height: 1.4;
+        a {
+            color: #007880;
+        }
+    }
+    .l-text_header_title {
+        margin: 0;
+        font-weight: 700;
+        font-size: 37px;
+        line-height: 1.3;
+        a {
+            color: #083F4D;
+        }
+    }
+    
+}
+    
+
+#main-text #book-text {
+    body {
+    font-size: 16px;
+    font-family: Gelasio, Georgia, "Times New Roman", serif;
+    line-height: 1.5em;
+    margin: 0;
+}
+
+a {
+    color: blue;
+    text-decoration: none;
+}
+
+img {
+    max-width: 37.5rem;
+    margin-top: 1em;
+    width: 100%;
+}
+.animacja {
+    margin-top: 1em;
+}
+.animacja img {
+    margin-top: 0;
+}
+
+/* ================================== */
+/* = Header with logo and menu      = */
+/* ================================== */
+
+
+/* =================================================== */
+/* = Common elements: headings, paragraphs and lines = */
+/* =================================================== */
+h1 {
+    font-size: 3em;
+    margin: 1.5em 0;
+    text-align: center;
+    line-height: 1.5em;
+    font-weight: bold;
+}
+
+h2 {
+    font-size: 2em;
+    margin: 1.5em 0 0;
+    font-weight: bold;
+    line-height: 1.5em;
+}
+
+h3, .subtitle2 {
+    font-size: 1.5em;
+    margin: 1.5em 0 0;
+    font-weight: normal;
+    line-height: 1.5em;
+}
+
+h4, .subtitle3 {
+    font-size: 1em;
+    margin: 1.5em 0 0;
+    line-height: 1.5em;
+}
+
+.subtitle4 {
+    font-weight: bold;
+}
+
+p {
+    margin: 0;
+}
+
+/* ======================== */
+/* = Footnotes and themes = */
+/* ======================== */
+
+.annotation {
+    font-style: normal;
+    font-weight: normal;
+    font-size: .75em;
+    padding-left: 2px;
+    position: relative;
+    top: -4px;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+#footnotes {
+    margin-top: 3em;
+}
+
+#footnotes .annotation {
+    display: block;
+    float: left;
+    width: 2.5em;
+    clear: both;
+    user-select: auto;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+}
+
+#footnotes > div {
+    margin: 1.5em 0 0 0;
+}
+
+#footnotes p, #footnotes ul, #footnotes .stanza {
+    margin-left: 2.5em;
+    font-size: 0.875em;
+}
+
+#footnotes .permalink {
+    font-size: .75em;
+}
+
+blockquote {
+    font-size: 0.875em;
+}
+
+/* ============= */
+/* = Numbering = */
+/* ============= */
+.verse, .paragraph {
+    position:relative;
+}
+/*.anchor {
+    position: absolute;
+    margin: -0.25em -0.5em;
+    color: #777;
+    font-size: 12px;
+    text-align: center;
+    padding: 0.25em 0.5em;
+    line-height: 1.5em;
+}*/
+
+
+/* =================== */
+/* = Custom elements = */
+/* =================== */
+span.author {
+    font-size: 0.5em;
+    display: block;
+    line-height: 1.5em;
+    margin-bottom: 0.25em;
+}
+
+span.collection {
+    font-size: 0.375em;
+    display: block;
+    line-height: 1.5em;
+    margin-bottom: -0.25em;
+}
+
+span.subtitle {
+    font-size: 0.5em;
+    display: block;
+    line-height: 1.5em;
+    margin-top: -0.25em;
+}
+
+span.translator {
+    font-size: 0.375em;
+    display: block;
+    line-height: 1.5em;
+    margin-top: 0.25em;
+}
+
+div.didaskalia {
+    font-style: italic;
+    margin: 0.5em 0 0 1.5em;
+}
+
+div.kwestia {
+    margin: 0.5em 0 0;
+}
+
+div.stanza {
+    margin: 1.5em 0;
+}
+
+div.kwestia div.stanza {
+    margin: 0;
+}
+
+.verse-p {
+    padding-left: 1em;
+}
+.verse-indent {
+    padding-left: 1em;
+}
+.verse-right { text-align: right; }
+.verse-center { text-align: center; }
+
+.verse-indent.verse-indent-2 { padding-left: 2em; }
+.verse-indent.verse-indent-3 { padding-left: 3em; }
+.verse-indent.verse-indent-4 { padding-left: 4em; }
+.verse-indent.verse-indent-5 { padding-left: 5em; }
+.verse-indent.verse-indent-6 { padding-left: 6em; }
+.verse-indent.verse-indent-7 { padding-left: 7em; }
+.verse-indent.verse-indent-8 { padding-left: 8em; }
+.verse-indent.verse-indent-9 { padding-left: 9em; }
+.verse-indent.verse-indent-10 { padding-left: 10em; }
+.verse-indent.verse-indent-11 { padding-left: 11em; }
+.verse-indent.verse-indent-12 { padding-left: 12em; }
+.verse-cont { padding-left: 12em; }
+
+@media screen and (max-width: 40em) {
+    .verse-indent { padding-left: 4%; }
+    .verse-indent.verse-indent-2 { padding-left: 8%; }
+    .verse-indent.verse-indent-3 { padding-left: 12%; }
+    .verse-indent.verse-indent-4 { padding-left: 16%; }
+    .verse-indent.verse-indent-5 { padding-left: 20%; }
+    .verse-indent.verse-indent-6 { padding-left: 24%; }
+    .verse-indent.verse-indent-7 { padding-left: 28%; }
+    .verse-indent.verse-indent-8 { padding-left: 32%; }
+    .verse-indent.verse-indent-9 { padding-left: 36%; }
+    .verse-indent.verse-indent-10 { padding-left: 40%; }
+    .verse-indent.verse-indent-11 { padding-left: 44%; }
+    .verse-indent.verse-indent-12 { padding-left: 48%; }
+    .verse-cont { padding-left: 48%; }
+}
+
+
+p.paragraph {
+    text-align: justify;
+    margin: 0;
+    text-indent: 1.5em;
+}
+
+.motto {
+    text-align: justify;
+    font-style: italic;
+    margin: 1.5em 0 0;
+}
+
+p.motto_podpis {
+    font-size: 0.875em;
+    text-align: right;
+    margin-bottom: 1.5em;
+}
+
+div.fragment {
+    border-bottom: 0.1em solid #999;
+    padding-bottom: 1.5em;
+}
+
+div.note p, div.dedication p, div.note p.paragraph, div.dedication p.paragraph {
+    text-align: right;
+    font-style: italic;
+}
+
+div.frame {
+    border: 1px darkgray solid;
+    padding: 1em;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+hr.spacer {
+    height: 3em;
+    visibility: hidden;
+}
+
+hr.spacer-line {
+    margin: 1.5em 0;
+    border: none;
+    border-bottom: 0.1em solid #000;
+}
+
+p.spacer-asterisk {
+    padding: 0;
+    margin: 1.5em 0;
+    text-align: center;
+}
+
+div.person-list ol {
+    list-style: none;
+    padding: 0 0 0 1.5em;
+}
+
+p.place-and-time {
+    font-style: italic;
+}
+
+em.math, em.foreign-word, em.book-title, em.didaskalia {
+    font-style: italic;
+}
+
+em.author-emphasis {
+    letter-spacing: 0.1em;
+}
+
+em.person {
+    font-style: normal;
+    font-variant: small-caps;
+}
+
+em.wieksze-odstepy {
+    font-style: normal;
+    word-spacing: 1em;
+}
+
+.verse:after {
+    content: "\feff";
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+table.border td, table.border th {
+    border: 1px solid black;
+    vertical-align: top;
+}
+
+
+.anchor {
+    /* Show line numbers. */
+    float: left;
+    font-size: .8em;
+    margin-left: -40px;
+    width: 36px;
+    height: auto;
+    padding: 2px;
+    text-align: center;
+    color: #ccc;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+
+}
+
+}
+
+
+
+
+#menu {
+#wltoc ol, #themes ol, #objects ol {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+#wltoc ol {
+  padding-left: 1.5em;
+}
+
+#wltoc ol ol {
+    padding: 0 0 1.5em 1.5em;
+    margin: 0;
+}
+
+#wltoc ol ol li {
+    font-weight: normal;
+}
+
+#wltoc h2 {
+    display: none;
+}
+
+#wltoc .anchor {
+    float: none;
+    margin: 0;
+    font-size: 16px;
+    position: inherit;
+}
+
+
+#info .sponsors img {
+    margin-bottom: 1em;
+}
+}
diff --git a/src/wolnelektury/static/fonts/source-serif-pro/SIL Open Font License.txt b/src/wolnelektury/static/fonts/source-serif-pro/SIL Open Font License.txt
new file mode 100644 (file)
index 0000000..a53e4fb
--- /dev/null
@@ -0,0 +1,43 @@
+Copyright 2014 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
\ No newline at end of file
diff --git a/src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Italic.otf.woff2 b/src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Italic.otf.woff2
new file mode 100644 (file)
index 0000000..53945e3
Binary files /dev/null and b/src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Italic.otf.woff2 differ
diff --git a/src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2 b/src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2
new file mode 100644 (file)
index 0000000..9fcf474
Binary files /dev/null and b/src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2 differ
diff --git a/src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Roman.otf.woff2 b/src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Roman.otf.woff2
new file mode 100644 (file)
index 0000000..b5304dd
Binary files /dev/null and b/src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Roman.otf.woff2 differ
diff --git a/src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2 b/src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2
new file mode 100644 (file)
index 0000000..cca344b
Binary files /dev/null and b/src/wolnelektury/static/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2 differ
index d03bbb9..d50edeb 100644 (file)
@@ -5,11 +5,11 @@
     }
 
     if ($('#wltoc li').length > 0) {
-        $('#menu-toc').show();
+        $('a[href="#wltoc"]').show();
     }
 
     if ($('#wltoc li a').length == 0) {
-        $('#menu li a[href="#wltoc"]').remove();
+        $('a[href="#wltoc"]').remove();
     }
 
     $("#toc").remove();
index fa433b4..f1a7bf6 100644 (file)
     {% endif %}
 
     {% block global-content %}
-      <div class="l-container">
+      <div class="l-container l-breadcrumb-container">
         <div class="l-breadcrumb">
           <a href="/"><span>{% translate "Strona główna" %}</span></a>
           {% block breadcrumbs %}<span>{{ title }}</span>{% endblock %}
         </div>
+        {% block breadcrumb-right %}
+        {% endblock %}
       </div>
 
       <main class="l-main">