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;
-	background-color: var(--transparent-white);
+	display: flex;
+	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:
-			max-width 400ms ease-in-out,
-			color 400ms ease-in-out;
+		transition: 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 = sidebarNav.querySelectorAll('.sidebar__nav-link--internal');
+const sidebarNavLinks = document.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
-document.addEventListener("touchstart", function() {},false);
+// UTILS
+
+enableActivePseudoClass();
 
 // SIDEBAR ANIMATION
 
-slimDownSidebarOnClick();
+loadExhibitionIframe();