Experimental preview of 2022 book detail page.

diff --git a/src/catalogue/migrations/0033_auto_20220128_1409.py b/src/catalogue/migrations/0033_auto_20220128_1409.py
new file mode 100644 (file)
index 0000000..b01de25
--- /dev/null
+++ b/src/catalogue/migrations/0033_auto_20220128_1409.py
@@ -0,0 +1,23 @@
+# Generated by Django 2.2.25 on 2022-01-28 13:09
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('catalogue', '0032_collection_listed'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='tag',
+            name='photo',
+            field=models.FileField(blank=True, null=True, upload_to='catalogue/tag/'),
+        ),
+        migrations.AddField(
+            model_name='tag',
+            name='photo_attribution',
+            field=models.CharField(blank=True, max_length=255),
+        ),
+    ]

diff --git a/src/catalogue/models/book.py b/src/catalogue/models/book.py
index 1be9a9f..ab7a591 100644 (file)
--- a/src/catalogue/models/book.py
+++ b/src/catalogue/models/book.py
@@ -751,6 +751,15 @@ class Book(models.Model):
                     b.ancestor.add(parent)
                     parent = parent.parent
 
                     b.ancestor.add(parent)
                     parent = parent.parent
 

+    @property
+    def ancestors(self):
+        if self.parent:
+            for anc in self.parent.ancestors:
+                yield anc
+            yield self.parent
+        else:
+            return []
+                    

     def clear_cache(self):
         clear_cached_renders(self.mini_box)
         clear_cached_renders(self.mini_box_nolink)
     def clear_cache(self):
         clear_cached_renders(self.mini_box)
         clear_cached_renders(self.mini_box_nolink)


@@ -896,19 +905,27 @@ class Book(models.Model):
         else:
             return None, None
 
         else:
             return None, None
 

-    def choose_fragment(self):
+    def choose_fragments(self, number):

         fragments = self.fragments.order_by()
         fragments_count = fragments.count()
         if not fragments_count and self.children.exists():
             fragments = Fragment.objects.filter(book__ancestor=self).order_by()
             fragments_count = fragments.count()
         if fragments_count:
         fragments = self.fragments.order_by()
         fragments_count = fragments.count()
         if not fragments_count and self.children.exists():
             fragments = Fragment.objects.filter(book__ancestor=self).order_by()
             fragments_count = fragments.count()
         if fragments_count:

-            return fragments[randint(0, fragments_count - 1)]
+            offset = randint(0, fragments_count - number)
+            return fragments[offset : offset + number]

         elif self.parent:
         elif self.parent:

-            return self.parent.choose_fragment()
+            return self.parent.choose_fragments(number)

         else:
         else:

-            return None
+            return []

 
 

+    def choose_fragment(self):
+        fragments = self.choose_fragments(1)
+        if fragments:
+            return fragments[0]
+        else:
+            return None
+        

     def fragment_data(self):
         fragment = self.choose_fragment()
         if fragment:
     def fragment_data(self):
         fragment = self.choose_fragment()
         if fragment:

diff --git a/src/catalogue/models/tag.py b/src/catalogue/models/tag.py
index 6aaa97c..3c2a536 100644 (file)
--- a/src/catalogue/models/tag.py
+++ b/src/catalogue/models/tag.py
@@ -67,6 +67,8 @@ class Tag(models.Model):
     gazeta_link = models.CharField(blank=True, max_length=240)
     culturepl_link = models.CharField(blank=True, max_length=240)
     wiki_link = models.CharField(blank=True, max_length=240)
     gazeta_link = models.CharField(blank=True, max_length=240)
     culturepl_link = models.CharField(blank=True, max_length=240)
     wiki_link = models.CharField(blank=True, max_length=240)

+    photo = models.FileField(blank=True, null=True, upload_to='catalogue/tag/')
+    photo_attribution = models.CharField(max_length=255, blank=True)

 
     created_at = models.DateTimeField(_('creation date'), auto_now_add=True, db_index=True)
     changed_at = models.DateTimeField(_('creation date'), auto_now=True, db_index=True)
 
     created_at = models.DateTimeField(_('creation date'), auto_now_add=True, db_index=True)
     changed_at = models.DateTimeField(_('creation date'), auto_now=True, db_index=True)

diff --git a/src/catalogue/static/player/2022_player.js b/src/catalogue/static/player/2022_player.js
new file mode 100644 (file)
index 0000000..da0ba9a
--- /dev/null
+++ b/src/catalogue/static/player/2022_player.js
@@ -0,0 +1,112 @@
+(function($) {
+    $(function() {
+
+        $(".jp-jplayer").each(function() {
+            console.log('starting player')
+       var $self = $(this);
+        var $root = $self.parent();
+
+            //  //  var $number = $('.number', $root);
+        $self.jPlayer({
+            swfPath: "/static/jplayer/",
+            solution: "html,flash",
+            supplied: 'oga,mp3',
+            cssSelectorAncestor: "#" + $self.attr("data-player"),
+
+            ready: function() {
+                var player = $(this);
+                console.log(1);
+
+                var setMedia = function(elem, time=0) {
+                    console.log('setMedia', elem, time);
+                    var media = {}
+
+                    media['mp3'] = elem.attr('data-mp3');
+                    media['oga'] = elem.attr('data-ogg');
+                    media['id'] = elem.attr('data-media-id');
+
+                    $(".c-player__title", $root).html($(".title", elem).html());
+                    $(".c-player__info", $root).html($(".attribution", elem).html());
+                    $(".c-media__caption .content", $root).html($(".project-description", elem).html());
+                    $(".c-media__caption .license", $root).html($(".license", elem).html());
+                    $(".c-media__caption .project-logo", $root).html($(".project-icon", elem).html());
+                    
+                    player.jPlayer("setMedia", media);
+                    player.jPlayer("pause", time);
+                    return player;
+                };
+
+                $('.play-next', $root).click(function() {
+                    var next = parseInt($number.text()) + 1;
+                    var p = $('.jp-playlist .play:eq(' + (next - 1) + ')', $root);
+                    if (p.length) {
+                        setMedia(p).jPlayer("play");
+                        $number.text(next)
+                    }
+                });
+                $('.play-prev', $root).click(function() {
+                    var next = parseInt($number.text()) - 1;
+                    if (next < 1)
+                        return;
+                    var p = $('.jp-playlist .play:eq(' + (next - 1) + ')', $root);
+                    setMedia(p).jPlayer("play");
+                    $number.text(next)
+                });
+
+                console.log(1);
+
+                var initialElem = $('.jp-playlist li', $root).first();
+                var initialTime = 0;
+                if (true || Modernizr.localstorage) {
+                    try {
+                        audiobooks = JSON.parse(localStorage["audiobook-history"]);
+                    } catch {
+                        audiobooks = {};
+                    }
+                    last = audiobooks[$root.attr("data-book-slug")]
+                    // Fallback for book id;
+                    if (!last) {
+                        last = audiobooks[$root.attr("data-book-id")]
+                    }
+
+                    if (last) {
+                        initialElem = $('[data-media-id="' + last[1] + '"] .play', $root).first();
+                        initialTime = last[2];
+                        $number.text($(".jp-playlist .play", $root).index(initialElem) + 1);
+                    }
+                }
+                setMedia(initialElem, initialTime);
+            },
+
+            timeupdate: function(event) {
+                //event.jPlayer.status.currentTime
+                
+                
+                if (true || (event.jPlayer.status.currentTime && Modernizr.localstorage)) {
+                    try {
+                        audiobooks = JSON.parse(localStorage["audiobook-history"]);
+                    } catch {
+                        audiobooks = {};
+                    }
+                    t = event.jPlayer.status.currentTime;
+                    if (t && event.jPlayer.status.duration - t > 10) {
+                        audiobooks[$root.attr("data-book-slug")] = [
+                            Date.now(),
+                            event.jPlayer.status.media.id,
+                            event.jPlayer.status.currentTime
+                        ];
+                    } else {
+                        delete audiobooks[$root.attr("data-book-slug")];
+                    }
+                    // Remove old book id, if present.
+                    delete audiobooks[$root.attr("data-book-id")];
+                    localStorage["audiobook-history"] = JSON.stringify(audiobooks);
+                }
+            }
+        });
+      });
+
+
+
+    });
+})(jQuery)

diff --git a/src/catalogue/templates/catalogue/2021/book_detail.html b/src/catalogue/templates/catalogue/2021/book_detail.html
index 2e4f441..c765100 100644 (file)
--- a/src/catalogue/templates/catalogue/2021/book_detail.html
+++ b/src/catalogue/templates/catalogue/2021/book_detail.html
@@ -1,7 +1,7 @@
 <!doctype html>
 {% load pipeline %}
 {% load static %}
 <!doctype html>
 {% load pipeline %}
 {% load static %}

-{% load choose_cite from social_tags %}
+{% load choose_cites from social_tags %}

 {% load choose_fragment license_icon from catalogue_tags %}
 {% load catalogue_tags %}
 
 {% load choose_fragment license_icon from catalogue_tags %}
 {% load catalogue_tags %}
 


@@ -14,98 +14,90 @@
     <title>WolneLektury.pl</title>
     <link rel="apple-touch-icon" href="apple-touch-icon.png">
 
     <title>WolneLektury.pl</title>
     <link rel="apple-touch-icon" href="apple-touch-icon.png">
 

-    {% stylesheet '2021' %}
-    <script src="scripts/modernizr.js"></script>
+    {% stylesheet '2022' %}
+      <script src="scripts/modernizr.js"></script>

 
 

-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+      <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap" rel="stylesheet">

   </head>
   <body>
 
     <nav class="l-navigation">
   </head>
   <body>
 
     <nav class="l-navigation">

