diff --git a/src/assets/css/base/layout.css b/src/assets/css/base/layout.css index 51c0212..2912b2a 100644 --- a/src/assets/css/base/layout.css +++ b/src/assets/css/base/layout.css @@ -13,8 +13,16 @@ } } +#site-content-wrapper{ + @screen md{ + min-height: calc(100vh - var(--header-height)); + @apply flex flex-col; + } +} + .content{ - @apply h-full; + @apply grow; + /* @apply h-full; */ } body.has-menu-toggled{ @@ -39,4 +47,8 @@ > *:last-child:not(.contacts-section){ @apply mb-lg; } +} + +.sticky-column{ + @apply lg:sticky lg:top-[calc(var(--grid-gutter)*2)]; } \ No newline at end of file diff --git a/src/assets/css/base/typography.css b/src/assets/css/base/typography.css index f03262c..885c719 100644 --- a/src/assets/css/base/typography.css +++ b/src/assets/css/base/typography.css @@ -110,7 +110,7 @@ @apply text-md; } .text-size-md-lg{ - @apply text-md-lg md:text-md-lg; + @apply text-md md:text-md-lg; } .text-size-lg{ @apply text-md md:text-md-lg xl:text-lg; diff --git a/src/assets/css/blocks/accordion.css b/src/assets/css/blocks/accordion.css index cb2a68e..c0c445a 100644 --- a/src/assets/css/blocks/accordion.css +++ b/src/assets/css/blocks/accordion.css @@ -114,6 +114,11 @@ } &--2cols{ @apply xl:grid xl:grid-cols-2 gap-x-[calc(var(--grid-gutter)*2)]; + .block-container-column{ + + .block-container-column{ + @apply -mt-px xl:mt-0; + } + } } &--sm{ /* @apply lg:w-1/2; */ diff --git a/src/assets/css/blocks/featured-content.css b/src/assets/css/blocks/featured-content.css index 2a499e3..9219314 100644 --- a/src/assets/css/blocks/featured-content.css +++ b/src/assets/css/blocks/featured-content.css @@ -112,9 +112,12 @@ } .block-featured-tabs{ - @apply py-sm md:py-base lg:pt-0 bg-black text-white; + @apply py-sm md:py-base bg-black text-white relative; + [data-tabs-container]{ + @apply relative; + } &__tabs{ - @apply flex pb-sm md:pb-base lg:pb-0 text-size-lg lg:translate-y-[100%]; + @apply lg:absolute lg:top-0 flex flex-wrap lg:w-1/2 pb-sm md:pb-base text-size-lg; button{ @apply block text-grey-300; &:not(:first-child){ @@ -129,9 +132,9 @@ } } &-tab{ - @apply hidden; + @apply hidden h-full; > div{ - @apply lg:grid grid-cols-2 gap-x-[calc(var(--grid-gutter)*2)]; + @apply h-full lg:grid grid-cols-2 gap-x-[calc(var(--grid-gutter)*2)]; } .block-featured-tabs-tab__content{ @apply lg:order-1 lg:self-end; diff --git a/src/assets/css/blocks/links-list.css b/src/assets/css/blocks/links-list.css index d6e0d2a..0ca2d74 100644 --- a/src/assets/css/blocks/links-list.css +++ b/src/assets/css/blocks/links-list.css @@ -29,6 +29,14 @@ } } } + > div{ + > div + div{ + @apply -mt-px; + } + } + > div { + + } &--1col{ ul{ @apply lg:w-1/2; diff --git a/src/assets/css/blocks/title.css b/src/assets/css/blocks/title.css index 322a860..4f7b0d2 100644 --- a/src/assets/css/blocks/title.css +++ b/src/assets/css/blocks/title.css @@ -53,4 +53,8 @@ /* .block-container + .block-title{ @apply mt-[5.5vw] -} */ \ No newline at end of file +} */ + +.block-container:has(+ .block-title){ + @apply mb-base md:mb-lg; +} \ No newline at end of file diff --git a/src/assets/css/components/card.css b/src/assets/css/components/card.css index b0ff156..4a2e6bc 100644 --- a/src/assets/css/components/card.css +++ b/src/assets/css/components/card.css @@ -1,5 +1,13 @@ .cards-container{ - @apply pl-[calc(var(--grid-gutter)*2)] md:pl-[var(--grid-offset)] pr-[calc(var(--grid-gutter)*2)] mb-base overflow-x-clip; + @apply mb-base overflow-x-clip; + margin-left: var(--grid-offset); + @screen md{ + width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2); + } + @screen 2xl{ + max-width: theme(screens.2xl); + margin-left: max(var(--grid-offset), calc((100vw - theme(screens.2xl))/2)) + } @at-root :where(.block-container, .grid-container) .cards-container{ @apply mx-0 px-0; } @@ -16,7 +24,7 @@ .card{ /* @apply bg-grey-100 xl:grid items-start grid-cols-2 relative; */ - @apply bg-grey-100 relative flex flex-wrap flex-col items-end aspect-square p-[calc(var(--grid-gutter)*2)] col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3; + @apply bg-grey-100 relative flex /*flex-wrap*/ flex-col items-end aspect-square p-[calc(var(--grid-gutter)*2)] col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3; p{ @apply text-black; } @@ -31,6 +39,10 @@ } &__excerpt{ @apply grow; + @media screen and (min-width: 80rem) and (max-width: 90rem){ + hyphens:auto; + hyphenate-limit-chars: 6; + } } &__subtitle{ @apply mt-4; @@ -45,6 +57,10 @@ } } &__title{ + @media screen and (min-width: 80rem) and (max-width: 90rem){ + hyphens:auto; + hyphenate-limit-chars: 6; + } @apply w-full flex items-end /*items-start*/; > *:not(.card__icon){ @apply text-size-lg mb-0 w-full; @@ -57,12 +73,6 @@ } .card__icon{ @apply shrink-0 ml-3 relative; - &::before{ - content: ''; - background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23000'/%3E%3C/svg%3E"); - background-size: 27px 20px; - @apply inline-block w-[27px] h-5 bg-no-repeat bg-contain; - } } } &__date{ @@ -88,11 +98,6 @@ p, span{ @apply text-white; } - &:not(.card--y) .card__icon{ - &::before{ - background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23FFF'/%3E%3C/svg%3E"); - } - } } &--columns{ /* aspect-ratio: unset; */ @@ -170,11 +175,6 @@ } } &--y{ - .card__icon{ - &::before{ - background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23FFCC00'/%3E%3C/svg%3E"); - } - } &.card--alt{ @apply text-yellow-100; p{ @@ -217,6 +217,113 @@ } } +/** card arrows **/ +.card{ + .card__icon{ + &::before{ + content: ''; + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23000'/%3E%3C/svg%3E"); + background-size: 27px 20px; + @apply inline-block w-[27px] h-5 bg-no-repeat bg-contain; + } + &[href]:not(:where( + /* exclude hash only links */ + [href^="#"], + /* exclude relative but not double slash only links */ + [href^="/"]:not([href^="//"]), + )){ + &::before{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23000'/%3E%3C/svg%3E"); + } + } + } + &:hover{ + .card__icon{ + &::before{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23FFF'/%3E%3C/svg%3E"); + } + &[href]:not(:where( + /* exclude hash only links */ + [href^="#"], + /* exclude relative but not double slash only links */ + [href^="/"]:not([href^="//"]), + )){ + &::before{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23fff'/%3E%3C/svg%3E"); + } + } + } + } + &--alt{ + .card__icon{ + &::before{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23fff'/%3E%3C/svg%3E"); + } + &[href]:not(:where( + /* exclude hash only links */ + [href^="#"], + /* exclude relative but not double slash only links */ + [href^="/"]:not([href^="//"]), + )){ + &::before{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23fff'/%3E%3C/svg%3E"); + } + } + } + &:hover{ + .card__icon{ + &::before{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23fff'/%3E%3C/svg%3E"); + } + &[href]:not(:where( + /* exclude hash only links */ + [href^="#"], + /* exclude relative but not double slash only links */ + [href^="/"]:not([href^="//"]), + )){ + &::before{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23fff'/%3E%3C/svg%3E"); + } + } + } + } + } + &--y{ + .card__icon{ + &::before{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23FFCC00'/%3E%3C/svg%3E"); + } + &[href]:not(:where( + /* exclude hash only links */ + [href^="#"], + /* exclude relative but not double slash only links */ + [href^="/"]:not([href^="//"]), + )){ + &::before{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23FC0'/%3E%3C/svg%3E"); + } + } + } + &:hover{ + .card__icon{ + &::before{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23FFCC00'/%3E%3C/svg%3E"); + } + &[href]:not(:where( + /* exclude hash only links */ + [href^="#"], + /* exclude relative but not double slash only links */ + [href^="/"]:not([href^="//"]), + )){ + &::before{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23FC0'/%3E%3C/svg%3E"); + } + } + } + } + } +} + .card-grid-item{ @apply items-start; &__header{ diff --git a/src/assets/css/components/inputs.css b/src/assets/css/components/inputs.css index 0a143c6..862de07 100644 --- a/src/assets/css/components/inputs.css +++ b/src/assets/css/components/inputs.css @@ -101,4 +101,45 @@ } } } +} + +:root{ + --input-toggle-bg: theme(colors.grey.200); + --input-toggle-slider-bg: theme(colors.grey.300); + + --input-toggle-active-bg: theme(colors.black); + --input-toggle-active-slider-bg: theme(colors.white); +} +.input-toggle{ + @apply inline-block w-12 h-[1.375rem] rounded-full relative overflow-hidden; + input{ + @apply opacity-0 h-0 w-0; + &:checked + span{ + background: var(--input-toggle-active-bg); + &::before{ + background: var(--input-toggle-active-slider-bg); + left: unset; + @apply right-px; + } + &::after{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.521 5.983.525 3.987 0 4.52l2.523 2.523L8 1.53 7.473 1 2.521 5.983Z' fill='%23000'/%3E%3C/svg%3E"); + right: unset; + @apply left-2; + } + } + } + span{ + background: var(--input-toggle-bg); + @apply absolute top-0 left-0 bottom-0 right-0; + &::before{ + content: ''; + background: var(--input-toggle-slider-bg); + @apply absolute left-px top-px h-5 w-5 rounded-full cursor-pointer; + } + &::after{ + content: ''; + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m8.331 1.355-6.977 7.02-.705-.709L7.626.646l.705.709Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m1.353.646 6.978 7.02-.705.71-6.978-7.02.705-.71Z' fill='%23000'/%3E%3C/svg%3E"); + @apply w-2.5 h-2.5 bg-contain absolute right-2 position-center-vertical; + } + } } \ No newline at end of file diff --git a/src/assets/css/components/post-row.css b/src/assets/css/components/post-row.css index 9bd01b8..4277d74 100644 --- a/src/assets/css/components/post-row.css +++ b/src/assets/css/components/post-row.css @@ -1,5 +1,5 @@ .post-row{ - @apply grid-container border-t border-black py-xs; + @apply grid-container; @at-root :where(.grid-container) .post-row{ @apply mx-0 px-0; } @@ -7,10 +7,10 @@ @apply border-grey-200; } &__inner{ - @apply lg:grid grid-cols-2 gap-x-[calc(var(--grid-gutter)*2)] + @apply lg:grid grid-cols-2 gap-x-[calc(var(--grid-gutter)*2)] pt-xs border-t border-black; } &-title{ - @apply text-size-md-lg font-bold mb-md inline-block; + @apply text-size-md-lg font-bold mb-sm md:mb-md inline-block; } &-date{ @apply text-size-md-lg; @@ -24,7 +24,7 @@ } */ } &__footer{ - @apply mt-lg; + /* @apply mt-lg; */ } &--expired, &--completed{ .post-row-date{ @@ -41,4 +41,5 @@ } } } + &--archived{} } \ No newline at end of file diff --git a/src/assets/js/blocks/featured-tabs.js b/src/assets/js/blocks/featured-tabs.js new file mode 100644 index 0000000..bfa328f --- /dev/null +++ b/src/assets/js/blocks/featured-tabs.js @@ -0,0 +1,26 @@ +window.addEventListener('load', (event) => { + + const featuredTabs = document.querySelectorAll('.block-featured-tabs') + + function checkFeaturedTabsHeight(tabs, container, activeTabContent){ + const contentHeight = parseInt(tabs.clientHeight + activeTabContent.clientHeight) + console.log(contentHeight, container.clientHeight ) + if (contentHeight > parseInt(container.clientHeight)) { + container.style.height = `${tabs.clientHeight + activeTabContent.clientHeight}px` + } else if (contentHeight < parseInt(container.clientHeight)) { + container.style.height = 'auto' + } + } + + featuredTabs.forEach(featuredTab => { + const tabs = featuredTab.querySelector('.block-featured-tabs__tabs') + const container = featuredTab.querySelector('[data-tabs-container]') + const activeTab = featuredTab.querySelector('.block-featured-tabs-tab.is-active') + const activeTabContent = activeTab.querySelector('.block-featured-tabs-tab__content') + checkFeaturedTabsHeight(tabs, container, activeTabContent) + + window.addEventListener('resize', function(){ + checkFeaturedTabsHeight(tabs, container, activeTabContent) + } ) + }) +}) \ No newline at end of file diff --git a/src/assets/js/blocks/tabs.js b/src/assets/js/blocks/tabs.js index 253ba8c..452188e 100644 --- a/src/assets/js/blocks/tabs.js +++ b/src/assets/js/blocks/tabs.js @@ -4,10 +4,11 @@ function toggleTab(container, button){ [...container.querySelectorAll('[data-tab-target]')].forEach((b)=>{b.classList.remove('is-selected')}); - [...container.querySelectorAll('[data-tab-index]')].forEach((t)=>{t.style.display = 'none'}); + [...container.querySelectorAll('[data-tab-index]')].forEach((t)=>{t.style.display = 'none'; t.classList.remove('is-active')}); button.classList.add('is-selected') const target = button.getAttribute('data-tab-target') container.querySelector(`[data-tab-index="${target}"]`).style.display = 'block'; + container.querySelector(`[data-tab-index="${target}"]`).classList.add('is-active') } diff --git a/src/blocks/featured-tabs.twig b/src/blocks/featured-tabs.twig index 555bd37..0a7d94b 100644 --- a/src/blocks/featured-tabs.twig +++ b/src/blocks/featured-tabs.twig @@ -6,7 +6,7 @@ {% endfor %} {% for tab in block.content %} -
+
{% include "../layout/partials/picture.twig" with {"image": tab.image } %} diff --git a/src/layout/partials/card.twig b/src/layout/partials/card.twig index 8be88c7..1bfe790 100644 --- a/src/layout/partials/card.twig +++ b/src/layout/partials/card.twig @@ -33,7 +33,7 @@ {% endif %} {% else %} {% if card.show_excerpt %} -

