Audiobook player UI updated

diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js
index b79abf8..c456b6c 100644 (file)
--- a/src/wolnelektury/static/2021/scripts/main.js
+++ b/src/wolnelektury/static/2021/scripts/main.js
@@ -30,16 +30,65 @@
 
 // Ebook/Audiobook Btns
 (function() {
-  let button = $('.c-media__btn button');
+  let button = $('.c-media__btn button:not(.l-button--media--full)');
+  let popupLayer = $('.c-media__popup');
   let closeButton = $('.c-media__popup__close');
+  let playButton = $('.c-player__btn--md');
+  let chaptersButton = $('.c-player__chapters span');
+  let select = $('.c-select');
+  let selectItem = $('.c-select li');
+  let volumeButton = $('.icon-volume');
+
+  playButton.on('click', function() {
+    if($(this).find('.icon').hasClass('icon-play')) {
+      $(this).find('.icon-play').removeClass('icon-play').addClass('icon-pause');
+    } else if($(this).find('.icon').hasClass('icon-pause')) {
+      $(this).find('.icon-pause').removeClass('icon-pause').addClass('icon-play');
+    }
+  });
 
   button.on('click', function () {
     let target = $(this).attr('id');
     $('[data-popup=' + target).addClass('is-open');
+    $('body').addClass('popup-open');
   });
 
   closeButton.on('click', function() {
     $(this).closest('.c-media__popup').removeClass('is-open');
+    $('body').removeClass('popup-open');
+  });
+
+  popupLayer.on('click', function(e) {
+    let _this = $(this);
+    if($(e.target).is(popupLayer)) {
+      _this.removeClass('is-open');
+      $('body').removeClass('popup-open');
+    }
+  });
+
+  chaptersButton.on('click', function() {
+    $(this).parent().toggleClass('is-active');
+  });
+
+  select.on('click', function() {
+    $(this).toggleClass('is-active');
+  });
+
+  selectItem.on('click', function() {
+    selectItem.removeClass('is-active');
+    $(this).addClass('is-active');
+  });
+
+  volumeButton.on('click', function() {
+    if($(this).hasClass('icon-volume')) {
+      $(this).removeClass('icon-volume').addClass('icon-mute');
+      $(this).next().val(0);
+      $(this).next().css('background-size', '0% 100%');
+    } else if($(this).hasClass('icon-mute')) {
+      $(this).removeClass('icon-mute').addClass('icon-volume');
+      $(this).next().val(50);
+      $(this).next().css('background-size', '50% 100%');
+    }
   });
 
   $(document).keyup(function(e) {
@@ -49,6 +98,40 @@
   });
 })();
 
+// Range
+const rangeInputs = document.querySelectorAll('input[type="range"]')
+
+function handleInputChange(e) {
+  let target = e.target
+  if (e.target.type !== 'range') {
+    target = document.getElementById('range')
+  }
+  const min = target.min
+  const max = target.max
+  const val = target.value
+
+  target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%'
+}
+
+rangeInputs.forEach(input => {
+  input.addEventListener('input', handleInputChange)
+});
+
+// Quotes slider
+(function () {
+  let slider = $('.l-author__quotes__slider');
+
+  slider.slick({
+    slidesToScroll: 1,
+    slidesToShow: 1,
+    infinite: true,
+    dots: true,
+    arrows: false,
+    autoplay: true,
+    autoplaySpeed: 2500
+  });
+})();
+
 // Text overlay toggler
 (function () {
   let overlays = $('.l-article__overlay');
@@ -93,4 +176,29 @@
   }
 
   if($change.length) { change(); }
-})();
\ No newline at end of file
+})();
+
+//Switch
+(function() {
+  let $switchOnce = $('#switch-once');
+  let $switchMonthly = $('#switch-monthly');
+
+  $switchMonthly.on('click', function() {
+    $('.l-checkout__payments__box').removeClass('once');
+  });
+
+  $switchOnce.on('click', function() {
+    $('.l-checkout__payments__box').addClass('once');
+  });
+})();
+
+//Copy function
+(function() {
+  let $copy = $('.js-copy');
+
+  $copy.on('click', function() {
+    let $copyText = $(this).closest('.l-checkout__info__item').find('input');
+    $copyText.select();
+    document.execCommand('copy');
+  });
+})();

