È un grande piacere darvi il benvenuto nel nuovo sito web della nostra università. Questa piattaforma è il risultato di un lavoro partecipato di tutta la comunità Iuav ed è stata progettata per offrirvi un’esperienza di navigazione semplice, intuitiva e accessibile, riflettendo il nostro impegno verso l’innovazione e l’eccellenza nel progetto.
Speriamo che il nuovo sito, pur in una prima provvisoria versione, possa rispondere alle vostre esigenze e facilitare l’accesso alle risorse della nostra comunità accademica. Vi invitiamo a esplorare le varie sezioni e a scoprire tutto ciò che la nostra università ha da offrire. Buona navigazione!
Il Rettore Benno Albrecht
" + } + }, + { "key": "home-scroll-banner", "content": { "video": { diff --git a/src/assets/css/blocks/alert-bar.css b/src/assets/css/blocks/alert-bar.css new file mode 100644 index 0000000..8770d07 --- /dev/null +++ b/src/assets/css/blocks/alert-bar.css @@ -0,0 +1,52 @@ +.block-alert-bar{ + @apply mb-xs; + &__inner{ + @apply bg-blue text-white min-h-[60px] flex items-center py-2; + > div{ + @apply block-container font-bold; + button{ + @apply block md:inline-block font-normal md:ml-4 lg:ml-7; + } + } + } + &-modal{ + @apply hidden; + &__overlay{ + animation: alertModalFadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1); + @apply fixed top-0 left-0 w-full h-screen bg-black bg-opacity-50 z-50 flex items-center justify-center; + } + &__inner{ + transition: opacity .3s ease; + @apply relative w-full max-w-xl bg-blue p-[calc(var(--grid-gutter)*2)] pr-lg; + > *{ + @apply text-white; + &:last-child{ + @apply mb-0; + } + } + } + &__close{ + background-image: url("data:image/svg+xml,%3Csvg width='37' height='37' viewBox='0 0 37 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24.8607 12.8432L12.8399 24.8641L12.1328 24.157L24.1536 12.1361L24.8607 12.8432Z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.8425 12.1368L24.8634 24.1576L24.1562 24.8647L12.1354 12.8439L12.8425 12.1368Z' fill='%23fff'/%3E%3C/svg%3E"); + @apply absolute w-12.5 h-12.5 right-0 top-0 bg-contain; + } + &.is-active{ + @apply block; + } + &[aria-hidden="false"]{ + .block-alert-bar-modal__overlay{ + animation: alertModalFadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1); + } + } + } +} + +@keyframes alertModalFadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes alertModalFadeOut { + from { opacity: 1; } + to { opacity: 0; } +} + diff --git a/src/assets/css/components/overlay.css b/src/assets/css/components/overlay.css new file mode 100644 index 0000000..cf0bd83 --- /dev/null +++ b/src/assets/css/components/overlay.css @@ -0,0 +1,7 @@ +#overlay{ + transition: opacity .5s ease; + @apply fixed top-0 left-0 w-full h-screen bg-black bg-opacity-50 z-30 opacity-0 invisible pointer-events-none; + &.is-active{ + @apply opacity-100 visible pointer-events-auto; + } +} \ No newline at end of file diff --git a/src/assets/js/blocks/alert-bar.js b/src/assets/js/blocks/alert-bar.js new file mode 100644 index 0000000..b809e77 --- /dev/null +++ b/src/assets/js/blocks/alert-bar.js @@ -0,0 +1,21 @@ +window.addEventListener('load', (event) => { + + const alerts = document.querySelectorAll('.block-alert-bar') + + alerts.forEach(alert => { + const modalOpenButton = alert.querySelector('[data-open-alert-modal]') + const modal = alert.querySelector('[data-alert-modal]') + const modalCloseButton = alert.querySelector('[data-close-alert-modal]') + modalOpenButton.addEventListener('click', function(){ + modal.classList.add('is-active') + modal.setAttribute('aria-hidden', 'false') + }) + modalCloseButton.addEventListener('click', function(){ + modal.setAttribute('aria-hidden', 'true') + setTimeout(() => { + modal.classList.remove('is-active') + }, 275); + }) + }) + +}) \ No newline at end of file diff --git a/src/assets/js/site.js b/src/assets/js/site.js index 8d3ac26..e93cd55 100644 --- a/src/assets/js/site.js +++ b/src/assets/js/site.js @@ -1,5 +1,6 @@ import './blocks/cb.js'; import './blocks/accordion.js'; +import './blocks/alert-bar.js'; import './blocks/carousel.js'; import './blocks/cards-grid.js'; import './blocks/featured-tabs.js'; diff --git a/src/blocks/alert-bar.twig b/src/blocks/alert-bar.twig new file mode 100644 index 0000000..8cb9556 --- /dev/null +++ b/src/blocks/alert-bar.twig @@ -0,0 +1,17 @@ +