{{card.excerpt}}

+

{{card.excerpt|truncate(120)}}

{% endif %} {% if card.show_category %}

{{card.category}}

diff --git a/src/layout/single-event.twig b/src/layout/single-event.twig index 77d9db6..e790ce0 100644 --- a/src/layout/single-event.twig +++ b/src/layout/single-event.twig @@ -32,7 +32,7 @@
-
+
{% set event_info = { "key": "grid-list", "content": { diff --git a/src/layout/single-news.twig b/src/layout/single-news.twig index 09af742..98a90c8 100644 --- a/src/layout/single-news.twig +++ b/src/layout/single-news.twig @@ -28,7 +28,7 @@
-
+
{% include "../layout/partials/picture.twig" with {"image": post.featured_image } %}
diff --git a/src/layout/single-notice.twig b/src/layout/single-notice.twig index 91fa984..4c3f31d 100644 --- a/src/layout/single-notice.twig +++ b/src/layout/single-notice.twig @@ -28,31 +28,33 @@
- {% set notice_info_content_items = [ - { - "label": "Data", - "text": post.date|date('d.m.Y') - } - ] %} - {% for term in post.terms %} - {% set parent_post_term = term[0] %} - {% set post_term = term[1] %} - {% set notice_info_content_items = notice_info_content_items|merge([ +
+ {% set notice_info_content_items = [ { - "label": taxonomies[~type~].terms[~parent_post_term~].name, - "text": taxonomies[~type~].terms[~parent_post_term~].items[~post_term~].name + "label": "Data", + "text": post.date|date('d.m.Y') } - ]) %} - {% endfor %} - {% set news_info = - { - "key": "grid-list", - "content": { - "items": notice_info_content_items + ] %} + {% for term in post.terms %} + {% set parent_post_term = term[0] %} + {% set post_term = term[1] %} + {% set notice_info_content_items = notice_info_content_items|merge([ + { + "label": taxonomies[~type~].terms[~parent_post_term~].name, + "text": taxonomies[~type~].terms[~parent_post_term~].items[~post_term~].name + } + ]) %} + {% endfor %} + {% set news_info = + { + "key": "grid-list", + "content": { + "items": notice_info_content_items + } } - } - %} - {% include '../blocks/grid-list.twig' with {'block': news_info } %} + %} + {% include '../blocks/grid-list.twig' with {'block': news_info } %} +
{% if post.abstract %}