diff --git a/src/wolnelektury/static/2022/fonts/wl.svg b/src/wolnelektury/static/2022/fonts/wl.svg
index c5fbd3e..284c0f8 100644 (file)
--- a/src/wolnelektury/static/2022/fonts/wl.svg
+++ b/src/wolnelektury/static/2022/fonts/wl.svg
@@ -1,26 +1,47 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
+<metadata>
+<json>
+<![CDATA[
+{
+       "fontFamily": "wl",
+       "fontURL": "https://intui.eu/",
+       "description": "pomorskie.travel\nFont generated by IcoMoon.",
+       "majorVersion": 1,
+       "minorVersion": 0,
+       "version": "Version 1.0",
+       "fontId": "wl",
+       "psName": "wl",
+       "subFamily": "Regular",
+       "fullName": "wl"
+}
+]]>
+</json>
+</metadata>
 <defs>
 <font id="wl" horiz-adv-x="1024">
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xe900;" glyph-name="liked" d="M943.879 799.839c106.828-106.827 106.828-280.029 0-386.854l-45.025-45.025 0.476-0.476-326.405-326.405c-33.386-33.386-87.515-33.386-120.9 0l-119.795 119.795c-4.826 4.196-9.54 8.592-14.132 13.183s-8.988 9.307-13.186 14.135l-224.792 224.794c-106.827 106.825-106.827 280.027 0 386.854s280.026 106.827 386.854 0l45.025-45.025 45.025 45.025c106.828 106.827 280.027 106.827 386.855 0z" />
-<glyph unicode="&#xe901;" glyph-name="arrow-right" d="M286.416-64c-34.306 0-68.613 11.436-91.483 34.306-45.742 45.742-34.306 114.354 11.436 160.096l354.498 308.756-354.498 320.192c-45.742 45.742-57.177 114.354-11.436 160.096s114.354 57.177 160.096 11.436l457.416-400.239c34.306-11.436 45.742-45.742 45.742-80.047s-11.436-68.613-34.306-91.483l-457.416-400.239c-22.871-11.436-57.177-22.871-80.047-22.871z" />
-<glyph unicode="&#xe902;" glyph-name="arrow-up" d="M943.944 170.652c-15.792 0-39.481 7.896-55.272 23.688l-379.010 339.531-379.010-339.531c-31.585-31.585-78.96-23.688-110.545 7.896s-23.688 78.96 7.896 110.545l434.283 394.803c31.585 23.688 78.96 23.688 102.649 0l434.283-394.803c31.585-31.585 31.585-78.96 7.896-110.545-23.688-23.688-39.481-31.585-63.168-31.585z" />
-<glyph unicode="&#xe903;" glyph-name="audio" d="M52.349 89.217c-30.643 0-51.072 20.429-51.072 51.072v306.434c0 30.643 20.429 51.072 51.072 51.072s51.072-20.429 51.072-51.072v-306.434c0-30.643-20.429-51.072-51.072-51.072zM971.651 89.217c-30.643 0-51.072 20.429-51.072 51.072v306.434c0 30.643 20.429 51.072 51.072 51.072s51.072-20.429 51.072-51.072v-306.434c0-30.643-20.429-51.072-51.072-51.072zM869.506-64c-86.823 0-153.217 66.394-153.217 153.217v255.362c0 86.823 66.394 153.217 153.217 153.217s153.217-66.394 153.217-153.217v-255.362c0-86.823-66.394-153.217-153.217-153.217zM869.506 395.651c-30.643 0-51.072-20.429-51.072-51.072v-255.362c0-30.643 20.429-51.072 51.072-51.072s51.072 20.429 51.072 51.072v255.362c0 30.643-20.429 51.072-51.072 51.072zM154.494-64c-86.823 0-153.217 66.394-153.217 153.217v255.362c0 86.823 66.394 153.217 153.217 153.217s153.217-66.394 153.217-153.217v-255.362c0-86.823-66.394-153.217-153.217-153.217zM154.494 395.651c-30.643 0-51.072-20.429-51.072-51.072v-255.362c0-30.643 20.429-51.072 51.072-51.072s51.072 20.429 51.072 51.072v255.362c0 30.643-20.429 51.072-51.072 51.072zM1022.724 446.723h-102.145c0 56.179-10.214 107.252-30.643 158.324s-51.072 91.93-86.823 132.788c-35.75 35.75-81.716 66.394-132.788 86.823-102.145 40.858-214.504 40.858-311.542 0-51.072-20.429-91.93-51.072-132.788-86.823-40.858-40.858-71.502-86.823-91.93-132.788-20.429-51.072-30.643-102.145-30.643-158.324h-102.145c0 66.394 15.322 132.788 40.858 194.075s61.287 117.466 107.252 168.538c45.965 45.965 102.145 86.823 163.431 112.359 122.574 51.072 265.576 51.072 393.257 0 61.287-25.536 117.466-61.287 163.431-112.359s86.823-102.145 112.359-163.431c25.536-66.394 40.858-132.788 40.858-199.182z" />
-<glyph unicode="&#xe904;" glyph-name="book" d="M934.956-64h-712.348c-75.687 0-133.565 57.878-133.565 133.565s57.878 133.565 133.565 133.565h712.348v-267.13zM222.608 114.087c-26.713 0-44.522-17.809-44.522-44.522s17.809-44.522 44.522-44.522h623.304v89.043h-623.304zM178.086 69.565h-89.043v756.87c0 75.687 57.878 133.565 133.565 133.565h712.348v-801.391h-89.043v712.348h-623.304c-26.713 0-44.522-17.809-44.522-44.522v-756.87zM756.869 425.739h-445.217v311.652h445.217v-311.652zM400.695 514.783h267.13v133.565h-267.13v-133.565z" />
-<glyph unicode="&#xe905;" glyph-name="eye" d="M65.422 442.311l-48.356 28.444-17.067-28.444 17.067-28.444 48.356 28.444zM958.578 442.311l48.356-28.444 17.067 28.444-17.067 28.444-48.356-28.444zM116.622 416.711c76.8 136.533 224.711 230.4 395.378 230.4v113.778c-213.333 0-398.222-116.622-494.933-290.133l99.556-54.044zM512 647.111c170.667 0 318.578-93.867 395.378-230.4l99.556 56.889c-96.711 170.667-281.6 287.289-494.933 287.289v-113.778zM910.222 470.756c-79.644-130.844-227.556-221.867-398.222-221.867v-113.778c210.489 0 398.222 110.933 494.933 278.756l-96.711 56.889zM512 248.889c-170.667 0-318.578 91.022-398.222 221.867l-99.556-56.889c99.556-167.822 287.289-278.756 497.778-278.756v113.778zM520.533 192c-142.222 0-256 113.778-256 256s113.778 256 256 256c142.222 0 256-113.778 256-256s-113.778-256-256-256zM520.533 647.111c-110.933 0-199.111-88.178-199.111-199.111s88.178-199.111 199.111-199.111c110.933 0 199.111 88.178 199.111 199.111s-88.178 199.111-199.111 199.111zM577.422 448c0-31.419-25.47-56.889-56.889-56.889s-56.889 25.47-56.889 56.889c0 31.419 25.47 56.889 56.889 56.889s56.889-25.47 56.889-56.889z" />
-<glyph unicode="&#xe906;" glyph-name="play" d="M878.774 488.792c28.733-19.607 28.733-61.981 0-81.587l-677.875-462.529c-32.782-22.367-77.222 1.107-77.222 40.794v925.058c0 39.686 44.44 63.163 77.222 40.795l677.875-462.53z" />
-<glyph unicode="&#xe907;" glyph-name="pause" d="M155.826 960h222.609v-1024h-222.609v1024zM645.565 960h222.609v-1024h-222.609v1024z" />
-<glyph unicode="&#xe908;" glyph-name="quote" d="M1024 613.025c0 62.061-22.053 114.718-66.157 157.972-44.106 43.254-97.798 64.882-161.078 64.882-63.283 0-117.934-21.627-163.955-64.882-44.106-43.254-66.16-95.912-66.16-157.972 0-60.18 16.3-112.838 48.901-157.972 32.597-43.256 79.58-64.881 140.943-64.881-19.177-69.585-62.321-157.032-129.437-262.349-3.835-3.761-5.753-8.462-5.753-14.103s5.753-14.106 17.259-25.389c13.421-13.163 28.762-19.748 46.021-19.748h2.877c19.177 0 37.395 8.465 54.651 25.389 61.366 56.419 136.152 152.331 224.362 287.735 36.433 58.3 55.609 133.526 57.527 225.676v5.642zM457.349 604.563c0 62.061-22.053 114.718-66.16 157.972-44.103 43.254-97.796 64.882-161.077 64.882s-117.933-21.627-163.955-64.882c-44.105-43.254-66.157-94.971-66.157-155.152 0-62.061 16.3-114.718 48.899-157.971 32.599-45.137 79.581-67.705 140.944-67.705-19.176-69.582-62.322-157.032-129.438-262.346-3.835-3.761-5.753-8.462-5.753-14.103 0-5.644 5.753-15.047 17.258-28.21 13.423-11.286 28.764-16.927 46.022-16.927h2.877c19.176 0 37.393 8.462 54.652 25.389 61.363 56.419 136.149 152.331 224.359 287.735 36.436 58.3 55.613 133.523 57.53 225.675v5.642z" />
-<glyph unicode="&#xe909;" glyph-name="search" d="M447.767 66.327c-245.76 0-446.836 201.077-446.836 446.836s201.077 446.836 446.836 446.836c245.76 0 446.836-201.077 446.836-446.836s-201.077-446.836-446.836-446.836zM447.767 848.291c-186.182 0-335.128-148.946-335.128-335.128s148.946-335.128 335.128-335.128c186.182 0 335.128 148.946 335.128 335.128s-148.946 335.128-335.128 335.128zM969.076-64c-14.895 0-29.789 3.723-40.96 14.895l-223.419 223.419c-22.342 22.342-22.342 55.854 0 78.196s55.854 22.342 78.196 0l223.419-223.419c22.342-22.342 22.342-55.854 0-78.196-7.447-11.17-22.342-14.895-37.236-14.895z" />
-<glyph unicode="&#xe90a;" glyph-name="acc-1" d="M511.063 959.999c143.218 0 265.157-50.001 365.718-149.954 48.132-48.145 84.724-103.17 109.714-165.027 24.978-61.873 37.506-127.537 37.506-197.027 0-70.097-12.367-135.778-37.025-197.010-24.686-61.251-61.121-115.361-109.249-162.292-49.967-49.361-106.657-87.17-170.067-113.376-63.378-26.21-128.914-39.314-196.565-39.314-67.647 0-132.416 12.93-194.289 38.865-61.857 25.888-117.33 63.378-166.403 112.435-49.073 49.054-86.401 104.385-112.002 165.955-25.6 61.566-38.401 126.464-38.401 194.737 0 67.667 12.944 132.722 38.849 195.203s63.553 118.402 112.914 167.779c97.521 99.33 217.283 149.026 359.3 149.026zM512.922 867.647c-117.027 0-215.477-40.849-295.334-122.514-40.24-40.849-71.169-86.705-92.802-137.602-21.664-50.896-32.464-104.081-32.464-159.554 0-54.867 10.8-107.744 32.464-158.61 21.649-50.928 52.561-96.339 92.802-136.259 40.225-39.936 85.617-70.384 136.242-91.443 50.576-21.024 103.619-31.535 159.092-31.535 54.847 0 108 10.642 159.571 31.984 51.503 21.362 97.934 52.114 139.41 92.337 79.84 78.017 119.745 175.844 119.745 293.51 0 56.69-10.37 110.32-31.090 160.914-20.689 50.593-50.881 95.682-90.463 135.33-82.337 82.289-181.366 123.442-297.173 123.442zM506.502 533l-68.592-35.663c-7.326 15.214-16.301 25.903-26.959 32-10.673 6.081-20.577 9.137-29.729 9.137-45.696 0-68.577-30.161-68.577-90.514 0-27.424 5.792-49.345 17.36-65.808 11.584-16.467 28.656-24.706 51.217-24.706 29.871 0 50.898 14.639 63.104 43.89l63.074-32.004c-13.407-25.005-32-44.654-55.776-58.975-23.745-14.336-49.967-21.488-78.625-21.488-45.713 0-82.609 14.001-110.642 42.063-28.033 28.034-42.049 67.040-42.049 117.012 0 48.766 14.176 87.457 42.513 116.114 28.336 28.64 64.145 42.976 107.442 42.976 63.41 0.032 108.801-24.656 136.24-74.034zM801.819 533l-67.663-35.663c-7.314 15.214-16.321 25.903-26.978 32-10.689 6.081-20.913 9.137-30.625 9.137-45.71 0-68.592-30.161-68.592-90.514 0-27.424 5.809-49.345 17.376-65.808 11.567-16.467 28.625-24.706 51.216-24.706 29.842 0 50.881 14.639 63.059 43.89l64-32.004c-14.001-25.005-32.91-44.654-56.655-58.975-23.776-14.336-49.684-21.488-77.714-21.488-46.336 0-83.346 14.001-111.057 42.063-27.778 28.034-41.633 67.040-41.633 117.012 0 48.766 14.159 87.457 42.528 116.114 28.321 28.64 64.13 42.976 107.41 42.976 63.393 0.032 108.528-24.656 135.329-74.034z" />
-<glyph unicode="&#xe90b;" glyph-name="acc-2" d="M511.121 960c138.279 0 254.925-49.36 349.877-148.112 95.508-99.36 143.309-220.656 143.309-363.888 0-143.856-46.907-263.617-140.694-359.298-99.631-101.805-217.123-152.702-352.492-152.702-133.060 0-248.506 50.306-346.368 150.879-96.692 100.576-145.061 220.928-145.061 361.121 0 140.176 48.369 261.472 145.061 363.872 94.954 98.768 210.385 148.128 346.368 148.128zM512.877 867.648c-111.94 0-206.586-40.848-283.955-122.512-80.308-85.344-120.446-184.402-120.446-297.152 0-113.376 39.846-211.519 119.538-294.368 79.708-82.912 174.646-124.337 284.832-124.337 109.584 0 205.139 41.712 286.598 125.251 77.371 77.407 116.047 175.23 116.047 293.486 0 116.417-39.274 215.44-117.784 297.136-78.525 81.664-173.477 122.496-284.83 122.496zM644.753 575.088v-209.358h-56.245v-248.674h-152.986v248.659h-56.246v209.374c0 9.152 3.077 16.912 9.215 23.312 6.169 6.384 13.646 9.6 22.415 9.6h202.216c8.2 0 15.537-3.2 21.969-9.6 6.416-6.4 9.661-14.176 9.661-23.312zM443.415 706.736c0 48.128 22.847 72.224 68.584 72.224s68.569-24.064 68.569-72.224c0-47.536-22.863-71.312-68.569-71.312s-68.584 23.776-68.584 71.312z" />
-<glyph unicode="&#xe90c;" glyph-name="acc-3" d="M511.087 960c143.218 0 264.499-49.68 363.874-149.040 99.328-98.752 149.039-219.728 149.039-362.96 0-143.265-48.786-263.314-146.322-360.224-102.991-101.183-225.213-151.776-366.592-151.776-138.382 0-258.446 50.286-360.222 150.863-100.56 100.561-150.864 220.912-150.864 361.121 0 139.568 50.304 260.56 150.864 362.96 99.344 99.376 219.424 149.056 360.222 149.056zM512.915 867.648c-116.417 0-214.85-41.152-295.314-123.44-83.52-84.736-125.264-183.474-125.264-296.208 0-113.999 41.44-212.114 124.32-294.4 82.896-82.912 181.633-124.337 296.222-124.337 113.971 0 213.346 41.744 298.067 125.251 80.463 78.013 120.686 175.837 120.686 293.486 0 117.008-40.846 215.76-122.494 296.208-81.073 82.32-179.826 123.44-296.224 123.44zM284.337 520.239c9.744 62.785 35.024 111.393 75.872 145.825 40.834 34.432 90.498 51.648 149.023 51.648 80.431 0 144.463-25.92 192-77.696 47.537-51.808 71.314-118.257 71.314-199.314 0-78.639-24.69-143.998-74.031-196.096-49.408-52.094-113.376-78.175-192.035-78.175-57.903 0-107.886 17.361-149.934 52.114-42.064 34.749-67.344 84.11-75.888 148.11h128.944c3.040-62.176 40.527-93.263 112.463-93.263 35.938 0 64.914 15.553 86.851 46.624 21.965 31.071 32.941 72.543 32.941 124.337 0 54.256-10.063 95.535-30.161 123.887-20.126 28.336-49.054 42.512-86.879 42.512-68.289 0-106.673-30.16-115.2-90.497h37.49l-101.474-101.486-101.488 101.486 40.192-0.016z" />
-<glyph unicode="&#xe90d;" glyph-name="all" d="M512.001-60.661c-17.809 0-35.617 4.452-48.974 17.809-26.713 26.713-26.713 66.783 0 93.496l396.243 396.243-396.243 396.243c-26.713 26.713-26.713 66.783 0 93.496s66.783 26.713 93.496 0l445.217-445.217c26.713-26.713 26.713-66.783 0-93.496l-445.217-445.217c-8.904-8.904-26.713-13.357-44.522-13.357zM957.218 384.557h-890.435c-35.617 0-66.783 31.165-66.783 66.783s31.165 66.783 66.783 66.783h890.435c35.617 0 66.783-31.165 66.783-66.783s-31.165-66.783-66.783-66.783z" />
-<glyph unicode="&#xe90e;" glyph-name="arrow-down" d="M518.334 167.316c-15.915 0-39.788 7.958-55.702 23.873l-437.659 397.871c-31.83 31.83-31.83 79.574-7.958 111.404 31.83 31.83 79.574 31.83 111.404 7.958l381.956-350.127 381.956 350.127c31.83 31.83 79.574 23.873 111.404-7.958s23.873-79.574-7.958-111.404l-437.659-397.871c0-15.915-23.873-23.873-39.788-23.873z" />
-<glyph unicode="&#xe90f;" glyph-name="close" d="M1003.243 55.93l-392.071 392.071 392.071 392.071c27.676 27.676 27.676 69.189 0 96.865s-69.189 27.676-96.865 0l-396.685-392.071-387.459 392.071c-27.676 23.063-73.802 23.063-101.478 0-23.063-27.676-23.063-73.802 0-101.478l392.071-387.459-392.071-392.071c-27.676-27.676-27.676-69.189 0-96.865s69.189-27.676 96.865 0l392.071 392.071 392.071-392.071c27.676-27.676 69.189-27.676 96.865 0 27.676 23.063 27.676 69.189 4.612 96.865z" />
+<glyph unicode="&#xe900;" glyph-name="liked" data-tags="liked" d="M943.879 799.839c106.828-106.827 106.828-280.029 0-386.854l-45.025-45.025 0.476-0.476-326.405-326.405c-33.386-33.386-87.515-33.386-120.9 0l-119.795 119.795c-4.826 4.196-9.54 8.592-14.132 13.183s-8.988 9.307-13.186 14.135l-224.792 224.794c-106.827 106.825-106.827 280.027 0 386.854s280.026 106.827 386.854 0l45.025-45.025 45.025 45.025c106.828 106.827 280.027 106.827 386.855 0z" />
+<glyph unicode="&#xe901;" glyph-name="prev" data-tags="prev" d="M211.532 486.924c-25.572-19.179-25.572-63.929 0-83.108l671.258-460.291c31.965-19.179 76.715 0 76.715 38.358v926.975c0 38.358-44.751 63.929-76.715 38.358l-671.258-460.291zM128.424 960v0c-38.358 0-63.929-25.572-63.929-63.929v-895.010c0-38.358 25.572-63.929 63.929-63.929v0c38.358 0 63.929 25.572 63.929 63.929v895.010c0 38.358-25.572 63.929-63.929 63.929z" />
+<glyph unicode="&#xe902;" glyph-name="next" data-tags="next" d="M812.468 486.923c25.572-19.179 25.572-63.929 0-83.108l-671.258-460.291c-31.965-19.179-76.715 0-76.715 38.358v926.975c0 38.358 44.751 63.929 76.715 38.358l671.258-460.291zM895.576 960v0c38.358 0 63.929-25.572 63.929-63.929v-895.010c0-38.358-25.572-63.929-63.929-63.929v0c-38.358 0-63.929 25.572-63.929 63.929v895.010c0 38.358 25.572 63.929 63.929 63.929z" />
+<glyph unicode="&#xe903;" glyph-name="audio" data-tags="audio" d="M52.349 89.217c-30.643 0-51.072 20.429-51.072 51.072v306.434c0 30.643 20.429 51.072 51.072 51.072s51.072-20.429 51.072-51.072v-306.434c0-30.643-20.429-51.072-51.072-51.072zM971.651 89.217c-30.643 0-51.072 20.429-51.072 51.072v306.434c0 30.643 20.429 51.072 51.072 51.072s51.072-20.429 51.072-51.072v-306.434c0-30.643-20.429-51.072-51.072-51.072zM869.506-64c-86.823 0-153.217 66.394-153.217 153.217v255.362c0 86.823 66.394 153.217 153.217 153.217s153.217-66.394 153.217-153.217v-255.362c0-86.823-66.394-153.217-153.217-153.217zM869.506 395.651c-30.643 0-51.072-20.429-51.072-51.072v-255.362c0-30.643 20.429-51.072 51.072-51.072s51.072 20.429 51.072 51.072v255.362c0 30.643-20.429 51.072-51.072 51.072zM154.494-64c-86.823 0-153.217 66.394-153.217 153.217v255.362c0 86.823 66.394 153.217 153.217 153.217s153.217-66.394 153.217-153.217v-255.362c0-86.823-66.394-153.217-153.217-153.217zM154.494 395.651c-30.643 0-51.072-20.429-51.072-51.072v-255.362c0-30.643 20.429-51.072 51.072-51.072s51.072 20.429 51.072 51.072v255.362c0 30.643-20.429 51.072-51.072 51.072zM1022.724 446.723h-102.145c0 56.179-10.214 107.252-30.643 158.324s-51.072 91.93-86.823 132.788c-35.75 35.75-81.716 66.394-132.788 86.823-102.145 40.858-214.504 40.858-311.542 0-51.072-20.429-91.93-51.072-132.788-86.823-40.858-40.858-71.502-86.823-91.93-132.788-20.429-51.072-30.643-102.145-30.643-158.324h-102.145c0 66.394 15.322 132.788 40.858 194.075s61.287 117.466 107.252 168.538c45.965 45.965 102.145 86.823 163.431 112.359 122.574 51.072 265.576 51.072 393.257 0 61.287-25.536 117.466-61.287 163.431-112.359s86.823-102.145 112.359-163.431c25.536-66.394 40.858-132.788 40.858-199.182z" />
+<glyph unicode="&#xe904;" glyph-name="book" data-tags="book" d="M934.956-64h-712.348c-75.687 0-133.565 57.878-133.565 133.565s57.878 133.565 133.565 133.565h712.348v-267.13zM222.608 114.087c-26.713 0-44.522-17.809-44.522-44.522s17.809-44.522 44.522-44.522h623.304v89.043h-623.304zM178.086 69.565h-89.043v756.87c0 75.687 57.878 133.565 133.565 133.565h712.348v-801.391h-89.043v712.348h-623.304c-26.713 0-44.522-17.809-44.522-44.522v-756.87zM756.869 425.739h-445.217v311.652h445.217v-311.652zM400.695 514.783h267.13v133.565h-267.13v-133.565z" />
+<glyph unicode="&#xe905;" glyph-name="eye" data-tags="eye" d="M65.422 442.311l-48.356 28.444-17.067-28.444 17.067-28.444 48.356 28.444zM958.578 442.311l48.356-28.444 17.067 28.444-17.067 28.444-48.356-28.444zM116.622 416.711c76.8 136.533 224.711 230.4 395.378 230.4v113.778c-213.333 0-398.222-116.622-494.933-290.133l99.556-54.044zM512 647.111c170.667 0 318.578-93.867 395.378-230.4l99.556 56.889c-96.711 170.667-281.6 287.289-494.933 287.289v-113.778zM910.222 470.756c-79.644-130.844-227.556-221.867-398.222-221.867v-113.778c210.489 0 398.222 110.933 494.933 278.756l-96.711 56.889zM512 248.889c-170.667 0-318.578 91.022-398.222 221.867l-99.556-56.889c99.556-167.822 287.289-278.756 497.778-278.756v113.778zM520.533 192c-142.222 0-256 113.778-256 256s113.778 256 256 256c142.222 0 256-113.778 256-256s-113.778-256-256-256zM520.533 647.111c-110.933 0-199.111-88.178-199.111-199.111s88.178-199.111 199.111-199.111c110.933 0 199.111 88.178 199.111 199.111s-88.178 199.111-199.111 199.111zM577.422 448c0-31.419-25.47-56.889-56.889-56.889s-56.889 25.47-56.889 56.889c0 31.419 25.47 56.889 56.889 56.889s56.889-25.47 56.889-56.889z" />
+<glyph unicode="&#xe906;" glyph-name="play" data-tags="play" d="M901.518 489.138c30.853-20.569 30.853-61.706 0-82.274l-719.901-462.794c-35.995-20.569-82.274 0-82.274 41.137v925.587c0 41.137 46.279 61.706 82.274 41.137l719.901-462.794z" />
+<glyph unicode="&#xe907;" glyph-name="pause" data-tags="pause" d="M155.826 960h222.609v-1024h-222.609v1024zM645.565 960h222.609v-1024h-222.609v1024z" />
+<glyph unicode="&#xe908;" glyph-name="volume" data-tags="volume" d="M714.418 281.676v47.628c33.34 0 61.916 14.288 85.73 33.34 23.814 23.814 33.34 52.391 33.34 85.73s-14.288 61.916-33.34 85.73c-23.814 23.814-52.391 33.34-85.73 33.34v47.628c42.865 0 85.73-19.051 119.070-47.628 33.34-33.34 47.628-76.205 47.628-119.070s-19.051-85.73-47.628-119.070c-33.34-28.577-76.205-47.628-119.070-47.628zM714.418 138.792v47.628c71.442 0 138.121 28.577 185.749 76.205s76.205 114.307 76.205 185.749c0 71.442-28.577 138.121-76.205 185.749s-114.307 76.205-185.749 76.205v47.628c80.967 0 161.935-33.34 219.088-90.493s90.493-138.121 90.493-219.088-33.34-161.935-90.493-219.088c-57.153-57.153-138.121-90.493-219.088-90.493zM500.093 824.634l-309.581-185.749h-95.256c-52.391 0-95.256-42.865-95.256-95.256v-190.512c0-52.391 42.865-95.256 95.256-95.256h95.256l309.581-185.749c28.577-14.288 71.442 0 71.442 28.577v690.605c0 28.577-42.865 47.628-71.442 33.34z" />
+<glyph unicode="&#xe909;" glyph-name="mute" data-tags="mute" d="M461.2 795.344l-285.504-171.303h-87.848c-48.316 0-87.848-39.531-87.848-87.848v-175.695c0-48.316 39.531-87.848 87.848-87.848h87.848l285.504-171.303c26.354-13.177 65.886 0 65.886 26.354v636.894c0 26.354-39.531 43.924-65.886 30.747zM641.982 609.845l31.058 31.058 350.961-350.961-31.058-31.058-350.961 350.961zM641.982 286.838l350.961 350.961 31.058-31.058-350.961-350.961-31.058 31.058z" />
+<glyph unicode="&#xe90a;" glyph-name="quote" data-tags="quote" d="M1024 613.025c0 62.061-22.053 114.718-66.157 157.972-44.106 43.254-97.798 64.882-161.078 64.882-63.283 0-117.934-21.627-163.955-64.882-44.106-43.254-66.16-95.912-66.16-157.972 0-60.18 16.3-112.838 48.901-157.972 32.597-43.256 79.58-64.881 140.943-64.881-19.177-69.585-62.321-157.032-129.437-262.349-3.835-3.761-5.753-8.462-5.753-14.103s5.753-14.106 17.259-25.389c13.421-13.163 28.762-19.748 46.021-19.748h2.877c19.177 0 37.395 8.465 54.651 25.389 61.366 56.419 136.152 152.331 224.362 287.735 36.433 58.3 55.609 133.526 57.527 225.676v5.642zM457.349 604.563c0 62.061-22.053 114.718-66.16 157.972-44.103 43.254-97.796 64.882-161.077 64.882s-117.933-21.627-163.955-64.882c-44.105-43.254-66.157-94.971-66.157-155.152 0-62.061 16.3-114.718 48.899-157.971 32.599-45.137 79.581-67.705 140.944-67.705-19.176-69.582-62.322-157.032-129.438-262.346-3.835-3.761-5.753-8.462-5.753-14.103 0-5.644 5.753-15.047 17.258-28.21 13.423-11.286 28.764-16.927 46.022-16.927h2.877c19.176 0 37.393 8.462 54.652 25.389 61.363 56.419 136.149 152.331 224.359 287.735 36.436 58.3 55.613 133.523 57.53 225.675v5.642z" />
+<glyph unicode="&#xe90b;" glyph-name="search" data-tags="search" d="M447.767 66.327c-245.76 0-446.836 201.077-446.836 446.836s201.077 446.836 446.836 446.836c245.76 0 446.836-201.077 446.836-446.836s-201.077-446.836-446.836-446.836zM447.767 848.291c-186.182 0-335.128-148.946-335.128-335.128s148.946-335.128 335.128-335.128c186.182 0 335.128 148.946 335.128 335.128s-148.946 335.128-335.128 335.128zM969.076-64c-14.895 0-29.789 3.723-40.96 14.895l-223.419 223.419c-22.342 22.342-22.342 55.854 0 78.196s55.854 22.342 78.196 0l223.419-223.419c22.342-22.342 22.342-55.854 0-78.196-7.447-11.17-22.342-14.895-37.236-14.895z" />
+<glyph unicode="&#xe90c;" glyph-name="acc-1" data-tags="acc-1" d="M511.063 959.999c143.218 0 265.157-50.001 365.718-149.954 48.132-48.145 84.724-103.17 109.714-165.027 24.978-61.873 37.506-127.537 37.506-197.027 0-70.097-12.367-135.778-37.025-197.010-24.686-61.251-61.121-115.361-109.249-162.292-49.967-49.361-106.657-87.17-170.067-113.376-63.378-26.21-128.914-39.314-196.565-39.314-67.647 0-132.416 12.93-194.289 38.865-61.857 25.888-117.33 63.378-166.403 112.435-49.073 49.054-86.401 104.385-112.002 165.955-25.6 61.566-38.401 126.464-38.401 194.737 0 67.667 12.944 132.722 38.849 195.203s63.553 118.402 112.914 167.779c97.521 99.33 217.283 149.026 359.3 149.026zM512.922 867.647c-117.027 0-215.477-40.849-295.334-122.514-40.24-40.849-71.169-86.705-92.802-137.602-21.664-50.896-32.464-104.081-32.464-159.554 0-54.867 10.8-107.744 32.464-158.61 21.649-50.928 52.561-96.339 92.802-136.259 40.225-39.936 85.617-70.384 136.242-91.443 50.576-21.024 103.619-31.535 159.092-31.535 54.847 0 108 10.642 159.571 31.984 51.503 21.362 97.934 52.114 139.41 92.337 79.84 78.017 119.745 175.844 119.745 293.51 0 56.69-10.37 110.32-31.090 160.914-20.689 50.593-50.881 95.682-90.463 135.33-82.337 82.289-181.366 123.442-297.173 123.442zM506.502 533l-68.592-35.663c-7.326 15.214-16.301 25.903-26.959 32-10.673 6.081-20.577 9.137-29.729 9.137-45.696 0-68.577-30.161-68.577-90.514 0-27.424 5.792-49.345 17.36-65.808 11.584-16.467 28.656-24.706 51.217-24.706 29.871 0 50.898 14.639 63.104 43.89l63.074-32.004c-13.407-25.005-32-44.654-55.776-58.975-23.745-14.336-49.967-21.488-78.625-21.488-45.713 0-82.609 14.001-110.642 42.063-28.033 28.034-42.049 67.040-42.049 117.012 0 48.766 14.176 87.457 42.513 116.114 28.336 28.64 64.145 42.976 107.442 42.976 63.41 0.032 108.801-24.656 136.24-74.034zM801.819 533l-67.663-35.663c-7.314 15.214-16.321 25.903-26.978 32-10.689 6.081-20.913 9.137-30.625 9.137-45.71 0-68.592-30.161-68.592-90.514 0-27.424 5.809-49.345 17.376-65.808 11.567-16.467 28.625-24.706 51.216-24.706 29.842 0 50.881 14.639 63.059 43.89l64-32.004c-14.001-25.005-32.91-44.654-56.655-58.975-23.776-14.336-49.684-21.488-77.714-21.488-46.336 0-83.346 14.001-111.057 42.063-27.778 28.034-41.633 67.040-41.633 117.012 0 48.766 14.159 87.457 42.528 116.114 28.321 28.64 64.13 42.976 107.41 42.976 63.393 0.032 108.528-24.656 135.329-74.034z" />
+<glyph unicode="&#xe90d;" glyph-name="acc-2" data-tags="acc-2" d="M511.121 960c138.279 0 254.925-49.36 349.877-148.112 95.508-99.36 143.309-220.656 143.309-363.888 0-143.856-46.907-263.617-140.694-359.298-99.631-101.805-217.123-152.702-352.492-152.702-133.060 0-248.506 50.306-346.368 150.879-96.692 100.576-145.061 220.928-145.061 361.121 0 140.176 48.369 261.472 145.061 363.872 94.954 98.768 210.385 148.128 346.368 148.128zM512.877 867.648c-111.94 0-206.586-40.848-283.955-122.512-80.308-85.344-120.446-184.402-120.446-297.152 0-113.376 39.846-211.519 119.538-294.368 79.708-82.912 174.646-124.337 284.832-124.337 109.584 0 205.139 41.712 286.598 125.251 77.371 77.407 116.047 175.23 116.047 293.486 0 116.417-39.274 215.44-117.784 297.136-78.525 81.664-173.477 122.496-284.83 122.496zM644.753 575.088v-209.358h-56.245v-248.674h-152.986v248.659h-56.246v209.374c0 9.152 3.077 16.912 9.215 23.312 6.169 6.384 13.646 9.6 22.415 9.6h202.216c8.2 0 15.537-3.2 21.969-9.6 6.416-6.4 9.661-14.176 9.661-23.312zM443.415 706.736c0 48.128 22.847 72.224 68.584 72.224s68.569-24.064 68.569-72.224c0-47.536-22.863-71.312-68.569-71.312s-68.584 23.776-68.584 71.312z" />
+<glyph unicode="&#xe90e;" glyph-name="acc-3" data-tags="acc-3" d="M511.087 960c143.218 0 264.499-49.68 363.874-149.040 99.328-98.752 149.039-219.728 149.039-362.96 0-143.265-48.786-263.314-146.322-360.224-102.991-101.183-225.213-151.776-366.592-151.776-138.382 0-258.446 50.286-360.222 150.863-100.56 100.561-150.864 220.912-150.864 361.121 0 139.568 50.304 260.56 150.864 362.96 99.344 99.376 219.424 149.056 360.222 149.056zM512.915 867.648c-116.417 0-214.85-41.152-295.314-123.44-83.52-84.736-125.264-183.474-125.264-296.208 0-113.999 41.44-212.114 124.32-294.4 82.896-82.912 181.633-124.337 296.222-124.337 113.971 0 213.346 41.744 298.067 125.251 80.463 78.013 120.686 175.837 120.686 293.486 0 117.008-40.846 215.76-122.494 296.208-81.073 82.32-179.826 123.44-296.224 123.44zM284.337 520.239c9.744 62.785 35.024 111.393 75.872 145.825 40.834 34.432 90.498 51.648 149.023 51.648 80.431 0 144.463-25.92 192-77.696 47.537-51.808 71.314-118.257 71.314-199.314 0-78.639-24.69-143.998-74.031-196.096-49.408-52.094-113.376-78.175-192.035-78.175-57.903 0-107.886 17.361-149.934 52.114-42.064 34.749-67.344 84.11-75.888 148.11h128.944c3.040-62.176 40.527-93.263 112.463-93.263 35.938 0 64.914 15.553 86.851 46.624 21.965 31.071 32.941 72.543 32.941 124.337 0 54.256-10.063 95.535-30.161 123.887-20.126 28.336-49.054 42.512-86.879 42.512-68.289 0-106.673-30.16-115.2-90.497h37.49l-101.474-101.486-101.488 101.486 40.192-0.016z" />
+<glyph unicode="&#xe90f;" glyph-name="all" data-tags="all" d="M512.001-60.661c-17.809 0-35.617 4.452-48.974 17.809-26.713 26.713-26.713 66.783 0 93.496l396.243 396.243-396.243 396.243c-26.713 26.713-26.713 66.783 0 93.496s66.783 26.713 93.496 0l445.217-445.217c26.713-26.713 26.713-66.783 0-93.496l-445.217-445.217c-8.904-8.904-26.713-13.357-44.522-13.357zM957.218 384.557h-890.435c-35.617 0-66.783 31.165-66.783 66.783s31.165 66.783 66.783 66.783h890.435c35.617 0 66.783-31.165 66.783-66.783s-31.165-66.783-66.783-66.783z" />
+<glyph unicode="&#xe910;" glyph-name="arrow-right" data-tags="arrow-right" d="M286.416-64c-34.306 0-68.613 11.436-91.483 34.306-45.742 45.742-34.306 114.354 11.436 160.096l354.498 308.756-354.498 320.192c-45.742 45.742-57.177 114.354-11.436 160.096s114.354 57.177 160.096 11.436l457.416-400.239c34.306-11.436 45.742-45.742 45.742-80.047s-11.436-68.613-34.306-91.483l-457.416-400.239c-22.871-11.436-57.177-22.871-80.047-22.871z" />
+<glyph unicode="&#xe911;" glyph-name="arrow-up" data-tags="arrow-up" d="M943.944 170.652c-15.792 0-39.481 7.896-55.272 23.688l-379.010 339.531-379.010-339.531c-31.585-31.585-78.96-23.688-110.545 7.896s-23.688 78.96 7.896 110.545l434.283 394.803c31.585 23.688 78.96 23.688 102.649 0l434.283-394.803c31.585-31.585 31.585-78.96 7.896-110.545-23.688-23.688-39.481-31.585-63.168-31.585z" />
+<glyph unicode="&#xe912;" glyph-name="arrow-down" data-tags="arrow-down" d="M518.334 167.316c-15.915 0-39.788 7.958-55.702 23.873l-437.659 397.871c-31.83 31.83-31.83 79.574-7.958 111.404 31.83 31.83 79.574 31.83 111.404 7.958l381.956-350.127 381.956 350.127c31.83 31.83 79.574 23.873 111.404-7.958s23.873-79.574-7.958-111.404l-437.659-397.871c0-15.915-23.873-23.873-39.788-23.873z" />
+<glyph unicode="&#xe913;" glyph-name="close" data-tags="close" d="M1003.243 55.93l-392.071 392.071 392.071 392.071c27.676 27.676 27.676 69.189 0 96.865s-69.189 27.676-96.865 0l-396.685-392.071-387.459 392.071c-27.676 23.063-73.802 23.063-101.478 0-23.063-27.676-23.063-73.802 0-101.478l392.071-387.459-392.071-392.071c-27.676-27.676-27.676-69.189 0-96.865s69.189-27.676 96.865 0l392.071 392.071 392.071-392.071c27.676-27.676 69.189-27.676 96.865 0 27.676 23.063 27.676 69.189 4.612 96.865z" />
 </font></defs></svg>
