From: Damian Zawadzki <damian.zawadzki@outlook.com>
Date: Thu, 31 Mar 2022 07:23:39 +0000 (+0200)
Subject: Audiobook player UI updated
X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/fe91ba3abbf192dc851e377c1edb799aa7f1e47e?hp=40ea08ada00c0ad2e2b08718a27b7d046ae4035b
Audiobook player UI updated
---
diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js
index b79abf8e0..c456b6c37 100644
--- 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 c5fbd3eae..284c0f8cb 100644
--- 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=" " horiz-adv-x="512" d="" />
-<glyph unicode="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" glyph-name="pause" d="M155.826 960h222.609v-1024h-222.609v1024zM645.565 960h222.609v-1024h-222.609v1024z" />
-<glyph unicode="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" glyph-name="pause" data-tags="pause" d="M155.826 960h222.609v-1024h-222.609v1024zM645.565 960h222.609v-1024h-222.609v1024z" />
+<glyph unicode="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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 482f6ddcc..afc780698 100644
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 4b6ad0072..ec958c571 100644
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 246825a6e..3eaf87c07 100644
--- 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 4dd55d6d0..c3facfb35 100644
--- 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 520654ddb..1cb758414 100644
--- 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 f298f51d9..7d298762b 100644
--- 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 060429826..7ef0760dc 100644
--- 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
index 000000000..1ed5dd760
--- /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;
+ }
+ }
+ }
+ }
+}