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;
 	}
 }