Add header bar animation and fix artworks width

assets/css/style.scss

@@ -106,10 +106,13 @@ footer {
 // Header bar
 
 .header-bar {
+	width: 100%;
     max-width: var(--content-max-width);
     height: var(--header-bar-height);
     margin: auto;
     padding: var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding);
+	background-color: var(--transparent-white);
+	border-bottom: 1px solid var(--transparent-white);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -119,6 +122,28 @@ footer {
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
+	z-index: 1;
+	-webkit-transition:
+		border-bottom 400ms ease-in-out,
+		transform 400ms ease-in-out;
+	-o-transition:
+		border-bottom 400ms ease-in-out,
+		transform 400ms ease-in-out;
+	transition:
+		border-bottom 400ms ease-in-out,
+		transform 400ms ease-in-out;
+}
+
+.header-bar--fixed {
+    position: fixed;
+    top: calc(-1 * var(--header-bar-height));
+}
+
+.header-bar--visible {
+	border-bottom: 1px solid var(--spanish-gray);
+	-webkit-transform: translateY(var(--header-bar-height));
+	-ms-transform: translateY(var(--header-bar-height));
+	transform: translateY(var(--header-bar-height));
 }
 
 .header-bar__logo {
@@ -135,7 +160,7 @@ footer {
 }
 
 .header-bar__nav-button {
-	background-color: var(--white);
+	background-color: transparent;
 	width: 32px;
 	height: 32px;
 	padding: 5px 0;
@@ -417,6 +442,7 @@ footer {
 
 .gallery__artwork {
     display: table;
+    max-width: Min(1280px, 100%);
     margin: auto;
 
     + .gallery__artwork {
@@ -427,18 +453,11 @@ footer {
     .gallery__video {
         display: block;
         max-height: 80vh;
-        margin: auto;
-    }
-
-    .gallery__image {
-        max-width: Min(1500px, 100%);
     }
 
     .gallery__video {
-		max-width: Min(1280px, 100%);
 
         &--full-screen {
-            max-width: initial;
             max-height: initial;
         }
     }