diff --git a/src/assets/css/base/layout.css b/src/assets/css/base/layout.css index 4d7268f..51c0212 100644 --- a/src/assets/css/base/layout.css +++ b/src/assets/css/base/layout.css @@ -6,6 +6,7 @@ } body{ + -webkit-font-smoothing: antialiased; @apply bg-white; &.has-primary-bg{ @apply bg-yellow-100; diff --git a/src/assets/css/blocks/featured-content.css b/src/assets/css/blocks/featured-content.css index 3d9c9b1..c5047fd 100644 --- a/src/assets/css/blocks/featured-content.css +++ b/src/assets/css/blocks/featured-content.css @@ -10,6 +10,16 @@ @apply w-full h-full object-cover; } } + .block-title{ + &__inner{ + a{ + @apply text-grey-400; + &:hover{ + @apply text-grey-400; + } + } + } + } .block-paragraph{ @apply mt-8.75 lg:w-11/12; p{ diff --git a/src/assets/css/blocks/filters.css b/src/assets/css/blocks/filters.css index 584ee18..7aeacfd 100644 --- a/src/assets/css/blocks/filters.css +++ b/src/assets/css/blocks/filters.css @@ -1,10 +1,26 @@ .block-filters{ - @apply my-md xl:my-lg; + @apply my-md xl:my-lg bg-grey-100 lg:bg-transparent; + &__header{ + @apply font-bold py-xs flex lg:hidden items-center relative h-[3.125rem] cursor-pointer; + &::after{ + content: ''; + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m18.504 21.319 5.66-5.241.68.733-6.34 5.87-6.34-5.87.68-.733 5.66 5.24Z' fill='%23000'/%3E%3C/svg%3E"); + @apply absolute right-0 top-0 bg-no-repeat bg-contain w-[3.125rem] h-[3.125rem] pointer-events-none; + } + &.is-toggled{ + &::after{ + @apply rotate-180; + } + } + } &__inner{ - @apply flex flex-wrap -mx-[var(--grid-gutter)]; + @apply hidden lg:flex flex-wrap -mx-[var(--grid-gutter)] mt-sm lg:mt-0; > *{ @apply mb-sm xl:mb-0 w-full lg:flex-1 px-[var(--grid-gutter)]; } + &.is-visible{ + @apply flex; + } } &--alt{ .block-filters__inner{ diff --git a/src/assets/css/blocks/grid-list.css b/src/assets/css/blocks/grid-list.css index d1a4238..38c7f53 100644 --- a/src/assets/css/blocks/grid-list.css +++ b/src/assets/css/blocks/grid-list.css @@ -20,7 +20,7 @@ @apply border-yellow-300; p{ &:first-child{ - @apply text-yellow-300; + @apply text-yellow-400; } } } diff --git a/src/assets/css/blocks/link.css b/src/assets/css/blocks/link.css index 49a266a..5f0554a 100644 --- a/src/assets/css/blocks/link.css +++ b/src/assets/css/blocks/link.css @@ -2,7 +2,7 @@ /* @apply grid grid-cols-2 items-center; */ &.block-container{ /* @ TODO */ - width: calc(100% - calc(var(--grid-gutter)*2)); + width: calc(100% - calc(var(--grid-gutter)*4)); @apply mx-[calc(var(--grid-gutter)*2)]; } @apply flex text-size-lg border-y border-grey-200 relative; @@ -41,17 +41,13 @@ [href^="#"], /* exclude relative but not double slash only links */ [href^="/"]:not([href^="//"]), - /* domains to exclude */ - /* [href*="//stackoverflow.com"], */ - /* subdomains to exclude */ - /* [href*="//meta.stackoverflow.com"] */ )){ &::before{ background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.0124 17.0725L21.043 16.6891L21.1198 14.6906L34.3016 15.1975L34.8086 28.3793L32.81 28.4562L32.4266 18.4867L16.3673 34.546L14.9531 33.1318L31.0124 17.0725Z' fill='black'/%3E%3C/svg%3E%0A"); } span{ span{ - @apply inline-block text-size-sm text-grey-300 /*self-start*/ ml-1 -translate-y-1.5; + @apply inline-block text-size-sm text-grey-300 /*self-start*/ ml-1 -translate-y-[0.875rem]; } } &:hover{ @@ -96,7 +92,7 @@ @apply border-yellow-300; span{ span{ - @apply text-yellow-300; + @apply text-yellow-400; } } &:hover{ diff --git a/src/assets/css/blocks/subnav-columns.css b/src/assets/css/blocks/subnav-columns.css index 14ddba0..da6d41e 100644 --- a/src/assets/css/blocks/subnav-columns.css +++ b/src/assets/css/blocks/subnav-columns.css @@ -41,7 +41,7 @@ ul{ li:not(.is-active){ a{ - @apply text-yellow-300; + @apply text-yellow-400; } } } diff --git a/src/assets/css/blocks/title.css b/src/assets/css/blocks/title.css index 779b248..322a860 100644 --- a/src/assets/css/blocks/title.css +++ b/src/assets/css/blocks/title.css @@ -4,6 +4,9 @@ @apply text-size-2xl mb-0; + a{ @apply text-grey-300 text-size-lg shrink-0; + &:hover{ + @apply text-black; + } } } .block-title__inner{ diff --git a/src/assets/css/components/card.css b/src/assets/css/components/card.css index 6506354..a6f8e94 100644 --- a/src/assets/css/components/card.css +++ b/src/assets/css/components/card.css @@ -1,85 +1,13 @@ -/* .card{ - @apply relative bg-grey-100 p-4; - &--black{ - @apply bg-black; - p, span{ - @apply text-white; - } - } - &__content{ - @apply aspect-square flex flex-col justify-between; - } - .card-header, .card-main{ - @apply relative z-10; - } - .card-header{ - @apply flex justify-between text-grey-300; - } - .card-date{ - @apply text-size-sm; - } - .card-title{ - @apply text-size-md font-bold; - } - .card-bg{ - @apply absolute left-0 top-0 w-full h-full scale-125 origin-center opacity-0 pointer-events-none bg-black; - img{ - @apply w-full h-full object-cover z-10 opacity-75; - } - } - &--has-background{ - &.is-hovered{ - @apply bg-transparent z-20; - p, span{ - @apply text-yellow-100; - } - .card-bg{ - @apply opacity-100; - } - &::after{ - content: ''; - @apply w-full h-full border border-yellow-100 absolute left-0 top-0; - } - } - } - &--has-keyword{ - .card-keyword{ - font-size: calc(70vw / var(--card-keyword-chars)); - @apply absolute top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%] opacity-0 pointer-events-none text-yellow-100 whitespace-nowrap z-50; - } - &.is-hovered{ - @apply z-20 bg-white; - .card-header{ - span{ - @apply text-grey-300; - } - } - .card-main{ - p, span{ - @apply text-black; - } - } - .card-keyword{ - @apply opacity-100; - } - &::after{ - content: ''; - @apply w-full h-full border border-grey-200 absolute left-0 top-0; - } - } - } -} */ - .cards-container{ @apply grid-container mb-base; @at-root :where(.grid-container) .cards-container{ @apply mx-0 px-0; } &__inner{ - @apply grid gap-[calc(var(--grid-gutter)*2)] grid-cols-1 md:grid-cols-2 xl:grid-cols-4; - &-squares{ + @apply grid gap-[calc(var(--grid-gutter)*2)] grid-cols-12; + /* &-squares{ @apply max-xl:lg:grid-cols-3; - } + } */ } > p{ @apply font-bold mb-4; @@ -88,12 +16,18 @@ .card{ /* @apply bg-grey-100 xl:grid items-start grid-cols-2 relative; */ - @apply bg-grey-100 relative flex flex-col items-end aspect-square p-[calc(var(--grid-gutter)*2)]; + @apply bg-grey-100 relative flex flex-wrap flex-col items-end xl:aspect-square p-[calc(var(--grid-gutter)*2)] col-span-12 md:col-span-6 lg:col-span-3; p{ @apply text-black; + + p{ + @apply mt-4; + } } a{ @apply underline; + &:hover{ + @apply no-underline; + } } &__excerpt{ @apply grow; @@ -108,21 +42,26 @@ } } &__title{ - @apply w-full flex items-end; - > p{ + @apply w-full flex items-start; + > *:not(.card__icon){ @apply text-size-lg mb-0 w-full; - + svg{ - @apply shrink-0 ml-3 mb-2; + } + > a{ + @apply no-underline; + } + .card__icon{ + svg{ + @apply shrink-0 ml-3 relative top-2; } } - &:first-child:last-child{ + /* &:first-child:last-child{ @apply items-start; > p{ + svg{ @apply mb-0 mt-3; } } - } + } */ } header{ @apply mb-base xl:mb-0; @@ -142,7 +81,7 @@ &--columns{ aspect-ratio: unset; > div{ - @apply w-full aspect-square; + @apply w-full xl:aspect-square; &:first-child{ @apply flex flex-col xl:w-full xl:h-full; header{ @@ -150,33 +89,35 @@ } &:last-child{ grid-column: span 2; + @apply h-full xl:h-auto; } } - &:last-child:not(:first-child){ - @apply hidden lg:flex items-end xl:h-full; + &.card__content{ + @apply /*hidden lg:flex*/ flex flex-grow xl:flex-grow-0 items-end xl:h-full mt-base xl:mt-0; p{ + @screen md{ + display: -webkit-box; + -webkit-line-clamp: 7; + -webkit-box-orient: vertical; + overflow: hidden; + } @apply mb-0; } } } } - &--span{ + &--column-span{ @screen xl{ align-self: inherit; - grid-column: span 2; aspect-ratio: 2/1; } - @apply flex-row xl:grid items-start grid-cols-2; + @apply xl:flex-row xl:grid items-start grid-cols-2 col-span-12 md:col-span-6; > div{ @screen xl{ aspect-ratio: unset; } - header{ - p:first-child{ - a{ - @apply xl:absolute xl:right-[calc(var(--grid-gutter)*2)] xl:top-7; - } - } + .card__icon{ + @apply xl:absolute xl:right-[calc(var(--grid-gutter)*2)] xl:top-7; } footer{ /* @apply mb-base xl:mb-0; */ diff --git a/src/assets/css/components/contacts-section.css b/src/assets/css/components/contacts-section.css index 9338652..4d27a78 100644 --- a/src/assets/css/components/contacts-section.css +++ b/src/assets/css/components/contacts-section.css @@ -3,7 +3,7 @@ .block-title{ &__inner{ a{ - @apply text-yellow-300; + @apply text-yellow-400; } } } diff --git a/src/assets/css/components/footer.css b/src/assets/css/components/footer.css index 50555f4..e7f193a 100644 --- a/src/assets/css/components/footer.css +++ b/src/assets/css/components/footer.css @@ -27,6 +27,9 @@ &__main{ @apply grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-[calc(var(--grid-gutter)*2)]; > div{ + &:not(:last-child){ + @apply mb-sm xl:mb-0; + } p{ @apply text-size-sm md:text-size-base text-white mb-0; } diff --git a/src/assets/css/components/header.css b/src/assets/css/components/header.css index 011a7db..e8b5b33 100644 --- a/src/assets/css/components/header.css +++ b/src/assets/css/components/header.css @@ -156,9 +156,12 @@ } @apply break-inside-avoid opacity-0; > a{ - @apply font-bold border-y border-t-black border-b-grey-200; + @apply pl-0.5 font-bold border-y border-t-black border-b-grey-200; &:first-child:last-child{ @apply border-b border-b-grey-200; + &:hover{ + @apply border-b-black; + } } } } diff --git a/src/assets/css/components/inputs.css b/src/assets/css/components/inputs.css index 2db3350..d6ecca0 100644 --- a/src/assets/css/components/inputs.css +++ b/src/assets/css/components/inputs.css @@ -3,9 +3,9 @@ @apply font-bold mb-3.75 block; } &__field{ - @apply border-y border-black relative; + @apply border-y border-grey-200 relative; input, select{ - @apply w-full appearance-none bg-transparent h-9 text-grey-500; + @apply w-full appearance-none bg-transparent h-9 text-grey-300 placeholder-grey-300; &:-webkit-autofill{ -webkit-box-shadow: 0 0 0 30px white inset !important; &:hover, &:focus, &:active{ @@ -51,8 +51,9 @@ } @at-root :where(body.has-primary-bg) .input{ &__field{ + @apply border-yellow-300; input, select{ - @apply text-yellow-300 placeholder-yellow-300; + @apply text-yellow-400 placeholder-yellow-400; &:-webkit-autofill{ -webkit-box-shadow: 0 0 0 30px theme(colors.yellow.100) inset !important; &:hover, &:focus, &:active{ diff --git a/src/assets/css/components/posts-archive-header.css b/src/assets/css/components/posts-archive-header.css index d223179..2779c1c 100644 --- a/src/assets/css/components/posts-archive-header.css +++ b/src/assets/css/components/posts-archive-header.css @@ -1,5 +1,8 @@ .posts-archive-header{ @apply mt-sm md:mt-12.5 xl:mt-25; + .columns{ + @apply items-baseline; + } .breadcrumbs{ @apply mt-0 ml-0 px-0 mb-base md:mb-lg; } diff --git a/src/assets/js/site.js b/src/assets/js/site.js index cae4acc..c91e0ab 100644 --- a/src/assets/js/site.js +++ b/src/assets/js/site.js @@ -96,11 +96,17 @@ /** * Get header height */ + let headerHeight function getHeaderHeight(){ - document.documentElement.style.setProperty("--header-height", `${header.clientHeight}px`) + headerHeight = header.clientHeight + return `${headerHeight}px` + } + + function setHeaderHeightVar(){ + document.documentElement.style.setProperty("--header-height", getHeaderHeight()) } - getHeaderHeight() + setHeaderHeightVar() /** * Hide header if scrolling down, show if scrolling up @@ -113,7 +119,7 @@ // const currentScrollPos = window.scrollY //if you start scrolling add class - if (currentScrollPos > 0 && !menuIsOpen) { + if (currentScrollPos > headerHeight && !menuIsOpen) { body.classList.add('is-scrolled') } else{ body.classList.remove('is-scrolled') @@ -121,7 +127,7 @@ // if scrolling down, hide header and position logo to the left // if scrolling up, show header and logo in initial position - if (prevScrollPos > 0 && prevScrollPos < currentScrollPos && !menuIsOpen) { + if (prevScrollPos > headerHeight && prevScrollPos < currentScrollPos && !menuIsOpen) { header.classList.add('is-hidden') logo.classList.add('is-visible') overlay.classList.remove('is-active') @@ -378,6 +384,19 @@ }) /** + * Filters + */ + const filters = document.querySelectorAll('.block-filters') + filters.forEach(filter => { + const trigger = filter.querySelector('.block-filters__header') + const content = filter.querySelector('.block-filters__inner') + trigger.addEventListener('click', function(){ + trigger.classList.toggle('is-toggled') + content.classList.toggle('is-visible') + }) + }) + + /** * Back to top */ document.getElementById('backToTop').addEventListener('click', function(){ @@ -414,7 +433,7 @@ // set vh set100vh() // get header height - getHeaderHeight() + setHeaderHeightVar() // when resizing disable menu if toggled toggleMenuWhenResized() } diff --git a/src/blocks/filters.twig b/src/blocks/filters.twig index dc318ae..99b5e07 100644 --- a/src/blocks/filters.twig +++ b/src/blocks/filters.twig @@ -1,53 +1,59 @@ -
-
- {% for filter in block.content.items %} - {% if filter.type == 'term' %} - {% set options = taxonomies[filter.post_type].terms[filter.id] %} - {% set label = options.name %} +
+
+ Filtra + +
+
+
+ {% for filter in block.content.items %} + {% if filter.type == 'term' %} + {% set options = taxonomies[filter.post_type].terms[filter.id] %} + {% set label = options.name %} +
+
+ +
+ + +
+
+
+ {% endif %} + {% if filter.type == 'post_type' %} + {% set options = post_type[filter.post_type] %} + {% set label = options.name %} +
+
+ +
+ + +
+
+
+ {% endif %} + {% endfor %} + {% if block.content.has_search %}
- -
+ +
- +
{% endif %} - {% if filter.type == 'post_type' %} - {% set options = post_type[filter.post_type] %} - {% set label = options.name %} -
-
- -
- - -
-
-
- {% endif %} - {% endfor %} - {% if block.content.has_search %} -
-
- -
- - -
-
-
- {% endif %} +
diff --git a/src/layout/partials/card.twig b/src/layout/partials/card.twig index ff5b194..faff355 100644 --- a/src/layout/partials/card.twig +++ b/src/layout/partials/card.twig @@ -1,8 +1,8 @@ -<{% if card.columns %}div{% else %}a href="{{card.url}}"{% endif %} class="card{% if card.columns %} card--columns{% endif %}{% if card.text %} card--span{% endif %} {{card.classes}}"> +<{% if card.columns %}div{% else %}a href="{{card.url}}"{% endif %} class="card{% if card.columns %} card--columns{% endif %}{% if card.text %} card--column-span{% endif %} {{card.classes}}"> {% if card.columns %}
-

{{card.title}}

+
{{card.title}}
{% if card.subtitle %}

{{card.subtitle}}

{% endif %} @@ -27,7 +27,7 @@
{% if card.text %} -
+

{{card.text}}

{% endif %} @@ -45,7 +45,7 @@ {% endif %}

{{card.title}}

- +
{% endif %} diff --git a/tailwind.config.js b/tailwind.config.js index f4368eb..d011dbe 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -31,14 +31,15 @@ yellow: { 100: '#FFCC00', 200: '#E5B700', - 300: '#9E7F00' + 300: '#9E7F00', + 400: '#6E5800' }, white: '#FFFFFF', grey: { 100: '#F2F5F5', 200: '#D3D8D8', - 300: '#A3ADAD', - 400: '#838D8D', + 300: '#6E7878', + 400: '#8D9797', 500: '#535A5A' }, black: '#000000',