-      <a href="/" class="l-navigation__logo">
-        <img src="{% static '2021/images/logo.png' %}" alt="WolneLektury.pl">
-      </a>
-      <button class="l-navigation__button js-menu" aria-label="Menu">
-        <span class="c-hamburger">
-            <span class="bar"></span>
-        </span>
-      </button>
+      <div class="l-container">
+        <a href="/" class="l-navigation__logo">
+          <img src="{% static "2022/images/logo.png" %}" alt="WolneLektury.pl">
+        </a>
+        <div class="l-naviagion__search">
+          <form action="/szukaj/">
+            <input name="q" type="text" placeholder="szukaj tytułu, autora, motywów…">
+          </form>
+        </div>
+        <div class="l-navigation__actions">
+          <a href="/ludzie/polka/"><i class="icon icon-liked"></i></a>
+          <button class="l-navigation__button js-menu" aria-label="Menu">
+            <span class="c-hamburger">
+              <span class="bar"></span>
+            </span>
+          </button>
+        </div>
+      </div>

     </nav>
 
     </nav>
 

-    <header class="l-header">
-      <figure class="l-header__img">
-        <img src="{% if book.cover_thumb %}{{ book.cover_thumb.url }}{% endif %}" alt="{{ book.pretty_title }}">
-      </figure>
-      <div class="l-header__content">
-        <p>
-          {% for author in book.authors %}
-            <a href="{{ author.get_absolute_url  }}">{{ author }}</a>{% if not forloop.last %}, {% endif %}
-          {% endfor %}
-          {% if book.translators %}
-            (tłum. {% for translator in book.translators %}{{ translator }}{% endfor %})
-          {% endif %}
-        </p>
-        <h1>{{ book.title }}</h1>
-        <ul>
-          {# Wielkość liter zmieniona sztucznie. Docelowo należy ustalić. #}
-          {% for tag in book.kinds %}
-            <li><a href="{{ tag.get_absolute_url }}">{{ tag|lower }}</a></li>
-          {% endfor %}
-          {% for tag in book.genres %}
-            <li><a href="{{ tag.get_absolute_url }}">{{ tag|lower }}</a></li>
-          {% endfor %}
-          {% for tag in book.epochs %}
-            <li><a href="{{ tag.get_absolute_url }}">{{ tag|lower }}</a></li>
-          {% endfor %}
-        </ul>
-      </div>
-      <div class="l-header__actions">
-        <button class="l-button l-button--fav">
-          <img src="{% static '2021/images/fav.svg' %}" alt="Dodaj do ulubionych">
-        </button>
+
+    {# TODO: BREADCRUMBS #}
+    <div class="l-container">
+      <div class="l-breadcrumb">
+        <a href="/"><span>Strona główna</span></a>
+        <a href="/katalog/lektury/"><span>Literatura</span></a>
+        {% for ancestor in book.ancestors %}
+          <a href="{{ ancestor.get_absolute_url }}">{{ ancestor.title }}</a>
+        {% endfor %}

       </div>
       </div>

-    </header>
+    </div>
+

 
     <main class="l-main">
       <section class="l-section">
         <aside class="l-aside">
 
     <main class="l-main">
       <section class="l-section">
         <aside class="l-aside">

+          <figure>
+            <img src="{% if book.cover_thumb %}{{ book.cover_thumb.url }}{% endif %}" alt="{{ book.pretty_title }}" width="238">
+          </figure>
+          <ul class="l-aside__info">
+            <li><span>Epoka:</span> {% for tag in book.epochs %}<a href="{{ tag.get_absolute_url }}">{{ tag.name|lower }}</a> {% endfor %}</li>
+            <li><span>Rodzaj:</span> {% for tag in book.kinds %}<a href="{{ tag.get_absolute_url }}">{{ tag.name|lower }}</a> {% endfor %}</li>
+            <li><span>Gatunek:</span> {% for tag in book.genres %}<a href="{{ tag.get_absolute_url }}">{{ tag.name|lower }}</a> {% endfor %}</li>
+          </ul>

           {% if book.parent or book.children.all %}
           {% if book.parent or book.children.all %}

-            <h3>należy do zbiorów</h3>
-
-            {% if book.parent %}
-              <ul>
-              {% for b in book.ancestor.all %}
-                <li>
-                  <a href="{{ b.get_absolute_url }}">{{ b.title }}</a>
-                  <ul>
-              {% endfor %}
-              {% for b in book.get_siblings %}
-                <li>
-                  {% if b == book %}
-                    <strong>{{ b.title }}</strong>
-                    <ul>
-                      {% for c in book.children.all %}
-                        <li>
-                          <a href="{{ c.get_absolute_url }}">{{ c.title }}</a>
-                        </li>
-                      {% endfor %}
-                    </ul>
-                  {% else %}
+            <ul class="l-aside__zbiory">
+              {% if book.parent %}
+                {% for b in book.ancestors %}
+                  <li>

                     <a href="{{ b.get_absolute_url }}">{{ b.title }}</a>
                     <a href="{{ b.get_absolute_url }}">{{ b.title }}</a>

-                  {% endif %}
-                </li>
-              {% endfor %}
-
-              {% for b in book.ancestor.all %}
-                </ul>
-                </li>
-              {% endfor %}
-              </ul>
+                    <ul>
+                {% endfor %}
+                {% for b in book.get_siblings %}
+                  <li>
+                    {% if b == book %}
+                      <strong>{{ b.title }}</strong>
+                      <ul>
+                        {% for c in book.children.all %}
+                          <li>
+                            <a href="{{ c.get_absolute_url }}">{{ c.title }}</a>
+                          </li>
+                        {% endfor %}
+                      </ul>
+                    {% else %}
+                      <a href="{{ b.get_absolute_url }}">{{ b.title }}</a>
+                    {% endif %}
+                  </li>
+                {% endfor %}

 
 

-            {% else %}
-              <ul>
+                {% for b in book.ancestor.all %}
+                    </ul>
+                  </li>
+                {% endfor %}
+              {% else %}

                 <li>
                   <strong>{{ book.title }}</strong>
                   <ul>
                 <li>
                   <strong>{{ book.title }}</strong>
                   <ul>


@@ -116,279 +108,280 @@
                     {% endfor %}
                   </ul>
                 </li>
                     {% endfor %}
                   </ul>
                 </li>

-              </ul>
-            {% endif %}
-
-
+              {% endif %}
+            </ul>

           {% endif  %}
           {% endif  %}

-
-
-          <ul class="c-externals">
-            <li><a href="{{ book.xml_file.url }}" target="_blank">źródłowy plik XML</a></li>
-            <li><a href="{% url 'poem_from_book' book.slug %}" target="_blank">miksuj treść utworu</a></li>
-
-            <li><a href="{{ book.get_extra_info_json.about }}" target="_blank">utwór na Platformie Redakcyjnej</a></li>
-          </ul>

         </aside>
         </aside>

-        <article class="l-article">
-
-          <div class="quote l-article__lead">
-            {% choose_cite book as cite_promo %}
-            {% if cite_promo %}
-              {{ cite.promo_box }}
-            {% else %}
-              {% choose_fragment book as fragment_promo %}
-              {% if fragment_promo %}
-                {{  fragment_promo.get_short_text|safe }}
-              {% endif %}
-            {% endif %}
-          </div>
-
-          <div class="c-media">
-            <div class="c-media__actions">
-              <div class="c-media__btn">
-                {% if book.has_mp3_file %}
-                  <button class="l-button l-button--media" id="audiobook">pobierz audiobook</button>
-                  <ul>
-                    <li><a href="{% url 'download_zip_mp3' book.slug %}">mp3</a></li>
-                    {% if book.has_ogg_file %}
-                      <li><a href="{% url 'download_zip_ogg' book.slug %}">ogg</a></li>
-                    {% endif %}
-                    {% for dsy in book.media_daisy %}
-                      <li><a href="{{ dsy.file.url }}">DAISY</a></li>
-                    {% endfor %}
-                  </ul>
+        <div class="l-content">
+          <header class="l-header">
+            <div class="l-header__content">
+              <p>{% for author in book.authors %}<a href="{{ author.get_absolute_url }}">{{ author.name }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
+                {% if book.translators %}
+                  (tłum. {% for translator in book.translators %}{{ translator }}{% endfor %})

                 {% endif %}
                 {% endif %}

-              </div>
-              <div class="c-media__btn">
-                <button class="l-button l-button--media" id="ebook">pobierz książkę</button>
-                <ul>
-                  {% if book.pdf_file %}<li><a href="{{ book.pdf_url }}">PDF</a</li>{% endif %}
-                  {% if book.epub_file %}<li><a href="{{ book.epub_url }}">epub</a></li>{% endif %}
-                  {% if book.mobi_file %}<li><a href="{{ book.mobi_url }}">mobi</a></li>{% endif %}
-                </ul>
-              </div>
-              <div class="c-media__btn">
-                {% if book.get_first_text %}
-                <a href="{% url 'book_text' book.get_first_text.slug %}">
-                  <div class="l-button l-button--media l-button--media--full">
-                    czytaj
-                  </div>
-                </a>
-                <!-- ul>
-                     <li>PDF</li>
-                     <li>epub</li>
-                     <li>mobi</li>
-                     </ul-->
-                {% endif %}
-              </div>
+              </p>
+              <h1>{{ book.title }}</h1>

             </div>
             </div>

-            {% if book.has_mp3_file %}
-            <div class="c-media__player">
-              <h2>słuchaj audiobooka w naszym serwisie</h2>
-              <div class="c-player">
-                <button class="c-player__btn">
-                  <img src="{% static '2021/images/play.svg' %}" alt="słuchaj audiobooka w naszym serwisie">
-                </button>
-                <div class="c-player__timeline">
-                  <span></span>
-                  <time class="c-player__length">1h 20m</time>
-                </div>
-              </div>
+            <div class="l-header__actions">
+              <button class="l-button l-button--fav">
+                <img src="{% static '2022/images/fav.svg' %}" alt="Dodaj do ulubionych">
+              </button>

             </div>
             </div>

-            {% endif %}
-            <div class="c-media__popup" data-popup="ebook">
-              <div class="c-media__popup__box">
-                <div class="c-media__popup__box__lead">
-                  <h2>Pobieranie e-booka</h2>
-                  <p>Wybierz wersję dla siebie:</p>
-                </div>
-                <div class="c-media__popup__box__items">
-                  {% if book.pdf_file %}
-                    <div class="c-media__popup__box__item">
-                      <div>
-                        <h3>.pdf</h3>
-                        <p>Jeśli planujesz wydruk albo lekturę na urządzeniu mobilnym bez dodatkowych aplikacji.</p>
-                      </div>
-                      <div>
-                        <a href="{{ book.pdf_url }}" class="l-button l-button--media l-button--media--full">.pdf</a>
-                      </div>
-                    </div>
-                  {% endif %}
-                  {% if book.epub_file %}
-                    <div class="c-media__popup__box__item">
-                      <div>
-                        <h3>.epub</h3>
-                        <p>Uniwersalny format e-booków, obsługiwany przez większość czytników sprzętowych i aplikacji na urządzenia mobilne.</p>
-                      </div>
-                      <div>
-                        <a href="{{ book.epub_url }}" class="l-button l-button--media l-button--media--full">.epub</a>
-                      </div>
-                    </div>
-                  {% endif %}
-                  {% if book.mobi_file %}
-                    <div class="c-media__popup__box__item">
-                      <div>
-                        <h3>.mobi</h3>
-                        <p>Natywny format dla czytnika Amazon Kindle.</p>
-                      </div>
-                      <div>
-                        <a href="{{ book.mobi_url }}" class="l-button l-button--media l-button--media--full">.mobi</a>
-                      </div>
-                    </div>
+          </header>
+          <article class="l-article">
+            <div class="c-media">
+              <div class="c-media__actions">
+                <div class="c-media__btn">
+                  {% if book.has_mp3_file %}
+                    <button class="l-button l-button--media" id="audiobook"><i class="icon icon-audio"></i> pobierz audiobook</button>

                   {% endif %}
                   {% endif %}

-                  {% if book.synchrobook_file %}
-                    <div class="c-media__popup__box__item">
-                      <div>
-                        <h3>synchrobook (epub3)</h3>
-                        <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format (np. ..., ..., ...).</p>
-                      </div>
-                      <div>
-                        <a href="{{ book.synchrobook_url }}" class="l-button l-button--media l-button--media--full">synchrobook</a>
-                      </div>
-                    </div>
-                  {% endif %}
-                  <div class="c-media__popup__box__item">
-                    <div>
-                      <h3>inne formaty</h3>
-                      <ul>
-                        <li><a href="{{ book.txt_url }}">plik tekstowy (.txt)</a></li>
-                        <li><a href="{{ book.fb2_url }}">FictionBook</a></li>
-                      </ul>
-                    </div>
-                  </div>

                 </div>
                 </div>

-                <button class="c-media__popup__close">
-                  <img src="{% static '2021/images/close.svg' %}" alt="Zamknij">
-                </button>
+                <div class="c-media__btn">
+                  <button class="l-button l-button--media" id="ebook"><i class="icon icon-book"></i> pobierz książkę</button>
+                </div>
+                <div class="c-media__btn">
+                  {% with t=book.get_first_text %}
+                    {% if t %}
+                      <a href="{% url 'book_text' t.slug %}" class="l-button l-button--media l-button--media--full"><i class="icon icon-eye"></i> czytaj online</a>
+                    {% endif %}
+                  {% endwith %}
+                </div>

               </div>
               </div>

-            </div>
-            {% if book.has_mp3_file %}
-              <div class="c-media__popup" data-popup="audiobook">
+
+
+
+              {% if book.has_mp3_file %}
+                {% include 'catalogue/snippets/2022_jplayer.html' %}
+              {% endif %}
+
+
+
+
+              <div class="c-media__popup" data-popup="ebook">

                 <div class="c-media__popup__box">
                   <div class="c-media__popup__box__lead">
                 <div class="c-media__popup__box">
                   <div class="c-media__popup__box__lead">

-                    <h2>Pobieranie audiobooka</h2>
+                    <h2>Pobieranie e-booka</h2>

                     <p>Wybierz wersję dla siebie:</p>
                   </div>
                   <div class="c-media__popup__box__items">
                     <p>Wybierz wersję dla siebie:</p>
                   </div>
                   <div class="c-media__popup__box__items">

-                    <div class="c-media__popup__box__item">
-                      <div>
-                        <h3>.mp3</h3>
-                        <p>Uniwersalny format, obsługiwany przez wszystkie urządzenia.</p>
-                      </div>
-                      <div>
-                        <a href="{% url 'download_zip_mp3' book.slug %}" class="l-button l-button--media l-button--media--full">.mp3</a>
-                      </div>
-                    </div>
-                    {% if book.has_ogg_file %}
-                    <div class="c-media__popup__box__item">
-                      <div>
-                        <h3>OggVorbis</h3>
-                        <p>Otwarty format plików audio, oferujący nagranie w najwyższej jakości dźwiękowej.</p>
-                      </div>
-                      <div>
-                        <a href="{% url 'download_zip_ogg' book.slug %}" class="l-button l-button--media l-button--media--full">.ogg</a>
+                    {% if book.pdf_file %}
+                      <div class="c-media__popup__box__item">
+                        <div>
+                          <h3>.pdf</h3>
+                          <p>Jeśli planujesz wydruk albo lekturę na urządzeniu mobilnym bez dodatkowych aplikacji.</p>
+                        </div>
+                        <div>
+                          <a href="{{ book.pdf_url }}" class="l-button l-button--media l-button--media--full">.pdf</a>
+                        </div>

                       </div>
                       </div>

-                    </div>

                     {% endif %}
                     {% endif %}

-                    {% if book.has_daisy_file %}
-                    <div class="c-media__popup__box__item">
-                      <div>
-                        <h3>DAISY</h3>
-                        <p>Format dla osób z dysfunkcjami czytania.</p>
+                    {% if book.epub_file %}
+                      <div class="c-media__popup__box__item">
+                        <div>
+                          <h3>.epub</h3>
+                          <p>Uniwersalny format e-booków, obsługiwany przez większość czytników sprzętowych i aplikacji na urządzenia mobilne.</p>
+                        </div>
+                        <div>
+                          <a href="{{ book.epub_url }}" class="l-button l-button--media l-button--media--full">.epub</a>
+                        </div>

                       </div>
                       </div>

-                      <div>
-                        {% for dsy in book.media_daisy %}
-                          <a href="{{ dsy.file.url }}" class="l-button l-button--media l-button--media--full">DAISY</a>
-                        {% endfor %}
+                    {% endif %}
+                    {% if book.mobi_file %}
+                      <div class="c-media__popup__box__item">
+                        <div>
+                          <h3>.mobi</h3>
+                          <p>Natywny format dla czytnika Amazon Kindle.</p>
+                        </div>
+                        <div>
+                          <a href="{{ book.mobi_url }}" class="l-button l-button--media l-button--media--full">.mobi</a>
+                        </div>

                       </div>
                       </div>

-                    </div>

                     {% endif %}
                     {% endif %}

-                    {% if book.synchrobook_file %}
-                    <div class="c-media__popup__box__item">
-                      <div>
-                        <h3>synchrobook</h3>
-                        <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format.</p>
+                    {% if book.synchro_file %}
+                      <div class="c-media__popup__box__item">
+                        <div>
+                          <h3>synchrobook (epub3)</h3>
+                          <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format (np. ..., ..., ...).</p>
+                        </div>
+                        <div>
+                          <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
+                        </div>

                       </div>
                       </div>

-                      <div>
-                        <a href="{{ book.synchrobook_url }}" class="l-button l-button--media l-button--media--full">synchrobook</a>
+                    {% endif %}
+                    {% if book.txt_file or book.fb2_file %}
+                      <div class="c-media__popup__box__item">
+                        <div>
+                          <h3>inne formaty</h3>
+                          <ul>
+                            {% if book.txt_file %}<li><a href="{{ book.txt_url }}">plik tekstowy (.txt)</a></li>{% endif %}
+                            {% if book.fb2_file %}<li><a href="{{ book.fb2_url }}">FictionBook</a></li>{% endif %}
+                          </ul>
+                        </div>

                       </div>
                       </div>

-                    </div>

                     {% endif %}
                   </div>
                   <button class="c-media__popup__close">
                     {% endif %}
                   </div>
                   <button class="c-media__popup__close">

-                    <img src="{% static '2021/images/close.svg' %}" alt="Zamknij">
+                    <img src="{% static '2022/images/close.svg' %}" alt="Zamknij">

                   </button>
                 </div>
               </div>
                   </button>
                 </div>
               </div>

-            {% endif %}
-          </div>
-
-          {{ book.abstract|safe }}
+              {% if book.has_mp3_file %}
+                <div class="c-media__popup" data-popup="audiobook">
+                  <div class="c-media__popup__box">
+                    <div class="c-media__popup__box__lead">
+                      <h2>Pobieranie audiobooka</h2>
+                      <p>Wybierz wersję dla siebie:</p>
+                    </div>
+                    <div class="c-media__popup__box__items">
+                      <div class="c-media__popup__box__item">
+                        <div>
+                          <h3>.mp3</h3>
+                          <p>Uniwersalny format, obsługiwany przez wszystkie urządzenia.</p>
+                        </div>
+                        <div>
+                          <a href="{% url 'download_zip_mp3' book.slug %}" class="l-button l-button--media l-button--media--full">.mp3</a>
+                        </div>
+                      </div>
+                      {% if book.has_ogg_file %}
+                        <div class="c-media__popup__box__item">
+                          <div>
+                            <h3>OggVorbis</h3>
+                            <p>Otwarty format plików audio, oferujący nagranie w najwyższej jakości dźwiękowej.</p>
+                          </div>
+                          <div>
+                            <a href="{% url 'download_zip_ogg' book.slug %}" class="l-button l-button--media l-button--media--full">.ogg</a>
+                          </div>
+                        </div>
+                      {% endif %}
+                      {% if book.has_daisy_file %}
+                        <div class="c-media__popup__box__item">
+                          <div>
+                            <h3>DAISY</h3>
+                            <p>Format dla osób z dysfunkcjami czytania.</p>
+                          </div>
+                          <div>
+                            {% for dsy in book.media_daisy %}
+                              <a href="{{ dsy.file.url }}" class="l-button l-button--media l-button--media--full">DAISY</a>
+                            {% endfor %}
+                          </div>
+                        </div>
+                      {% endif %}
+                      {% if book.has_synchro_file %}
+                        <div class="c-media__popup__box__item">
+                          <div>
+                            <h3>synchrobook</h3>
+                            <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format.</p>
+                          </div>
+                          <div>
+                            <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
+                          </div>
+                        </div>
+                      {% endif %}
+                    </div>
+                    <button class="c-media__popup__close">
+                      <img src="{% static '2022/images/close.svg' %}" alt="Zamknij">
+                    </button>
+                  </div>
+                </div>
+              {% endif %}
+            </div>

 
 

-        </article>
+            <h3>Opis</h3>
+            {{ book.abstract|safe }}
+          </article>
+        </div>

       </section>
       </section>

-
-

       <section class="l-section">
         <div class="c-support">
           <h2>Ta książka jest dostępna dla tysięcy dzieciaków dzięki darowiznom od osób takich jak Ty!</h2>
       <section class="l-section">
         <div class="c-support">
           <h2>Ta książka jest dostępna dla tysięcy dzieciaków dzięki darowiznom od osób takich jak Ty!</h2>

-          <a href="/towarzystwo/">DORZUĆ SIĘ!</a>
+          <figure>
+            <img src="{% static '2022/images/img-1.jpg' %}" alt="Dorzuć się!">
+            <a href="/towarzystwo/">Dorzuć się!</a>
+          </figure>

         </div>
       </section>
 
         </div>
       </section>
 

-

       {% for author in book.authors %}
         <section class="l-section">
           <div class="l-author">
       {% for author in book.authors %}
         <section class="l-section">
           <div class="l-author">

-            <article class="l-author__info">
-              <h3>
-                <a href="{{ author.get_absolute_url }}">
-                  {{ author.name }}
-                </a>
-              </h3>
-
-              {{ author.description|safe }}
+            <div class="row">
+              <h2>O autorze</h2>
+              <div>
+                {% if author.photo %}
+                  <figure class="l-author__photo">
+                    <img src="{{ author.photo.url }}" alt="{{ author.name }}" style="width: 238px;">
+                    <figcaption>
+                      {{ author.photo_attribution|safe }}
+                    </figcaption>
+                  </figure>
+                {% endif %}
+                <article class="l-author__info">
+                  <h3>{{ author.name }}</h3>
+                  {{ author.description|safe }}
+                </article>
+              </div>
+            </div>

 
 

-            </article>
-            {% if HAVE_AUTHOR_PHOTO %}
-              <figure class="l-author__photo">
-                <img src="" alt="{{ author.name }}">
-                <figcaption>
-                </figcaption>
-              </figure>
-            {% endif %}
+            <div class="row">
+              <div class="l-author__quotes">
+                <div class="l-author__quotes__slider">
+                  {% choose_cites book 3 as cites %}
+                  {% for fragment in cites %}
+                    <div class="l-author__quotes__slider__item">
+                      <em>
+                        {{ fragment.short_text|safe }}
+                      </em>
+                      <p>{{ fragment.book.pretty_title }}</p>
+                    </div>
+                  {% endfor %}
+                </div>
+              </div>
+            </div>

           </div>
           </div>

-        </section>
+        </div>
+      </section>

       {% endfor %}
 
       {% endfor %}
 

-      {% with book.related_themes as themes %}
-        {% if themes %}
-          <section class="l-section">
-            <div class="l-themes__wrapper">
-              <h2>motywy występujące w tym utworze</h2>
+      <section class="l-section">
+        <div class="l-themes__wrapper">
+          {% with book.related_themes as themes %}
+            {% if themes %}
+              <h2>Motywy występujące w tym utworze <a href="/katalog/motyw/"><span>Wszystkie motywy</span> <i class="icon icon-arrow-right"></i></a></h2>

               <div class="l-themes">
                 <ul>
                   {% for item in themes %}
                     <li><a href="{% url 'book_fragments' book.slug item.slug %}">{{ item|lower }}&nbsp;({{ item.count}})</a></li>
                   {% endfor %}
                 </ul>
               <div class="l-themes">
                 <ul>
                   {% for item in themes %}
                     <li><a href="{% url 'book_fragments' book.slug item.slug %}">{{ item|lower }}&nbsp;({{ item.count}})</a></li>
                   {% endfor %}
                 </ul>

-                <a class="button" href="{% url 'theme_catalogue' %}">zobacz wszystkie motywy</a>

               </div>
               </div>

-            </div>
-          </section>
-        {% endif %}
-      {% endwith %}
+            {% endif %}
+          {% endwith %}
+          <ul class="links">
+            <li>
+              <a href="{{ book.xml_url }}">źródłowy plik XML</a>
+            </li>
+            <li>
+              <a target="_blank" href="{% url 'poem_from_book' book.slug %}">miksuj treść utworu</a>
+            </li>
+            <li>
+              <a target="_blank" href="{{ book.get_extra_info_json.about }}">utwór na Platformie Redakcyjnej</a>
+            </li>
+          </ul>
+        </div>
+      </section>
+    </main>
+

 
 
 
 

-      <section class="l-section">
-        <div class="l-books__wrapper">
-          <h2>inne tytuły w naszej bibliotece</h2>
-          <div class="l-books">

 
 

+
+    <section class="l-section">
+      <div class="l-books__wrapper">
+        <div class="l-container">
+          <h2>Tytuły powiązane</h2>
+          <div class="l-books">

             {% if book.other_versions %}
               {% for rel in book.other_versions %}
             {% if book.other_versions %}
               {% for rel in book.other_versions %}

-

                 <article class="l-books__item">
                   <figure class="l-books__item__img">
                     <a href="{{ rel.get_absolute_url }}">
                 <article class="l-books__item">
                   <figure class="l-books__item__img">
                     <a href="{{ rel.get_absolute_url }}">


@@ -397,7 +390,7 @@
                   </figure>
                   <h3>
                     {% for author in rel.authors %}
                   </figure>
                   <h3>
                     {% for author in rel.authors %}

-                      <a href="{{ author.get_absolute_url }}">{{ author|upper }}</a>
+                      <a href="{{ author.get_absolute_url }}">{{ author }}</a>

                     {% endfor %}
                   </h3>
                   <h2><a href="{{ rel.get_absolute_url }}">{{ rel.title }}</a></h2>
                     {% endfor %}
                   </h3>
                   <h2><a href="{{ rel.get_absolute_url }}">{{ rel.title }}</a></h2>


@@ -405,6 +398,7 @@
               {% endfor %}
             {% endif %}
 
               {% endfor %}
             {% endif %}
 

+

             {% related_books_2021 book taken=book.other_versions|length as related_books %}
             {% for rel in related_books %}
               <article class="l-books__item">
             {% related_books_2021 book taken=book.other_versions|length as related_books %}
             {% for rel in related_books %}
               <article class="l-books__item">


@@ -422,42 +416,47 @@
               </article>
             {% endfor %}
 
               </article>
             {% endfor %}
 

+            <article class="l-books__item l-books__item--link">
+              <a href="/katalog/kolekcje/">i wiele innych książek, wierszy, obrazów, audiobooków…</a>
+              <a href="/katalog/kolekcje/" class="icon-link"><i class="icon icon-all"></i></a>
+            </article>

 
           </div>
         </div>
 
           </div>
         </div>

-      </section>
-    </main>
+      </div>
+    </section>

 
     <div class="l-footer">
 
     <div class="l-footer">

-      <div class="l-footer__row">
-        <div class="l-footer__col">
-          <p>Wolne Lektury to projekt prowadzony przez fundację Nowoczesna Polska.</p>
-          <p>Reprodukcje cyfrowe wykonane przez Bibliotekę Narodową, Bibliotekę Śląską i Bibliotekę Elbląską z egzemplarzy pochodzących ze zbiorów BN, BŚ i BE.</p>
-          <p>Hosting: ICM.</p>
-        </div>
-        <div class="l-footer__col">
+      <div class="l-container">
+        <div class="l-footer__row">
+          <a href="#"><img src="{% static '2022/images/FNP-logo.png' %}" alt="FUNDACJA Nowoczesna Polska"></a>

           <ul>
           <ul>

-            <li>Fundacja Nowoczesna Polska</li>

             <li>ul. Marszałkowska 84/92 lok. 125</li>
             <li>00-514 Warszawa</li>
           </ul>
             <li>ul. Marszałkowska 84/92 lok. 125</li>
             <li>00-514 Warszawa</li>
           </ul>

-          <ul>
-            <li>tel: <a href="tel:+48226213017">(22) 621-30-17</a></li>
-            <li>e-mail: <a href="mailto:fundacja@nowoczesnapolska.org.pl">fundacja@nowoczesnapolska.org.pl</a></li>
+          <ul class="teal">
+            <li>tel. <a href="#">(22) 621 30 17</a></li>
+            <li>email <a href="#">fundacja@nowoczesnapolska.org.pl</a></li>

           </ul>
         </div>
           </ul>
         </div>

-      </div>
-      <div class="l-footer__row">
-        <p>
-          Nowa strona biblioteki Wolne Lektury powstała dzięki środkom otrzymanym w ramach Programu Operacyjnego Fundusz
-          Inicjatyw Obywatelskich, Senatu RP (zadanie realizowane w ramach zlecania przez Kancelarię Senatu zadań
-          w zakresie opieki nad Polonią i Polakami za granicą w 2011 r.) oraz Narodowego Instytutu Audiowizualnego
-          w ramach programu Dziedzictwo Cyfrowe.
-        </p>
+        <div class="l-footer__row">
+          <div>
+            Wolne Lektury to projekt prowadzony przez fundację <a href="#">Nowoczesna Polska</a>. <br>
+            Hosting: <a href="#">ICM</a>.
+          </div>
+          <div>
+            <a href="#"><img src="{% static '2022/images/MKiDN.png' %}" alt="MKiDN"></a>
+          </div>
+          <div>
+            Strona biblioteki Wolne Lektury powstała dzięki dofinansowaniu ze środków Ministra <a href="#">Kultury i Dziedzictwa Narodowego</a>
+            pochodzących z <a href="#">Funduszu Promocji Kultury</a> – państwowego funduszu celowego.
+          </div>
+        </div>

       </div>
     </div>
 
       </div>
     </div>
 

-    <script src="{% static '2021/scripts/vendor.js' %}"></script>
-    <script src="{% static '2021/scripts/main.js' %}"></script>
+    <script src="{% static '2022/scripts/vendor.js' %}"></script>
+    <script src="{% static '2022/scripts/main.js' %}"></script>
+    {% javascript '2022_player' %}

   </body>
 </html>
   </body>
 </html>

diff --git a/src/catalogue/templates/catalogue/snippets/2022_jplayer.html b/src/catalogue/templates/catalogue/snippets/2022_jplayer.html
new file mode 100644 (file)
index 0000000..9201e72
--- /dev/null
+++ b/src/catalogue/templates/catalogue/snippets/2022_jplayer.html
@@ -0,0 +1,70 @@
+{% load i18n catalogue_tags %}
+
+<div class="c-media__player" id="jp_container_{{ book.pk }}">
+  <div class="jp-jplayer" data-player="jp_container_{{ book.pk }}"
+       data-supplied="oga,mp3"></div>
+
+  <div class="c-player">
+    <button class="c-player__btn jp-play">
+      <i class="icon icon-play"></i>
+    </button>
+    <button class="c-player__btn jp-pause">
+      <i class="icon icon-play"></i>
+    </button>
+    <div class="c-player__timeline">
+      <div class="c-player__title">
+      </div>
+      <div class="c-player__info"></div>
+      <span>
+        <span class="jp-seek-bar">
+          <span class="jp-play-bar"></span>
+        </span>
+      </span>
+      <time class="c-player__length">
+        <span class="jp-current-time"></span>
+        <span>
+          <span class="jp-duration"></span>
+        </span>
+      </time>
+    </div>
+  </div>
+  <div class="c-media__caption">
+    <div class="license"></div>
+    <div class="project-logo"></div>
+    <div class="content"></div>
+  </div>
+
+  <ul class="jp-playlist" style="display: none;">
+    {% for i in book.get_audiobooks.0 %}
+      <li
+          data-mp3='{{ i.mp3.file.url }}'
+          data-ogg='{{ i.ogg.file.url }}'
+          data-media-id="{{ i.mp3.id }}"
+      >
+        {% with extra_info=i.mp3.get_extra_info_json %}
+          <span class="title">
+            {{ i.mp3.part_name }}
+          </span>
+          <span class="attribution">
+            {% trans "Artist:" %}&nbsp;<span class='artist'>{{ extra_info.artist_name }}</span>,
+            {% trans "director:" %}&nbsp;<span class='director'>{{ extra_info.director_name }}</span>
+          </span>
+          <span class="license">
+            {% if extra_info.license %}{% license_icon extra_info.license %}{% endif %}
+          </span>
+          <span class="project-icon">
+            {% if i.mp3.project_icon %}<img class="project-icon" src="{{ i.mp3.project_icon }}">{% endif %}
+          </span>
+          <span class="project-description">
+            {% if i.mp3.project_description %}{{ i.mp3.project_description }}{% else %}
+              {% with fb=extra_info.funded_by %}
+                {% if fb %}Dofinansowano ze środków: {{ fb }}.{% endif %}
+              {% endwith %}
+           {% endif %}
+          </span>
+       {% endwith %}
+      </li>
+    {% endfor %}
+  </ul>
+
+</div>

diff --git a/src/social/templatetags/social_tags.py b/src/social/templatetags/social_tags.py
index 434277a..0135792 100644 (file)
--- a/src/social/templatetags/social_tags.py
+++ b/src/social/templatetags/social_tags.py
@@ -6,7 +6,7 @@ from django import template
 from django.utils.functional import lazy
 from django.utils.cache import add_never_cache_headers
 from catalogue.models import Book
 from django.utils.functional import lazy
 from django.utils.cache import add_never_cache_headers
 from catalogue.models import Book

-from social.utils import likes, get_or_choose_cite
+from social.utils import likes, get_or_choose_cite, choose_cite as cs

 from ..models import Carousel, Cite
 
 register = template.Library()
 from ..models import Carousel, Cite
 
 register = template.Library()


@@ -24,6 +24,11 @@ def choose_cite(context, book_id=None, tag_ids=None):
     return get_or_choose_cite(request, book_id, tag_ids)
 
 
     return get_or_choose_cite(request, book_id, tag_ids)
 
 

+@register.simple_tag
+def choose_cites(book, number):
+    return  book.choose_fragments(number) # todo: cites?
+
+

 @register.simple_tag(takes_context=True)
 def book_shelf_tags(context, book_id):
     request = context['request']
 @register.simple_tag(takes_context=True)
 def book_shelf_tags(context, book_id):
     request = context['request']

diff --git a/src/wolnelektury/settings/static.py b/src/wolnelektury/settings/static.py
index b7beb79..5bde617 100644 (file)
--- a/src/wolnelektury/settings/static.py
+++ b/src/wolnelektury/settings/static.py
@@ -22,11 +22,12 @@ IMAGE_DIR = 'book/pictures/'
 
 PIPELINE = {
     'STYLESHEETS': {
 
 PIPELINE = {
     'STYLESHEETS': {

-        '2021': {
+        '2022': {

             'source_filenames': [
             'source_filenames': [

-                '2021/css/main.scss',
+                '2022/styles/main.scss',
+                '2022/more.scss',

             ],
             ],

-            'output_filename': 'css/compressed/2021.css',
+            'output_filename': 'css/compressed/2022.css',

         },
         'main': {
             # styles both for mobile and for big screen
         },
         'main': {
             # styles both for mobile and for big screen


@@ -141,6 +142,14 @@ PIPELINE = {
             ],
             'output_filename': 'js/player.min.js',
         },
             ],
             'output_filename': 'js/player.min.js',
         },

+        '2022_player': {
+            'source_filenames': [
+                'jplayer/jquery.jplayer.min.js',
+                'jplayer/jplayer.playlist.min.js',
+                'player/2022_player.js',
+            ],
+            'output_filename': 'js/2022_player.min.js',
+        },

         'book': {
             'source_filenames': [
                 'js/contrib/jquery.eventdelegation.js',
         'book': {
             'source_filenames': [
                 'js/contrib/jquery.eventdelegation.js',

diff --git a/src/wolnelektury/static/2022/fonts/subset-Canela-Light.ttf b/src/wolnelektury/static/2022/fonts/subset-Canela-Light.ttf
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/fonts/subset-Canela-Light.woff b/src/wolnelektury/static/2022/fonts/subset-Canela-Light.woff
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/fonts/subset-Canela-Light.woff2 b/src/wolnelektury/static/2022/fonts/subset-Canela-Light.woff2
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/fonts/subset-Canela-LightItalic.ttf b/src/wolnelektury/static/2022/fonts/subset-Canela-LightItalic.ttf
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/fonts/subset-Canela-LightItalic.woff b/src/wolnelektury/static/2022/fonts/subset-Canela-LightItalic.woff
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/fonts/subset-Canela-LightItalic.woff2 b/src/wolnelektury/static/2022/fonts/subset-Canela-LightItalic.woff2
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/fonts/subset-FuturaPT-Book.ttf b/src/wolnelektury/static/2022/fonts/subset-FuturaPT-Book.ttf
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/fonts/subset-FuturaPT-Book.woff b/src/wolnelektury/static/2022/fonts/subset-FuturaPT-Book.woff
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/fonts/subset-FuturaPT-Book.woff2 b/src/wolnelektury/static/2022/fonts/subset-FuturaPT-Book.woff2
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/images/arrow-left.png b/src/wolnelektury/static/2022/images/arrow-left.png
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/images/arrow-right.png b/src/wolnelektury/static/2022/images/arrow-right.png
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/more.scss b/src/wolnelektury/static/2022/more.scss
new file mode 100644 (file)
index 0000000..604c24d
--- /dev/null
+++ b/src/wolnelektury/static/2022/more.scss
@@ -0,0 +1,3 @@
+.l-books__item {
+    width: 212px;
+}

diff --git a/src/wolnelektury/static/2022/styles/ajax-loader.gif b/src/wolnelektury/static/2022/styles/ajax-loader.gif
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/styles/components/_media.scss b/src/wolnelektury/static/2022/styles/components/_media.scss
index 5613607..520654d 100644 (file)
--- a/src/wolnelektury/static/2022/styles/components/_media.scss
+++ b/src/wolnelektury/static/2022/styles/components/_media.scss
@@ -48,6 +48,10 @@
   align-items: center;
   justify-content: space-between;
 
   align-items: center;
   justify-content: space-between;
 

+  .project-logo {
+      padding-left: 35px;
+  }
+  

   .icons {}
   .content {
     padding-left: 35px;
   .icons {}
   .content {
     padding-left: 35px;

diff --git a/src/wolnelektury/static/2022/styles/components/_player.scss b/src/wolnelektury/static/2022/styles/components/_player.scss
index fbc861c..ce90ee8 100644 (file)
--- a/src/wolnelektury/static/2022/styles/components/_player.scss
+++ b/src/wolnelektury/static/2022/styles/components/_player.scss
@@ -64,13 +64,20 @@
     height: 10px;
     width: 100%;
     display: block;
     height: 10px;
     width: 100%;
     display: block;

-    background: #FFFFFF;
+    background: #f2f2f2;

     border-radius: 5px;
     position: relative;
     overflow: hidden;
 
     border-radius: 5px;
     position: relative;
     overflow: hidden;
 

-    span {
-      width: 40%;
+    span.jp-seek-bar {
+      height: 100%;
+      position: absolute;
+      border-radius: 5px;
+      background-color: #fff;
+      top: 0; left: 0;
+    }
+    
+    span.jp-play-bar {

       height: 100%;
       position: absolute;
       border-radius: 5px;
       height: 100%;
       position: absolute;
       border-radius: 5px;


@@ -80,6 +87,19 @@
   }
 }
 
   }
 }
 

+.c-player__title {
+  top: -27px;
+  left: 0;
+  position: absolute;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 140%;
+  letter-spacing: 0.05em;
+  color: #083F4D;
+}
+
+

 .c-player__info {
   top: -27px;
   right: 0;
 .c-player__info {
   top: -27px;
   right: 0;


@@ -97,7 +117,7 @@
   display: block;
   position: relative;
 
   display: block;
   position: relative;
 

-  span {
+  > span {

     position: absolute;
     padding-top: 10px;
     font-style: normal;
     position: absolute;
     padding-top: 10px;
     font-style: normal;

diff --git a/src/wolnelektury/static/2022/styles/fonts/slick.eot b/src/wolnelektury/static/2022/styles/fonts/slick.eot
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/styles/fonts/slick.svg b/src/wolnelektury/static/2022/styles/fonts/slick.svg
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/styles/fonts/slick.ttf b/src/wolnelektury/static/2022/styles/fonts/slick.ttf
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/styles/fonts/slick.woff b/src/wolnelektury/static/2022/styles/fonts/slick.woff
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/wolnelektury/static/2022/styles/layout/_author.scss b/src/wolnelektury/static/2022/styles/layout/_author.scss
index 2cbaa5c..f88eb54 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_author.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_author.scss
@@ -62,6 +62,20 @@
     line-height: 150%;
     color: #474747;
   }
     line-height: 150%;
     color: #474747;
   }

+  dd, dt {
+    font-weight: normal;
+    font-size: 18px;
+    line-height: 150%;
+    color: #474747; 
+  }
+  dt {
+      float: left;
+      clear: left;
+      margin-right: .4em;
+  }
+  dd {
+      margin-left: 0;
+  }

 }
 
 .l-author__photo {
 }
 
 .l-author__photo {


@@ -126,8 +140,14 @@
       line-height: 140%;
       letter-spacing: -0.02em;
       color: #083F4D;
       line-height: 140%;
       letter-spacing: -0.02em;
       color: #083F4D;

+
+      p {
+          font-size: inherit;
+          line-height: inherit;
+          margin-top: 0;
+      }

     }
     }

-    p {
+    > p {

       font-style: normal;
       font-weight: normal;
       font-size: 15px;
       font-style: normal;
       font-weight: normal;
       font-size: 15px;

diff --git a/src/wolnelektury/static/2022/styles/layout/_content.scss b/src/wolnelektury/static/2022/styles/layout/_content.scss
index ec3c2bc..5aa0630 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_content.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_content.scss
@@ -1,4 +1,5 @@
 .l-content {
   padding-bottom: 30px;
   padding-left: 50px;
 .l-content {
   padding-bottom: 30px;
   padding-left: 50px;

+  width: 100%;

 }
 }

diff --git a/src/wolnelektury/static/2022/styles/main.css b/src/wolnelektury/static/2022/styles/main.css
deleted file mode 100644 (file)
index 91e14c0..0000000
--- a/src/wolnelektury/static/2022/styles/main.css
+++ /dev/null
@@ -1,44 +0,0 @@
-@charset "UTF-8";
-/*! -------------------------------------------*\
-*
-* Project Info
-*
-* @name     WolneLektury.pl
-* @version  0.0.1
-* @updated  13.10.2021
-*
-* @website  #
-*
-* @author   intui.eu
-*
-\*-------------------------------------------*/
-/*!*/
-/*! ------------------------------
-    Utils Module
------------------------------- */
-/*!*/@-webkit-keyframes slide-up{0%{opacity:0}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}@keyframes slide-up{0%{opacity:0}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}
-/*! ------------------------------
-    Vendors Module
------------------------------- */
-/*!*/
-/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{color:currentColor;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects;-webkit-transition:color .35s cubic-bezier(0,0,.2,1),border-bottom-color .35s cubic-bezier(0,0,.2,1);transition:color .35s cubic-bezier(0,0,.2,1),border-bottom-color .35s cubic-bezier(0,0,.2,1)}a:hover{border-bottom-color:transparent;color:#018189}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}html{font-weight:400;font-family:Source Sans Pro,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}p{line-height:1.35;font-size:1.125rem;margin-bottom:0}ol,p,ul{margin-top:1.5rem}ol,ul{margin-bottom:1.5rem}ol li,ul li{line-height:30px}ol ol,ol ul,ul ol,ul ul{margin-top:0;margin-bottom:0}blockquote{margin-bottom:1.5rem}blockquote,h1,h2,h3,h4,h5,h6{line-height:1.35;margin-top:1.5rem}h1,h2,h3,h4,h5,h6{font-family:Source Sans Pro,sans-serif;font-weight:400;margin-bottom:0}.h1,h1{font-size:72px;font-size:4.5rem}.h1,.h2,h1,h2{margin-top:3rem}.h2,h2{font-size:52px;font-size:3.25rem;font-size:2.625rem}.h3,h3{font-size:38px;font-size:2.375rem;font-size:2rem}.h4,h4{font-size:1.5rem}h5{font-size:.4713333333333333rem}h6{font-size:.3535rem}table{margin-top:1.5rem;border-spacing:0;border-collapse:collapse}table td,table th{padding:0;line-height:1.35}code{vertical-align:bottom}.lead{font-size:1.414rem}.hug{margin-top:0}a{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}.slick-slider{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list,.slick-slider{position:relative;display:block}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translateZ(0);transform:translateZ(0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:""}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}.slick-loading .slick-list{background:#fff url(ajax-loader.gif) 50% no-repeat}@font-face{font-family:slick;font-weight:400;font-style:normal;src:url(fonts/slick.eot);src:url(fonts/slick.eot?#iefix) format("embedded-opentype"),url(fonts/slick.woff) format("woff"),url(fonts/slick.ttf) format("truetype"),url(fonts/slick.svg#slick) format("svg")}.slick-next,.slick-prev{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:16px;height:28px;padding:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;border:none}.slick-next,.slick-next:focus,.slick-next:hover,.slick-prev,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:none;background:transparent}.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}.slick-next:before,.slick-prev:before{font-family:slick;font-size:20px;line-height:1;opacity:1;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:16px;height:28px}.slick-prev{left:-25px}[dir=rtl] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:"";display:block;background:url(../images/arrow-left.png) 50% no-repeat}[dir=rtl] .slick-prev:before{content:"→"}.slick-next{right:-25px}[dir=rtl] .slick-next{right:auto;left:-25px}.slick-next:before{content:"";display:block;background:url(../images/arrow-right.png) 50% no-repeat}[dir=rtl] .slick-next:before{content:"←"}.slick-dotted.slick-slider{margin-bottom:30px}.slick-dots{position:absolute;bottom:-45px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;margin:0 5px;padding:0}.slick-dots li,.slick-dots li button{width:10px;height:10px;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;padding:5px;color:transparent;border:0;outline:none;background:transparent}.slick-dots li button:focus,.slick-dots li button:hover{outline:none}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}.slick-dots li button:before{font-size:0;line-height:20px;position:absolute;top:0;left:0;width:10px;height:10px;border-radius:50%;background-color:#fff;content:"";text-align:center;opacity:1;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-dots li.slick-active button:before{opacity:1;background-color:#007880}
-
-/*! ------------------------------
-    Base Module
------------------------------- */
-/*!*/*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}:focus{outline:2px auto #000;outline-offset:2px}body,html{-webkit-overflow-scrolling:auto}body{color:#000;background-color:#fff;overflow-x:hidden}body.using-mouse :focus{outline:0!important}.visibility-hidden{visibility:hidden!important}.simpleParallax{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@font-face{font-family:wl;src:url(../fonts/wl.ttf?79zz52) format("truetype"),url(../fonts/wl.woff?79zz52) format("woff"),url(../fonts/wl.svg?79zz52#wl) format("svg");font-weight:400;font-style:normal;font-display:block}[class*=" icon-"],[class^=icon-]{font-family:wl!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-liked:before{content:""}.icon-arrow-right:before{content:""}.icon-arrow-up:before{content:""}.icon-audio:before{content:""}.icon-book:before{content:""}.icon-eye:before{content:""}.icon-play:before{content:""}.icon-quote:before{content:""}.icon-search:before{content:""}.icon-acc-1:before{content:""}.icon-acc-2:before{content:""}.icon-acc-3:before{content:""}.icon-all:before{content:""}.icon-arrow-down:before{content:""}@font-face{font-family:Futura PT;src:url(../fonts/subset-FuturaPT-Book.ttf?20uhbq) format("truetype"),url(../fonts/subset-FuturaPT-Book.woff?20uhbq) format("woff"),url(../fonts/subset-FuturaPT-Book.woff2?20uhbq) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Canela;src:url(../fonts/subset-Canela-Light.ttf?20uhbq) format("truetype"),url(../fonts/subset-Canela-Light.woff?20uhbq) format("woff"),url(../fonts/subset-Canela-Light.woff2?20uhbq) format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Canela;src:url(../fonts/subset-Canela-LightItalic.ttf?20uhbq) format("truetype"),url(../fonts/subset-Canela-LightItalic.woff) format("woff"),url(../fonts/subset-Canela-LightItalic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
-
-/*! ------------------------------
-    Layout Module
------------------------------- */
-/*!*/.l-navigation{max-width:100%;margin:0 auto;background-color:#083f4d;padding:12px 0}.l-navigation,.l-navigation .l-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.l-navigation__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:0;padding:0;margin:0;outline:0}.l-naviagion__search{width:60%;max-width:580px;margin-left:60px;margin-right:auto}.l-naviagion__search input{font-family:Source Sans Pro,sans-serif;font-size:18px;font-style:italic;border:0;padding:10px;border-radius:52px;width:100%;max-width:580px;outline:0}.l-navigation__actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.l-navigation__actions .icon-liked{color:#85c7cc;font-size:30px;margin-right:25px}.l-header{width:100%;max-width:1140px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:0 auto 55px}.l-header,.l-header__content{display:-webkit-box;display:-ms-flexbox;display:flex}.l-header__content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.l-header__content p{margin-top:0;font-weight:600;font-size:21px;line-height:140%;letter-spacing:-.01em;color:#007880}.l-header__content h1{font-weight:700;font-size:37px;line-height:130%;letter-spacing:-.01em;color:#083f4d;margin:0}.l-header__content ul{letter-spacing:-.02em;color:#96c13d;font-weight:700;font-size:24px;font-size:1.5rem;list-style:none;line-height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0;margin:0}.l-header__content ul li{margin-right:10px}.l-header__content ul li:not(:last-child):after{content:"/";margin-left:10px}.l-header__actions .l-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background:transparent;cursor:pointer}.l-main{margin:0 auto;max-width:1140px}.l-aside{color:#666;max-width:240px;width:100%}.l-aside figure{font-size:0;margin:7px 0 100px}.l-aside .l-aside__info+.l-aside__zbiory{margin-top:15px}.l-aside__info{padding:0;margin:0;list-style:none;font-size:15px}.l-aside__info li{line-height:26px}.l-aside__info li span{color:#007880}.l-aside__info li a:hover{text-decoration:underline}.l-aside__zbiory{padding:0;margin:0;list-style:none;font-size:15px}.l-aside__zbiory>li>a{color:#007880}.l-aside__zbiory>li ul{margin-left:9px;list-style:none;border-left:1px solid #d9d9d9;padding:0 0 0 15px}.l-aside__zbiory>li ul li{line-height:35px}.l-aside__zbiory li{line-height:26px}.l-aside__zbiory li span{color:#007880}.l-aside__zbiory li a:hover{text-decoration:underline}.l-article{color:#666}.l-article h3{font-weight:600;font-size:21.5px;line-height:140%;border-bottom:1px solid #d9d9d9;padding-bottom:15px;padding-top:5px;letter-spacing:-.01em;color:#007880}.l-article p{font-weight:400;font-size:18px;line-height:150%;color:#474747}.l-article__lead{margin-top:0;font-weight:300;font-size:24px;font-size:1.5rem;font-family:Source Sans Pro,sans-serif;line-height:166%}.l-author,.l-section{display:-webkit-box;display:-ms-flexbox;display:flex}.l-author{width:100%;padding:50px 0;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.l-author h2{font-weight:600;font-size:21.5px;line-height:140%;border-bottom:1px solid #d9d9d9;padding-bottom:15px;padding-top:5px;letter-spacing:-.01em;color:#007880;margin:0 0 23px}.l-author .row{width:100%}.l-author .row:first-child div{display:-webkit-box;display:-ms-flexbox;display:flex}.l-author .row:first-child h2{width:100%}.l-author .row:first-child .l-author__photo{width:100%;max-width:238px}.l-author .row:nth-child(2){max-width:415px;padding-top:48px;padding-left:32px}.l-author__info{min-width:364px}.l-author__info h3{margin:0;font-weight:600;font-size:31px;line-height:140%;letter-spacing:-.01em;color:#007880}.l-author__info p{margin-top:20px;font-weight:400;font-size:18px;line-height:150%;color:#474747}.l-author__photo{margin:0 50px 0 0}.l-author__photo img{border-radius:10px;overflow:hidden}.l-author__photo figcaption{margin-top:5px;font-weight:400;font-size:15px;line-height:160%;color:grey}.l-author__quotes{background:#e1f1f2;border-radius:10px;padding:48px 32px 40px;position:relative}.l-author__quotes:before{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;content:"";top:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-family:wl!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#fff;background-color:#007880;font-size:33px;width:60px;height:60px;border-radius:50%;position:absolute}.l-author__quotes:before,.l-author__quotes__slider{display:-webkit-box;display:-ms-flexbox;display:flex}.l-author__quotes__slider div em{font-style:italic;font-weight:300;font-size:28px;line-height:140%;letter-spacing:-.02em;color:#083f4d}.l-author__quotes__slider div p{font-style:normal;font-weight:400;font-size:15px;line-height:160%;color:#007880}.l-author__quotes__slider__item{max-width:336px;outline:0}.l-themes__wrapper{width:100%}.l-themes__wrapper h2{font-weight:600;font-size:21.5px;line-height:140%;border-bottom:1px solid #d9d9d9;padding-bottom:15px;padding-top:5px;letter-spacing:-.01em;color:#007880;margin:0 0 23px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.l-themes__wrapper h2,.l-themes__wrapper h2 a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.l-themes__wrapper h2 a{font-weight:700;font-size:16px;color:#474747}.l-themes__wrapper h2 a:hover span{text-decoration:underline}.l-themes__wrapper h2 a .icon{color:#007880;font-size:10px;margin-left:10px}.l-themes__wrapper .links{display:-webkit-box;display:-ms-flexbox;display:flex;list-style:none;padding:0;margin:65px 0 0}.l-themes__wrapper .links li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.l-themes__wrapper .links li:not(:last-child){padding-right:12px}.l-themes__wrapper .links li:not(:last-child):after{margin-left:12px;content:"";height:70%;width:1px;background-color:#007880;display:block}.l-themes__wrapper .links li a{font-weight:400;font-size:15px;line-height:160%;color:grey}.l-themes__wrapper .links li a:hover{text-decoration:underline}.l-themes{margin-top:15px}.l-themes ul{padding:0;margin:0;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.l-themes ul li{width:16.66666666666667%;margin-bottom:17px;font-weight:400;font-size:18px;line-height:150%;color:#474747}.l-themes ul li span{color:#007880}.l-themes ul li a:hover{text-decoration:underline}.l-themes button{font-weight:700;font-size:24px;font-size:1.5rem;line-height:28px;text-align:center;-webkit-text-decoration-line:underline;text-decoration-line:underline;color:#666;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;padding:0;border:0;cursor:pointer;display:block;margin:43px auto 0}.l-books__wrapper{margin-top:27px;width:100%;background-color:#f2f2f2;padding-top:38px;position:relative;padding-bottom:80px}.l-books__wrapper h2{font-weight:600;font-size:31px;line-height:140%;letter-spacing:-.01em;color:#474747;margin-top:0}.l-books{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:36px}.l-books__item{background:#fff;border-radius:9px;padding:21px;-webkit-box-shadow:0 4px 10px transparent;box-shadow:0 4px 10px transparent;-webkit-transition:all .35s cubic-bezier(.25,1,.5,1);transition:all .35s cubic-bezier(.25,1,.5,1)}.l-books__item:not(:last-child){margin-right:20px}.l-books__item:hover{-webkit-box-shadow:0 4px 10px rgba(0,0,0,.25);box-shadow:0 4px 10px rgba(0,0,0,.25)}.l-books__item.l-books__item--link{width:212px;height:350px;background-color:#007880;font-weight:600;font-size:21.5px;line-height:140%;letter-spacing:-.01em;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.l-books__item.l-books__item--link .icon-link{margin-left:auto;margin-right:0}.l-books__item.l-books__item--link .icon-link:hover{text-decoration:none}.l-books__item.l-books__item--link a:hover{color:#fff}.l-books__item a:hover{text-decoration:underline}.l-books__item h2{font-weight:400;font-size:18px;line-height:150%;color:#474747;margin:0}.l-books__item h3{font-weight:400;font-size:15px;line-height:160%;color:grey;margin:0}.l-books__item__img{font-size:0;margin:0 0 11px}.l-books__item__img img{max-width:170px}.l-button.l-button--media{font-size:1rem;border:2px solid #d5eced;border-radius:5px;padding:19px 20px;cursor:pointer;-webkit-transition:all .35s cubic-bezier(.25,1,.5,1);transition:all .35s cubic-bezier(.25,1,.5,1);background-color:#fff;outline:0;font-weight:700;font-size:16px;line-height:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;letter-spacing:-.01em;color:#007880;font-family:Source Sans Pro,sans-serif}.l-button.l-button--media .icon{font-size:21px;margin-right:15px}.l-button.l-button--media:hover{background-color:#d5eced}.l-button.l-button--media.l-button--media--full{color:#fff;background:#083f4d;border:2px solid #083f4d}.l-button.l-button--media.l-button--media--full:hover{background:#073744;border-color:#073744}.l-footer{color:#fff;background:#083f4d;margin:0 auto;padding-top:27px;padding-bottom:38px}.l-footer__row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.l-footer__row:first-child{padding-bottom:25px;border-bottom:1px solid #007880}.l-footer__row:nth-child(2){margin-top:25px}.l-footer__row:nth-child(2) div:first-child{max-width:315px;min-width:270px;padding-right:53px;border-right:1px solid #007880}.l-footer__row:nth-child(2) div:nth-child(3){max-width:483px}.l-footer__row:nth-child(2) div a{color:#85c7cc}.l-footer__row:nth-child(2) div a:hover{color:#85c7cc;text-decoration:underline}.l-footer__row ul{margin:0;padding:0;list-style:none}.l-footer__row ul li{font-weight:400;font-size:21px;line-height:150%}.l-footer__row ul:first-of-type{margin-left:90px;margin-right:auto}.l-footer__row ul:nth-of-type(2){margin-left:10px;margin-right:auto}.l-footer__row ul.teal{color:#85c7cc}.l-footer__row ul.teal a{color:#fff}.l-footer__row ul.teal a:hover{text-decoration:underline}.l-container{width:100%;max-width:1140px;margin:0 auto}.l-breadcrumb{display:-webkit-box;display:-ms-flexbox;display:flex;margin:18px 0;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.l-breadcrumb a{font-size:15px;line-height:160%;color:#474747}.l-breadcrumb a:hover span{text-decoration:underline}.l-breadcrumb a:not(:last-child):after{font-size:9px;color:#007880;content:"";margin:0 14px;font-family:wl!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.l-content{padding-bottom:30px;padding-left:50px}
-
-/*! ------------------------------
-    Components Module
------------------------------- */
-/*!*/.c-hamburger{display:-webkit-box;display:-ms-flexbox;display:flex;height:19px;-webkit-transition:-webkit-transform .4s cubic-bezier(0,0,.2,1);transition:-webkit-transform .4s cubic-bezier(0,0,.2,1);transition:transform .4s cubic-bezier(0,0,.2,1);transition:transform .4s cubic-bezier(0,0,.2,1),-webkit-transform .4s cubic-bezier(0,0,.2,1);-webkit-backface-visibility:hidden;backface-visibility:hidden;position:relative;cursor:pointer;border:0;margin:0;padding:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}@media only screen and (max-width:1024px){.c-hamburger{margin-right:0}}.c-hamburger:after{content:attr(data-label);-webkit-transform:translateX(50%);transform:translateX(50%);font-size:18px;font-size:1.125rem;top:-3px;left:-7px;font-weight:500;padding-left:17px;position:absolute;-webkit-transition:color .3s cubic-bezier(0,0,.2,1);transition:color .3s cubic-bezier(0,0,.2,1)}.c-hamburger.is-clicked{z-index:17}@media only screen and (max-width:1024px){.c-hamburger.is-clicked{position:fixed;top:2rem;right:1rem}}.c-hamburger.is-clicked:after{color:#000}.c-hamburger .bar,.c-hamburger .bar:after,.c-hamburger .bar:before{width:35px;height:3px;border-radius:10px}.c-hamburger .bar{position:relative;-webkit-transform:translateY(8px);transform:translateY(8px);background-color:#85c7cc;-webkit-transition:all 0ms .3s;transition:all 0ms .3s}.c-hamburger .bar:after,.c-hamburger .bar:before{left:0;content:"";position:absolute;bottom:8px;background-color:#85c7cc}.c-hamburger .bar:before{bottom:8px;-webkit-transition:bottom .3s cubic-bezier(0,0,.2,1) .3s,background-color .3s cubic-bezier(0,0,.2,1),-webkit-transform .3s cubic-bezier(0,0,.2,1);transition:bottom .3s cubic-bezier(0,0,.2,1) .3s,background-color .3s cubic-bezier(0,0,.2,1),-webkit-transform .3s cubic-bezier(0,0,.2,1);transition:bottom .3s cubic-bezier(0,0,.2,1) .3s,transform .3s cubic-bezier(0,0,.2,1),background-color .3s cubic-bezier(0,0,.2,1);transition:bottom .3s cubic-bezier(0,0,.2,1) .3s,transform .3s cubic-bezier(0,0,.2,1),background-color .3s cubic-bezier(0,0,.2,1),-webkit-transform .3s cubic-bezier(0,0,.2,1)}.c-hamburger .bar:after{top:8px;-webkit-transition:top .3s cubic-bezier(0,0,.2,1) .3s,background-color .3s cubic-bezier(0,0,.2,1),-webkit-transform .3s cubic-bezier(0,0,.2,1);transition:top .3s cubic-bezier(0,0,.2,1) .3s,background-color .3s cubic-bezier(0,0,.2,1),-webkit-transform .3s cubic-bezier(0,0,.2,1);transition:top .3s cubic-bezier(0,0,.2,1) .3s,transform .3s cubic-bezier(0,0,.2,1),background-color .3s cubic-bezier(0,0,.2,1);transition:top .3s cubic-bezier(0,0,.2,1) .3s,transform .3s cubic-bezier(0,0,.2,1),background-color .3s cubic-bezier(0,0,.2,1),-webkit-transform .3s cubic-bezier(0,0,.2,1)}.c-hamburger .bar.animate{background-color:hsla(0,0%,100%,0)}.c-hamburger .bar.animate:before{bottom:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:bottom .3s cubic-bezier(0,0,.2,1),-webkit-transform .3s cubic-bezier(0,0,.2,1) .3s;transition:bottom .3s cubic-bezier(0,0,.2,1),-webkit-transform .3s cubic-bezier(0,0,.2,1) .3s;transition:bottom .3s cubic-bezier(0,0,.2,1),transform .3s cubic-bezier(0,0,.2,1) .3s;transition:bottom .3s cubic-bezier(0,0,.2,1),transform .3s cubic-bezier(0,0,.2,1) .3s,-webkit-transform .3s cubic-bezier(0,0,.2,1) .3s}.c-hamburger .bar.animate:after{top:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:top .3s cubic-bezier(0,0,.2,1),-webkit-transform .3s cubic-bezier(0,0,.2,1) .3s;transition:top .3s cubic-bezier(0,0,.2,1),-webkit-transform .3s cubic-bezier(0,0,.2,1) .3s;transition:top .3s cubic-bezier(0,0,.2,1),transform .3s cubic-bezier(0,0,.2,1) .3s;transition:top .3s cubic-bezier(0,0,.2,1),transform .3s cubic-bezier(0,0,.2,1) .3s,-webkit-transform .3s cubic-bezier(0,0,.2,1) .3s}.c-media{margin:0 auto}.c-media__actions{display:-webkit-box;display:-ms-flexbox;display:flex}.c-media__btn{width:100%;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.c-media__btn:first-child{padding-right:19px}.c-media__btn:nth-child(2){padding-left:19px;padding-right:19px}.c-media__btn:nth-child(3){padding-left:19px}.c-media__btn .l-button{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.c-media__player{margin-top:35px}.c-media__player h2{font-weight:700;font-size:16px;font-size:1rem;line-height:19px;text-align:center;letter-spacing:.01em;color:#666;margin:0}.c-media__caption{color:#474747;background:#f2f2f2;padding:15px 24px;border-radius:0 0 5px 5px;max-width:830px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.c-media__caption .content{padding-left:35px;width:calc(100% - 145px)}.c-media__caption .icon{color:grey;font-size:26px}.c-media__caption .icon:not(:last-child){margin-right:16px}.c-media__caption p{margin:0;color:#474747;font-weight:400;font-size:12px;line-height:140%}.c-media__popup{position:fixed;z-index:10;top:0;left:0;width:100%;height:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(0,0,0,.35);display:none}.c-media__popup.is-open{display:-webkit-box;display:-ms-flexbox;display:flex}.c-media__popup__box{background-color:#fff;min-width:640px;position:relative;border-radius:10px;overflow:hidden}.c-media__popup__box__lead{padding:40px;background:#083f4d}.c-media__popup__box__lead h2{margin-top:0;font-weight:600;font-size:25px;line-height:140%;letter-spacing:-.01em;color:#fff}.c-media__popup__box__lead p{letter-spacing:.01em;margin-top:0;font-weight:400;font-size:18px;line-height:150%;color:#d5eced}.c-media__popup__box__items{padding:40px}.c-media__popup__box__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding:20px 0}.c-media__popup__box__item:not(:last-child){border-bottom:1px solid #d9d9d9}.c-media__popup__box__item h3{margin-top:0;font-weight:700;font-size:18px;line-height:166%;letter-spacing:-.005em;color:#474747;border-bottom:0;padding:0}.c-media__popup__box__item p{margin-top:10px;max-width:390px;font-weight:400;font-size:15px;line-height:160%;color:grey}.c-media__popup__box__item ul{list-style:none;padding:0;margin:10px 0 0}.c-media__popup__box__item ul li{line-height:1}.c-media__popup__box__item ul li:not(:last-child){margin-bottom:15px}.c-media__popup__box__item ul li a{font-weight:400;font-size:14px;line-height:16px;letter-spacing:.01em;text-decoration:underline;color:#666}.c-media__popup__box__item ul li a:hover{text-decoration:none}.c-media__popup__box__item .l-button{padding:6px 10px;min-width:120px;display:block;text-align:center;color:#fff;background:#007880;border:2px solid #007880}.c-media__popup__box__item .l-button:hover{background:#006e76;border-color:#006e76}.c-media__popup__close{position:absolute;padding:0;border:0;outline:0;cursor:pointer;font-size:0;background-color:transparent;top:35px;right:40px;-webkit-transition:all .35s cubic-bezier(.25,1,.5,1);transition:all .35s cubic-bezier(.25,1,.5,1);opacity:.75}.c-media__popup__close:hover{opacity:1}.c-player{width:100%;position:relative;padding:25px 34px;background-color:#d5eced;border-radius:5px}.c-player,.c-player__btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.c-player__btn{background:#fff;border:0;outline:0;border-radius:50%;padding:0;width:60px;height:60px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;-webkit-transition:all .35s cubic-bezier(.25,1,.5,1);transition:all .35s cubic-bezier(.25,1,.5,1)}.c-player__btn:hover{background:#083f4d}.c-player__btn:hover .icon{color:#fff}.c-player__btn .icon{color:#007880;font-size:26px;position:relative;left:3px;-webkit-transition:all .35s cubic-bezier(.25,1,.5,1);transition:all .35s cubic-bezier(.25,1,.5,1)}.c-player__timeline{max-width:590px;width:calc(100% - 60px);margin-left:auto;margin-right:0;position:relative}.c-player__timeline:before{content:"1×";font-weight:700;font-size:15px;line-height:120%;text-align:center;color:#007880;position:absolute;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:auto auto auto -70px}.c-player__timeline>span{height:10px;width:100%;display:block;background:#fff;border-radius:5px;position:relative;overflow:hidden}.c-player__timeline>span span{width:40%;height:100%;position:absolute;border-radius:5px;background-color:#083f4d;top:0;left:0}.c-player__info{top:-27px;right:0;position:absolute;font-style:normal;font-weight:400;font-size:12px;line-height:140%;letter-spacing:.05em;color:#083f4d}.c-player__length{width:100%;display:block;position:relative}.c-player__length span{position:absolute;padding-top:10px;font-style:normal;font-weight:400;font-size:12px;line-height:140%;letter-spacing:.05em;color:#083f4d}.c-player__length span:first-child{left:0}.c-player__length span:nth-child(2){right:0}.c-support{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:50px;background:#fff1bf url(../images/bg.png) top no-repeat;border-radius:15px;overflow:hidden;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.c-support h2{padding-left:44px;padding-right:20px;margin:0 auto;font-style:italic;font-weight:300;font-size:48px;line-height:72px;letter-spacing:-.02em;color:#333}.c-support figure{margin:0;font-size:0;position:relative}.c-support a{bottom:34px;left:0;right:0;width:100%;margin:0 auto;max-width:343px;position:absolute;font-weight:600;font-size:22px;line-height:28px;color:#333;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;padding:12px 22px 14px 28px;background:#fff1bf;-webkit-box-shadow:0 0 6px rgba(0,0,0,.5);box-shadow:0 0 6px rgba(0,0,0,.5);border-radius:5px;-webkit-transition:all .35s cubic-bezier(.25,1,.5,1);transition:all .35s cubic-bezier(.25,1,.5,1)}.c-support a:hover{background:#fbc40f}
-
-/*! ------------------------------
-    Pages Module
------------------------------- */
-/*!*/
\ No newline at end of file