Add logo and edit general design

public/assets/css/main.scss

@@ -80,37 +80,81 @@ body {
 // HEADER
 // ----------------------------------------------------------------------------
 
+// Logo
+
+.logo {
+	z-index: 2;
+	position: fixed;
+	top: 1rem;
+	right: 1.5rem;
+
+	.logo__link {
+		width: var(--logo-width);
+		height: var(--logo-height);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.logo__icon {
+		width: 100%;
+		height: 100%;
+
+		path:nth-child(1) {
+			stroke: var(--black);
+		}
+
+		path:nth-child(2) {
+			stroke: var(--white);
+		}
+
+		&--rotate-vertical-left {
+			animation: rotate-vertical-left 800ms ease-in-out infinite;
+		}
+
+		&--rotate-horizontal-bottom {
+			animation: rotate-horizontal-bottom 800ms ease-in-out infinite;
+		}
+	}
+}
+
 // Sidebar
 
 .sidebar {
+	z-index: 1;
+	overflow-y: auto;
 	position: fixed;
 	top: 0;
 	bottom: 0;
 	left: 0;
+	width: 100%;
 	padding: var(--sidebar-vertical-padding) var(--sidebar-horizontal-padding);
-	overflow-y: auto;
+	display: flex;
-	background-color: var(--transparent-white);
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: flex-start;
+	background-color: var(--white);
 	transition: background-color 400ms ease-in-out;
 
+	.sidebar__nav {
+		max-width: 100%;
+	}
+
 	.sidebar__nav-item {
-		width: 97vw;
-		transition: width 400ms ease-in-out;
 
 		+ .sidebar__nav-item {
-			margin: 0.75rem 0 0 0;
+			margin: 0.5rem 0 0 0;
 		}
 	}
 
 	.sidebar__nav-link {
 		display: inline-block;
-		max-width: 100vw;
+		max-width: 100%;
 		overflow-x: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		color: var(--black);
-		transition:
+		transition: color 400ms ease-in-out;
-			max-width 400ms ease-in-out,
-			color 400ms ease-in-out;
 	}
 
 	.sidebar__social {
@@ -140,14 +184,10 @@ body {
 	}
 
 	&--slimmed {
+		width: 15%;
 		background-color: transparent;
 
-		.sidebar__nav-item {
-			width: 15vw;
-		}
-
 		.sidebar__nav-link {
-			max-width: 15vw;
 			color: var(--transparent-black);
 		}
 
@@ -185,12 +225,13 @@ body {
 }
 
 .exhibition {
+	opacity: 0;
 	width: 100%;
 	height: 100%;
+	padding: 0 0 0 15%;
+	transition: opacity 400ms ease-in-out;
+
+	&--visible {
+		opacity: 1;
+	}
 }
-
-// ----------------------------------------------------------------------------
-// FOOTER
-// ----------------------------------------------------------------------------
-
-// Footer bar

public/assets/css/partials/animations.scss

@@ -3,10 +3,41 @@
 // ----------------------------------------------------------------------------
 
 @keyframes expand-outline {
-	from {
+	0% {
 		outline-offset: 0;
 	}
-	to {
+	100% {
 		outline-offset: 2px;
 	}
 }
+
+@keyframes rotate-vertical-left {
+	0% {
+		transform: rotateY(0);
+		transform-origin: left;
+	}
+	50% {
+		transform: rotateY(180deg);
+		transform-origin: left;
+	}
+	100% {
+		transform: rotateY(0);
+		transform-origin: left;
+	}
+}
+
+@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;
+	}
+}
+

public/assets/css/partials/variables.scss

@@ -25,6 +25,8 @@
 
 	// Dimensions
 
+	--logo-width: 2rem;
+	--logo-height: 4rem;
 	--icon-size: 1.75rem;
 	--sidebar-vertical-padding: 1rem;
 	--sidebar-horizontal-padding: 1rem;
@@ -32,7 +34,7 @@
 	// Colors
 
 	--black: #000;
-	--transparent-black: rgba(0, 0, 0, 0.4);
+	--transparent-black: rgba(0, 0, 0, 0.3);
 	--white: #fff;
 	--transparent-white: rgba(255, 255, 255, 0.9);
 	--feldgrau: #4B6259;
@@ -57,6 +59,8 @@ $desktop-media-query: 62rem;
 
 		// Dimensions
 
+		--logo-width: 6rem;
+		--logo-height: 3rem;
 		--icon-size: 2.25rem;
 	}
 }

public/assets/js/app.js

@@ -5,35 +5,68 @@
 // SIDEBAR ANIMATION
 
 const sidebar = document.querySelector('.sidebar');
-const sidebarNav = document.querySelector('.sidebar__nav');
+const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--internal');
-const sidebarNavLinks = sidebarNav.querySelectorAll('.sidebar__nav-link--internal');
+const logoIcon = document.querySelector('.logo__icon');
+const exhibitionIframe = document.querySelector('.exhibition');
 
 // ----------------------------------------------------------------------------
-// UTILS
+// LOGIC
 // ----------------------------------------------------------------------------
 
+// UTILS
+
+// Enable CSS :active pseudo-class in Safari Mobile
+function enableActivePseudoClass() {
+	document.addEventListener("touchstart", function() {},false);
+}
+
 // Convert rem to pixels by getting font-size CSS property
 function convertRemToPixels(rem) {
 	let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
 	return rem * fontSize;
 }
 
-// ----------------------------------------------------------------------------
-// LOGIC
-// ----------------------------------------------------------------------------
-
 // SIDEBAR ANIMATION
 
 function slimDownSidebar() {
-	if (sidebar) {
+	if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) {
 		sidebar.classList.add('sidebar--slimmed');
 	}
 }
 
-function slimDownSidebarOnClick() {
+
-	if (sidebarNavLinks.length > 0) {
+function enableLogoIconRotation() {
+	if (logoIcon) {
+		if (logoIcon.classList.contains('logo__icon--vertical')) {
+			logoIcon.classList.add('logo__icon--rotate-vertical-left');
+		} else {
+			logoIcon.classList.add('logo__icon--rotate-horizontal-bottom');
+		}
+	}
+}
+
+function disableLogoIconRotation() {
+	if (logoIcon) {
+		if (logoIcon.classList.contains('logo__icon--vertical')) {
+			logoIcon.classList.remove('logo__icon--rotate-vertical-left');
+		} else {
+			logoIcon.classList.remove('logo__icon--rotate-horizontal-bottom');
+		}
+	}
+}
+
+function loadExhibitionIframe() {
+	if (sidebarNavLinks.length > 0 && exhibitionIframe) {
 		for (let i = 0; i < sidebarNavLinks.length; i++) {
-			sidebarNavLinks[i].addEventListener('click', slimDownSidebar);
+			sidebarNavLinks[i].addEventListener('click', function(e) {
+				enableLogoIconRotation();
+				exhibitionIframe.classList.remove('exhibition--visible');
+				exhibitionIframe.addEventListener('load', function(e) {
+					slimDownSidebar();
+					disableLogoIconRotation();
+					exhibitionIframe.classList.add('exhibition--visible');
+				});
+			});
 		}
 	}
 }
@@ -42,9 +75,10 @@ function slimDownSidebarOnClick() {
 // PROGRAM
 // ----------------------------------------------------------------------------
 
-// Enable CSS :active pseudo-class in Safari Mobile
+// UTILS
-document.addEventListener("touchstart", function() {},false);
+
+enableActivePseudoClass();
 
 // SIDEBAR ANIMATION
 
-slimDownSidebarOnClick();
+loadExhibitionIframe();

site/controllers/exhibitions.php

@@ -1,6 +1,9 @@
 <?php
 
-return function ($page) {
+return function ($site, $page) {
+
+	// Get home page object
+	$homePage = $site->homePage();
 
 	// Get exhibitions field content (stored as yaml) and parse it to return an array
 	$exhibitions = $page->exhibitions()->yaml();
@@ -15,6 +18,7 @@ return function ($page) {
 	$instagram = $page->instagram();
 
 	return [
+		'homePage' => $homePage,
 		'exhibitions' => $exhibitions,
 		'email' => $email,
 		'instagram' => $instagram

site/templates/exhibitions.twig

@@ -3,6 +3,17 @@
 {% block header %}
 	<header>
 
+		<div class="logo">
+			<a class="logo__link" href="{{ homePage.url }}" target="_self" aria-label="Go to {{ site.title }}'s home page">
+				<svg class="logo__icon" aria-hidden="true" viewBox="0 0 3814 1912" xmlns="http://www.w3.org/2000/svg">
+					<g transform="matrix(1, 0, 0, -1, 1426.537109, 1153.771606)">
+						<path style="fill:none;stroke:currentColor;stroke-width:93.54299927;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
+						<path style="fill:none;stroke:currentColor;stroke-width:8.50399971;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
+					</g>
+				</svg>
+			</a>
+		</div>
+
 		<div class="sidebar">
 			<nav class="sidebar__nav" aria-label="Menu">
 				{% if exhibitions is not empty %}
@@ -20,7 +31,7 @@
 				{% endif %}
 			</nav>
 			<div class="sidebar__social">
-				<a class="sidebar__social-link" href="{{ instagram }}" target="_blank" aria-label="Show {{ site.title }}'s Instagram profile">
+				<a class="sidebar__social-link" href="{{ instagram }}" target="_blank" aria-label="Go to {{ site.title }}'s Instagram profile">
 					<svg class="sidebar__instagram-icon" 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"/>