\ No newline at end of file

diff --git a/src/wolnelektury/static/2022/fonts/wl.ttf b/src/wolnelektury/static/2022/fonts/wl.ttf
index 482f6dd..afc7806 100644 (file)
Binary files a/src/wolnelektury/static/2022/fonts/wl.ttf and b/src/wolnelektury/static/2022/fonts/wl.ttf differ

diff --git a/src/wolnelektury/static/2022/fonts/wl.woff b/src/wolnelektury/static/2022/fonts/wl.woff
index 4b6ad00..ec958c5 100644 (file)
Binary files a/src/wolnelektury/static/2022/fonts/wl.woff and b/src/wolnelektury/static/2022/fonts/wl.woff differ

diff --git a/src/wolnelektury/static/2022/index.html b/src/wolnelektury/static/2022/index.html
index 246825a..3eaf87c 100644 (file)
--- a/src/wolnelektury/static/2022/index.html
+++ b/src/wolnelektury/static/2022/index.html
@@ -1,443 +1,496 @@
 <!doctype html>
 <html class="no-js">
-  <head>
-    <meta charset="utf-8">
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>WolneLektury.pl</title>
-    <link rel="apple-touch-icon" href="apple-touch-icon.png">
-    
-    <link rel="stylesheet" href="styles/main.css">
-    <script src="scripts/modernizr.js"></script>
+<head>
+  <meta charset="utf-8">
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>WolneLektury.pl</title>
+  <link rel="apple-touch-icon" href="apple-touch-icon.png">
 
