From: Radek Czajka Date: Thu, 27 Oct 2022 13:47:29 +0000 (+0200) Subject: Main page. X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/d8a368e376f9f50ff0e3714ef716df548e86bd7f Main page. --- diff --git a/src/catalogue/admin.py b/src/catalogue/admin.py index 9d62c8145..2866fcc12 100644 --- a/src/catalogue/admin.py +++ b/src/catalogue/admin.py @@ -53,7 +53,7 @@ class FragmentAdmin(admin.ModelAdmin): class CollectionAdmin(admin.ModelAdmin): - list_display = ('title', 'listed') + list_display = ('title', 'listed', 'role') prepopulated_fields = {'slug': ('title',)} diff --git a/src/catalogue/templates/catalogue/preview_ad_homepage.html b/src/catalogue/templates/catalogue/preview_ad_homepage.html new file mode 100644 index 000000000..e4f43cdac --- /dev/null +++ b/src/catalogue/templates/catalogue/preview_ad_homepage.html @@ -0,0 +1,34 @@ +{% if book %} +
+
+
+

Prapremiera

+
+
+ + {{ book.pretty_title }} + +
+
+ +

+ {% for author in book.authors %} + {{ author }} + {% endfor %} +

+

{{ book.title }}

+

{{ book.abstract|safe }}

+
+
+ {% if accessible %} +

Dziękujemy za wsparcie — przeczytaj w prezencie już dzisiaj!

+ {% else %} +

Aby przeczytać prapremierę, dorzuć się do Wolnych Lektur dowolną wpłatą. Ustaw stałe wsparcie, a będziesz mieć dostęp do kolejnych prapremier.

