www: hide header on scroll

1 files changed, 11 insertions, 0 deletions

diff --git a/juick-www/src/main/assets/style.css b/juick-www/src/main/assets/style.css
index 364cd7ef..d2cb984f 100644
--- a/juick-www/src/main/assets/style.css
+++ b/juick-www/src/main/assets/style.css
@@ -98,6 +98,12 @@ body > header {
     top: 0;
     width: 100%;
     z-index: 10;
+    -webkit-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transition-property: -webkit-transform;
+    transition-property: transform;
 }
 #header_wrapper {
     margin: 0 auto;
@@ -108,6 +114,11 @@ body > header {
     flex-wrap: wrap;
     padding: 4px;
 }
+.header--hidden {
+    -webkit-transform: translateY(-100%);
+    -ms-transform: translateY(-100%);
+    transform: translateY(-100%);
+}
 #footer {
     clear: both;
     color: #999;