-    <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>
+  <link rel="stylesheet" href="styles/main.css">
+  <script src="scripts/modernizr.js"></script>
 
-    <nav class="l-navigation">
-      <div class="l-container">
-        <a href="/" class="l-navigation__logo">
-          <img src="images/logo.png" alt="WolneLektury.pl">
-        </a>
-        <div class="l-naviagion__search">
-          <input type="text" placeholder="szukaj tytułu, autora, motywów…">
-        </div>
-        <div class="l-navigation__actions">
-          <a href="#"><i class="icon icon-liked"></i></a>
-          <button class="l-navigation__button js-menu" aria-label="Menu">
+  <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">
+  <div class="l-change-pop">
+    <h3>Zmieniamy się!</h3>
+    <p>
+      Jeżeli to czytasz jesteś jedną z osób, której prezentujemy nowy wygląd strony książki.
+      Będziemy bardzo! wdzięczni za Twoją opinię – w prawym dolnym rogu znajdziesz przycisk oceny.
+      Jeżeli wolisz klasyczny wygląd - wystarczy, że <a href="#">klikniesz tutaj</a>
+    </p>
+    <button class="l-change-pop__close">
+      <i class="icon icon-close"></i>
+    </button>
+  </div>
+  <div class="l-container">
+    <a href="/" class="l-navigation__logo">
+      <img src="images/logo.svg" alt="WolneLektury.pl">
+    </a>
+    <div class="l-naviagion__search">
+      <input type="text" placeholder="szukaj tytułu, autora, motywów…">
+    </div>
+    <div class="l-navigation__actions">
+      <a href="#"><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>
-
-    <div class="l-container">
-      <div class="l-breadcrumb">
-        <a href="#"><span>Strona główna</span></a>
-        <a href="#"><span>Literatura</span></a>
-        <a href="#"><span>romantyzm</span></a>
-      </div>
+      </button>
     </div>
