diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/data.json b/data.json index bbeca7d..81508e0 100644 --- a/data.json +++ b/data.json @@ -88,7 +88,7 @@ "url": "#", "children": [ { - "name": "Direzione genearle", + "name": "Direzione generale", "url": "#" }, { @@ -127,7 +127,7 @@ }, { "name": "Laboratori", - "url": "#" + "url": "/pages/laboratori/index.html" }, { "name": "Aggregazioni di ricerca", @@ -243,7 +243,65 @@ }, { "name": "Didattica", - "url": "#" + "url": "#", + "children": [ + { + "name": "Chi siamo", + "url": "#", + "children": [ + { + "name": "Piani, programmazione e strategie", + "url": "#" + }, + { + "name": "Accordi relazioni e convenzioni", + "url": "#" + }, + { + "name": "Sostenibilità", + "url": "#" + }, + { + "name": "Didattica", + "url": "#" + }, + { + "name": "Parità di genere", + "url": "#" + }, + { + "name": "Immagine coordinata", + "url": "#" + } + ] + }, + { + "name": "Amministrazione", + "url": "#", + "children": [ + { + "name": "Direzione generale", + "url": "#" + }, + { + "name": "Area didattica e servizi agli studenti", + "url": "#" + }, + { + "name": "Area finanza e risorse umane", + "url": "#" + }, + { + "name": "Area ricerca, sistema bibliotecario e documentale", + "url": "#" + }, + { + "name": "Area tecnica", + "url": "#" + } + ] + } + ] }, { "name": "Orientamento", @@ -682,157 +740,181 @@ "parents": [1] }, { - "key": "title", - "classes": "block-title--sm block-title--divider", - "tag": "h2", - "content": { - "title": "Testo semplice", - "link": null - } - }, - { - "key": "paragraph", - "classes": "block-paragraph--sm block-paragraph--1col", - "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec felis sed mauris maximus dictum. Quisque rutrum odio at lacinia pellentesque. Integer in sapien purus. Donec finibus, odio nec accumsan porttitor, velit nisl feugiat felis, eget aliquam dui purus et mi. Nulla vel lacinia ligula. Vestibulum a malesuada ante, in luctus sapien. Maecenas maximus ac quam sit amet pulvinar. Nulla quis ornare felis. Pellentesque tempus, urna et fermentum aliquet, tortor ipsum mattis lectus, ac blandit massa libero pellentesque magna. Nunc dignissim eros nunc, non condimentum turpis tristique vel. Aenean efficitur lectus vel enim vulputate tempus. Sed tincidunt arcu at dui facilisis ullamcorper.

SottotitoloAliquam ut ligula rutrum, iaculis lorem vel, blandit magna. Donec tempus ut arcu et porta. Sed sit amet sapien in metus bibendum aliquet. Nam porta facilisis augue. Sed pellentesque diam vitae dolor dapibus, at mollis nisi rhoncus. Sed non ultrices enim. Nulla volutpat lacinia nunc eget viverra. Cras tristique est id lorem blandit malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus.

" - }, - { - "key": "title", - "classes": "block-title--sm block-title--divider", - "tag": "h2", - "content": { - "title": "Bottoni download", - "link": null - } - }, - { - "key": "paragraph", - "classes": "block-paragraph--sm block-paragraph--1col", - "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dolor eu arcu interdum laoreet. Mauris sodales rhoncus tellus, nec placerat ligula elementum ultricies. Integer nec congue quam. Integer lobortis justo dui, eget gravida est vestibulum in quisque quis dolor eu arcu.

" - }, - { - "key": "files-list", + "key": "composition/composition-text", "classes": "", - "content": { - "items": [ - { - "name": "Bottone di download", - "url": "#" - }, - { - "name": "Bottone di download", - "url": "#" - }, - { - "name": "Bottone di download", - "url": "#" + "inner_blocks": { + "title": { + "key": "title", + "classes": "block-title--sm block-title--divider", + "tag": "h2", + "content": { + "title": "Testo semplice", + "link": null } - ] + }, + "paragraph": { + "key": "paragraph", + "classes": "block-paragraph--sm block-paragraph--1col", + "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec felis sed mauris maximus dictum. Quisque rutrum odio at lacinia pellentesque. Integer in sapien purus. Donec finibus, odio nec accumsan porttitor, velit nisl feugiat felis, eget aliquam dui purus et mi. Nulla vel lacinia ligula. Vestibulum a malesuada ante, in luctus sapien. Maecenas maximus ac quam sit amet pulvinar. Nulla quis ornare felis. Pellentesque tempus, urna et fermentum aliquet, tortor ipsum mattis lectus, ac blandit massa libero pellentesque magna. Nunc dignissim eros nunc, non condimentum turpis tristique vel. Aenean efficitur lectus vel enim vulputate tempus. Sed tincidunt arcu at dui facilisis ullamcorper.

Sottotitolo
Aliquam ut ligula rutrum, iaculis lorem vel, blandit magna. Donec tempus ut arcu et porta. Sed sit amet sapien in metus bibendum aliquet. Nam porta facilisis augue. Sed pellentesque diam vitae dolor dapibus, at mollis nisi rhoncus. Sed non ultrices enim. Nulla volutpat lacinia nunc eget viverra. Cras tristique est id lorem blandit malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus.

" + } } }, { - "key": "title", - "classes": "block-title--sm block-title--divider", - "tag": "h2", - "content": { - "title": "Accordion di testo", - "link": null - } - }, - { - "key": "paragraph", - "classes": "block-paragraph--sm block-paragraph--1col", - "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dolor eu arcu interdum laoreet. Mauris sodales rhoncus tellus, nec placerat ligula elementum ultricies. Integer nec congue quam. Integer lobortis justo dui, eget gravida est vestibulum in quisque quis dolor eu arcu.

" - }, - { - "key": "accordion", - "classes": "block-accordion--sm block-accordion--2cols", - "content": { - "items": [ - { - "title": "Titolo accordion 1", - "content": { - "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" - } - }, - { - "title": "Titolo accordion 2", - "content": { - "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" - } - }, - { - "title": "Titolo accordion 3", - "content": { - "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" - } - }, - { - "title": "Titolo accordion 4", - "content": { - "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" - } - }, - { - "title": "Titolo accordion 5", - "content": { - "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" - } - } - ] - } - }, - { - "key": "title", - "classes": "block-title--sm block-title--divider", - "tag": "h2", - "content": { - "title": "Lista elementi", - "link": null - } - }, - { - "key": "paragraph", - "classes": "block-paragraph--sm block-paragraph--1col", - "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dolor eu arcu interdum laoreet. Mauris sodales rhoncus tellus, nec placerat ligula elementum ultricies. Integer nec congue quam. Integer lobortis justo dui, eget gravida est vestibulum in quisque quis dolor eu arcu.

" - }, - { - "key": "grid-list", + "key": "composition/composition-files-list", "classes": "", - "content": { - "items": [ - { - "label": "List", - "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." - }, - { - "label": "List", - "text": "Nunc ac purus id turpis pretium porta. Morbi lacinia nunc laoreet imperdiet volutpat. Sed nec nunc finibus, blandit erat quis, placerat orci. Donec at mauris ut lorem dictum fermentum nec sed velit." - }, - { - "label": "List", - "text": "Donec lacinia justo nec justo dictum tristique. Maecenas volutpat, nunc a aliquam lobortis, diam magna ultrices nisl, eu pretium eros mi ultricies enim. Cras dignissim sit amet mauris in ornare." - }, - { - "label": "List", - "text": "In id leo ut purus tempus placerat. Fusce ac pulvinar tellus, non lobortis est. Mauris sagittis ligula quis augue auctor ultrices. Curabitur sit amet egestas neque. Duis vulputate est id dignissim tempus. Nulla quis consectetur felis. Aenean volutpat velit tincidunt, viverra velit sed, hendrerit quam." - }, - { - "label": "List", - "text": "Vivamus vel ipsum quis est interdum facilisis. Mauris et arcu est. Etiam ultricies finibus commodo. Phasellus auctor ex sed lacus tristique, sit amet eleifend odio tincidunt." - }, - { - "label": "List", - "text": "Suspendisse commodo lacus luctus libero auctor suscipit. Maecenas non ullamcorper turpis. In suscipit quam interdum venenatis faucibus. Nam consectetur vehicula neque, scelerisque elementum ipsum lobortis vitae." - }, - { - "label": "List", - "text": "Phasellus sit amet faucibus elit. Vivamus lorem mi, posuere et aliquam nec, placerat consequat eros. Praesent justo turpis, feugiat id magna ut, euismod venenatis lacus." - }, - { - "label": "List", - "text": "In hac habitasse platea dictumst. Maecenas lobortis ligula justo, vitae laoreet augue laoreet nec. Mauris faucibus tempor massa, eget sodales arcu elementum quis." + "inner_blocks": { + "title": { + "key": "title", + "classes": "block-title--sm block-title--divider", + "tag": "h2", + "content": { + "title": "Bottoni download", + "link": null } - ] + }, + "paragraph": { + "key": "paragraph", + "classes": "block-paragraph--sm block-paragraph--1col", + "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dolor eu arcu interdum laoreet. Mauris sodales rhoncus tellus, nec placerat ligula elementum ultricies. Integer nec congue quam. Integer lobortis justo dui, eget gravida est vestibulum in quisque quis dolor eu arcu.

" + }, + "files_list": { + "key": "files-list", + "classes": "", + "content": { + "items": [ + { + "name": "Bottone di download", + "url": "#" + }, + { + "name": "Bottone di download", + "url": "#" + }, + { + "name": "Bottone di download", + "url": "#" + } + ] + } + } + } + }, + { + "key": "composition/composition-accordion", + "classes": "", + "inner_blocks": { + "title": { + "key": "title", + "classes": "block-title--sm block-title--divider", + "tag": "h2", + "content": { + "title": "Accordion di testo", + "link": null + } + }, + "paragraph": { + "key": "paragraph", + "classes": "block-paragraph--sm block-paragraph--1col", + "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dolor eu arcu interdum laoreet. Mauris sodales rhoncus tellus, nec placerat ligula elementum ultricies. Integer nec congue quam. Integer lobortis justo dui, eget gravida est vestibulum in quisque quis dolor eu arcu.

" + }, + "accordion": { + "key": "accordion", + "classes": "block-accordion--sm block-accordion--2cols", + "content": { + "items": [ + { + "title": "Titolo accordion 1", + "content": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" + } + }, + { + "title": "Titolo accordion 2", + "content": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" + } + }, + { + "title": "Titolo accordion 3", + "content": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" + } + }, + { + "title": "Titolo accordion 4", + "content": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" + } + }, + { + "title": "Titolo accordion 5", + "content": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" + } + } + ] + } + } + } + }, + { + "key": "composition/composition-grid-list", + "classes": "", + "inner_blocks": { + "title": { + "key": "title", + "classes": "block-title--sm block-title--divider", + "tag": "h2", + "content": { + "title": "Lista elementi", + "link": null + } + }, + "paragraph": { + "key": "paragraph", + "classes": "block-paragraph--sm block-paragraph--1col", + "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dolor eu arcu interdum laoreet. Mauris sodales rhoncus tellus, nec placerat ligula elementum ultricies. Integer nec congue quam. Integer lobortis justo dui, eget gravida est vestibulum in quisque quis dolor eu arcu.

" + }, + "grid_list": { + "key": "grid-list", + "classes": "", + "content": { + "items": [ + { + "label": "List", + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + }, + { + "label": "List", + "text": "Nunc ac purus id turpis pretium porta. Morbi lacinia nunc laoreet imperdiet volutpat. Sed nec nunc finibus, blandit erat quis, placerat orci. Donec at mauris ut lorem dictum fermentum nec sed velit." + }, + { + "label": "List", + "text": "Donec lacinia justo nec justo dictum tristique. Maecenas volutpat, nunc a aliquam lobortis, diam magna ultrices nisl, eu pretium eros mi ultricies enim. Cras dignissim sit amet mauris in ornare." + }, + { + "label": "List", + "text": "In id leo ut purus tempus placerat. Fusce ac pulvinar tellus, non lobortis est. Mauris sagittis ligula quis augue auctor ultrices. Curabitur sit amet egestas neque. Duis vulputate est id dignissim tempus. Nulla quis consectetur felis. Aenean volutpat velit tincidunt, viverra velit sed, hendrerit quam." + }, + { + "label": "List", + "text": "Vivamus vel ipsum quis est interdum facilisis. Mauris et arcu est. Etiam ultricies finibus commodo. Phasellus auctor ex sed lacus tristique, sit amet eleifend odio tincidunt." + }, + { + "label": "List", + "text": "Suspendisse commodo lacus luctus libero auctor suscipit. Maecenas non ullamcorper turpis. In suscipit quam interdum venenatis faucibus. Nam consectetur vehicula neque, scelerisque elementum ipsum lobortis vitae." + }, + { + "label": "List", + "text": "Phasellus sit amet faucibus elit. Vivamus lorem mi, posuere et aliquam nec, placerat consequat eros. Praesent justo turpis, feugiat id magna ut, euismod venenatis lacus." + }, + { + "label": "List", + "text": "In hac habitasse platea dictumst. Maecenas lobortis ligula justo, vitae laoreet augue laoreet nec. Mauris faucibus tempor massa, eget sodales arcu elementum quis." + } + ] + } + } } }, { @@ -862,126 +944,133 @@ } } }, + { - "key": "title", - "classes": "block-title--sm block-title--divider", - "tag": "h2", - "content": { - "title": "Accordion in evidenza", - "link": null - } - }, - { - "key": "paragraph", - "classes": "block-paragraph--sm block-paragraph--1col", - "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dolor eu arcu interdum laoreet. Mauris sodales rhoncus tellus, nec placerat ligula elementum ultricies. Integer nec congue quam. Integer lobortis justo dui, eget gravida est vestibulum in quisque quis dolor eu arcu.

" - }, - { - "key": "accordion", + "key": "composition/composition-accordion", "classes": "", - "content": { - "items": [ - { - "title": "Titolo accordion 1", - "inner_blocks": [ - { - "key": "paragraph", - "classes": "", - "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dolor eu arcu interdum laoreet. Mauris sodales rhoncus tellus, nec placerat ligula elementum ultricies. Integer nec congue quam. Integer lobortis justo dui, eget gravida est vestibulum in quisque quis dolor eu arcu.

" - }, - { - "key": "links-list-columns", - "content": { - "list": [ - { - "name": "Link list item", - "url": "#" - }, - { - "name": "Link list item", - "url": "#" - }, - { - "name": "Link list item", - "url": "#" - }, - { - "name": "Link list item", - "url": "#" - }, - { - "name": "Link list item", - "url": "#" - }, - { - "name": "Link list item", - "url": "#" - } - ] - } - } - ] - }, - { - "title": "Titolo accordion 2", - "content": { - "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" - } - }, - { - "title": "Titolo accordion 3", - "inner_blocks": [ - { - "key": "paragraph", - "classes": "", - "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dolor eu arcu interdum laoreet. Mauris sodales rhoncus tellus, nec placerat ligula elementum ultricies. Integer nec congue quam. Integer lobortis justo dui, eget gravida est vestibulum in quisque quis dolor eu arcu.

" - }, - { - "key": "links-list-columns", - "content": { - "list": [ - { - "name": "Link list item", - "url": "#" - }, - { - "name": "Link list item", - "url": "#" - }, - { - "name": "Link list item", - "url": "#" - }, - { - "name": "Link list item", - "url": "#" - }, - { - "name": "Link list item", - "url": "#" - }, - { - "name": "Link list item", - "url": "#" - } - ] - } - } - ] - }, - { - "title": "Titolo accordion 4", - "content": { - "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" - } - }, - { - "title": "Titolo accordion 5", - "content": { - "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" - } + "inner_blocks": { + "title": { + "key": "title", + "classes": "block-title--sm block-title--divider", + "tag": "h2", + "content": { + "title": "Accordion in evidenza", + "link": null } - ] + }, + "paragraph": { + "key": "paragraph", + "classes": "block-paragraph--sm block-paragraph--1col", + "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dolor eu arcu interdum laoreet. Mauris sodales rhoncus tellus, nec placerat ligula elementum ultricies. Integer nec congue quam. Integer lobortis justo dui, eget gravida est vestibulum in quisque quis dolor eu arcu.

" + }, + "accordion": { + "key": "accordion", + "classes": "", + "content": { + "items": [ + { + "title": "Titolo accordion 1", + "inner_blocks": [ + { + "key": "paragraph", + "classes": "", + "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dolor eu arcu interdum laoreet. Mauris sodales rhoncus tellus, nec placerat ligula elementum ultricies. Integer nec congue quam. Integer lobortis justo dui, eget gravida est vestibulum in quisque quis dolor eu arcu.

" + }, + { + "key": "links-list-columns", + "content": { + "list": [ + { + "name": "Link list item", + "url": "#" + }, + { + "name": "Link list item", + "url": "#" + }, + { + "name": "Link list item", + "url": "#" + }, + { + "name": "Link list item", + "url": "#" + }, + { + "name": "Link list item", + "url": "#" + }, + { + "name": "Link list item", + "url": "#" + } + ] + } + } + ] + }, + { + "title": "Titolo accordion 2", + "content": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" + } + }, + { + "title": "Titolo accordion 3", + "inner_blocks": [ + { + "key": "paragraph", + "classes": "", + "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dolor eu arcu interdum laoreet. Mauris sodales rhoncus tellus, nec placerat ligula elementum ultricies. Integer nec congue quam. Integer lobortis justo dui, eget gravida est vestibulum in quisque quis dolor eu arcu.

" + }, + { + "key": "links-list-columns", + "content": { + "list": [ + { + "name": "Link list item", + "url": "#" + }, + { + "name": "Link list item", + "url": "#" + }, + { + "name": "Link list item", + "url": "#" + }, + { + "name": "Link list item", + "url": "#" + }, + { + "name": "Link list item", + "url": "#" + }, + { + "name": "Link list item", + "url": "#" + } + ] + } + } + ] + }, + { + "title": "Titolo accordion 4", + "content": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" + } + }, + { + "title": "Titolo accordion 5", + "content": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus" + } + } + ] + } + } } }, { @@ -1020,6 +1109,93 @@ ] } ] + }, + { + "title": "Strutture didattiche, di ricerca e di servizio", + "url": "#", + "blocks": [ + { + "key": "breadcrumbs", + "post_type": "pages", + "parents": [] + } + ] + }, + { + "title": "Laboratori", + "url": "/pages/laboratori/index.html", + "blocks": [ + { + "key": "breadcrumbs", + "post_type": "pages", + "parents": [3] + }, + { + "key": "paragraph", + "classes": "block-paragraph--1col", + "content": "

I laboratori costituiscono un supporto alle attività didattiche e di ricerca del dipartimento e dell’ateneo. Sono dotati di attrezzature all’avanguardia e competenze a elevato grado di specializzazione, svolgono attività scientifiche e professionali nei campi che spaziano dalla rappresentazione alle tecniche di costruzione.

" + }, + { + "key": "query-loop", + "classes": "", + "columns": 2, + "query": { + "post_type": "labs", + "params": "" + } + } + ] + }, + { + "title": "Boilerplate", + "url": "/pages/boilerplate.html", + "blocks": [ + { + "key": "breadcrumbs", + "post_type": "pages", + "parents": [1] + }, + { + "key": "composition/composition-text", + "classes": "", + "inner_blocks": { + "title": { + "key": "title", + "classes": "block-title--sm block-title--divider", + "tag": "h2", + "content": { + "title": "Testo semplice", + "link": null + } + }, + "paragraph": { + "key": "paragraph", + "classes": "block-paragraph--sm block-paragraph--1col", + "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec felis sed mauris maximus dictum. Quisque rutrum odio at lacinia pellentesque. Integer in sapien purus. Donec finibus, odio nec accumsan porttitor, velit nisl feugiat felis, eget aliquam dui purus et mi. Nulla vel lacinia ligula. Vestibulum a malesuada ante, in luctus sapien. Maecenas maximus ac quam sit amet pulvinar. Nulla quis ornare felis. Pellentesque tempus, urna et fermentum aliquet, tortor ipsum mattis lectus, ac blandit massa libero pellentesque magna. Nunc dignissim eros nunc, non condimentum turpis tristique vel. Aenean efficitur lectus vel enim vulputate tempus. Sed tincidunt arcu at dui facilisis ullamcorper.

" + } + } + }, + { + "key": "composition/composition-text", + "classes": "", + "inner_blocks": { + "title": { + "key": "title", + "classes": "block-title--sm block-title--divider", + "tag": "h2", + "content": { + "title": "Testo semplice", + "link": null + } + }, + "paragraph": { + "key": "paragraph", + "classes": "block-paragraph--sm block-paragraph--1col", + "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec felis sed mauris maximus dictum. Quisque rutrum odio at lacinia pellentesque. Integer in sapien purus. Donec finibus, odio nec accumsan porttitor, velit nisl feugiat felis, eget aliquam dui purus et mi. Nulla vel lacinia ligula. Vestibulum a malesuada ante, in luctus sapien. Maecenas maximus ac quam sit amet pulvinar. Nulla quis ornare felis. Pellentesque tempus, urna et fermentum aliquet, tortor ipsum mattis lectus, ac blandit massa libero pellentesque magna. Nunc dignissim eros nunc, non condimentum turpis tristique vel. Aenean efficitur lectus vel enim vulputate tempus. Sed tincidunt arcu at dui facilisis ullamcorper.

Sottotitolo
Aliquam ut ligula rutrum, iaculis lorem vel, blandit magna. Donec tempus ut arcu et porta. Sed sit amet sapien in metus bibendum aliquet. Nam porta facilisis augue. Sed pellentesque diam vitae dolor dapibus, at mollis nisi rhoncus. Sed non ultrices enim. Nulla volutpat lacinia nunc eget viverra. Cras tristique est id lorem blandit malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus.

" + } + } + } + ] } ], "news": { @@ -1377,7 +1553,7 @@ "external_name": null } ], - "abstract": "", + "excerpt": "", "content": "

Per chi sceglie Architettura, il luogo in cui si studia è particolarmente importante. E Venezia è la scuola del progetto. Studiare Architettura a Venezia significa vivere un'esperienza di studi unica, in una città che offre una lezione costante di storia, di arte, di sostenibilità.

I corsi di laurea in Architettura Iuav interpretano i bisogni di un mondo della professione in evoluzione: oggi un architetto deve essere in grado di leggere i luoghi, conoscerne la storia, coordinare competenze disciplinari diverse. Deve sapere comporre sensibilità umanistica, conoscenze tecniche e senso civico, per collaborare alla costruzione di spazi, città e ambienti sostenibili. Studiare Architettura a Venezia significa intraprendere un percorso orientato alla formazione di un progettista consapevole, capace di prendersi cura dell’ambiente fisico in cui vive una collettività e consegnarlo al futuro.

Il corso si caratterizza per il confronto continuo fra teoria e pratica, tra sapere e saper fare. Il laboratorio integrato è lo spazio della sperimentazione, dove chi studia verifica le conoscenze acquisite e le relazioni interdisciplinari che definiscono un progetto di architettura. Il percorso formativo trasmette le conoscenze culturali, metodologiche e tecniche che, alla fine del triennio, permettono al laureato di operare professionalmente con competenza e autonomia e offrire la base per proseguire gli studi con il corso di laurea magistrale. I workshop e i corsi monodisciplinari costruiscono un percorso ricco e articolato, che favorisce la maturazione di capacità critiche e pratico-operative. Il primo anno fornisce gli orizzonti culturali e i linguaggi di base; il secondo è dedicato alle tecniche costruttive e di controllo ambientale, mentre il terzo è focalizzato sul progetto urbano contemporaneo. L’esperienza centrale del triennio sono i workshop estivi di Architettura: tre settimane di progettazione intensiva sotto la guida di architetti di fama internazionale. Un’esperienza di straordinaria efficacia che non ha uguali nel mondo della formazione universitaria.

", "content_image": { "filename": "architettura-2", @@ -1667,6 +1843,90 @@ ] } ] + }, + "labs": { + "items": [ + { + "title": "ArTec – Archivio delle tecniche e dei materiali", + "excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.", + "featured_image": { + "filename": "lab-1", + "path": "/post_type/labs" + } + }, + { + "title": "FisTec – Laboratorio di fisica tecnica ambientale", + "excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.", + "featured_image": { + "filename": "lab-2", + "path": "/post_type/labs" + } + }, + { + "title": "Circe – Laboratorio di fotogrammetria", + "excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.", + "featured_image": { + "filename": "lab-3", + "path": "/post_type/labs" + } + }, + { + "title": "Circe – Laboratorio di cartografia e GIS", + "excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.", + "featured_image": { + "filename": "lab-4", + "path": "/post_type/labs" + } + }, + { + "title": "LabSCo – Laboratorio di scienza delle costruzioni", + "excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.", + "featured_image": { + "filename": "lab-5", + "path": "/post_type/labs" + } + }, + { + "title": "LAMA – Laboratorio di analisi e materiali antichi", + "excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc libero, fringilla id semper id, ornare pellentesque massa. Nam posuere luctus facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.", + "featured_image": { + "filename": "lab-6", + "path": "/post_type/labs" + } + }, + { + "title": "LAR – Laboratorio di supporto al progetto", + "excerpt": "LAR è una struttura per la ricerca e la didattica che offre servizi per il controllo e lo sviluppo di processi innovativi di rappresentazione dedicati al progetto di architettura, degli artefatti e della loro comunicazione, anche in rapporto alla tutela e alla valorizzazione del patrimonio artistico e culturale, tangibile e intangibile.", + "featured_image": { + "filename": "lab-7", + "path": "/post_type/labs" + } + }, + { + "title": "MeLa – Media Lab", + "excerpt": "Il Media Lab è una struttura che si occupa di ricerca, sperimentazione e sviluppo nel campo dell’interazione multisensoriale e delle nuove interfacce applicate alla comunicazione dell’architettura e del design, dei prodotti culturali e delle arti visive e performative.", + "featured_image": { + "filename": "lab-8", + "path": "/post_type/labs" + } + }, + { + "title": "UserLab – Laboratory for user centered applied research", + "excerpt": "Il laboratorio verifica i prodotti industriali, gli artefatti comunicativi (siti web, packaging, brand images, ecc.), i servizi e gli ambienti, studiando la risposta degli utenti con strumenti scientifico-sperimentali.", + "featured_image": { + "filename": "lab-9", + "path": "/post_type/labs" + } + }, + { + "title": "Laboratorio strumentale per la didattica", + "excerpt": "Il laboratorio gestisce l’insieme dei laboratori per gli studenti mettendo a disposizione spazi, attrezzature e consulenza tecnica per sperimentare ed effettuare attività pratiche.", + "featured_image": { + "filename": "lab-10", + "path": "/post_type/labs" + } + } + ] } }, "taxonomies": { diff --git a/src/assets/css/base/core.css b/src/assets/css/base/core.css index 7859213..7b84d8b 100644 --- a/src/assets/css/base/core.css +++ b/src/assets/css/base/core.css @@ -3,7 +3,7 @@ */ html{ - @apply scroll-smooth min-h-screen; + @apply min-h-screen; } .content{ diff --git a/src/assets/css/base/grid.css b/src/assets/css/base/grid.css index 165db02..7a73ec4 100644 --- a/src/assets/css/base/grid.css +++ b/src/assets/css/base/grid.css @@ -1,60 +1,32 @@ :root{ - --grid-offset: 8.25vw; - --grid-gutter: 0.75vw; -} - -.row{ - @apply grid-container; - .row, .row-fluid{ - @apply px-0 ml-0 w-full; - } -} -/* .row{ - @apply px-5 mx-auto w-full; + --grid-offset: 0; @screen md{ - @apply max-w-screen-md; + --grid-offset: 120px; } - @screen lg{ - @apply max-w-screen-lg; - } + --grid-gutter: 0.46875rem; /* 7.5px */ @screen xl{ - @apply max-w-screen-xl; - } - @screen 2xl{ - @apply max-w-screen-2xl; - } - .row, .row-fluid{ - @apply px-0; - } -} */ - -.row-fluid{ - @apply px-2.5; - .row, .row-fluid{ - @apply px-0; + --grid-gutter: 0.625rem; /* 10px */ } } -.columns{ - @apply flex flex-wrap -mx-2.5; -} - -.column{ - @apply px-2.5; -} - -.grid-container, .block-container{ - width: calc(100vw - var(--grid-offset)); - margin-left: calc(var(--grid-offset) - var(--grid-gutter)); - margin-right: calc(var(--grid-gutter) * 2); - @apply px-[var(--grid-gutter)]; - .grid-container, .block-container{ +.grid-container{ + @apply row; + :where(.grid-container), :where(.block-container){ @apply w-full ml-0 mr-0 px-0; } } @layer utilities{ - .grid-container-offset{ - @apply ml-[120px] mr-auto max-w-none; + .row{ + @apply w-full px-[calc(var(--grid-gutter)*2)] md:px-0; + margin-left: var(--grid-offset); + @screen md{ + width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2); + } + /* margin-right: calc(var(--grid-gutter) * 2); */ + @screen 2xl{ + max-width: theme(screens.2xl); + margin-left: max(var(--grid-offset), calc((100vw - theme(screens.2xl))/2)) + } } } \ No newline at end of file diff --git a/src/assets/css/base/index.css b/src/assets/css/base/index.css index 46558bd..556e9ff 100644 --- a/src/assets/css/base/index.css +++ b/src/assets/css/base/index.css @@ -1,4 +1,5 @@ @import "core.css"; +@import "vars.css"; @import "layout.css"; @import "typography.css"; @import "grid.css"; diff --git a/src/assets/css/base/layout.css b/src/assets/css/base/layout.css index 4863b64..b632292 100644 --- a/src/assets/css/base/layout.css +++ b/src/assets/css/base/layout.css @@ -11,4 +11,22 @@ .content{ @apply h-full; +} + +body.has-menu-toggled{ + #site-content-wrapper{ + @apply + fixed top-[var(--header-height)] left-0 w-full + /* xl:relative */ + ; + } +} + +.skip-link{ + @apply block h-0 absolute -top-[9999px] -left-[9999px]; + a{ + &:focus{ + @apply fixed top-5 left-5 h-auto bg-white text-black border border-black p-4 z-50; + } + } } \ No newline at end of file diff --git a/src/assets/css/base/typography.css b/src/assets/css/base/typography.css index 7036143..e91b885 100644 --- a/src/assets/css/base/typography.css +++ b/src/assets/css/base/typography.css @@ -67,14 +67,14 @@ } p{ - @apply text-size-base text-black mb-10; + @apply text-size-base text-black mb-7.5; a{ @apply underline; } } @layer utilities{ - .h1{ + /* .h1{ @apply text-3xl lg:text-4xl xl:text-5xl leading-snug; } @@ -96,38 +96,29 @@ .h6{ @apply text-base leading-snug; - } + } */ .text-size-sm{ - font-size: 0.95vw; - line-height: 140%; - } - .text-size-md{ - font-size: 1.4vw; - line-height: 150%; + @apply text-sm; } .text-size-base{ - font-size: 1.15vw; - line-height: 150%; + @apply text-base; + } + .text-size-md{ + @apply text-md; } .text-size-md-lg{ - font-size: 1.8vw; - line-height: 135%; + @apply text-md xl:text-md-lg; } .text-size-lg{ - font-size: 2vw; - line-height: 130%; + @apply text-md md:text-md-lg xl:text-lg; } .text-size-xl{ - font-size: 2.7vw; - line-height: 130%; + @apply text-xl; } - .text-size-xxl{ - font-size: 4vw; - line-height: 120%; + .text-size-2xl{ + @apply text-2xl; } - .text-size-xxxl{ - font-size: 6.25vw; - letter-spacing: -0.01vw; - line-height: 116%; + .text-size-3xl{ + @apply text-3xl; } } \ No newline at end of file diff --git a/src/assets/css/base/vars.css b/src/assets/css/base/vars.css new file mode 100644 index 0000000..8c49c73 --- /dev/null +++ b/src/assets/css/base/vars.css @@ -0,0 +1,7 @@ +:root{ + --vh: 100vh; + --spacing-size: 0.625rem; /* 10px */ + @screen lg{ + --spacing-size: var(--grid-gutter); + } +} diff --git a/src/assets/css/blocks/block.css b/src/assets/css/blocks/block.css new file mode 100644 index 0000000..4449529 --- /dev/null +++ b/src/assets/css/blocks/block.css @@ -0,0 +1,10 @@ +.block-container{ + @apply row; + :where(.block-container), :where(.grid-container){ + @apply w-full ml-0 px-0; + } +} + +.block-composition{ + @apply mb-12.5 md:mb-20; +} \ No newline at end of file diff --git a/src/assets/css/blocks/grid-list.css b/src/assets/css/blocks/grid-list.css index 4d227e0..42de200 100644 --- a/src/assets/css/blocks/grid-list.css +++ b/src/assets/css/blocks/grid-list.css @@ -1,7 +1,7 @@ .block-grid-list{ container-type: inline-size; &__inner{ - @apply grid gap-x-5 gap-y-8; + @apply grid gap-x-[calc(var(--grid-gutter)*2)] gap-y-[2vw]; > div{ @apply border-t border-grey-200 pt-2; p{ diff --git a/src/assets/css/blocks/index.css b/src/assets/css/blocks/index.css index 055869c..9b113ad 100644 --- a/src/assets/css/blocks/index.css +++ b/src/assets/css/blocks/index.css @@ -1,4 +1,5 @@ @import "../utilities.css"; +@import "block.css"; @import "accordion.css"; @import "events-list-row.css"; @import "featured-content.css"; @@ -10,5 +11,6 @@ @import "links-list-columns.css"; @import "page-title-banner.css"; @import "paragraph.css"; +@import "query-loop.css"; @import "tease-row.css"; @import "title.css"; \ No newline at end of file diff --git a/src/assets/css/blocks/paragraph.css b/src/assets/css/blocks/paragraph.css index b461bfb..74eab06 100644 --- a/src/assets/css/blocks/paragraph.css +++ b/src/assets/css/blocks/paragraph.css @@ -1,10 +1,13 @@ .block-paragraph{ + p{ + @apply md:max-xl:max-w-3xl text-size-md; + } &--sm{ p{ - @apply text-size-sm; + @apply text-size-base; } } &--1col{ - @apply lg:w-1/2; + @apply xl:w-1/2; } } \ No newline at end of file diff --git a/src/assets/css/blocks/query-loop.css b/src/assets/css/blocks/query-loop.css new file mode 100644 index 0000000..60579d4 --- /dev/null +++ b/src/assets/css/blocks/query-loop.css @@ -0,0 +1,9 @@ +.query-loop{ + &__inner{ + grid-template-columns: repeat(1, minmax(0,1fr)); + @screen lg{ + grid-template-columns: repeat(var(--query-loop-columns-per-row), minmax(0, 1fr)); + } + @apply grid gap-x-[var(--size-ratio-base)] gap-y-[var(-xl)]; + } +} \ No newline at end of file diff --git a/src/assets/css/blocks/title.css b/src/assets/css/blocks/title.css index 254fa57..1bce255 100644 --- a/src/assets/css/blocks/title.css +++ b/src/assets/css/blocks/title.css @@ -1,9 +1,9 @@ .block-title{ - @apply mb-[2.75vw]; + @apply mb-3.75 md:mb-8.75; h1,h2,h3,h4,h5,h6{ - @apply text-size-xxl mb-0; + @apply text-size-2xl mb-0; + a{ - @apply text-grey-300 shrink-0 ml-[1vw]; + @apply text-grey-300 shrink-0 ml-4; } } .block-title__inner{ @@ -22,20 +22,16 @@ } &--lg{ h1,h2,h3,h4,h5,h6{ - @apply text-size-xxxl; + @apply text-size-3xl; } } &--divider{ .block-title__inner{ - @apply border-t border-black pt-[0.8vw] w-full; + @apply border-t border-black pt-3 w-full; } } } -.breadcrumbs + .block-container{ +/* .block-container + .block-title{ @apply mt-[5.5vw] -} - -.block-container + .block-title{ - @apply mt-[5.5vw] -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/src/assets/css/components/breadcrumbs.css b/src/assets/css/components/breadcrumbs.css index 43bc828..ee0c6bc 100644 --- a/src/assets/css/components/breadcrumbs.css +++ b/src/assets/css/components/breadcrumbs.css @@ -1,7 +1,7 @@ .breadcrumbs{ - @apply grid-container mt-[6.75vw] mb-[2.75vw]; + @apply grid-container mt-6.25 mb-10 md:mt-15 md:mb-20 xl:my-25; ul{ - @apply flex; + @apply flex flex-wrap; li{ @apply text-size-lg; &:not(:last-child){ diff --git a/src/assets/css/components/footer.css b/src/assets/css/components/footer.css index 7298dad..0bcfcd2 100644 --- a/src/assets/css/components/footer.css +++ b/src/assets/css/components/footer.css @@ -1,26 +1,60 @@ .site-footer{ - @apply pt-[4.25vw] pb-[2.15vw] text-size-base; + @apply relative bg-black text-white mt-20 pb-10 text-size-sm md:text-size-base; + &__backTop{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 27'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m11.5 4.289-7.32 6.778L2.82 9.6 12.5.637 22.18 9.6l-1.36 1.467L13.5 4.29V27h-2V4.289Z' fill='%23fff'/%3E%3C/svg%3E"); + background-size: 24px; + @apply absolute top-7.5 right-[calc(var(--grid-gutter)*2)] -indent-[9999px] w-8 h-8 bg-no-repeat; + } &__title{ + @apply flex items-start mb-12.5 pt-8 md:pt-6.25; + svg{ + @apply w-7.5 mr-5 md:hidden; + } p{ - @apply pt-[1.5vw] font-bold mb-[2vw] border-t border-black; + @apply text-size-md md:text-size-base md:font-bold text-white -translate-y-2 md:translate-y-0; + span{ + @apply block md:inline; + } } } &__main{ - @apply grid grid-cols-4; + @apply grid gap-7.5 md:gap-y-12.5 grid-cols-1 md:grid-cols-2 xl:grid-cols-4; > div{ + p{ + @apply text-size-sm md:text-size-base text-white mb-0; + } > span{ @apply font-bold; } } } + &__nav, &__social-links{ + ul{ + @apply mt-3.75; + li{ + @apply border-t border-grey-500 md:border-t-0 flex items-center; + &::before{ + content: ''; + @screen md{ + content: none; + } + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath d='m21.441 12.5 5.556 6m0 0-5.556 6m5.556-6H10' stroke='%23fff'/%3E%3C/svg%3E"); + @apply inline-block w-9 h-9 mr-2.5 bg-no-repeat; + } + } + } + } &__colophon{ nav{ - @apply pt-[1.75vw] border-t border-black mt-[3.5vw]; + @apply pt-6.25 border-t border-white mt-12.5; ul{ @apply flex; li{ &:not(:last-child){ - @apply mr-[2vw]; + @apply mr-7.5; + } + a{ + @apply text-sm md:text-base; } } } diff --git a/src/assets/css/components/hamburger.css b/src/assets/css/components/hamburger.css index 4a93720..f896c45 100644 --- a/src/assets/css/components/hamburger.css +++ b/src/assets/css/components/hamburger.css @@ -1,23 +1,23 @@ .hamburger-btn { --hamburgerPadding: 8px; - --hamburgerWidth: 42px; - --hamburgerHeight: 42px; + --hamburgerWidth: 50px; + --hamburgerHeight: 50px; --hamburgerLineWidth: 24px; --hamburgerLineHeight: 2px; --hamburgerMargin: 6px; --hamburgerBackground: true; - --hamburgerBackgroundColor: #F7F7F7; + --hamburgerBackgroundColor: transparent; --hamburgerColor: #242424; - --hamburgerBorderRadius: true; - --hamburgerBorderRadiusPx: 6px; + --hamburgerBorderRadius: false; + --hamburgerBorderRadiusPx: 0; padding: var(--hamburgerPadding); width: var(--hamburgerWidth); height: var(--hamburgerHeight); border-radius: var(--hamburgerBorderRadiusPx); background: var(--hamburgerBackgroundColor); - @apply border border-grey-200 cursor-pointer relative flex items-center; + @apply cursor-pointer relative flex items-center; &:focus{ - outline: none; + /* outline: none; */ } span{ margin: 0 auto; @@ -28,7 +28,7 @@ height: var(--hamburgerLineHeight); border-radius: 5px; background-color: var(--hamburgerColor); - transition: background-color .1s .1s ease; + /* transition: background-color .1s .1s ease; */ display: block; &::before, &::after{ content: ''; @@ -42,27 +42,27 @@ &::before{ margin-top: calc(var(--hamburgerMargin) * -1); transform: rotate(0deg); - transition: margin .2s .2s ease, transform .2s ease; + /* transition: margin .2s .2s ease, transform .2s ease; */ } &::after{ margin-top: var(--hamburgerMargin); transform: rotate(0deg); - transition: margin .2s .2s ease, transform .2s ease; + /* transition: margin .2s .2s ease, transform .2s ease; */ } } &.is-toggled{ span{ background-color: transparent !important; - transition: background-color .2s ease; + /* transition: background-color .2s ease; */ &:before{ margin-top: 0; transform: rotate(45deg); - transition: margin .2s ease, transform .2s .2s ease; + /* transition: margin .2s ease, transform .2s .2s ease; */ } &:after{ margin-top: 0; transform: rotate(-45deg); - transition: margin .2s ease, transform .2s .2s ease; + /* transition: margin .2s ease, transform .2s .2s ease; */ } } } diff --git a/src/assets/css/components/header.css b/src/assets/css/components/header.css index 4d363d7..c339fa2 100644 --- a/src/assets/css/components/header.css +++ b/src/assets/css/components/header.css @@ -1,12 +1,15 @@ .site-header{ transition: transform .5s ease; @apply z-50; - @apply sticky top-0 z-50 translate-y-0; + @apply sticky top-0 z-40 translate-y-0; + @at-root body.has-menu-toggled .site-header{ + @apply border-b border-black md:border-b-0; + } &.is-hidden{ - @apply translate-y-[-100%]; + @apply xl:translate-y-[-100%]; } &-topbar{ - @apply bg-black text-white py-[0.75vw] flex items-center; + @apply bg-black text-white h-10 hidden xl:flex items-center; &__container{ @apply flex items-center justify-between text-size-sm; nav{ @@ -35,24 +38,37 @@ } } &-navbar{ - @apply py-[1.25vw] flex items-center bg-white; - &__container{ - .site-header-navbar__main{ + @apply h-12.5 xl:h-15 flex items-center bg-white; + &__inner{ + @apply grid-container flex items-center justify-between; + } + &__main{ + @apply xl:w-3/4 flex justify-between items-center; + nav{ + @apply hidden xl:block; > ul{ @apply flex items-center; > li{ - a{ - @apply text-size-base; - } &:not(:last-child){ - @apply mr-8; + @apply mr-6 xl:mr-8; + } + &.is-toggled{ + > a{ + @apply font-bold; + } } } } } + .hamburger-btn{ + @apply xl:hidden translate-x-[calc(var(--grid-gutter)*1.75)] xl:translate-x-[calc(var(--grid-gutter)*1.25)]; + &.is-active{ + @apply xl:flex; + } + } } &__title{ - @apply font-bold text-size-base; + @apply font-bold xl:w-1/4; } &-submenu{ > li{ @@ -64,8 +80,20 @@ &-0{ padding-left: var(--grid-offset); padding-right: calc(var(--grid-gutter) * 2); - @apply absolute left-0 w-full bg-white columns-3 pt-10 pb-6 gap-x-5 opacity-0 invisible pointer-events-none; - @at-root .site-header-navbar__main ul li.is-hovered .site-header-navbar-submenu-0{ + @apply + absolute + bottom-0 + left-0 + translate-y-[100%] + w-full + bg-white + columns-3 + pt-10 + pb-12.5 + gap-x-[calc(var(--gutter-grid)*2)] + opacity-0 invisible pointer-events-none + ; + @at-root .site-header-navbar__main ul li.is-toggled .site-header-navbar-submenu-0{ @apply opacity-100 visible pointer-events-auto; } @at-root .site-header.is-hidden .site-header-navbar__main .site-header-navbar-submenu-0{ @@ -79,11 +107,11 @@ } } &:not(.site-header-navbar-submenu-0){ - @apply grid grid-cols-4 gap-x-5; > li{ - grid-column: 2 / 5; - @apply border-t border-grey-400; + @apply border-t border-grey-200; + @apply grid grid-cols-4 gap-x-[var(--size-ratio-base)]; > a{ + grid-column: 2 / 5; } } } @@ -92,7 +120,7 @@ } #overlay{ - @apply fixed top-0 left-0 w-full h-screen bg-black bg-opacity-50 z-10 opacity-0 invisible pointer-events-none; + @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; } diff --git a/src/assets/css/components/logo.css b/src/assets/css/components/logo.css index 2006911..ed1579a 100644 --- a/src/assets/css/components/logo.css +++ b/src/assets/css/components/logo.css @@ -1,15 +1,17 @@ .site-logo{ transition: all .2s ease; - /* top: calc(100px + 32px); */ - /* transform: translateY(8%) translateX(0); */ - /* transform: translateY(0) translateX(-50%); */ - @apply fixed bottom-[2.75vw] left-[2.75vw] z-50 mix-blend-difference; + transform: translateY(0) translateX(-2px); + @apply hidden md:block fixed bottom-10 left-10 z-20 mix-blend-difference; svg{ - width: 2.75vw; + width: 40px; @apply block; } &.is-visible{ transform: translateY(0) translateX(-50%); @apply left-0; } + @at-root body.footer-in-viewport .site-logo.is-visible{ + transform: translateY(0) translateX(-2px); + @apply left-10; + } } \ No newline at end of file diff --git a/src/assets/css/components/mobilemenu.css b/src/assets/css/components/mobilemenu.css index f12d49f..4c2c32a 100644 --- a/src/assets/css/components/mobilemenu.css +++ b/src/assets/css/components/mobilemenu.css @@ -1 +1,164 @@ -.menu-mobile{} \ No newline at end of file +.menu-mobile{ + @apply + /* md:ml-[calc(var(--grid-offset)-var(--grid-gutter)*2)] */ + ml-auto + w-[calc((100%-(var(--grid-offset)-var(--grid-gutter)*2)))] + max-w-screen-md + md:min-h-[calc(var(--vh)-var(--header-height))] + xl:hidden + absolute + invisible opacity-0 pointer-events-none + bg-white text-black + z-30 + ; + &.is-toggled{ + @apply relative visible opacity-100 pointer-events-auto; + } + nav{ + ul{ + li{ + a{ + @apply block px-[calc(var(--grid-gutter)*2)] pt-1.5; + } + } + } + } + .menu-mobile__primary{ + @apply bg-white text-black; + ul{ + li{ + @apply relative; + .menu-mobile-accordion-container{ + @apply flex; + a{ + min-height: calc(var(--spacing-size)*5); + width: calc(100% - var(--spacing-size) * 5); + @apply + block + pt-3.5 pb-2.5 + font-bold + border-b border-r border-grey-200 + ; + } + button{ + @apply shrink-0 flex items-start w-xxl border-b border-grey-200; + svg{ + @apply pointer-events-none; + } + } + } + ul{ + @apply hidden; + li{ + a{ + @apply pl-[calc(var(--grid-gutter)*6)] + } + } + } + &.is-toggled{ + > .menu-mobile-accordion-container{ + button{ + svg{ + @apply rotate-180; + } + } + + ul{ + @apply block; + /* li{ + &:last-child{ + a{ + @apply border-b-black; + &:first-child:last-child{ + &::after{ + @apply border-black; + } + } + } + button{ + @apply border-black; + } + } + } */ + } + } + } + } + &:not(.menu-mobile-level-last){ + > li{ + > .menu-mobile-accordion-container{ + > a{ + &:first-child:last-child{ + &::after{ + content: ''; + @apply absolute bottom-0 right-0 block w-xxl border-b border-grey-200; + } + } + } + } + } + } + &.menu-mobile-level-0{ + > li{ + &:not(.is-toggled) { + > .menu-mobile-accordion-container{ + > a{ + @apply border-b-black; + &:first-child:last-child{ + &::after{ + @apply border-black; + } + } + } + button{ + @apply border-black; + } + } + } + &.is-toggled{ + > ul{ + > li:last-child{ + > .menu-mobile-accordion-container{ + > a{ + @apply border-b-black; + &:first-child:last-child{ + &::after{ + @apply border-black; + } + } + } + button{ + @apply border-black; + } + } + } + } + } + } + } + &.menu-mobile-level-last{ + > li{ + > .menu-mobile-accordion-container{ + > a{ + @apply font-normal; + } + } + &:last-child{ + > .menu-mobile-accordion-container{ + > a{ + &:first-child:last-child{ + &::after{ + content: ''; + @apply absolute bottom-0 right-0 block w-xxl border-b border-grey-200; + } + } + } + } + } + } + } + } + } + &__secondary{ + @apply pt-sm pb-base bg-black text-white; + } +} \ No newline at end of file diff --git a/src/assets/css/components/tease.css b/src/assets/css/components/tease.css index c35c52f..a2a64b5 100644 --- a/src/assets/css/components/tease.css +++ b/src/assets/css/components/tease.css @@ -3,27 +3,36 @@ } .tease{ - @apply aspect-square overflow-hidden relative; + &__title{ + @apply text-size-xl mb-[var(--size-ratio-base)]; + } &__img{ - transition: height .2s ease; - @apply absolute top-0 left-0 w-full bg-grey-100; + @apply aspect-[3/2] mb-[var(--size-ratio-base)]; img{ @apply w-full h-full object-cover object-top; } } - &__main{ - .tease-main-header{ - @apply py-3 flex justify-between text-size-sm text-grey-300; - } - .tease-main-title{ - @apply text-size-md font-bold; - } - } - &:hover{ + /* @todo */ + &--square{ + @apply aspect-square overflow-hidden relative; .tease__img{ - @apply h-full !important; + transition: height .2s ease; + @apply absolute top-0 left-0 w-full bg-grey-100; } .tease__main{ + .tease-main-header{ + @apply py-3 flex justify-between text-size-sm text-grey-300; + } + .tease-main-title{ + @apply text-size-md font-bold; + } + } + &:hover{ + .tease__img{ + @apply h-full !important; + } + .tease__main{ + } } } } \ No newline at end of file diff --git a/src/assets/img/icons/chevron.svg b/src/assets/img/icons/chevron.svg new file mode 100644 index 0000000..73cb48e --- /dev/null +++ b/src/assets/img/icons/chevron.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/icons/close.svg b/src/assets/img/icons/close.svg new file mode 100644 index 0000000..d75a33b --- /dev/null +++ b/src/assets/img/icons/close.svg @@ -0,0 +1 @@ + diff --git a/src/assets/js/site.js b/src/assets/js/site.js index 829c0b4..7bc0552 100644 --- a/src/assets/js/site.js +++ b/src/assets/js/site.js @@ -1,34 +1,75 @@ +/** + * Global scripts + */ + window.addEventListener('load', (event) => { - const body = document.body + /** + * Vars + */ - // If less than most tablets, set CSS var to window height. + //functional let vh = '100vh' + let currentScrollPos = 0 + let prevScrollPos = 0 + let menuToggledScrollPos + let menuIsOpen = false + let desktopMenuIsOpen = false + let mobileMenuIsOpen = false - // Check if iOS + //media query const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream - if (isIOS && window.matchMedia("(max-width: 1024px)").matches) { - $('html').addClass('is-ios') - set100vhVar() - } - - function set100vhVar() { - // If window size is iPad or smaller, then use JS to set screen height. - if (window.innerWidth && window.innerWidth <= 1024) { - vh = `${window.innerHeight}px` - } - document.documentElement.style.setProperty("--vh", vh) - } + const isDesktop = window.matchMedia('(min-width: 80rem)') - const wh = window.innerHeight + // DOM elements + const body = document.body const header = document.querySelector('.site-header') const logo = document.querySelector('.site-logo') - const secondaryNav = document.querySelector('.secondary-nav') - const secondaryNavTrigger = document.querySelector('.secondary-nav-trigger') + const a11y_ariaexpanded = document.querySelectorAll('[aria-expanded="false"]') + const menuItems = document.querySelectorAll('#site-header-main-nav > ul > .menu-item-has-children') + const menuBtn = document.getElementById('menu-btn') + const overlay = document.getElementById('overlay') + const menuMobile = document.getElementById('menu-mobile') + const pageWrapper = document.getElementById('site-content-wrapper') + const accordionMenuItems = document.querySelectorAll('[data-toggle-menu-items]') + const footer = document.getElementById('site-footer') - let prevScrollPos = 0 /** + * Check if iOS, then set --vh + */ + if (isIOS && window.matchMedia("(max-width: 1024px)").matches) { + $('html').addClass('is-ios') + } + + function set100vh() { + // If window size is iPad or smaller, then use JS to set screen height. + if (isIOS && window.matchMedia("(max-width: 1024px)").matches) { + vh = `${window.innerHeight}px` + document.documentElement.style.setProperty("--vh", vh) + } + } + set100vh() + + /** + * WAI-ARIA toggle aria-expanded + */ + function updateAriaExpanded(item){ + const ariaexpanded = item.getAttribute('aria-expanded') + if (ariaexpanded == 'true') { + item.setAttribute('aria-expanded', 'false') + } else { + item.setAttribute('aria-expanded', 'true') + } + } + a11y_ariaexpanded.forEach((item) => { + item.addEventListener('click', function () { + updateAriaExpanded(this) + }) + }) + + + /** * Get header height */ function getHeaderHeight(){ @@ -38,20 +79,14 @@ getHeaderHeight() /** - * Get secondary nav height - */ - function getSecondaryNavHeight(){ - document.documentElement.style.setProperty("--secondary-nav-height", `${secondaryNav.clientHeight}px`) - } - - if(secondaryNav !== null) getSecondaryNavHeight() - - /** * Hide header if scrolling down, show if scrolling up */ - window.addEventListener('scroll', () => { - const currentScrollPos = window.scrollY + window.addEventListener('scroll', () => { + + currentScrollPos = window.scrollY + + // const currentScrollPos = window.scrollY //if you start scrolling add class if (currentScrollPos > 0) { @@ -65,12 +100,10 @@ if (prevScrollPos > 0 && prevScrollPos < currentScrollPos ) { header.classList.add('is-hidden') logo.classList.add('is-visible') - if(secondaryNav !== null) secondaryNav.classList.remove('is-stacked') overlay.classList.remove('is-active') } else if (prevScrollPos >= currentScrollPos) { header.classList.remove('is-hidden') logo.classList.remove('is-visible') - if(secondaryNav !== null) secondaryNav.classList.add('is-stacked') } prevScrollPos = currentScrollPos @@ -78,204 +111,175 @@ }) /** - * Submenu + * Menu */ - const menuItems = document.querySelectorAll('.menu-item-has-children') - const overlay = document.getElementById('overlay' - ) - menuItems.forEach(item => { - item.addEventListener('mouseenter', function(){ - item.classList.add('is-hovered') - overlay.classList.add('is-active') - }) - item.addEventListener('mouseleave', function(){ - item.classList.remove('is-hovered') - overlay.classList.remove('is-active') - }) - }) - /** - * Marquees - */ - const marquees = document.querySelectorAll('.block-marquee-posts-row') - let marqueesCardWidth - if (marquees.length > 0){ - marqueesCardWidth = window.getComputedStyle(marquees[0]).getPropertyValue('--marquee-card-width') + function toggleMenuSharedElements(){ + + if (!menuIsOpen) { + body.classList.add('has-menu-toggled') + menuBtn.classList.add('is-active') + menuBtn.classList.add('is-toggled') + overlay.classList.add('is-active') + menuIsOpen = true + } else { + body.classList.remove('has-menu-toggled') + menuBtn.classList.remove('is-active') + menuBtn.classList.remove('is-toggled') + overlay.classList.remove('is-active') + menuIsOpen = false + } + } - marquees.forEach(marquee => { - - const marqueeSpeed = Number(marquee.getAttribute('data-marquee-row-speed')) - - let marqueePos = 0 - let marqueeIntvl + // when menu is toggled, set margin top based + // on scrolled px and restore scroll after menu is closed + function setScrolledMarginContent(scrolled){ + if (mobileMenuIsOpen || desktopMenuIsOpen) { + pageWrapper.style.marginTop = 0 + document.body.scrollTop = menuToggledScrollPos + document.body.scrollTop = menuToggledScrollPos + document.documentElement.scrollTop = menuToggledScrollPos + } else { + pageWrapper.style.marginTop = `-${scrolled}px` + } + menuToggledScrollPos = scrolled + } - //get vars - const items = marquee.getAttribute('data-marquee-row-items') - const wrapper = marquee.querySelector('.block-marquee-posts-row__wrapper') + function toggleMobileMenu(forceClosing = null){ + if (forceClosing) { + menuMobile.classList.remove('is-toggled') + } else { + menuMobile.classList.toggle('is-toggled') + } + closeAllAccordionMenuItems() + // set margin on page wapper + // and restore scrolled position when you close menu + setScrolledMarginContent(currentScrollPos) + menuIsOpen ? mobileMenuIsOpen = true : mobileMenuIsOpen = false + } - //clone cards in marquee - const cards = wrapper.querySelectorAll('.card') - cards.forEach(card => { - wrapper.appendChild(card.cloneNode(true)) - }) - - //calculate wrapper width - wrapper.style.width = `calc(${items*2}*${marqueesCardWidth})` - - marqueeIntvl = setInterval(() => { - if (marqueePos > 50) { - wrapper.style.transform = `translateX(0%)` - marqueePos = 0 + function toggleDesktopMenu(clickedItem = null){ + menuItems.forEach((item) => { + if (item == clickedItem) { + item.classList.add('is-toggled') } else { - wrapper.style.transform = `translateX(-${marqueePos}%)` - } - marqueePos = marqueePos+marqueeSpeed - }, 0) - - marquee.addEventListener('mouseover', function(){ - clearInterval(marqueeIntvl) - }) - - marquee.addEventListener('mouseleave', function(){ - marqueeIntvl = setInterval(() => { - if (marqueePos > 50) { - wrapper.style.transform = `translateX(0%)` - marqueePos = 0 - } else { - wrapper.style.transform = `translateX(-${marqueePos}%)` - } - marqueePos = marqueePos+marqueeSpeed - }, 0) - }) - - }) - - /** - * Cards hover effect - */ - const cards = document.querySelectorAll('.card') - cards.forEach(card => { - const marqueeWrapper = card.closest('.block-marquee-posts-row') - card.addEventListener('mouseenter', function(){ - this.classList.add('is-hovered') - if (marqueeWrapper){ - marqueeWrapper.classList.add('is-hovered') + item.classList.remove('is-toggled') } }) - card.addEventListener('mouseleave', function(){ - this.classList.remove('is-hovered') - if (marqueeWrapper){ - marqueeWrapper.classList.remove('is-hovered') + // set margin on page wapper + // and restore scrolled position when you close menu + setScrolledMarginContent(currentScrollPos) + menuIsOpen ? desktopMenuIsOpen = true : desktopMenuIsOpen = false + } + + function toggleMenuWhenResized(){ + // if mobile menu is open and window resized to desktop + if (mobileMenuIsOpen && isDesktop.matches){ + toggleMenuSharedElements() + toggleMobileMenu(true) + menuIsOpen = false + } + // if desktop menu is open and window resized to mobile + if (desktopMenuIsOpen && !isDesktop.matches){ + toggleMenuSharedElements() + toggleDesktopMenu() + menuIsOpen = false + } + } + + menuItems.forEach(item => { + item.addEventListener('click', function(e){ + e.preventDefault() + if (item.classList.contains('is-toggled')) { + toggleMenuSharedElements() + toggleDesktopMenu() + } else if (desktopMenuIsOpen){ + toggleDesktopMenu(this) + } else { + toggleMenuSharedElements() + toggleDesktopMenu(this) } }) }) - - /** - * Homepage Hero Banner parallax effect - */ - const parallaxImages = document.querySelectorAll('[data-banner-scroll-image]') - - document.addEventListener('scroll', function(){ - const scrollPosition = window.scrollY - parallaxImages.forEach(image => { - - const imageSpeed = image.getAttribute('data-banner-scroll-image-parallax-speed') - const imagePos = scrollPosition * imageSpeed - image.style.transform = `translateY(-${imagePos}px)` - - scrollBannerObserver.observe(image) - - }) - }) - - let scrollBannerObserver = new IntersectionObserver((entries) => { + menuBtn.addEventListener('click', function(){ + toggleMenuSharedElements() + if (isDesktop.matches) { + toggleDesktopMenu() + } else { + toggleMobileMenu() + } + }) + + //close all accordion menu items + function closeAllAccordionMenuItems(){ + accordionMenuItems.forEach(item => { + item.parentElement.parentElement.classList.remove('is-toggled') + item.parentElement.parentElement.setAttribute('aria-expanded', 'false') + }) + } + + accordionMenuItems.forEach(button => { + button.addEventListener('click', function(){ + // get
  • + const clickedItem = this.parentElement.parentElement + // get nesting of clicked item (from button) + const nesting = this.getAttribute('data-toggle-menu-items') + + if (nesting == 0 && clickedItem.classList.contains('is-toggled')) { + // if is first level and already opened, + // when clicked close all items + closeAllAccordionMenuItems() + } else { + // when you click on item, close other items on same nesting level + [...document.querySelectorAll(`[data-toggle-menu-items="${nesting}"]`)].forEach(i=>{if(this != i){i.parentElement.parentElement.classList.remove('is-toggled')}}) + // toggle clicked item + clickedItem.classList.toggle('is-toggled') + } + }) + }) + + /** + * Back to top + */ + document.getElementById('backToTop').addEventListener('click', function(){ + window.scrollTo({ + top: 0, + behavior: 'smooth' + }) + }) + + /** + * Footer observer + */ + //when footer is in viewport, restore logo position + let footerObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { - - if(entry.isIntersecting && (entry.target.getBoundingClientRect().top > 0)){ - entry.target.classList.add('is-visible') - entry.target.style.opacity = entry.intersectionRatio - } - - }) - - }, - { - rootMargin: "0px 0px 0px 0px", - threshold: [0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1] - }) - - /** - * Tease height transition - */ - function updateTeaseHeight(tease){ - const teaseHeight = tease.clientHeight - const teaseImg = tease.querySelector('.tease__img') - const teaseText = tease.querySelector('.tease__main') - const teaseTextHeight = teaseText.clientHeight - teaseImg.style.height = `${teaseHeight-teaseTextHeight}px` - teaseText.style.marginTop = `${teaseHeight-teaseTextHeight}px` - } - - const teaseItems = document.querySelectorAll('.tease') - teaseItems.forEach(tease => { - updateTeaseHeight(tease) - }) - - /** - * Accordion - */ - const accordions = document.querySelectorAll('[data-accordion]') - accordions.forEach(accordion => { - const title = accordion.querySelector('[data-accordion-title]') - const content = accordion.querySelector('[data-accordion-content]') - title.addEventListener('click', function(){ - [...accordions].forEach(item => { item.classList.remove('is-toggled'); item.querySelector('[data-accordion-content]').style.display = 'none'}) - accordion.classList.toggle('is-toggled') - content.style.display = content.style.display == 'none' ? 'block' : 'none'; - }) - }) - - /** - * Secondary Nav - */ - let secondaryNavObserver = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if(!entry.isIntersecting){ - secondaryNav.classList.add('is-visible') + if(entry.isIntersecting){ + body.classList.add('footer-in-viewport') } else { - secondaryNav.classList.remove('is-visible') + body.classList.remove('footer-in-viewport') } }) + }, { - threshold: 1, - rootMargin: '-1px 0px 0px 0px' + rootMargin: '0px' }) - - if(secondaryNav !== null) secondaryNavObserver.observe(secondaryNavTrigger) - - function getSecondaryNavButtonWidth(){ - const secondaryNavButtonWidth = secondaryNav.querySelector('.secondary-nav__btn').clientWidth - secondaryNav.style.setProperty("--secondary-nav-button-width", `${secondaryNavButtonWidth}px`) - } - if(secondaryNav !== null) getSecondaryNavButtonWidth() + footerObserver.observe(footer) /** * Window resize function callbacks */ const resizeHandler = function(){ + // set vh + set100vh() // get header height getHeaderHeight() - // if secondary nav exists - if(secondaryNav !== null) getSecondaryNavHeight() - if(secondaryNav !== null) getSecondaryNavButtonWidth() - //resize tease posts - teaseItems.forEach(tease => { - updateTeaseHeight(tease) - }) + // when resizing disable menu if toggled + toggleMenuWhenResized() } window.addEventListener('resize', resizeHandler) diff --git a/src/blocks/composition/composition-accordion.twig b/src/blocks/composition/composition-accordion.twig new file mode 100644 index 0000000..7a7d753 --- /dev/null +++ b/src/blocks/composition/composition-accordion.twig @@ -0,0 +1,7 @@ +
    + + {% include "../title.twig" with {'block': block.inner_blocks.title } %} + {% include "../paragraph.twig" with {'block': block.inner_blocks.paragraph } %} + {% include "../accordion.twig" with {'block': block.inner_blocks.accordion } %} + +
    \ No newline at end of file diff --git a/src/blocks/composition/composition-files-list.twig b/src/blocks/composition/composition-files-list.twig new file mode 100644 index 0000000..d250e94 --- /dev/null +++ b/src/blocks/composition/composition-files-list.twig @@ -0,0 +1,7 @@ +
    + + {% include "../title.twig" with {'block': block.inner_blocks.title } %} + {% include "../paragraph.twig" with {'block': block.inner_blocks.paragraph } %} + {% include "../files-list.twig" with {'block': block.inner_blocks.files_list } %} + +
    \ No newline at end of file diff --git a/src/blocks/composition/composition-grid-list.twig b/src/blocks/composition/composition-grid-list.twig new file mode 100644 index 0000000..aac7d14 --- /dev/null +++ b/src/blocks/composition/composition-grid-list.twig @@ -0,0 +1,7 @@ +
    + + {% include "../title.twig" with {'block': block.inner_blocks.title } %} + {% include "../paragraph.twig" with {'block': block.inner_blocks.paragraph } %} + {% include "../grid-list.twig" with {'block': block.inner_blocks.grid_list } %} + +
    \ No newline at end of file diff --git a/src/blocks/composition/composition-text.twig b/src/blocks/composition/composition-text.twig new file mode 100644 index 0000000..1f4f170 --- /dev/null +++ b/src/blocks/composition/composition-text.twig @@ -0,0 +1,6 @@ +
    + + {% include "../title.twig" with {'block': block.inner_blocks.title } %} + {% include "../paragraph.twig" with {'block': block.inner_blocks.paragraph } %} + +
    \ No newline at end of file diff --git a/src/blocks/query-loop.twig b/src/blocks/query-loop.twig new file mode 100644 index 0000000..ba0c768 --- /dev/null +++ b/src/blocks/query-loop.twig @@ -0,0 +1,24 @@ +{# + # Blocco query loop + #} + +
    +
    + {% for post in post_type[block.query.post_type].items %} + + +

    {{post.title}}

    + +
    + {% if post.featured_image %} + {% include "../layout/partials/picture.twig" with {"image": post.featured_image } %} + {% endif %} +
    + +
    +

    {{post.excerpt}}

    +
    +     + {% endfor %} +
    +
    \ No newline at end of file diff --git a/src/layout/base.twig b/src/layout/base.twig index 6485fd0..c93c716 100644 --- a/src/layout/base.twig +++ b/src/layout/base.twig @@ -6,25 +6,38 @@ - + +
    {% include 'header.twig' %} + + {% include './partials/mobilemenu.twig' %} -
    - {% block breadcrumbs %}{% endblock %} - {% block banner %}{% endblock %} - {% block content %} - Sorry, no content +
    + +
    + {% block breadcrumbs %}{% endblock %} + {% block banner %}{% endblock %} + {% block content %} + Sorry, no content + {% endblock %} +
    + + {% block footer %} + {% include 'footer.twig' %} {% endblock %} -
    - {% block footer %} - {% include 'footer.twig' %} - {% endblock %} + + + {% include "script-footer.twig" %} diff --git a/src/layout/footer.twig b/src/layout/footer.twig index 9d34d16..250d1cd 100644 --- a/src/layout/footer.twig +++ b/src/layout/footer.twig @@ -1,6 +1,8 @@ -
    • + {% endfor %} + + + diff --git a/src/pages/boilerplate.twig b/src/pages/boilerplate.twig new file mode 100644 index 0000000..167cee8 --- /dev/null +++ b/src/pages/boilerplate.twig @@ -0,0 +1,4 @@ +{% set currentPage = 5 %} + +{% extends "../layout/page.twig" %} + diff --git a/tailwind.config.js b/tailwind.config.js index d513948..9c2c5c7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,23 +4,26 @@ content: ['./src/**/*.twig'], safelist: ['mt-12', 'mt-16', 'mt-20', 'mt-24', 'mt-32', 'mt-40', 'mb-16', 'mb-20', 'mb-24', 'mb-32', 'mb-40'], theme: { + screens: { + 'sm': '40rem', + 'md': '48rem', + 'lg': '64rem', + 'xl': '80rem', + '2xl': '120rem', + '3xl': '128rem' + }, fontFamily: { sans: ['Standard', 'sans-serif'] }, fontSize: { - 'xs': '.75rem', - 'sm': '.8125rem', - 'base': '1rem', - 'lg': '1.125rem', - 'xl': '1.25rem', - '2xl': '1.5rem', - '3xl': '1.875rem', - '4xl': '2.375rem', - '5xl': '2.875rem', - '6xl': '3rem', - '7xl': '3.5rem', - '8xl': '4rem', - '9xl': '4.25rem' + 'sm': ['13px', '20px'], + 'base': ['16px', '25px'], + 'md': ['20px', '30px'], + 'md-lg': ['26px', '35px'], + 'lg': ['30px', '40px'], + 'xl': ['44px', '55px'], + '2xl': ['58px', '70px'], + '3xl': ['90px', '105px'] }, colors: { yellow: "#FFCC00", @@ -39,6 +42,22 @@ transparent: 'transparent' }, extend: { + spacing: { + '15': '3.75rem', + 'xs': 'calc(var(--spacing-size)/2)', + 'sm': 'calc(var(--spacing-size))', + 'base': 'calc(var(--spacing-size)*2)', + 'lg': 'calc(var(--spacing-size)*2.5)', + 'xl': 'calc(var(--spacing-size)*4)', + 'xxl': 'calc(var(--spacing-size)*5)', + 'xxxl': '5rem', + '3.75': '0.9375rem', + '6.25': '1.5625rem', + '7.5': '1.875rem', + '8.75': '2.1875rem', + '12.5': '3.125rem', + '25': '6.25rem' + }, lineHeight: { } }