+ Dorzuć się + {% endif %} +
+
+
+
+
+{% endif %} diff --git a/src/catalogue/templates/catalogue/tagged_object_list.html b/src/catalogue/templates/catalogue/tagged_object_list.html index 2b82aa348..22554d66a 100644 --- a/src/catalogue/templates/catalogue/tagged_object_list.html +++ b/src/catalogue/templates/catalogue/tagged_object_list.html @@ -1,6 +1,6 @@ {% extends "base/base.html" %} {% load i18n %} -{% load catalogue_tags switch_tag social_tags %} +{% load catalogue_tags social_tags %} {% block titleextra %}{% if tags %}{% title_from_tags tags %}{% elif list_type == 'gallery' %}{% trans "Art" %}{% elif list_type == 'audiobooks' %}{% trans "Audiobooks" %}{% else %}{% trans "Literature" %}{% endif %}{% endblock %} diff --git a/src/catalogue/templatetags/catalogue_tags.py b/src/catalogue/templatetags/catalogue_tags.py index 24210b821..2ca0a2d37 100644 --- a/src/catalogue/templatetags/catalogue_tags.py +++ b/src/catalogue/templatetags/catalogue_tags.py @@ -540,3 +540,11 @@ def preview_ad(context): 'accessible': book.is_accessible_to(context['request'].user), 'book': book, } + +@register.inclusion_tag('catalogue/preview_ad_homepage.html', takes_context=True) +def preview_ad_homepage(context): + book = Book.objects.filter(preview=True).first() + return { + 'accessible': book.is_accessible_to(context['request'].user), + 'book': book, + } diff --git a/src/newsletter/forms.py b/src/newsletter/forms.py index 16f216e31..fc1e4e316 100644 --- a/src/newsletter/forms.py +++ b/src/newsletter/forms.py @@ -30,9 +30,10 @@ Więcej informacji w polit def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) # Move the newsletter field to the end. - f = self.fields['agree_newsletter'] - del self.fields['agree_newsletter'] - self.fields['agree_newsletter'] = f + if 'agree_newsletter' in self.fields: + f = self.fields['agree_newsletter'] + del self.fields['agree_newsletter'] + self.fields['agree_newsletter'] = f @property def data_processing(self): diff --git a/src/reporting/templatetags/reporting_stats.py b/src/reporting/templatetags/reporting_stats.py index ef91aed31..c80418427 100644 --- a/src/reporting/templatetags/reporting_stats.py +++ b/src/reporting/templatetags/reporting_stats.py @@ -19,7 +19,7 @@ class StatsNode(template.Node): context[self.varname] = self.value return '' else: - return self.value + return str(self.value) def register_counter(f): diff --git a/src/social/models.py b/src/social/models.py index f001e310c..e85298803 100644 --- a/src/social/models.py +++ b/src/social/models.py @@ -125,6 +125,7 @@ class Cite(models.Model): class Carousel(models.Model): placement = models.SlugField(_('placement'), choices=[ ('main', 'main'), + ('main_2022', 'main 2022'), ]) priority = models.SmallIntegerField(_('priority'), default=0) language = models.CharField(_('language'), max_length=2, blank=True, default='', choices=settings.LANGUAGES) diff --git a/src/social/templates/social/carousel_2022.html b/src/social/templates/social/carousel_2022.html new file mode 100644 index 000000000..acdf5fe61 --- /dev/null +++ b/src/social/templates/social/carousel_2022.html @@ -0,0 +1,3 @@ + + + diff --git a/src/social/templatetags/social_tags.py b/src/social/templatetags/social_tags.py index 88d6771db..193a1ce3a 100644 --- a/src/social/templatetags/social_tags.py +++ b/src/social/templatetags/social_tags.py @@ -85,6 +85,14 @@ def carousel(context, placement): } +@register.inclusion_tag('social/carousel_2022.html', takes_context=True) +def carousel_2022(context, placement): + banner = Carousel.get(placement).carouselitem_set.first().get_banner() + return { + 'banner': banner, + } + + @register.inclusion_tag('social/embed_video.html') def embed_video(url): m = re.match(r'https://www.youtube.com/watch\?v=([^&;]+)', url) diff --git a/src/wolnelektury/settings/basic.py b/src/wolnelektury/settings/basic.py index 11eb7cfe4..2e3d81dc7 100644 --- a/src/wolnelektury/settings/basic.py +++ b/src/wolnelektury/settings/basic.py @@ -43,7 +43,6 @@ SITE_ID = 1 TEMPLATES = [{ 'BACKEND': 'django.template.backends.django.DjangoTemplates', - 'APP_DIRS': True, 'OPTIONS': { 'context_processors': ( 'django.contrib.auth.context_processors.auth', @@ -55,8 +54,16 @@ TEMPLATES = [{ 'wolnelektury.context_processors.extra_settings', 'search.context_processors.search_form', ), + 'loaders': [ + 'django.template.loaders.filesystem.Loader', + 'django.template.loaders.app_directories.Loader', + ], }, }] +if not DEBUG: + TEMPLATES['loaders'] = [ + ('django.template.loaders.cached.Loader', TEMPLATES['loaders']) + ] MIDDLEWARE = [ 'debug_toolbar.middleware.DebugToolbarMiddleware', diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js index efe1a971a..97ac9a363 100644 --- a/src/wolnelektury/static/2021/scripts/main.js +++ b/src/wolnelektury/static/2021/scripts/main.js @@ -62,7 +62,7 @@ })(); -/// Ebook/Audiobook Btns +// Ebook/Audiobook Btns (function() { let button = $('.c-media__btn button:not(.l-button--media--full)'); let popupLayer = $('.c-media__popup'); @@ -112,6 +112,110 @@ }); })(); +// Homepage books sliders +(function () { + let shelfSlider = $('.l-your-books__shelf .l-books'); + let shelfNextSlide = $('.l-your-books__shelf .js-next-slide'); + let shelfPrevSlide = $('.l-your-books__shelf .js-prev-slide'); + let shelfCollapse = $('.l-your-books__shelf .js-collapse'); + + shelfSlider.slick({ + slidesToScroll: 1, + slidesToShow: 4, + infinite: false, + dots: false, + arrows: false, + autoplay: false, + responsive: [ + { + breakpoint: 768, + settings: { + centerMode: false, + slidesToShow: 1 + } + } + ] + }); + + shelfNextSlide.on('click', function (event) { + event.preventDefault(); + shelfSlider.slick('slickNext'); + }); + + shelfPrevSlide.on('click', function (event) { + event.preventDefault(); + shelfSlider.slick('slickPrev'); + }); + + shelfCollapse.on('click', function (event) { + event.preventDefault(); + shelfSlider.slick('slickPrev'); + }); + + let collectionsSlider = $('.js-collections .l-books'); + let collectionsNextSlide = $('.js-collections .js-next-slide'); + let collectionsPrevSlide = $('.js-collections .js-prev-slide'); + + collectionsSlider.slick({ + slidesToScroll: 1, + slidesToShow: 5, + infinite: false, + dots: false, + arrows: false, + autoplay: false, + responsive: [ + { + breakpoint: 768, + settings: { + centerMode: false, + slidesToShow: 2 + } + } + ] + }); + + collectionsNextSlide.on('click', function (event) { + event.preventDefault(); + collectionsSlider.slick('slickNext'); + }); + + collectionsPrevSlide.on('click', function (event) { + event.preventDefault(); + collectionsSlider.slick('slickPrev'); + }); + + let newBooksSlider = $('.js-new-books-slider .l-books'); + let newBooksNextSlide = $('.js-new-books-slider .js-next-slide'); + let newBooksPrevSlide = $('.js-new-books-slider .js-prev-slide'); + + newBooksSlider.slick({ + slidesToScroll: 1, + slidesToShow: 5, + infinite: false, + dots: false, + arrows: false, + autoplay: false, + responsive: [ + { + breakpoint: 768, + settings: { + centerMode: false, + slidesToShow: 2 + } + } + ] + }); + + newBooksNextSlide.on('click', function (event) { + event.preventDefault(); + newBooksSlider.slick('slickNext'); + }); + + newBooksPrevSlide.on('click', function (event) { + event.preventDefault(); + newBooksSlider.slick('slickPrev'); + }); +})(); // Quotes slider (function () { @@ -126,6 +230,29 @@ autoplay: true, autoplaySpeed: 2500 }); + + + let sliderHomepage = $('.l-quotes'); + sliderHomepage.slick({ + slidesToShow: 1, + centerMode: true, + centerPadding: '250px', + infinite: true, + dots: true, + arrows: false, + autoplay: true, + autoplaySpeed: 2500, + responsive: [ + { + breakpoint: 768, + settings: { + centerMode: false, + slidesToShow: 1 + } + } + ] + }); + })(); // Text overlay toggler diff --git a/src/wolnelektury/static/2022/images/book-donate-bg.svg b/src/wolnelektury/static/2022/images/book-donate-bg.svg new file mode 100644 index 000000000..dced24223 --- /dev/null +++ b/src/wolnelektury/static/2022/images/book-donate-bg.svg @@ -0,0 +1,17 @@ + + + + + + + + + + diff --git a/src/wolnelektury/static/2022/images/book-donate.svg b/src/wolnelektury/static/2022/images/book-donate.svg new file mode 100644 index 000000000..61789fcee --- /dev/null +++ b/src/wolnelektury/static/2022/images/book-donate.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/wolnelektury/static/2022/images/book-newsletter.svg b/src/wolnelektury/static/2022/images/book-newsletter.svg new file mode 100644 index 000000000..547a49450 --- /dev/null +++ b/src/wolnelektury/static/2022/images/book-newsletter.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/wolnelektury/static/2022/images/icons/bell.svg b/src/wolnelektury/static/2022/images/icons/bell.svg new file mode 100644 index 000000000..e5cb5f512 --- /dev/null +++ b/src/wolnelektury/static/2022/images/icons/bell.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/wolnelektury/static/2022/images/kid-2.png b/src/wolnelektury/static/2022/images/kid-2.png new file mode 100644 index 000000000..4ab4a8b6d Binary files /dev/null and b/src/wolnelektury/static/2022/images/kid-2.png differ diff --git a/src/wolnelektury/static/2022/images/kid-3.png b/src/wolnelektury/static/2022/images/kid-3.png new file mode 100644 index 000000000..2b141d131 Binary files /dev/null and b/src/wolnelektury/static/2022/images/kid-3.png differ diff --git a/src/wolnelektury/static/2022/images/kid.png b/src/wolnelektury/static/2022/images/kid.png new file mode 100644 index 000000000..e0440cdea Binary files /dev/null and b/src/wolnelektury/static/2022/images/kid.png differ diff --git a/src/wolnelektury/static/2022/images/quotes-slider-bg-left.svg b/src/wolnelektury/static/2022/images/quotes-slider-bg-left.svg new file mode 100644 index 000000000..a0fc2afc2 --- /dev/null +++ b/src/wolnelektury/static/2022/images/quotes-slider-bg-left.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/wolnelektury/static/2022/images/quotes-slider-bg-right.svg b/src/wolnelektury/static/2022/images/quotes-slider-bg-right.svg new file mode 100644 index 000000000..92761a3fb --- /dev/null +++ b/src/wolnelektury/static/2022/images/quotes-slider-bg-right.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/wolnelektury/static/2022/styles/layout/_books.scss b/src/wolnelektury/static/2022/styles/layout/_books.scss index 70a6e315c..e08a4aa95 100644 --- a/src/wolnelektury/static/2022/styles/layout/_books.scss +++ b/src/wolnelektury/static/2022/styles/layout/_books.scss @@ -27,11 +27,29 @@ border-radius: 9px; padding: 21px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0); - transition: all $ease-dynamic 350ms; + outline: 0; + + @include rwd(tablet) { + padding: 16px; + } + + &.l-books__item--placeholder { + opacity: 0; + visibility: hidden; + } + + & * { + outline: 0; + } &:not(:last-child) { margin-right: 17px; + + @include rwd(tablet) { + margin-right: 5px; + margin-left: 5px; + } } &:hover { @@ -97,6 +115,10 @@ img { max-width: 170px; + + @include rwd(tablet) { + max-width: 140px; + } } } diff --git a/src/wolnelektury/static/2022/styles/layout/_button.scss b/src/wolnelektury/static/2022/styles/layout/_button.scss index 5892f77f6..275e5a6b3 100644 --- a/src/wolnelektury/static/2022/styles/layout/_button.scss +++ b/src/wolnelektury/static/2022/styles/layout/_button.scss @@ -38,4 +38,38 @@ } } } + + &.l-button--default { + cursor: pointer; + color: $color-white; + background: #007880; + border: 2px solid #007880; + border-radius: 5px; + letter-spacing: -0.01em; + font-weight: $semibold; + text-align: center; + @include font-size(25px); + line-height: 140%; + padding: 5px 20px; + transition: all $ease-dynamic 350ms; + + @include rwd(tablet) { + @include font-size(18px); + } + + &:hover { + background: #083F4D; + border-color: #083F4D; + } + + &.l-button--default--dark { + color: #083F4D; + background: #92BD39; + border-color: #92BD39; + &:hover { + background: #FFA500; + border-color: #FFA500; + } + } + } } diff --git a/src/wolnelektury/static/2022/styles/layout/_collections.scss b/src/wolnelektury/static/2022/styles/layout/_collections.scss new file mode 100644 index 000000000..b377c290b --- /dev/null +++ b/src/wolnelektury/static/2022/styles/layout/_collections.scss @@ -0,0 +1,49 @@ +.l-collections { + width: 100%; + max-width: 1140px; + + .l-books { + width: calc(100% + 20px); + + @include rwd(tablet) { + width: 100%; + } + + .l-books__item { + border: 1px solid #D9D9D9; + } + } +} + +.l-collections__header { + margin-top: 36px; + display: flex; + justify-content: space-between; + + h3 { + margin-top: 0; + font-weight: $semibold; + @include font-size(31px); + line-height: 140%; + letter-spacing: -0.01em; + color: $color-dark; + + @include rwd(tablet) { + @include font-size(25px); + } + } + + .l-your-books__header__actions { + button { + border-color: $color-light-gray; + + .icon { + color: $color-darker-primary; + } + + &:hover { + background-color: darken($color-white, 2%); + } + } + } +} \ No newline at end of file diff --git a/src/wolnelektury/static/2022/styles/layout/_container.scss b/src/wolnelektury/static/2022/styles/layout/_container.scss index 41e285912..b7c93571d 100644 --- a/src/wolnelektury/static/2022/styles/layout/_container.scss +++ b/src/wolnelektury/static/2022/styles/layout/_container.scss @@ -2,4 +2,9 @@ width: 100%; max-width: 1140px; margin: 0 auto; + + @include rwd(tablet) { + padding-left: 16px; + padding-right: 16px; + } } diff --git a/src/wolnelektury/static/2022/styles/layout/_download.scss b/src/wolnelektury/static/2022/styles/layout/_download.scss new file mode 100644 index 000000000..76c0b477d --- /dev/null +++ b/src/wolnelektury/static/2022/styles/layout/_download.scss @@ -0,0 +1,31 @@ +.l-download { + margin-bottom: 30px !important; + li { + display: flex; + align-items: center; + font-weight: $regular; + @include font-size(18px); + line-height: 150%; + padding-top: 10px; + padding-bottom: 10px; + border-bottom: 1px solid #D9D9D9; + + a { + margin-right: 0; + margin-left: auto; + width: 108px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + color: $color-white !important; + background: #007880; + border-radius: 5px; + + &:hover { + text-decoration: none !important; + background: darken(#007880, 2%); + } + } + } +} \ No newline at end of file diff --git a/src/wolnelektury/static/2022/styles/layout/_footer.scss b/src/wolnelektury/static/2022/styles/layout/_footer.scss index 5af842171..14becee95 100644 --- a/src/wolnelektury/static/2022/styles/layout/_footer.scss +++ b/src/wolnelektury/static/2022/styles/layout/_footer.scss @@ -4,6 +4,13 @@ margin: 0 auto; padding-top: 27px; padding-bottom: 38px; + + .l-container { + @include rwd(tablet) { + display: flex; + flex-direction: column; + } + } } .l-footer__row { @@ -11,6 +18,11 @@ align-items: center; justify-content: space-between; + @include rwd(tablet) { + align-items: flex-start; + flex-direction: column; + } + &:nth-child(1) { padding-bottom: 25px; border-bottom: 1px solid #007880; @@ -20,14 +32,25 @@ margin-top: 25px; div { + @include rwd(tablet) { + font-size: 14px; + } &:nth-child(1) { max-width: 315px; min-width: 270px; padding-right: 53px; border-right: 1px solid #007880; + @include rwd(tablet) { + border-right: 0; + min-width: 0; + margin-bottom: 20px; + } } &:nth-child(3) { max-width: 483px; + @include rwd(tablet) { + margin-top: 20px; + } } a { @@ -44,20 +67,32 @@ margin: 0; padding: 0; list-style: none; + @include rwd(tablet) { + margin-top: 20px; + } li { font-weight: normal; font-size: 21px; line-height: 150%; + @include rwd(tablet) { + font-size: 14px; + } } &:nth-of-type(1) { margin-left: 90px; margin-right: auto; + @include rwd(tablet) { + margin-left: 0; + } } &:nth-of-type(2) { margin-left: 10px; margin-right: auto; + @include rwd(tablet) { + margin-left: 0; + } } &.teal { diff --git a/src/wolnelektury/static/2022/styles/layout/_module.scss b/src/wolnelektury/static/2022/styles/layout/_module.scss index e54f34d0d..e9db5b469 100644 --- a/src/wolnelektury/static/2022/styles/layout/_module.scss +++ b/src/wolnelektury/static/2022/styles/layout/_module.scss @@ -12,6 +12,9 @@ @import "section"; @import "author"; @import "themes"; +@import "your-books"; +@import "collections"; +@import "quotes"; @import "books"; @import "button"; @import "footer"; @@ -21,3 +24,4 @@ @import "checkout"; @import "pagination"; @import "theme"; +@import "download"; diff --git a/src/wolnelektury/static/2022/styles/layout/_navigation.scss b/src/wolnelektury/static/2022/styles/layout/_navigation.scss index a61b7ae6a..8209a3bb6 100644 --- a/src/wolnelektury/static/2022/styles/layout/_navigation.scss +++ b/src/wolnelektury/static/2022/styles/layout/_navigation.scss @@ -36,6 +36,12 @@ .l-navigation__logo { position: relative; z-index: $master-layer + 1; + + @include rwd(tablet) { + img { + width: 153px; + } + } } .l-navigation__button { @@ -55,6 +61,11 @@ margin-left: 60px; margin-right: auto; + @include rwd(tablet) { + margin-left: 20px; + margin-right: 20px; + } + input { font-family: $base-font; font-size: 18px; @@ -78,6 +89,12 @@ font-size: 30px; margin-right: 25px; } + + @include rwd(tablet) { + a { + display: none; + } + } } .l-change-pop { @@ -152,12 +169,24 @@ display: flex; justify-content: space-between; + @include rwd(tablet) { + flex-wrap: wrap; + max-height: calc(100vh - 120px); + overflow-y: scroll; + } + ul { margin: 0; padding: 0; list-style: none; max-width: 212px; + @include rwd(tablet) { + width: 100%; + max-width: 100%; + margin-bottom: 20px; + } + li { font-weight: $regular; @include font-size(18px); diff --git a/src/wolnelektury/static/2022/styles/layout/_quotes.scss b/src/wolnelektury/static/2022/styles/layout/_quotes.scss new file mode 100644 index 000000000..fcb5afbc6 --- /dev/null +++ b/src/wolnelektury/static/2022/styles/layout/_quotes.scss @@ -0,0 +1,116 @@ +.l-quotes { + width: 100%; + max-width: 1140px; + margin-top: 58px; + position: relative; + overflow: hidden; + padding-bottom: 40px; + + @include rwd(tablet) { + margin-top: 24px; + } + + &:after { + content: ""; + display: block; + pointer-events: none; + background: url("../images/quotes-slider-bg-right.svg") center no-repeat; + width: 170px; + height: 407px; + position: absolute; + right: -150px; + top: 0; + z-index: $middle-layer; + + @include rwd(tablet) { + display: none; + } + } + + &:before { + content: ""; + display: block; + pointer-events: none; + background: url("../images/quotes-slider-bg-left.svg") center no-repeat; + width: 170px; + height: 407px; + position: absolute; + left: -150px; + top: 0; + z-index: $middle-layer; + + @include rwd(tablet) { + display: none; + } + } + + .slick-dots { + bottom: 0; + li button:before { + border: 1px solid #007880; + } + } +} + +.l-quotes__item { + outline: 0; + background: #E1F1F2; + border-radius: 10px; + width: 558px; + margin-top: 50px; + margin-left: 32px; + margin-right: 32px; + padding-left: 32px; + padding-right: 32px; + padding-bottom: 32px; + + @include rwd(tablet) { + margin-right: 0; + margin-left: 0; + } + + img { + margin: 0 auto; + border-radius: 50%; + overflow: hidden; + font-size: 0; + margin-top: -50px; + + @include rwd(tablet) { + width: 48px; + height: 48px; + margin-top: -24px; + } + } + + h4 { + margin-top: 10px; + font-weight: $semibold; + @include font-size(25px); + line-height: 140%; + text-align: center; + letter-spacing: -0.01em; + color: #474747; + + @include rwd(tablet) { + margin-top: 5px; + @include font-size(14px); + } + } + + p { + margin-top: 24px; + font-style: italic; + font-weight: $regular; + @include font-size(26px); + line-height: 140%; + text-align: center; + letter-spacing: -0.02em; + color: #083F4D; + + @include rwd(tablet) { + margin-top: 12px; + @include font-size(20px); + } + } +} \ No newline at end of file diff --git a/src/wolnelektury/static/2022/styles/layout/_section.scss b/src/wolnelektury/static/2022/styles/layout/_section.scss index ec7193a71..fef8d66e2 100644 --- a/src/wolnelektury/static/2022/styles/layout/_section.scss +++ b/src/wolnelektury/static/2022/styles/layout/_section.scss @@ -1,5 +1,15 @@ .l-section { display: flex; + margin-left: auto; + margin-right: auto; + justify-content: center; - & > h2 {} + @include rwd(tablet) { + padding-left: 16px; + padding-right: 16px; + } + + &.l-section--col { + flex-direction: column; + } } diff --git a/src/wolnelektury/static/2022/styles/layout/_your-books.scss b/src/wolnelektury/static/2022/styles/layout/_your-books.scss new file mode 100644 index 000000000..a2be991d8 --- /dev/null +++ b/src/wolnelektury/static/2022/styles/layout/_your-books.scss @@ -0,0 +1,91 @@ +.l-your-books { + background-color: $color-dark-primary; + padding-bottom: 40px; + + .l-container { + display: flex; + overflow: hidden; + } +} + +.l-your-books__header { + margin-top: 36px; + display: flex; + justify-content: space-between; + h3 { + margin-top: 0; + color: $color-secondary; + font-weight: $semibold; + @include font-size(21px); + line-height: 140%; + letter-spacing: -0.01em; + } +} + +.l-your-books__header__actions { + display: flex; + + @include rwd(tablet) { + display: none; + } + + button { + outline: 0; + width: 40px; + height: 40px; + background: transparent; + border: 1px solid #007880; + border-radius: 50%; + display: flex; + align-content: center; + justify-content: center; + margin-left: 10px; + cursor: pointer; + + &:hover { + background-color: darken($color-dark-primary, 2%); + } + + &.js-collapse { + border-color: transparent; + } + + .icon { + margin: auto; + color: $color-white; + } + } +} + +.l-your-books__continue { + .l-books { + border-right: 1px solid #007880; + padding-right: 40px; + margin-right: 40px; + + @include rwd(tablet) { + border-right: 0; + padding-right: 0; + margin-right: 10px; + } + } +} + +.l-your-books__shelf { + width: 100%; + max-width: 928px; + + @include rwd(tablet) { + width: 100%; + max-width: 189px; + } + + .l-your-books__header { + padding-right: 85px; + } + + .l-books { + display: block; + flex-wrap: initial; + } +} \ No newline at end of file diff --git a/src/wolnelektury/static/2022/styles/local.scss b/src/wolnelektury/static/2022/styles/local.scss index a8185cd6b..46626e6f3 100644 --- a/src/wolnelektury/static/2022/styles/local.scss +++ b/src/wolnelektury/static/2022/styles/local.scss @@ -37,3 +37,39 @@ $teal: #007880; content: $icon-mute; } } + + +.sponsors-page { + display: flex; + justify-content: space-between; + margin-top: 48px; + + @include rwd(tablet) { + flex-wrap: wrap; + } + + .sponsors-column { + margin: 1em 40px; + display: flex; + flex-direction: column; + align-items: center; + font-size: 0; + .sponsors-column-name { + font-weight: $regular; + @include font-size(18px); + line-height: 150%; + text-align: center; + color: #474747; + } + .sponsor-logos { + height: 120px; + overflow: hidden; + a { + margin-top: 20px; + display: block; + width: 120px; + height: 120px; + } + } + } +} diff --git a/src/wolnelektury/static/2022/styles/pages/_homepage.scss b/src/wolnelektury/static/2022/styles/pages/_homepage.scss new file mode 100644 index 000000000..e1b3f6456 --- /dev/null +++ b/src/wolnelektury/static/2022/styles/pages/_homepage.scss @@ -0,0 +1,502 @@ +.p-homepage__info { + display: flex; + flex-wrap: wrap; + margin-top: 60px; + width: 100%; + + @include rwd(tablet) { + flex-direction: column; + } + + &.p-homepage__info--second { + margin-top: 30px; + flex-wrap: initial; + + @include rwd(tablet) { + margin-top: 10px; + } + } +} + +.p-homepage__info__box__rows { + display: flex; + flex-direction: column; +} + +.p-homepage__info__box { + border: 1px solid $color-light-gray; + border-radius: 10px; + overflow: hidden; + + & > a { + display: block; + font-size: 0; + } + + figure { + margin: 0; + display: block; + font-size: 0; + } + + img { + max-width: 100%; + } + + &.p-homepage__info__box--donate { + width: calc(50% - 10px); + display: flex; + padding: 21px; + color: $color-white; + margin-top: 20px; + margin-right: 10px; + background-color: $color-darker-primary; + border-color: $color-darker-primary; + + @include rwd(tablet) { + width: 100%; + margin-right: 0; + } + } + + &.p-homepage__info__box--newsletter { + width: calc(50% - 10px); + display: flex; + padding: 21px; + margin-top: 20px; + margin-left: 10px; + color: $color-darker-primary; + background-color: $color-lighter-primary; + border-color: $color-lighter-primary; + position: relative; + overflow: visible; + + @include rwd(tablet) { + width: 100%; + margin-right: 0; + margin-left: 0; + } + + &:after { + content: ""; + display: block; + width: 555px; + height: 233px; + bottom: 0; + left: 0; + background: url("../images/book-donate-bg.svg") center no-repeat; + position: absolute; + pointer-events: none; + + + @include rwd(tablet) { + display: none; + } + } + } + + &.p-homepage__info__box--full { + width: 100%; + max-width: 705px; + padding: 0; + color: $color-white; + margin-right: 20px; + background: $color-darker-primary; + border: 0; + display: flex; + + @include rwd(tablet) { + flex-direction: column; + margin-right: 0; + margin-bottom: 20px; + } + + img { + min-width: 270px; + border-radius: 0; + + @include rwd(tablet) { + min-width: 100%; + height: 250px; + object-fit: cover; + } + } + + .p-homepage__info__box__content { + max-width: 100%; + justify-content: flex-start; + padding: 32px; + background: url("../images/plant.png") center no-repeat; + p { + @include font-size(24px); + + @include rwd(tablet) { + @include font-size(18px); + } + + & + p { + margin-top: 16px; + @include font-size(18px); + line-height: 150%; + + @include rwd(tablet) { + @include font-size(14px); + } + } + } + } + + .l-button { + margin-top: auto; + margin-bottom: 0; + + @include rwd(tablet) { + margin-top: 20px; + } + } + } + + &.p-homepage__info__box--full--sm { + border: 0; + display: flex; + + img { + min-width: 125px; + } + + .p-homepage__info__box__content { + max-width: 100%; + justify-content: flex-start; + padding: 15px; + p { + @include font-size(24px); + + @include rwd(tablet) { + @include font-size(18px); + } + + strong { + color: inherit; + font-weight: $semibold; + } + + & + p { + margin-top: 16px; + @include font-size(18px); + line-height: 150%; + } + } + + .l-button { + margin-top: auto; + margin-bottom: 0; + @include font-size(18px); + padding: 3px 10px; + } + } + + &:nth-child(1) { + background-color: #92BD39; + margin-bottom: 20px; + .p-homepage__info__box__content { + background: url("../images/flower.png") center no-repeat; + } + } + + &:nth-child(2) { + background-color: #FFA500; + .p-homepage__info__box__content { + background: url("../images/flower-2.png") center no-repeat; + } + } + } +} + +.p-homepage__info__box__content { + width: 100%; + max-width: 320px; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + z-index: $middle-layer; + + h3 { + font-weight: $semibold; + @include font-size(31px); + line-height: 100%; + letter-spacing: -0.01em; + + @include rwd(tablet) { + margin-top: 0; + @include font-size(19px); + line-height: 100%; + } + + strong { + display: block; + font-weight: $bold; + margin-top: 6px; + @include font-size(46px); + + @include rwd(tablet) { + @include font-size(28px); + margin-top: 4px; + } + } + } + + p { + margin-top: 0; + font-style: italic; + font-weight: $regular; + @include font-size(21px); + line-height: 140%; + letter-spacing: -0.01em; + @include rwd(tablet) { + @include font-size(13px); + line-height: 140%; + } + strong { + color: #92BD39; + font-weight: $regular; + } + } + + .l-button { + display: block; + } +} + +.p-homepage-prapremiera { + width: 100%; + background-color: #F2F2F2; + padding: 25px 0 40px 0; + margin-top: 48px; + + @include rwd(tablet) { + width: calc(100% + 32px); + margin-left: -16px; + } + + .l-container { + & > h3 { + margin-top: 0; + font-weight: $semibold; + @include font-size(31px); + line-height: 140%; + letter-spacing: -0.01em; + color: #92BD39; + + @include rwd(tablet) { + @include font-size(25px); + } + } + } +} + +.p-homepage-prapremiera__box { + margin-top: 24px; + background-color: $color-white; + border: 1px solid #D9D9D9; + border-radius: 10px; + display: flex; + justify-content: space-between; + padding: 21px; + + @include rwd(tablet) { + padding: 16px; + flex-direction: column; + } + + figure { + margin: 0; + font-size: 0; + + @include rwd(tablet) { + display: flex; + align-items: center; + justify-content: center; + } + + a { + display: block; + img { + min-width: 240px; + max-width: 100%; + } + } + } +} + +.p-homepage-prapremiera__box__content { + width: 385px; + + @include rwd(tablet) { + width: 100%; + margin-top: 25px; + } + + h4 { + margin-top: 0; + font-weight: $regular; + @include font-size(21px); + line-height: 100%; + @include rwd(tablet) { + @include font-size(18px); + } + a { + color: #007880; + } + } + + h3 { + margin-top: 0; + font-weight: $regular; + @include font-size(37px); + line-height: 120%; + @include rwd(tablet) { + margin-top: 10px; + @include font-size(24px); + } + a { + color: #083F4D; + } + } + + p { + margin-top: 22px; + font-weight: $regular; + @include font-size(18px); + line-height: 150%; + color: #333333; + + @include rwd(tablet) { + margin-top: 10px; + } + } +} + +.p-homepage-prapremiera__box__donate { + background: #083F4D; + border-radius: 7px; + color: $color-white; + width: 390px; + display: flex; + padding: 34px; + flex-direction: column; + justify-content: space-between; + + @include rwd(tablet) { + width: 100%; + padding: 18px; + margin-top: 20px; + } + + p { + margin-top: 0; + font-style: italic; + font-weight: $regular; + @include font-size(24px); + line-height: 150%; + + @include rwd(tablet) { + margin-bottom: 20px; + @include font-size(20px); + } + + strong { + color: #92BD39; + font-weight: $regular; + } + } +} + +.p-homepage__uptodate { + width: 100%; + margin-top: 60px; + margin-bottom: 50px; + + @include rwd(tablet) { + margin-top: 30px; + width: calc(100% + 32px); + margin-left: -16px; + } +} + +.p-homepage__uptodate__header { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 16px; + border-bottom: 1px solid #007880; + h3 { + margin-top: 0; + font-weight: $semibold; + @include font-size(31px); + line-height: 140%; + letter-spacing: -0.01em; + color: #474747; + + @include rwd(tablet) { + @include font-size(25px); + } + } + ul { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + li { + margin-left: 35px; + @include rwd(tablet) { + margin-left: 15px; + } + a { + font-size: 0; + color: #083F4D; + display: flex; + align-items: center; + justify-content: center; + .icon { + @include font-size(20px); + } + } + } + } +} + +.p-homepage__uptodate__logos { + display: flex; + justify-content: space-between; + margin-top: 48px; + + @include rwd(tablet) { + flex-wrap: wrap; + } + + figure { + display: flex; + flex-direction: column; + align-items: center; + font-size: 0; + + @include rwd(tablet) { + margin: 0; + width: 50%; + } + + figcaption { + font-weight: $regular; + @include font-size(18px); + line-height: 150%; + text-align: center; + color: #474747; + } + img { + margin-top: 20px; + } + } +} \ No newline at end of file diff --git a/src/wolnelektury/static/2022/styles/pages/_module.scss b/src/wolnelektury/static/2022/styles/pages/_module.scss index 964106550..0f6a1ec7d 100644 --- a/src/wolnelektury/static/2022/styles/pages/_module.scss +++ b/src/wolnelektury/static/2022/styles/pages/_module.scss @@ -4,3 +4,4 @@ /*!*/ +@import "homepage"; \ No newline at end of file diff --git a/src/wolnelektury/static/2022/styles/utils/_vars.scss b/src/wolnelektury/static/2022/styles/utils/_vars.scss index f6e31f772..464ea2d8d 100644 --- a/src/wolnelektury/static/2022/styles/utils/_vars.scss +++ b/src/wolnelektury/static/2022/styles/utils/_vars.scss @@ -14,15 +14,18 @@ $images-path: "/images" !default; } /* Colors */ -$color-primary: #018189; -$color-secondary: #96C13D; +$color-lighter-primary: #E1F1F2; +$color-primary: #018189; +$color-dark-primary: #21535F; +$color-darker-primary: #083F4D; +$color-secondary: #92BD39; $color-white: #ffffff; $color-black: #000000; $color-darker: #0e0f0f; -$color-dark: #3E3E3E; +$color-dark: #474747; $color-gray: #666666; -$color-light-gray: #CCCCCC; +$color-light-gray: #D9D9D9; $color-light-blue: #E5F4FF; $color-yellow: #FBC40F; diff --git a/src/wolnelektury/templates/2022/base.html b/src/wolnelektury/templates/2022/base.html index aa8588156..39ef0e6d4 100644 --- a/src/wolnelektury/templates/2022/base.html +++ b/src/wolnelektury/templates/2022/base.html @@ -26,6 +26,20 @@ {% include '2022/header.html' %} + {% block under-menu %}{% endblock %} + +
+

Zmieniamy się!

+

+ Jeżeli to czytasz jesteś jedną z osób, której prezentujemy nowy wygląd części stron. + Będziemy bardzo! wdzięczni za Twoją opinię – możesz nam ją przesłać tutaj. + Jeżeli wolisz klasyczny wygląd - wystarczy, że klikniesz tutaj +

+ +
+ {% block global-content %}