+  </div>
+</nav>
 
-    <main class="l-main">
-      <section class="l-section">
-        <aside class="l-aside">
-          <figure>
-            <img src="images/header.jpg" alt="">
-          </figure>
-          <ul class="l-aside__info">
-            <li><span>Epoka:</span> romantyzm</li>
-            <li><span>Rodzaj:</span> dramat</li>
-            <li><span>Gatunek:</span> dramat romantyczny</li>
-          </ul>
-          <ul class="l-aside__zbiory">
-            <li>
-              <a href="#">Dziady</a>
-              <ul>
-                <li><a href="#">Upiór</a></li>
-                <li><a href="#">Dziady, część II</a></li>
-                <li><a href="#">Dziady, część IV</a></li>
-                <li><a href="#">Dziady, część III</a></li>
-              </ul>
-            </li>
+<div class="l-container">
+  <div class="l-breadcrumb">
+    <a href="#"><span>Strona główna</span></a>
+    <a href="#"><span>Literatura</span></a>
+    <a href="#"><span>romantyzm</span></a>
+  </div>
+</div>
+
+<main class="l-main">
+  <section class="l-section">
+    <aside class="l-aside">
+      <figure>
+        <img src="images/header.jpg" alt="">
+      </figure>
+      <ul class="l-aside__info">
+        <li><span>Epoka:</span> romantyzm</li>
+        <li><span>Rodzaj:</span> dramat</li>
+        <li><span>Gatunek:</span> dramat romantyczny</li>
+      </ul>
+      <ul class="l-aside__zbiory">
+        <li>
+          <a href="#">Dziady</a>
+          <ul>
+            <li><a href="#">Upiór</a></li>
+            <li><a href="#">Dziady, część II</a></li>
+            <li><a href="#">Dziady, część IV</a></li>
+            <li><a href="#">Dziady, część III</a></li>
           </ul>
-        </aside>
-        <div class="l-content">
-          <header class="l-header">
-            <div class="l-header__content">
-              <p>Adam Mickiewicz (tłum. Janina Kowalska-Nowak)</p>
-              <h1>Dziady, część IV</h1>
+        </li>
+      </ul>
+    </aside>
+    <div class="l-content">
+      <header class="l-header">
+        <div class="l-header__content">
+          <p>Adam Mickiewicz (tłum. Janina Kowalska-Nowak)</p>
+          <h1>Dziady, część IV</h1>
+        </div>
+        <div class="l-header__actions">
+          <button class="l-button l-button--fav">
+            <img src="images/fav.svg" alt="Dodaj do ulubionych">
+          </button>
+        </div>
+      </header>
+      <article class="l-article">
+        <div class="c-media">
+          <div class="c-media__actions">
+            <div class="c-media__btn">
+              <button class="l-button l-button--media" id="audiobook"><i class="icon icon-audio"></i> pobierz audiobook</button>
             </div>
-            <div class="l-header__actions">
-              <button class="l-button l-button--fav">
-                <img src="images/fav.svg" alt="Dodaj do ulubionych">
-              </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>
-          </header>
-          <article class="l-article">
-            <div class="c-media">
-              <div class="c-media__actions">
-                <div class="c-media__btn">
-                  <button class="l-button l-button--media" id="audiobook"><i class="icon icon-audio"></i> pobierz audiobook</button>
-                </div>
-                <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">
-                  <button class="l-button l-button--media l-button--media--full"><i class="icon icon-eye"></i> czytaj online</button>
+            <div class="c-media__btn">
+              <button class="l-button l-button--media l-button--media--full"><i class="icon icon-eye"></i> czytaj online</button>
+            </div>
+          </div>
+          <div class="c-media__player">
+            <div class="c-player__head">
+              <span>Henryk Sienkiewicz, Potop, Potop, tom pierwszy, tom 1, rozdział 1. Czyta Jasiek Staszczyk, reż. Jasiek Staszczyk</span>
+            </div>
+            <div class="c-player">
+              <div class="c-player__btns">
+                <button><i class="icon icon-prev"></i></button>
+                <button class="c-player__btn--md"><i class="icon icon-play"></i></button>
+                <button><i class="icon icon-next"></i></button>
+                <div class="c-select">
+                  <ul>
+                    <li>2×</li>
+                    <li>1.75×</li>
+                    <li>1.5×</li>
+                    <li>1.25×</li>
+                    <li class="is-active">1×</li>
+                    <li>0.75×</li>
+                    <li>0.5×</li>
+                    <li>0.25×</li>
+                  </ul>
                 </div>
               </div>
-              <div class="c-media__player">
-                <div class="c-player">
-                  <button class="c-player__btn">
-                    <i class="icon icon-play"></i>
-                  </button>
-                  <div class="c-player__timeline">
-                    <div class="c-player__info">Czyta Wiktor Korzeniewski, reż. Adam Bień</div>
-                    <span>
+              <div class="c-player__timeline">
+                <div class="c-player__info">1. <strong>Godzina pierwsza</strong> – godzina miłości</div>
+                <div class="c-player__chapters">
+                  <span>Rozdziały</span>
+                  <ul>
+                    <li>Godzina pierwsza – godzina miłości</li>
+                    <li>Druga godzina – godzina rozpaczy</li>
+                    <li>Trzecia godzina – godzina przestrogi</li>
+                  </ul>
+                </div>
+                <span>
                       <span></span>
                     </span>
