diff --git a/data.json b/data.json index c7e821f..5d61667 100644 --- a/data.json +++ b/data.json @@ -2309,6 +2309,16 @@ { "key": "link", "classes": "block-link--sm block-link--white", + "url": "http://ext-domain.com", + "content": { + "name": "Per saperne di più", + "url": "http://ext-domain.com", + "external_name": "europan.fi" + } + }, + { + "key": "link", + "classes": "block-link--sm block-link--white", "url": "#", "content": { "name": "Lauree triennali" @@ -3639,12 +3649,14 @@ { "title": "Tirocinio", "url": "#", + "classes": "card--bottom-title", "category": "Servizi", "show_category": true }, { "title": "Laurea magistrale Design del prodotto, della comunicazione visiva...", "url": "#", + "classes": "card--bottom-title", "category": "Didattica", "show_category": true } diff --git a/src/assets/css/base/grid.css b/src/assets/css/base/grid.css index 356e2de..7dbece4 100644 --- a/src/assets/css/base/grid.css +++ b/src/assets/css/base/grid.css @@ -3,6 +3,9 @@ @screen md{ --grid-offset: 120px; } + @screen 2xl{ + --grid-offset: max(120px, calc((100vw - theme(screens.2xl))/2)); + } --grid-gutter: 0.46875rem; /* 7.5px */ @screen xl{ --grid-gutter: 0.625rem; /* 10px */ diff --git a/src/assets/css/blocks/featured-content.css b/src/assets/css/blocks/featured-content.css index c5047fd..116fb71 100644 --- a/src/assets/css/blocks/featured-content.css +++ b/src/assets/css/blocks/featured-content.css @@ -1,5 +1,8 @@ .block-featured-content-stacked{ - @apply py-sm xl:py-base bg-black text-white /*mt-md xl:mt-lg*/; + @apply mb-base md:mb-lg py-sm xl:py-base bg-black text-white /*mt-md xl:mt-lg*/; + &:has(+ .contacts-section){ + @apply mb-0; + } p{ @apply text-white; } @@ -15,7 +18,7 @@ a{ @apply text-grey-400; &:hover{ - @apply text-grey-400; + @apply text-white; } } } @@ -57,6 +60,24 @@ } .block-link{ @apply lg:self-end; + &:hover{ + @apply bg-white text-black; + &::before{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m34.711 24-6.778-7.32 1.467-1.36L38.363 25 29.4 34.68l-1.467-1.36L34.71 26H12v-2h22.711Z' fill='%23000'/%3E%3C/svg%3E"); + } + } + &[href]:not(:where( + /* exclude hash only links */ + [href^="#"], + /* exclude relative but not double slash only links */ + [href^="/"]:not([href^="//"]), + )){ + &:hover{ + &::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"); + } + } + } } } } @@ -101,6 +122,9 @@ &.is-selected{ @apply text-white; } + &:hover{ + @apply text-white; + } } } &-tab{ diff --git a/src/assets/css/blocks/filters.css b/src/assets/css/blocks/filters.css index 7aeacfd..075f3f4 100644 --- a/src/assets/css/blocks/filters.css +++ b/src/assets/css/blocks/filters.css @@ -1,5 +1,8 @@ .block-filters{ @apply my-md xl:my-lg bg-grey-100 lg:bg-transparent; + @at-root :where(body.has-primary-bg) .block-filters{ + @apply bg-yellow-200 lg:bg-transparent; + } &__header{ @apply font-bold py-xs flex lg:hidden items-center relative h-[3.125rem] cursor-pointer; &::after{ diff --git a/src/assets/css/blocks/image.css b/src/assets/css/blocks/image.css index 0278c3c..864f2df 100644 --- a/src/assets/css/blocks/image.css +++ b/src/assets/css/blocks/image.css @@ -1,6 +1,6 @@ .block-image{ &__inner{ - @apply aspect-video; + @apply aspect-[21/9]; img{ @apply w-full h-full object-cover; } diff --git a/src/assets/css/blocks/link.css b/src/assets/css/blocks/link.css index 5f0554a..f1574fb 100644 --- a/src/assets/css/blocks/link.css +++ b/src/assets/css/blocks/link.css @@ -3,7 +3,10 @@ &.block-container{ /* @ TODO */ width: calc(100% - calc(var(--grid-gutter)*4)); - @apply mx-[calc(var(--grid-gutter)*2)]; + @screen md{ + width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2); + } + @apply mx-[calc(var(--grid-gutter)*2)] md:ml-[var(--grid-offset)]; } @apply flex text-size-lg border-y border-grey-200 relative; &:last-child:not(:first-child){ @@ -65,6 +68,18 @@ @apply pl-12 ; + } + &[href]:not(:where( + /* exclude hash only links */ + [href^="#"], + /* exclude relative but not double slash only links */ + [href^="/"]:not([href^="//"]), + )){ + span{ + span{ + @apply -translate-y-[0.4rem]; + } + } } } &--white{ @@ -85,6 +100,11 @@ &::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='white'/%3E%3C/svg%3E%0A"); } + span{ + span{ + @apply text-grey-400; + } + } } } @at-root body.has-primary-bg{ diff --git a/src/assets/css/blocks/subnav-columns.css b/src/assets/css/blocks/subnav-columns.css index da6d41e..e9dafd0 100644 --- a/src/assets/css/blocks/subnav-columns.css +++ b/src/assets/css/blocks/subnav-columns.css @@ -6,6 +6,7 @@ xl:mt-25 xl:mb-base ; &__nav{ + @apply mb-sm md:mb-base; ul{ @apply flex; li{ diff --git a/src/assets/css/blocks/tabs.css b/src/assets/css/blocks/tabs.css index a36d3e2..4caa0cc 100644 --- a/src/assets/css/blocks/tabs.css +++ b/src/assets/css/blocks/tabs.css @@ -10,6 +10,9 @@ &.is-selected{ @apply text-black; } + &:hover{ + @apply text-black; + } } } &-tab{ diff --git a/src/assets/css/components/breadcrumbs.css b/src/assets/css/components/breadcrumbs.css index 9b14e90..dac4945 100644 --- a/src/assets/css/components/breadcrumbs.css +++ b/src/assets/css/components/breadcrumbs.css @@ -17,7 +17,13 @@ } } a, h1{ - @apply text-size-lg text-grey-300; + @apply text-size-lg; + } + a{ + @apply text-grey-300; + &:hover{ + @apply text-black; + } } h1{ @apply inline; diff --git a/src/assets/css/components/card.css b/src/assets/css/components/card.css index a6f8e94..981aac0 100644 --- a/src/assets/css/components/card.css +++ b/src/assets/css/components/card.css @@ -16,22 +16,25 @@ .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 xl:aspect-square p-[calc(var(--grid-gutter)*2)] col-span-12 md:col-span-6 lg: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; - + p{ - @apply mt-4; - } } a{ @apply underline; &:hover{ @apply no-underline; } + &[href^="mailto"]{ + @apply break-all; + } } &__excerpt{ @apply grow; } + &__subtitle{ + @apply mt-4; + } .card__category{ @apply grow text-grey-300 w-full text-size-md; } @@ -50,8 +53,8 @@ @apply no-underline; } .card__icon{ + @apply shrink-0 ml-3 relative top-2.5; svg{ - @apply shrink-0 ml-3 relative top-2; } } /* &:first-child:last-child{ @@ -78,8 +81,14 @@ } } } + &:hover{ + @apply bg-black text-white; + p{ + @apply text-white; + } + } &--columns{ - aspect-ratio: unset; + /* aspect-ratio: unset; */ > div{ @apply w-full xl:aspect-square; &:first-child{ @@ -89,7 +98,7 @@ } &:last-child{ grid-column: span 2; - @apply h-full xl:h-auto; + @apply h-full; } } &.card__content{ @@ -107,11 +116,13 @@ } } &--column-span{ + aspect-ratio: unset; @screen xl{ align-self: inherit; - aspect-ratio: 2/1; + /* aspect-ratio: 2/1; */ + aspect-ratio: 2/0.98; } - @apply xl:flex-row xl:grid items-start grid-cols-2 col-span-12 md:col-span-6; + @apply xl:flex-row xl:grid items-start grid-cols-2 col-span-12 lg:col-span-6; > div{ @screen xl{ aspect-ratio: unset; @@ -162,4 +173,12 @@ } } } + &--bottom-title{ + .card__title{ + @apply items-end; + } + .card__icon{ + @apply top-[unset] bottom-2.5; + } + } } \ No newline at end of file diff --git a/src/assets/css/components/header.css b/src/assets/css/components/header.css index e8b5b33..006dcd0 100644 --- a/src/assets/css/components/header.css +++ b/src/assets/css/components/header.css @@ -90,24 +90,6 @@ @apply font-bold; } &-submenu{ - li{ - /* .menu-item{ - @apply relative overflow-hidden; - &-overlay{ - @apply absolute z-10 !important; - @apply bg-black w-full h-full block overflow-hidden top-0 left-0 pointer-events-none opacity-100; - } - > a{ - transition: color .4s ease; - @apply block text-black; - } - &:hover{ - > a{ - @apply relative text-white z-20; - } - } - } */ - } > li{ @apply mr-0; > a{ @@ -150,6 +132,7 @@ @apply hidden; } > li { + margin-top: -1px; transition: opacity .25s ease .25s; @at-root .site-header-navbar__main nav.is-toggled .site-header-navbar-submenu-0 > li{ transition: none; diff --git a/src/assets/css/components/posts-archive-header.css b/src/assets/css/components/posts-archive-header.css index 2779c1c..c4bd959 100644 --- a/src/assets/css/components/posts-archive-header.css +++ b/src/assets/css/components/posts-archive-header.css @@ -34,7 +34,7 @@ } } &:not(:last-child){ - @apply mr-4; + @apply mr-2; &::after{ content: ','; @apply text-black text-size-lg; diff --git a/src/assets/css/components/tease.css b/src/assets/css/components/tease.css index 3130b86..cdc6b0e 100644 --- a/src/assets/css/components/tease.css +++ b/src/assets/css/components/tease.css @@ -1,5 +1,5 @@ .tease-wrapper{ - @apply grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-[calc(var(--grid-gutter)*2)] gap-y-lg; + @apply grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-[calc(var(--grid-gutter)*2)] gap-y-md xl:gap-y-lg; .tease{ /* @apply mb-lg; */ /* @TODO */ @@ -24,6 +24,11 @@ .tease__main{ .tease-main-header{ @apply py-3 flex justify-between text-size-sm text-grey-300; + span{ + &:last-child{ + @apply ml-2; + } + } } .tease-main-title{ @apply text-size-md font-bold; @@ -39,8 +44,9 @@ &--lg{ @apply aspect-auto; .tease__img{ - @apply aspect-[4/3] relative mb-xs; + @apply aspect-[3/2] relative mb-xs; img{ + transition: transform ease .2s; @apply w-full h-full object-cover; } } @@ -51,26 +57,35 @@ } .tease__excerpt{ @apply mb-0 md:pr-xs; + p{ + @apply mb-0; + } } &:hover{ .tease__img{ @apply h-auto !important; + img{ + transform: scale(1.05); + } } } } } .tease-event{ - @apply lg:grid grid-cols-3 gap-x-[calc(var(--grid-gutter)*2)] py-xs border-t border-grey-200; + @apply lg:grid grid-cols-12 gap-x-[calc(var(--grid-gutter)*2)] py-xs border-t border-grey-200; ; &__date{ - @apply text-size-md-lg font-bold; + @apply text-size-md-lg font-bold col-span-2; span{ - @apply block; + @apply lg:block; + + span{ + @apply ml-2 lg:ml-0; + } } } &__info{ - @apply flex flex-col justify-between text-size-md-lg; + @apply flex flex-col justify-between text-size-md-lg col-span-4 mb-sm lg:mb-0; span{ @apply block; + span{ @@ -81,8 +96,11 @@ } } } + &__content{ + @apply col-span-6; + } &__location{ - @apply text-base; + @apply text-base mt-xs lg:mt-0; } &__title{ @apply font-bold text-size-md-lg mb-0; diff --git a/src/assets/css/page/events.css b/src/assets/css/page/events.css index efffe39..3319fa1 100644 --- a/src/assets/css/page/events.css +++ b/src/assets/css/page/events.css @@ -1,10 +1,14 @@ .event-image{ - @apply aspect-[3/1] mb-sm md:mb-md; + @apply aspect-[21/9] mb-sm md:mb-md; img{ @apply w-full h-full object-cover; } } +.event-col-sticky{ + @apply lg:sticky lg:top-[calc(var(--grid-gutter)*2)]; +} + .event-subtitle{ @apply text-size-md-lg; } diff --git a/src/assets/css/page/news.css b/src/assets/css/page/news.css index d150fa5..2d37fd2 100644 --- a/src/assets/css/page/news.css +++ b/src/assets/css/page/news.css @@ -3,7 +3,7 @@ @apply mb-lg; } &-col-sticky{ - @apply mb-md lg:mb-0 lg:sticky lg:top-[var(--header-height)]; + @apply mb-md lg:mb-0 lg:sticky lg:top-[calc(var(--grid-gutter)*2)]; } &-image{ @apply mb-md; diff --git a/src/blocks/contacts-section.twig b/src/blocks/contacts-section.twig index b72e697..84f7f49 100644 --- a/src/blocks/contacts-section.twig +++ b/src/blocks/contacts-section.twig @@ -6,11 +6,11 @@
{% include '../blocks/title.twig' with {'block': block.title } %} {% for row in block.content %} -
+
{% if row.title %}

{{row.title}}

{% endif %} -
+
{% for card in row.items %} {% set card = card|merge({"columns":true, "classes": "card--alt card--y"}) %} {% include "../layout/partials/card.twig" with {"card": card} %} diff --git a/src/layout/partials/card.twig b/src/layout/partials/card.twig index faff355..b0da098 100644 --- a/src/layout/partials/card.twig +++ b/src/layout/partials/card.twig @@ -4,7 +4,7 @@
{{card.title}}
{% if card.subtitle %} -

{{card.subtitle}}

+

{{card.subtitle}}

{% endif %}