Remove exhibition section (iframe)

assets/css/main.scss

@@ -15,7 +15,6 @@ body {
     font-size: var(--text-font-size);
     line-height: var(--text-line-height);
     color: var(--black);
-    background-color: var(--feldgrau);
 }
 
 h1 {
@@ -38,10 +37,6 @@ h3 {
     margin: 2rem 0 1rem 0;
 }
 
-p {
-    text-align: justify;
-}
-
 strong {
     font-weight: var(--bold-font-weight);
 }
@@ -92,7 +87,7 @@ body {
 
 .sidebar {
     position: relative;
-    z-index: 2;
+    z-index: 1;
     width: 100%;
     padding: var(--sidebar-padding);
     display: flex;
@@ -171,62 +166,11 @@ body {
 @media screen and (min-width: $desktop-media-query) {
 
     .sidebar {
-
+        position: fixed;
-        &--fixed {
+        overflow-y: auto;
-            position: fixed;
+        top: 0;
-            z-index: 3;
+        bottom: 0;
-            overflow-y: auto;
+        left: 0;
-            top: 0;
-            bottom: 0;
-            left: 0;
-        }
-        
-        &--slimmed {
-            width: 15%;
-            min-width: 15rem;
-
-            .sidebar__nav-link {
-                color: var(--transparent-black);
-            }
-
-            .sidebar__social-link {
-
-                svg {
-                    fill: var(--transparent-black);
-                }
-            }
-
-            &:hover {
-                    
-                .sidebar__nav-link {
-                    color: var(--black);
-                }
-
-                .sidebar__social-link {
-
-                    svg {
-                        fill: var(--black);
-                    }
-                }
-            }
-
-            .sidebar__nav-link {
-
-                &:focus-visible {
-                    color: var(--black);
-                }
-            }
-
-            .sidebar__social-link {
-
-                &:focus-visible {
-
-                    svg {
-                        fill: var(--black);
-                    }
-                }
-            }
-        }
 
         .sidebar__social {
             width: auto;
@@ -243,22 +187,8 @@ body {
 
 .slider-section {
     position: fixed;
-    z-index: 1;
     top: 0;
     right: 0;
-    visibility: visible;
-    opacity: 1;
-    transition:
-        visibility 0ms 400ms,
-        opacity 400ms ease-in-out;
-
-    &--hidden {
-        visibility: hidden;
-        opacity: 0;
-        transition:
-            visibility 0ms,
-            opacity 400ms ease-in-out;
-    }
 }
 
 .splide__image {
@@ -266,38 +196,3 @@ body {
     height: 100%;
     object-fit: cover;
 }
-
-// Exhibition section
-
-.exhibition-section {
-    display: none;
-}
-
-@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:
-            visibility 0ms,
-            opacity 400ms ease-in-out;
-
-        &--visible {
-            visibility: visible;
-            opacity: 1;
-            transition:
-                visibility 0ms 400ms,
-                opacity 400ms ease-in-out;
-        }
-    }
-}

assets/js/app.js

@@ -14,21 +14,9 @@ const body = document.body;
 const slider = document.querySelector('.slider-section');
 let splideSlider;
 const slides = document.querySelectorAll('.splide__slide');
-
-// EXHIBITION IFRAME
-
 const sidebar = document.querySelector('.sidebar');
 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
-
-const mediaQueries = {
-    remTabletWidth: 48,
-    remDesktopWidth: 62
-}
 
 // ----------------------------------------------------------------------------
 // LOGIC
@@ -146,93 +134,6 @@ function editNavLinksColorOnSlideActive() {
     }
 }
 
-// EXHIBITION IFRAME
-
-function slimDownSidebar() {
-    if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) {
-        sidebar.classList.add('sidebar--slimmed');
-    }
-}
-
-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 disableExhibitionIframe() {
-    if (exhibitionIframe && slider) {
-        exhibitionIframe.classList.remove('exhibition--visible');
-    }
-}
-
-function loadExhibitionIframe() {
-    if (sidebarEmbeddedNavLinks.length > 0 && exhibitionIframe) {
-        for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
-            sidebarEmbeddedNavLinks[i].addEventListener('click', function(e) {
-                if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
-                    exhibitionIframe.addEventListener('load', function(e) {
-                        turnSidebarLinksToBlack();
-                        slimDownSidebar();
-                        hideSlider();
-                        enableExhibitionIframe();
-                    });
-                }
-            });
-        }
-    }
-}
-
-// NAV LINKS TARGET
-
-function setNavLinksIframeTarget() {
-    if (sidebarEmbeddedNavLinks) {
-        for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
-            sidebarEmbeddedNavLinks[i].setAttribute('target', 'exhibition');
-        }
-    }
-}
-
-function setNavLinksBlankTarget() {
-    if (sidebarEmbeddedNavLinks) {
-        for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
-            sidebarEmbeddedNavLinks[i].setAttribute('target', '_blank');
-        }
-    }
-}
-
-function editNavLinksTarget() {
-        if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
-            setNavLinksIframeTarget();
-        } else {
-            setNavLinksBlankTarget();
-        }
-}
-
-function editNavLinksTargetOnResize() {
-    window.addEventListener('resize', function(e) {
-        editNavLinksTarget();
-    })
-}
-
 // ----------------------------------------------------------------------------
 // PROGRAM
 // ----------------------------------------------------------------------------
@@ -249,12 +150,3 @@ mountSlider();
 goToNextSlideOnClick();
 changeSlideOnSwipe();
 editNavLinksColorOnSlideActive();
-
-// EXHIBITION IFRAME
-
-loadExhibitionIframe();
-
-// NAV LINKS TARGET
-
-editNavLinksTarget();
-editNavLinksTargetOnResize();

site/templates/home.twig

@@ -3,18 +3,14 @@
 {% block header %}
     <header>
 
-        <div class="sidebar sidebar--fixed">
+        <div class="sidebar">
             <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">
+                            <li class="sidebar__nav-item">
-                                    {% if exhibition.external_link == 'false' %}
+                                <a class="sidebar__nav-link" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
-                                        <a class="sidebar__nav-link sidebar__nav-link--iframe" href="{{ exhibition.url }}" target="exhibition" data-background="{{ exhibition.background_color }}">{{ exhibition.title }}</a>
+                            </li>
-                                    {% else %}
-                                        <a class="sidebar__nav-link sidebar__nav-link--blank" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
-                                    {% endif %}
-                                </li>
                         {% endfor %}
                     </ul>
                 {% endif %}
@@ -41,10 +37,6 @@
 {% 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">