-                    <time class="c-player__length">
-                      <span>2:35</span>
-                      <span>60:20</span>
-                    </time>
+                <time class="c-player__length">
+                  <span>2:35</span>
+                  <span>60:20</span>
+                </time>
+              </div>
+              <div class="c-player__volume">
+                <i class="icon icon-volume"></i>
+                <input type="range" value="60" min="0" max="100" id="range" oninput="rangenumber.value=value">
+              </div>
+            </div>
+            <div class="c-media__caption">
+              <div class="icons">
+                <i class="icon icon-acc-1"></i>
+                <i class="icon icon-acc-2"></i>
+                <i class="icon icon-acc-3"></i>
+              </div>
+              <div class="content">
+                <p>Dofinansowano ze środków: Priorytet 4 Udostępnienie publikacji w formatach cyfrowych w ramach Narodowego Programu Rozwoju Czytelnictwa.</p>
+              </div>
+            </div>
+          </div>
+          <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">
+                <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="#" class="l-button l-button--media l-button--media--full">.pdf</a>
                   </div>
                 </div>
-                <div class="c-media__caption">
-                  <div class="icons">
-                    <i class="icon icon-acc-1"></i>
-                    <i class="icon icon-acc-2"></i>
-                    <i class="icon icon-acc-3"></i>
+                <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 class="content">
-                    <p>Dofinansowano ze środków: Priorytet 4 Udostępnienie publikacji w formatach cyfrowych w ramach Narodowego Programu Rozwoju Czytelnictwa.</p>
+                  <div>
+                    <a href="#" class="l-button l-button--media l-button--media--full">.epub</a>
                   </div>
                 </div>
-              </div>
-              <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 class="c-media__popup__box__item">
+                  <div>
+                    <h3>.mobi</h3>
+                    <p>Natywny format dla czytnika Amazon Kindle.</p>
                   </div>
-                  <div class="c-media__popup__box__items">
-                    <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="#" class="l-button l-button--media l-button--media--full">.pdf</a>
-                      </div>
-                    </div>
-                    <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="#" class="l-button l-button--media l-button--media--full">.epub</a>
-                      </div>
-                    </div>
-                    <div class="c-media__popup__box__item">
-                      <div>
-                        <h3>.mobi</h3>
-                        <p>Natywny format dla czytnika Amazon Kindle.</p>
-                      </div>
-                      <div>
-                        <a href="#" class="l-button l-button--media l-button--media--full">.mobi</a>
-                      </div>
-                    </div>
-                    <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 class="c-media__popup__box__item">
-                      <div>
-                        <h3>inne formaty</h3>
-                        <ul>
-                          <li><a href="#">plik tekstowy (.txt)</a></li>
-                          <li><a href="#">FictionBook</a></li>
-                        </ul>
-                      </div>
-                    </div>
+                  <div>
+                    <a href="#" class="l-button l-button--media l-button--media--full">.mobi</a>
                   </div>
-                  <button class="c-media__popup__close">
-                    <img src="images/close.svg" alt="Zamknij">
-                  </button>
                 </div>
-              </div>
-              <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 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 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="#" class="l-button l-button--media l-button--media--full">.mp3</a>
-                      </div>
-                    </div>
-                    <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="#" class="l-button l-button--media l-button--media--full">.ogg</a>
-                      </div>
-                    </div>
-                    <div class="c-media__popup__box__item">
-                      <div>
-                        <h3>DAISY</h3>
-                        <p>Format dla osób z dysfunkcjami czytania.</p>
-                      </div>
-                      <div>
-                        <a href="#" class="l-button l-button--media l-button--media--full">DAISY</a>
-                      </div>
-                    </div>
-                    <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>
+                  <div>
+                    <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
+                  </div>
+                </div>
+                <div class="c-media__popup__box__item">
+                  <div>
+                    <h3>inne formaty</h3>
+                    <ul>
+                      <li><a href="#">plik tekstowy (.txt)</a></li>
+                      <li><a href="#">FictionBook</a></li>
+                    </ul>
                   </div>
-                  <button class="c-media__popup__close">
-                    <img src="images/close.svg" alt="Zamknij">
-                  </button>
                 </div>
               </div>
-            </div>
-
-            <h3>Opis</h3>
-
-            <p>
-              Pericord i Brown dokonali wspólnie wielu wynalazków. Ich umiejętności doskonale się uzupełniają: pierwszy to geniusz twórczy, a drugi — umysł praktyczny, doskonale rozumie projekty współpracownika i wciela je w życie.
-            </p>
-            <p>
-              Wspólnicy pracują nad kolejnym pomysłem — maszyną latającą. Prototyp jest już prawie gotów i niebawem można będzie go przetestować. Na ostatnich etapach pracy między wspólnikami pojawia się kwestia sporna: komu należy się patent? Wynalazcy — autorowi projektu czy mechanikowi — temu, który skonstruował maszynę?
-            </p>
-            <p>
-              Trup w obłokach czyli historia maszyny latającej w powietrzu (oryg. The Great Brown-Pericord Motor) to opowiadanie z dreszczykiem, pióra Arthura Conana Doyle'a, autora Przygód Sherlocka Holmesa.
-            </p>
-          </article>
-        </div>
-      </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>
-          <figure>
-            <img src="images/img-1.jpg" alt="Dorzuć się!">
-            <a href="#">Dorzuć się!</a>
-          </figure>
-        </div>
-      </section>
-      <section class="l-section">
-        <div class="l-author">
-          <div class="row">
-            <h2>O autorze</h2>
-            <div>
-              <figure class="l-author__photo">
-                <img src="images/author.jpg" alt="Adam Mickiewicz">
-                <figcaption>
-                  Źródło: Wikipedia
-                </figcaption>
-              </figure>
-              <article class="l-author__info">
-                <h3>Adam Mickiewicz</h3>
-                <p>
-                  Ur. 24 grudnia 1798 r. w Zaosiu koło Nowogródka <br>
-                  Zm. 26 listopada 1855 r. w Konstantynopolu (dziś: Stambuł)
-                </p>
-                <p>
-                  <strong>Najważniejsze dzieła:</strong> <br>
-                  Ballady i romanse (1822), Grażyna (1823), Sonety krymskie (1826), Konrad Wallenrod (1828),
-                  Dziady (cz.II i IV 1823, cz.III 1832), Księgi narodu polskiego i pielgrzymstwa polskiego (1833),
-                  Pan Tadeusz (1834); wiersze: Oda do młodości (1820), Do Matki Polki (1830), Śmierć pułkownika (1831),
-                  Reduta Ordona (1831)...
-                </p>
-              </article>
+              <button class="c-media__popup__close">
+                <img src="images/close.svg" alt="Zamknij">
+              </button>
             </div>
           </div>
-          <div class="row">
-            <div class="l-author__quotes">
-              <div class="l-author__quotes__slider">
-                <div class="l-author__quotes__slider__item">
-                  <em>
-                    Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten
-                    nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże.
-                  </em>
-                  <p>Adam Mickiewicz – Dziady, część I</p>
+          <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="#" class="l-button l-button--media l-button--media--full">.mp3</a>
+                  </div>
+                </div>
+                <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="#" class="l-button l-button--media l-button--media--full">.ogg</a>
+                  </div>
                 </div>
-                <div class="l-author__quotes__slider__item">
-                  <em>
-                    Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten
-                    nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże.
-                  </em>
-                  <p>Adam Mickiewicz – Dziady, część II</p>
+                <div class="c-media__popup__box__item">
+                  <div>
+                    <h3>DAISY</h3>
+                    <p>Format dla osób z dysfunkcjami czytania.</p>
+                  </div>
+                  <div>
+                    <a href="#" class="l-button l-button--media l-button--media--full">DAISY</a>
+                  </div>
                 </div>
-                <div class="l-author__quotes__slider__item">
-                  <em>
-                    Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten
-                    nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże.
-                  </em>
-                  <p>Adam Mickiewicz – Dziady, część III</p>
+                <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>
               </div>
+              <button class="c-media__popup__close">
+                <img src="images/close.svg" alt="Zamknij">
+              </button>
             </div>
           </div>
         </div>
-      </section>
-      <section class="l-section">
-        <div class="l-themes__wrapper">
-          <h2>Motywy występujące w tym utworze <a href="#"><span>Wszystkie motywy</span> <i class="icon icon-arrow-right"></i></a></h2>
-          <div class="l-themes">
-            <ul>
-              <li><a href="#">alkohol <span>(9)</span></a></li>
-              <li><a href="#">bitwa <span>(9)</span></a></li>
-              <li><a href="#">alkohol <span>(9)</span></a></li>
-              <li><a href="#">antysemityzm <span>(9)</span></a></li>
-              <li><a href="#">bijatyka <span>(9)</span></a></li>
-              <li><a href="#">błądzenie <span>(9)</span></a></li>
-              <li><a href="#">alkohol <span>(9)</span></a></li>
-              <li><a href="#">bitwa <span>(9)</span></a></li>
-              <li><a href="#">alkohol <span>(9)</span></a></li>
-              <li><a href="#">antysemityzm <span>(9)</span></a></li>
-              <li><a href="#">bijatyka <span>(9)</span></a></li>
-              <li><a href="#">błądzenie <span>(9)</span></a></li>
-              <li><a href="#">alkohol <span>(9)</span></a></li>
-              <li><a href="#">bitwa <span>(9)</span></a></li>
-              <li><a href="#">alkohol <span>(9)</span></a></li>
-              <li><a href="#">antysemityzm <span>(9)</span></a></li>
-              <li><a href="#">bijatyka <span>(9)</span></a></li>
-              <li><a href="#">błądzenie <span>(9)</span></a></li>
-              <li><a href="#">bitwa <span>(9)</span></a></li>
-              <li><a href="#">alkohol <span>(9)</span></a></li>
-              <li><a href="#">błądzenie <span>(9)</span></a></li>
-              <li><a href="#">bijatyka <span>(9)</span></a></li>
-              <li><a href="#">błądzenie <span>(9)</span></a></li>
-              <li><a href="#">bijatyka <span>(9)</span></a></li>
-              <li><a href="#">alkohol <span>(9)</span></a></li>
-              <li><a href="#">bitwa <span>(9)</span></a></li>
-              <li><a href="#">alkohol <span>(9)</span></a></li>
-              <li><a href="#">antysemityzm <span>(9)</span></a></li>
-              <li><a href="#">bijatyka <span>(9)</span></a></li>
-              <li><a href="#">błądzenie <span>(9)</span></a></li>
-            </ul>
-          </div>
-          <ul class="links">
-            <li>
-              <a href="#">źródłowy plik XML</a>
-            </li>
-            <li>
-              <a href="#">miksuj treść utworu</a>
-            </li>
-            <li>
-              <a href="#">utwór na Platformie Redakcyjnej</a>
-            </li>
+
+        <div class="l-article__overlay" data-max-height="327">
+          <h3>Opis</h3>
+          <p>
+            Pericord i Brown dokonali wspólnie wielu wynalazków. Ich umiejętności doskonale się uzupełniają:
+            pierwszy to geniusz twórczy, a drugi — umysł praktyczny, doskonale rozumie projekty współpracownika
+            i wciela je w życie.
+          </p>
+          <p>
+            Wspólnicy pracują nad kolejnym pomysłem — maszyną latającą. Prototyp jest już prawie gotów i niebawem
+            można będzie go przetestować. Na ostatnich etapach pracy między wspólnikami pojawia się kwestia sporna:
+            komu należy się patent? Wynalazcy — autorowi projektu czy mechanikowi — temu, który skonstruował maszynę?
+          </p>
+          <p>
+            Trup w obłokach czyli historia maszyny latającej w powietrzu (oryg. The Great Brown-Pericord Motor)
+            to opowiadanie z dreszczykiem, pióra Arthura Conana Doyle'a, autora Przygód Sherlocka Holmesa.
+          </p>
+          <h4>Spis treści:</h4>
+          <ul>
+            <li>Dziady. Poema</li>
+            <li>Przedmowa</li>
+            <li>Upiór</li>
+            <li>Dziady, część II</li>
+            <li>Dziady, część IV</li>
+            <li>Dziady, część III</li>
+            <li>Dziady. Widowisko, część I</li>
           </ul>
         </div>
