Merge gallery and exhibitions pages into home page

assets/css/main.scss

@@ -50,13 +50,6 @@ em {
     font-style: italic;
 }
 
-@media screen and (min-width: $desktop-media-query) {
-
-    .body--white-background {
-        background-color: var(--white);
-    }
-}
-
 // Link style
 
 a {
@@ -95,71 +88,11 @@ body {
 // HEADER
 // ----------------------------------------------------------------------------
 
-// Logo
-
-.logo {
-    width: 100%;
-    padding: var(--logo-padding);
-    display: flex;
-    justify-content: center;
-
-    &--fixed-center {
-        z-index: 2;
-        width: auto;
-        padding: 0;
-        position: fixed;
-        top: 1rem;
-        right: calc(50vw - (var(--logo-width) / 2));
-        display: block;
-    }
-
-    .logo__link {
-        width: var(--logo-width);
-        height: var(--logo-height);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .logo__icon {
-        width: 100%;
-        height: 100%;
-
-        &--black {
-            stroke: var(--black);
-            transition: stroke 400ms ease-in-out;
-        }
-
-        &--white {
-            stroke: var(--white);
-            transition: stroke 400ms ease-in-out;
-        }
-
-        &--rotate-horizontal-bottom {
-            animation: rotate-horizontal-bottom 800ms ease-in-out infinite;
-        }
-    }
-}
-
-@media screen and (min-width: $desktop-media-query) {
-
-    .logo {
-
-        &--fixed-right {
-            z-index: 2;
-            width: auto;
-            padding: 0;
-            position: fixed;
-            top: 1rem;
-            right: 1.5rem;
-            display: block;
-        }
-    }
-}
-
 // Sidebar
 
 .sidebar {
+    position: relative;
+    z-index: 2;
     width: 100%;
     padding: var(--sidebar-padding);
     display: flex;
@@ -167,7 +100,6 @@ body {
     justify-content: space-between;
     align-items: flex-start;
     background-color: transparent;
-    transition: background-color 400ms ease-in-out;
 
     .sidebar__nav {
         max-width: 100%;
@@ -186,8 +118,15 @@ body {
         overflow-x: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        color: var(--black);
+        transition: color 200ms ease-in-out;
-        transition: color 400ms ease-in-out;
+
+        &--white {
+            color: var(--white);
+
+            &:focus-visible {
+                outline: 1px dashed var(--white);
+            }
+        }
     }
 
     .sidebar__social {
@@ -208,14 +147,24 @@ body {
         + .sidebar__social-link {
             margin: 0 0 0 1rem;
         }
-    }
 
-    .sidebar__instagram-icon,
+        svg {
-    .sidebar__email-icon {
+            width: 100%;
-        width: 100%;
+            height: 100%;
-        height: 100%;
+            fill: var(--black);
-        fill: var(--black);
+            transition: fill 200ms ease-in-out;
-        transition: fill 400ms ease-in-out;
+        }
+
+        &--white {
+
+            &:focus-visible {
+                outline: 1px dashed var(--white);
+            }
+
+            svg {
+                fill: var(--white);
+            }
+        }
     }
 }
 
@@ -224,9 +173,9 @@ body {
     .sidebar {
 
         &--fixed {
-            z-index: 1;
-            overflow-y: auto;
             position: fixed;
+            z-index: 3;
+            overflow-y: auto;
             top: 0;
             bottom: 0;
             left: 0;
@@ -240,30 +189,42 @@ body {
                 color: var(--transparent-black);
             }
 
-            .sidebar__instagram-icon,
+            .sidebar__social-link {
-            .sidebar__email-icon {
+
-                fill: var(--transparent-black);
+                svg {
+                    fill: var(--transparent-black);
+                }
             }
 
             &:hover {
-                background-color: var(--transparent-feldgrau);
-
                     
                 .sidebar__nav-link {
                     color: var(--black);
                 }
 
-                .sidebar__instagram-icon,
+                .sidebar__social-link {
-                .sidebar__email-icon {
+
-                    fill: var(--black);
+                    svg {
+                        fill: var(--black);
+                    }
                 }
             }
-        }
 
-        &--white-background {
+            .sidebar__nav-link {
 
-            &:hover {
+                &:focus-visible {
-                background-color: var(--transparent-white);
+                    color: var(--black);
+                }
+            }
+
+            .sidebar__social-link {
+
+                &:focus-visible {
+
+                    svg {
+                        fill: var(--black);
+                    }
+                }
             }
         }
 
@@ -280,15 +241,32 @@ body {
 
 // Slider section
 
-.splide {
+.slider-section {
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    visibility: visible;
+    opacity: 1;
+    transition:
+        visibility 0ms 400ms,
+        opacity 400ms ease-in-out;
 
-    &__image {
+    &--hidden {
-        width: 100%;
+        visibility: hidden;
-        height: 100%;
+        opacity: 0;
-        object-fit: cover;
+        transition:
+            visibility 0ms,
+            opacity 400ms ease-in-out;
     }
 }
 
+.splide__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
 // Exhibition section
 
 .exhibition-section {
@@ -298,19 +276,28 @@ body {
 @media screen and (min-width: $desktop-media-query) {
 
     .exhibition-section {
+        position: relative;
+        z-index: 2;
         display: block;
         width: 100vw;
         height: 100vh;
     }
 
     .exhibition {
+        visibility: hidden;
         opacity: 0;
         width: 100%;
         height: 100%;
-        transition: opacity 400ms ease-in-out;
+        transition:
+            visibility 0ms,
+            opacity 400ms ease-in-out;
 
         &--visible {
+            visibility: visible;
             opacity: 1;
+            transition:
+                visibility 0ms 400ms,
+                opacity 400ms ease-in-out;
         }
     }
 }

assets/css/partials/animations.scss

@@ -10,19 +10,3 @@
         outline-offset: 2px;
     }
 }
-
-@keyframes rotate-horizontal-bottom {
-    0% {
-        transform: rotateX(0);
-        transform-origin: bottom;
-    }
-    50% {
-        transform: rotateX(180deg);
-        transform-origin: bottom;
-    }
-    100% {
-        transform: rotateX(0);
-        transform-origin: bottom;
-    }
-}
-

assets/css/partials/variables.scss

@@ -25,9 +25,6 @@
 
     // Dimensions
 
-    --logo-width: 6rem;
-    --logo-height: 3rem;
-    --logo-padding: 1rem;
     --icon-size: 2.25rem;
     --sidebar-padding: 1rem;
 
@@ -37,8 +34,6 @@
     --transparent-black: rgba(0, 0, 0, 0.3);
     --white: #fff;
     --transparent-white: rgba(255, 255, 255, 0.9);
-    --feldgrau: #4B6259;
-    --transparent-feldgrau: rgba(75, 98, 89, 0.9);
 }
 
 // Media queries

assets/js/app.js

@@ -1,4 +1,5 @@
 import Splide from '@splidejs/splide';
+import create from 'swipe-events';
 
 // ----------------------------------------------------------------------------
 // DATA
@@ -10,14 +11,16 @@ const body = document.body;
 
 // SPLIDE SLIDER
 
-const logo = document.querySelector('.logo__icon');
+const slider = document.querySelector('.slider-section');
-let slider = document.querySelector('.splide');
+let splideSlider;
 const slides = document.querySelectorAll('.splide__slide');
 
 // EXHIBITION IFRAME
 
 const sidebar = document.querySelector('.sidebar');
-const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--iframe');
+const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link');
+const sidebarEmbeddedNavLinks = document.querySelectorAll('.sidebar__nav-link--iframe');
+const sidebarSocialLinks = document.querySelectorAll('.sidebar__social-link');
 const exhibitionIframe = document.querySelector('.exhibition');
 
 // NAV LINKS TARGET
@@ -48,7 +51,7 @@ function convertRemToPixels(rem) {
 
 function setUpSlider() {
     if (slider) {
-        slider = new Splide('.splide', {
+        splideSlider = new Splide('.splide', {
             type: 'fade',
             rewind: true,
             rewindByDrag: true,
@@ -58,86 +61,87 @@ function setUpSlider() {
             arrows: false,
             pagination: false,
             easing: 'ease-in-out',
-            drag: true,
+            drag: true
-            wheel: true
         });
     }
 }
 
 function mountSlider() {
-    if (slider) {
+    if (splideSlider) {
-        slider.mount();
+        splideSlider.mount();
     }
 }
 
 function goToNextSlideOnClick() {
-    if (slider) {
+    if (sidebar && splideSlider) {
-        slider.on('click', function(e) {
+        sidebar.addEventListener('click', function(e) {
-            slider.go('>');
+            if (!e.target.matches('a') && !e.target.parentElement.matches('a')) {
-        });     
+                splideSlider.go('>');
+            }
+        });
     }
 }
 
-function turnLogoToBlack() {
+function changeSlideOnSwipe() {
-    if (logo) {
+    if (sidebar && splideSlider) {
-        logo.classList.remove('logo__icon--white');
+        sidebar.addEventListener('swiped', function(e) {
-        logo.classList.add('logo__icon--black');
+            if (e.detail.dir === 'right') {
+                splideSlider.go('>');
+            } else if (e.detail.dir === 'left') {
+                splideSlider.go('<');
+            }
+        });
     }
 }
 
-function turnLogoToWhite() {
+function turnSidebarLinksToWhite() {
-    if (logo) {
+    if (sidebarNavLinks) {
-        logo.classList.remove('logo__icon--black');
+        for (let i = 0; i < sidebarNavLinks.length; i++) {
-        logo.classList.add('logo__icon--white');
+            sidebarNavLinks[i].classList.add('sidebar__nav-link--white');
+        }
     }
-}
+    if (sidebarSocialLinks) {
-
+        for (let i = 0; i < sidebarSocialLinks.length; i++) {
-function editLogoColor(slide) {
+            sidebarSocialLinks[i].classList.add('sidebar__social-link--white');
-    if (slide) {
-        if (slide.getAttribute('data-logo-color') === 'white') {
-            turnLogoToWhite();
-        } else if (slide.getAttribute('data-logo-color') === 'black') {
-            turnLogoToBlack();
         }
     }
 }
 
-function editLogoColorOnSliderMounted() {
+function turnSidebarLinksToBlack() {
-    if (slider && slides) {
+    if (sidebarNavLinks) {
-        slider.on('mounted', function() {
+        for (let i = 0; i < sidebarNavLinks.length; i++) {
-            editLogoColor(slides[0]);
+            sidebarNavLinks[i].classList.remove('sidebar__nav-link--white');
+        }
+    }
+    if (sidebarSocialLinks) {
+        for (let i = 0; i < sidebarSocialLinks.length; i++) {
+            sidebarSocialLinks[i].classList.remove('sidebar__social-link--white');
+        }
+    }
+}
+
+function editNavLinksColor(slide) {
+    if (slide) {
+        if (slide.getAttribute('data-logo-color') === 'white') {
+            turnSidebarLinksToWhite();
+        } else if (slide.getAttribute('data-logo-color') === 'black') {
+            turnSidebarLinksToBlack();
+        }
+    }
+}
+
+function editNavLinksColorOnSliderMounted() {
+    if (splideSlider && slides) {
+        splideSlider.on('mounted', function() {
+            editNavLinksColor(slides[0]);
         })
     }
 }
 
-function editLogoColorOnSlideActive() {
+function editNavLinksColorOnSlideActive() {
-    if (slider) {
+    if (splideSlider) {
-        slider.on('active', function(e) {
+        splideSlider.on('active', function(e) {
-            editLogoColor(e.slide);
+            editNavLinksColor(e.slide);
-        });
-    }
-}
-
-function enableLogoRotation() {
-    if (logo) {
-        logo.classList.add('logo__icon--rotate-horizontal-bottom');
-    }
-}
-
-function disableLogoRotation() {
-    if (logo) {
-        logo.classList.remove('logo__icon--rotate-horizontal-bottom');
-    }
-}
-
-function rotateLogoOnSliderMove() {
-    if (slider && logo) {
-        slider.on('move', function(e) {
-            logo.removeEventListener('animationiteration', disableLogoRotation);
-            enableLogoRotation();
-        });
-        slider.on('moved', function(e) {
-            logo.addEventListener('animationiteration', disableLogoRotation);
         });
     }
 }
@@ -150,43 +154,46 @@ function slimDownSidebar() {
     }
 }
 
-function enableExhibitionIframeVisibility() {
+function enlargeSidebar() {
+    if (sidebar) {
+        sidebar.classList.remove('sidebar--slimmed');
+    }
+}
+
+function hideSlider() {
+    if (slider) {
+        slider.classList.add('slider-section--hidden');
+    }
+}
+
+function showSlider() {
+    if (slider) {
+        slider.classList.remove('slider-section--hidden');
+    }
+}
+
+function enableExhibitionIframe() {
     if (exhibitionIframe) {
         exhibitionIframe.classList.add('exhibition--visible');
     }
 }
 
-function disableExhibitionIframeVisibility() {
+function disableExhibitionIframe() {
-    if (exhibitionIframe) {
+    if (exhibitionIframe && slider) {
         exhibitionIframe.classList.remove('exhibition--visible');
     }
 }
 
-function editBackgroundColor(sidebarNavLink) {
-    if (body && sidebar) {
-        if (sidebarNavLink.getAttribute('data-background') === 'feldgrau') {
-            body.classList.remove('body--white-background');
-            sidebar.classList.remove('sidebar--white-background');
-        } else if (sidebarNavLink.getAttribute('data-background') === 'white') {
-            body.classList.add('body--white-background');
-            sidebar.classList.add('sidebar--white-background');
-        }
-    }
-}
-
 function loadExhibitionIframe() {
-    if (sidebarNavLinks.length > 0 && exhibitionIframe) {
+    if (sidebarEmbeddedNavLinks.length > 0 && exhibitionIframe) {
-        for (let i = 0; i < sidebarNavLinks.length; i++) {
+        for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
-            sidebarNavLinks[i].addEventListener('click', function(e) {
+            sidebarEmbeddedNavLinks[i].addEventListener('click', function(e) {
                 if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
-                    logo.removeEventListener('animationiteration', disableLogoRotation);
-                    enableLogoRotation();
-                    disableExhibitionIframeVisibility();
                     exhibitionIframe.addEventListener('load', function(e) {
-                        logo.addEventListener('animationiteration', disableLogoRotation);
+                        turnSidebarLinksToBlack();
                         slimDownSidebar();
-                        enableExhibitionIframeVisibility();
+                        hideSlider();
-                        editBackgroundColor(sidebarNavLinks[i]);
+                        enableExhibitionIframe();
                     });
                 }
             });
@@ -197,17 +204,17 @@ function loadExhibitionIframe() {
 // NAV LINKS TARGET
 
 function setNavLinksIframeTarget() {
-    if (sidebarNavLinks) {
+    if (sidebarEmbeddedNavLinks) {
-        for (let i = 0; i < sidebarNavLinks.length; i++) {
+        for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
-            sidebarNavLinks[i].setAttribute('target', 'exhibition');
+            sidebarEmbeddedNavLinks[i].setAttribute('target', 'exhibition');
         }
     }
 }
 
 function setNavLinksBlankTarget() {
-    if (sidebarNavLinks) {
+    if (sidebarEmbeddedNavLinks) {
-        for (let i = 0; i < sidebarNavLinks.length; i++) {
+        for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
-            sidebarNavLinks[i].setAttribute('target', '_blank');
+            sidebarEmbeddedNavLinks[i].setAttribute('target', '_blank');
         }
     }
 }
@@ -237,11 +244,11 @@ enableActivePseudoClass();
 // SPLIDE SLIDER
 
 setUpSlider();
-editLogoColorOnSliderMounted();
+editNavLinksColorOnSliderMounted();
 mountSlider();
 goToNextSlideOnClick();
-editLogoColorOnSlideActive();
+changeSlideOnSwipe();
-rotateLogoOnSliderMove();
+editNavLinksColorOnSlideActive();
 
 // EXHIBITION IFRAME
 

package-lock.json

@@ -12,6 +12,7 @@
                 "postcss-loader": "^7.0.1",
                 "sass": "^1.53.0",
                 "sass-loader": "^13.0.2",
+                "swipe-events": "^1.0.0",
                 "ts-loader": "^9.3.1",
                 "typescript": "^4.7.4",
                 "webpack-notifier": "^1.15.0"
@@ -7082,6 +7083,12 @@
                 "node": ">=10.13.0"
             }
         },
+        "node_modules/swipe-events": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/swipe-events/-/swipe-events-1.0.0.tgz",
+            "integrity": "sha512-Z3HYiIprAP5IkGtj3ollGVsH6QJCXq2UVEiybB6F+UzOvaLerJIaVmu9qLv8Eh7iQXKQKKGWGF7m0RW0CgGHEg==",
+            "dev": true
+        },
         "node_modules/sync-rpc": {
             "version": "1.3.6",
             "resolved": "https://registry.npmjs.org/sync-rpc/-/sync-rpc-1.3.6.tgz",
@@ -13087,6 +13094,12 @@
                 "stable": "^0.1.8"
             }
         },
+        "swipe-events": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/swipe-events/-/swipe-events-1.0.0.tgz",
+            "integrity": "sha512-Z3HYiIprAP5IkGtj3ollGVsH6QJCXq2UVEiybB6F+UzOvaLerJIaVmu9qLv8Eh7iQXKQKKGWGF7m0RW0CgGHEg==",
+            "dev": true
+        },
         "sync-rpc": {
             "version": "1.3.6",
             "resolved": "https://registry.npmjs.org/sync-rpc/-/sync-rpc-1.3.6.tgz",

package.json

@@ -13,6 +13,7 @@
         "postcss-loader": "^7.0.1",
         "sass": "^1.53.0",
         "sass-loader": "^13.0.2",
+        "swipe-events": "^1.0.0",
         "ts-loader": "^9.3.1",
         "typescript": "^4.7.4",
         "webpack-notifier": "^1.15.0"

public/build/app.js.LICENSE.txt

@@ -1,6 +0,0 @@
-/*!
- * Splide.js
- * Version  : 4.0.7
- * License  : MIT
- * Copyright: 2022 Naotoshi Fujita
- */

public/build/panel.css

@@ -1 +1,13 @@
-.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(2),.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(3),.kirby-imagecrop-field .k-column:nth-of-type(2){display:none}
+/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[4]!./assets/css/panel.scss ***!
+  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(2),
+.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(3) {
+  display: none;
+}
+
+.kirby-imagecrop-field .k-column:nth-of-type(2) {
+  display: none;
+}
+
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwuY3NzIiwibWFwcGluZ3MiOiI7OztBQVlZOztFQUVJO0FDWGhCOztBRHFCSTtFQUNJO0FDbEJSLEMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvY3NzL3BhbmVsLnNjc3MiLCJ3ZWJwYWNrOi8vLy4uLy4uLy4uLy4uL0Rvbm4lQzMlQTllcy9Qcm9ncmFtbWF0aW9uL1Byb2pldHMvanVsaWVubW9ubmVyaWUvYXNzZXRzL2Nzcy9wYW5lbC5zY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbi8vIEtJUkJZIFBBTkVMIENVU1RPTUlaQVRJT05cbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuLy8gVGV4dGFyZWEgaGVhZGxpbmUgYnV0dG9uc1xuXG4uay10ZXh0YXJlYS1maWVsZCB7XG5cbiAgICAuay10b29sYmFyIHtcblxuICAgICAgICAuay1kcm9wZG93biB7XG5cbiAgICAgICAgICAgIC5rLWJ1dHRvbjpudGgtb2YtdHlwZSgyKSxcbiAgICAgICAgICAgIC5rLWJ1dHRvbjpudGgtb2YtdHlwZSgzKSB7XG4gICAgICAgICAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cbn1cblxuLy8gVmlzdWFsIGltYWdlIGNyb3AgZmllbGQgcHJvcGVydGllc1xuXG4ua2lyYnktaW1hZ2Vjcm9wLWZpZWxkIHtcblxuICAgIC5rLWNvbHVtbjpudGgtb2YtdHlwZSgyKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxufVxuIiwiLmstdGV4dGFyZWEtZmllbGQgLmstdG9vbGJhciAuay1kcm9wZG93biAuay1idXR0b246bnRoLW9mLXR5cGUoMiksXG4uay10ZXh0YXJlYS1maWVsZCAuay10b29sYmFyIC5rLWRyb3Bkb3duIC5rLWJ1dHRvbjpudGgtb2YtdHlwZSgzKSB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbi5raXJieS1pbWFnZWNyb3AtZmllbGQgLmstY29sdW1uOm50aC1vZi10eXBlKDIpIHtcbiAgZGlzcGxheTogbm9uZTtcbn0iXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=*/

site/config/config.php

@@ -2,7 +2,6 @@
 
 return [
     // Kirby configuration settings
-    'home' => 'gallery',
     'panel' => [
         'language' => 'fr',
         'css' => 'build/panel.css'

site/controllers/home.php

@@ -0,0 +1,27 @@
+<?php
+
+return function ($page) {
+
+    // Get exhibitions field content (stored as yaml) and parse it to return an array
+    $exhibitions = $page->exhibitions()->yaml();
+
+    // Add url based title to each exhibition
+    foreach ($exhibitions as &$exhibition) {
+        $exhibition['title'] = str_replace(['http://', 'https://', 'www.'], '', $exhibition['url']);
+    }
+
+    // Get contact fields content
+    $email = $page->email();
+    $instagram = $page->instagram();
+
+    // Get image files section content
+    // $images = $page->files()->template("full_screen_image")->sortBy('sort');
+    $images = $page->files()->template("full_screen_image")->shuffle();
+
+    return [
+        'exhibitions' => $exhibitions,
+        'email' => $email,
+        'instagram' => $instagram,
+        'images' => $images
+    ];
+};

site/templates/home.twig

@@ -0,0 +1,61 @@
+{% extends "base.twig" %}
+
+{% block header %}
+    <header>
+
+        <div class="sidebar sidebar--fixed">
+            <nav class="sidebar__nav" aria-label="Menu">
+                {% if exhibitions is not empty %}
+                    <ul class="sidebar__nav-menu">
+                        {% for exhibition in exhibitions %}
+                                <li class="sidebar__nav-item">
+                                    {% if exhibition.external_link == 'false' %}
+                                        <a class="sidebar__nav-link sidebar__nav-link--iframe" href="{{ exhibition.url }}" target="exhibition" data-background="{{ exhibition.background_color }}">{{ exhibition.title }}</a>
+                                    {% else %}
+                                        <a class="sidebar__nav-link sidebar__nav-link--blank" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
+                                    {% endif %}
+                                </li>
+                        {% endfor %}
+                    </ul>
+                {% endif %}
+            </nav>
+            <div class="sidebar__social">
+                <a class="sidebar__social-link" href="{{ instagram }}" target="_blank" aria-label="Go to {{ site.title }}'s Instagram profile">
+                    <svg aria-hidden="true" viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M 128 0 L 0 0 L 0 128 L 128 128 L 128 0 Z M 119.874 119.874 L 8.126 119.874 L 8.126 8.126 L 119.874 8.126 L 119.874 119.874 Z"/>
+                        <path d="M64,93c16,0,29-13,29-29S80,35,64,35S35,48,35,64S48,93,64,93z M64,43c11.6,0,21,9.4,21,21s-9.4,21-21,21s-21-9.4-21-21 S52.4,43,64,43z"/>
+                        <rect height="10" width="10" x="98" y="20"/>
+                    </svg>
+                </a>
+                <a class="sidebar__social-link" href="mailto:{{ email }}" target="_blank" aria-label="Write an email to {{ site.title }}">
+                    <svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M 0 48 L 0 0 L 48 0 L 48 48 L 0 48 Z M 24 24.35 L 3.1 7.126 L 3.1 44.5 L 44.9 44.5 L 44.9 7.126 L 24 24.35 Z M 24 20.35 L 44.9 3.5 L 3.1 3.5 L 24 20.35 Z M 3.1 7.126 L 3.1 3.5 L 3.1 7.126 Z"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+
+    </header>
+{% endblock %}
+
+{% block main %}
+    <main>
+
+        <section class="exhibition-section">
+            <iframe class="exhibition" name="exhibition" src=""></iframe>
+        </section>
+
+        <section class="slider-section splide" aria-label="{{ site.title }}'s artwork gallery">
+            <div class="splide__track">
+                <ul class="splide__list">
+                    {% for image in images %}
+                        <li class="splide__slide" data-logo-color="{{ image.logo_color }}">
+                            <img class="splide__image" src="{{ image.url }}" srcset="{{ image.srcset() }}" alt="{{ image.alt_text }}">
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </section>
+
+    </main>
+{% endblock %}