-      </section>
-    </main>
-
-    <section class="l-section">
-      <div class="l-books__wrapper">
-        <div class="l-container">
-          <h2>Tytuły powiązane</h2>
-          <div class="l-books">
-            <article class="l-books__item">
-              <figure class="l-books__item__img">
-                <a href="#">
-                  <img src="images/book-1.jpg" alt="Poetyka">
-                </a>
-              </figure>
-              <h3><a href="#">Arystoteles</a></h3>
-              <h2><a href="#">Poetyka</a></h2>
-            </article>
-            <article class="l-books__item">
-              <figure class="l-books__item__img">
-                <a href="#">
-                  <img src="images/book-2.jpg" alt="Wstęp do filozofii">
-                </a>
-              </figure>
-              <h3><a href="#">Stanisław Brzozowski</a></h3>
-              <h2><a href="#">Wstęp do filozofii</a></h2>
-            </article>
-            <article class="l-books__item">
-              <figure class="l-books__item__img">
-                <a href="#">
-                  <img src="images/book-3.jpg" alt="Etyka">
-                </a>
-              </figure>
-              <h3><a href="#">Benedykt de Spinoza</a></h3>
-              <h2><a href="#">Etyka</a></h2>
-            </article>
-            <article class="l-books__item">
-              <figure class="l-books__item__img">
-                <a href="#">
-                  <img src="images/book-3.jpg" alt="Wstęp do filozofii">
-                </a>
-              </figure>
-              <h3><a href="#">Stanisław Brzozowski</a></h3>
-              <h2><a href="#">Wstęp do filozofii</a></h2>
-            </article>
-            <article class="l-books__item l-books__item--link">
-              <a href="#">i wiele innych książek, wierszy, obrazów, audiobooków…</a>
-              <a href="#" class="icon-link"><i class="icon icon-all"></i></a>
-            </article>
-          </div>
+        <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Czytaj więcej</button>
+      </article>
+      <div class="c-support">
+        <div class="c-support__content">
+          <h2>Ta książka jest dostępna dla tysięcy dzieciaków dzięki <span>darowiznom</span> od osób takich jak <span>Ty</span>!</h2>
+          <a href="#">Dorzuć się!</a>
         </div>
+        <figure>
+          <img src="images/img-1.jpg" alt="Dorzuć się!">
+        </figure>
       </div>
-    </section>
-
-    <div class="l-footer">
-      <div class="l-container">
-        <div class="l-footer__row">
-          <a href="#"><img src="images/FNP-logo.png" alt="FUNDACJA Nowoczesna Polska"></a>
-          <ul>
-            <li>ul. Marszałkowska 84/92 lok. 125</li>
-            <li>00-514 Warszawa</li>
-          </ul>
-          <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>
+  </section>
+  <section class="l-section">
+    <div class="l-author">
+      <div class="row">
+        <h2>O autorze</h2>
+        <div>
+          <figure class="l-author__photo">
+            <img src="images/author.jpg" alt="Adam Mickiewicz">
+            <figcaption>
+              Źródło: Wikipedia
+            </figcaption>
+          </figure>
+          <article class="l-author__info">
+            <h3>Adam Mickiewicz</h3>
+            <div class="l-article__overlay" data-max-height="327">
+              <p>
+                Ur. 24 grudnia 1798 r. w Zaosiu koło Nowogródka <br>
+                Zm. 26 listopada 1855 r. w Konstantynopolu (dziś: Stambuł)
+              </p>
+            </div>
+            <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Czytaj więcej</button>
+          </article>
         </div>
-        <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="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 class="row">
+        <div class="l-author__quotes">
+          <div class="l-author__quotes__slider">
+            <div class="l-author__quotes__slider__item">
+              <em>
+                Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten
+                nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże.
+              </em>
+              <p>Adam Mickiewicz – Dziady, część I</p>
+            </div>
+            <div class="l-author__quotes__slider__item">
+              <em>
+                Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten
+                nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże.
+              </em>
+              <p>Adam Mickiewicz – Dziady, część II</p>
+            </div>
+            <div class="l-author__quotes__slider__item">
+              <em>
+                Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten
+                nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże.
+              </em>
+              <p>Adam Mickiewicz – Dziady, część III</p>
+            </div>
           </div>
         </div>
       </div>
     </div>
+  </section>
+  <section class="l-section">
+    <div class="l-themes__wrapper">
+      <h2>Motywy występujące w tym utworze <a href="#"><span>Wszystkie motywy</span> <i class="icon icon-arrow-right"></i></a></h2>
+      <div class="l-themes">
+        <ul>
+          <li><a href="#">alkohol <span>(9)</span></a></li>
+          <li><a href="#">bitwa <span>(9)</span></a></li>
+          <li><a href="#">alkohol <span>(9)</span></a></li>
+          <li><a href="#">antysemityzm <span>(9)</span></a></li>
+          <li><a href="#">bijatyka <span>(9)</span></a></li>
+          <li><a href="#">błądzenie <span>(9)</span></a></li>
+          <li><a href="#">alkohol <span>(9)</span></a></li>
+          <li><a href="#">bitwa <span>(9)</span></a></li>
+          <li><a href="#">alkohol <span>(9)</span></a></li>
+          <li><a href="#">antysemityzm <span>(9)</span></a></li>
+          <li><a href="#">bijatyka <span>(9)</span></a></li>
+          <li><a href="#">błądzenie <span>(9)</span></a></li>
+          <li><a href="#">alkohol <span>(9)</span></a></li>
+          <li><a href="#">bitwa <span>(9)</span></a></li>
+          <li><a href="#">alkohol <span>(9)</span></a></li>
+          <li><a href="#">antysemityzm <span>(9)</span></a></li>
+          <li><a href="#">bijatyka <span>(9)</span></a></li>
+          <li><a href="#">błądzenie <span>(9)</span></a></li>
+          <li><a href="#">bitwa <span>(9)</span></a></li>
+          <li><a href="#">alkohol <span>(9)</span></a></li>
+          <li><a href="#">błądzenie <span>(9)</span></a></li>
+          <li><a href="#">bijatyka <span>(9)</span></a></li>
+          <li><a href="#">błądzenie <span>(9)</span></a></li>
+          <li><a href="#">bijatyka <span>(9)</span></a></li>
+          <li><a href="#">alkohol <span>(9)</span></a></li>
+          <li><a href="#">bitwa <span>(9)</span></a></li>
+          <li><a href="#">alkohol <span>(9)</span></a></li>
+          <li><a href="#">antysemityzm <span>(9)</span></a></li>
+          <li><a href="#">bijatyka <span>(9)</span></a></li>
+          <li><a href="#">błądzenie <span>(9)</span></a></li>
+        </ul>
+      </div>
+      <ul class="links">
+        <li>
+          <a href="#">źródłowy plik XML</a>
+        </li>
+        <li>
+          <a href="#">miksuj treść utworu</a>
+        </li>
+        <li>
+          <a href="#">utwór na Platformie Redakcyjnej</a>
+        </li>
+      </ul>
+    </div>
+  </section>
+</main>
+
+<section class="l-section">
+  <div class="l-books__wrapper">
+    <div class="l-container">
+      <h2>Tytuły powiązane</h2>
+      <div class="l-books">
+        <article class="l-books__item">
+          <figure class="l-books__item__img">
+            <a href="#">
+              <img src="images/book-1.jpg" alt="Poetyka">
+            </a>
+          </figure>
+          <h3><a href="#">Arystoteles</a></h3>
+          <h2><a href="#">Poetyka</a></h2>
+        </article>
+        <article class="l-books__item">
+          <figure class="l-books__item__img">
+            <a href="#">
+              <img src="images/book-2.jpg" alt="Wstęp do filozofii">
+            </a>
+          </figure>
+          <h3><a href="#">Stanisław Brzozowski</a></h3>
+          <h2><a href="#">Wstęp do filozofii</a></h2>
+        </article>
+        <article class="l-books__item">
+          <figure class="l-books__item__img">
+            <a href="#">
+              <img src="images/book-3.jpg" alt="Etyka">
+            </a>
+          </figure>
+          <h3><a href="#">Benedykt de Spinoza</a></h3>
+          <h2><a href="#">Etyka</a></h2>
+        </article>
+        <article class="l-books__item">
+          <figure class="l-books__item__img">
+            <a href="#">
+              <img src="images/book-3.jpg" alt="Wstęp do filozofii">
+            </a>
+          </figure>
+          <h3><a href="#">Stanisław Brzozowski</a></h3>
+          <h2><a href="#">Wstęp do filozofii</a></h2>
+        </article>
+        <article class="l-books__item l-books__item--link">
+          <a href="#">i wiele innych książek, wierszy, obrazów, audiobooków…</a>
+          <a href="#" class="icon-link"><i class="icon icon-all"></i></a>
+        </article>
+      </div>
+    </div>
+  </div>
+</section>
+
+<div class="l-footer">
+  <div class="l-container">
+    <div class="l-footer__row">
+      <a href="#"><img src="images/FNP-logo.png" alt="FUNDACJA Nowoczesna Polska"></a>
+      <ul>
+        <li>ul. Marszałkowska 84/92 lok. 125</li>
+        <li>00-514 Warszawa</li>
+      </ul>
+      <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>
+    <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="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>
 
-    <script src="scripts/vendor.js"></script>
-    <script src="scripts/main.js"></script>
-  </body>
+<script src="scripts/vendor.js"></script>
+<script src="scripts/main.js"></script>
+</body>
 </html>

diff --git a/src/wolnelektury/static/2022/styles/base/_icons.scss b/src/wolnelektury/static/2022/styles/base/_icons.scss
index 4dd55d6..c3facfb 100644 (file)
--- a/src/wolnelektury/static/2022/styles/base/_icons.scss
+++ b/src/wolnelektury/static/2022/styles/base/_icons.scss
@@ -6,28 +6,32 @@ $icomoon-font-family: "wl" !default;
 $icomoon-font-path:   "../fonts" !default;
 
 $icon-liked: "\e900";
-$icon-arrow-right: "\e901";
-$icon-arrow-up: "\e902";
 $icon-audio: "\e903";
 $icon-book: "\e904";
 $icon-eye: "\e905";
+$icon-prev: "\e901";
+$icon-next: "\e902";
 $icon-play: "\e906";
 $icon-pause: "\e907";
-$icon-quote: "\e908";
-$icon-search: "\e909";
-$icon-acc-1: "\e90a";
-$icon-acc-2: "\e90b";
-$icon-acc-3: "\e90c";
-$icon-all: "\e90d";
-$icon-arrow-down: "\e90e";
-$icon-close: "\e90f";
+$icon-volume: "\e908";
+$icon-mute: "\e909";
+$icon-quote: "\e90a";
+$icon-search: "\e90b";
+$icon-acc-1: "\e90c";
+$icon-acc-2: "\e90d";
+$icon-acc-3: "\e90e";
+$icon-all: "\e90f";
+$icon-arrow-right: "\e910";
+$icon-arrow-up: "\e911";
+$icon-arrow-down: "\e912";
+$icon-close: "\e913";
 
 @font-face {
   font-family: '#{$icomoon-font-family}';
   src:
-          url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?79zz52') format('truetype'),
-          url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?79zz52') format('woff'),
-          url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?79zz52##{$icomoon-font-family}') format('svg');
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?79zz52') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?79zz52') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?79zz52##{$icomoon-font-family}') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -53,16 +57,6 @@ $icon-close: "\e90f";
     content: $icon-liked;
   }
 }
-.icon-arrow-right {
-  &:before {
-    content: $icon-arrow-right;
-  }
-}
-.icon-arrow-up {
-  &:before {
-    content: $icon-arrow-up;
-  }
-}
 .icon-audio {
   &:before {
     content: $icon-audio;
@@ -78,6 +72,16 @@ $icon-close: "\e90f";
     content: $icon-eye;
   }
 }
+.icon-prev {
+  &:before {
+    content: $icon-prev;
+  }
+}
+.icon-next {
+  &:before {
+    content: $icon-next;
+  }
+}
 .icon-play {
   &:before {
     content: $icon-play;
@@ -88,6 +92,16 @@ $icon-close: "\e90f";
     content: $icon-pause;
   }
 }
+.icon-volume {
+  &:before {
+    content: $icon-volume;
+  }
+}
+.icon-mute {
+  &:before {
+    content: $icon-mute;
+  }
+}
 .icon-quote {
   &:before {
     content: $icon-quote;
@@ -118,6 +132,16 @@ $icon-close: "\e90f";
     content: $icon-all;
   }
 }
+.icon-arrow-right {
+  &:before {
+    content: $icon-arrow-right;
+  }
+}
+.icon-arrow-up {
+  &:before {
+    content: $icon-arrow-up;
+  }
+}
 .icon-arrow-down {
   &:before {
     content: $icon-arrow-down;

diff --git a/src/wolnelektury/static/2022/styles/components/_media.scss b/src/wolnelektury/static/2022/styles/components/_media.scss
index 520654d..1cb7584 100644 (file)
--- a/src/wolnelektury/static/2022/styles/components/_media.scss
+++ b/src/wolnelektury/static/2022/styles/components/_media.scss
@@ -42,16 +42,11 @@
   background: #F2F2F2;
   padding: 15px 24px;
   border-radius: 0 0 5px 5px;
-  max-width: 830px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
 
-  .project-logo {
-      padding-left: 35px;
-  }
-  
   .icons {}
   .content {
     padding-left: 35px;
@@ -80,12 +75,19 @@
   z-index: 10;
   top: 0;
   left: 0;
-  width: 100%;
   height: 100%;
   align-items: center;
   justify-content: center;
   background-color: rgba($color-black, 0.35);
   display: none;
+  overflow-y: scroll;
+  padding: 150px 40px 40px 40px;
+  width: 100%;
+
+  @include rwd(screen-md) {
+    padding: 40px 40px 40px 40px;
+    align-items: flex-start;
+  }
 
   &.is-open {
     display: flex;

diff --git a/src/wolnelektury/static/2022/styles/components/_module.scss b/src/wolnelektury/static/2022/styles/components/_module.scss
index f298f51..7d29876 100644 (file)
--- a/src/wolnelektury/static/2022/styles/components/_module.scss
+++ b/src/wolnelektury/static/2022/styles/components/_module.scss
@@ -8,3 +8,5 @@
 @import "media";
 @import "player";
 @import "support";
+@import "checkbox";
+@import "select";

diff --git a/src/wolnelektury/static/2022/styles/components/_player.scss b/src/wolnelektury/static/2022/styles/components/_player.scss
index 0604298..7ef0760 100644 (file)
--- a/src/wolnelektury/static/2022/styles/components/_player.scss
+++ b/src/wolnelektury/static/2022/styles/components/_player.scss
@@ -3,9 +3,19 @@
   width: 100%;
   align-items: center;
   position: relative;
-  padding: 25px 34px;
   background-color: #D5ECED;
-  border-radius: 5px;
+  padding: 25px 34px 25px 14px;
+}
+
+.c-player__head {
+  background: #006066;
+  padding: 8px 14px;
+  border-radius: 5px 5px 0px 0px;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 140%;
+  letter-spacing: 0.02em;
+  color: #FFFFFF;
 }
 
 .c-player__btn {
@@ -41,6 +51,51 @@
   }
 }
 
+.c-player__btns {
+  display: flex;
+  align-items: center;
+
+  button {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    width: 40px; height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+    margin: 0 5px;
+    outline: 0;
+    border: 1px solid transparent;
+    transition: border-color $ease-out 450ms;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:hover {
+      border-color: rgba(#007880, 0.5);
+    }
+
+    &.c-player__btn--md {
+      width: 50px; height: 50px;
+      .icon-play {
+        font-size: 20px;
+        position: relative;
+        left: 2px;
+      }
+      .icon-pause {
+        font-size: 20px;
+      }
+    }
+
+    .icon {
+      color: #007880;
+      font-size: 16px;
+    }
+  }
+}
+
 .c-player__timeline {
   max-width: 590px;
   width: calc(100% - 60px);
@@ -48,23 +103,6 @@
   margin-right: 0;
   position: relative;
 
-  &:before {
-    content: "1×";
-    font-weight: bold;
-    font-size: 15px;
-    line-height: 120%;
-    text-align: center;
-    color: #007880;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: -70px;
-  }
-
   & > span {
     height: 10px;
     width: 100%;
@@ -79,13 +117,25 @@
       height: 100%;
       position: absolute;
       border-radius: 5px;
-      background-color: #083F4D;
+      background-color: #006066;
       top: 0; left: 0;
     }
   }
 }
 
 .c-player__info {
+  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__chapters {
   top: -27px;
   right: 0;
   position: absolute;
@@ -95,6 +145,105 @@
   line-height: 140%;
   letter-spacing: 0.05em;
   color: #083F4D;
+  z-index: 1;
+
+  &.is-active {
+    span {
+      &:after {
+        transform: rotate(180deg);
+      }
+    }
+    ul {
+      opacity: 1;
+      transform: none;
+      pointer-events: all;
+    }
+  }
+
+  span {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:after {
+      margin-left: 5px;
+      content: $icon-arrow-down;
+      font-family: '#{$icomoon-font-family}' !important;
+      transition: transform $ease-out 450ms;
+    }
+  }
+
+  ul {
+    width: 283px;
+    position: absolute;
+    background-color: #083F4D;
+    transform: translateY(-10px);
+    opacity: 0;
+    box-shadow: 0 0 20px rgba(1, 129, 137, 0.2);
+    transition: all $ease-out 450ms;
+    list-style-position: inside;
+    border-radius: 10px;
+    right: 0;
+    margin: 10px 0 0;
+    padding: 15px;
+    pointer-events: none;
+    li {
+      font-size: 12px;
+      line-height: 140%;
+      letter-spacing: 0.05em;
+      list-style-type: decimal;
+      margin: 5px 0;
+      color: white;
+    }
+  }
+}
+
+.c-player__volume {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 40px;
+
+  .icon {
+    font-size: 21px;
+    color: #007880;
+    margin-right: 8px;
+    cursor: pointer;
+  }
+
+  input[type=range] {
+    width: 100px;
+    -webkit-appearance: none;
+    background: 0 0;
+    border: 0;
+    border-radius: 5px;
+    height: 10px;
+    color: #006066;
+    display: block;
+    margin: 0;
+    padding: 0;
+    transition: box-shadow .3s ease;
+    outline: 0;
+
+    background: white;
+    background-image: linear-gradient(#006066, #006066);
+    background-size: 60% 100%;
+    background-repeat: no-repeat;
+  }
+}
+
+input[type=range]::-webkit-slider-thumb {
+  height: 10px;
+  width: 10px;
+  background: #006066;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+input[type=range],
+input[type=range]::-webkit-slider-runnable-track,
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
 }
 
 .c-player__length {

diff --git a/src/wolnelektury/static/2022/styles/components/_select.scss b/src/wolnelektury/static/2022/styles/components/_select.scss
new file mode 100644 (file)
index 0000000..1ed5dd7
--- /dev/null
+++ b/src/wolnelektury/static/2022/styles/components/_select.scss
@@ -0,0 +1,62 @@
+.c-select {
+  margin: 0 5px 0 5px;
+  margin-right: 15px;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.is-active {
+    ul {
+      li {
+        display: flex;
+        &:first-child {
+          border-radius: 4px 4px 0 0 !important;
+        }
+
+        &:last-child {
+          border-radius: 0 0 4px 4px !important;
+        }
+        &:hover {
+          background: darken(#083F4D, 5%);
+        }
+        &.is-active {
+          border-radius: 0;
+          color: #007880;
+          background: #74bdc2;
+        }
+      }
+    }
+  }
+
+  ul {
+    margin: 0;
+    li {
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      font-size: 15px;
+      line-height: 120%;
+      display: none;
+      cursor: pointer;
+      width: 43px;
+      height: 22px;
+      transition: background $ease-out 450ms;
+      text-align: center;
+      color: #ffffff;
+      background: #083F4D;
+      &.is-active {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border-radius: 4px;
+        color: #007880;
+        &:hover {
+          background: #74bdc2;
+        }
+      }
+    }
+  }
+}