From 88ed78f4932dfc3d5ef86d87b141dac4d4a822c3 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Sat, 30 Aug 2014 16:38:22 -0400
Subject: [PATCH] Bg pattern on body animate

---
 server/files/javascript/semantic.js   |  27 -------
 server/files/stylesheets/semantic.css | 107 +++++++++++++++++++++++---
 server/layouts/default.html.eco       |   2 +-
 3 files changed, 97 insertions(+), 39 deletions(-)

diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js
index 0cbf5f1fe..8bf5b4630 100755
--- a/server/files/javascript/semantic.js
+++ b/server/files/javascript/semantic.js
@@ -551,29 +551,6 @@ semantic.ready = function() {
       }
     },
 
-    menu: {
-      mouseenter: function() {
-        $(this)
-          .stop()
-          .animate({
-            width: '135px'
-          }, 300, function() {
-            $(this).find('.text').show();
-          })
-        ;
-      },
-      mouseleave: function(event) {
-        $(this).find('.text').hide();
-        $(this)
-          .stop()
-          .animate({
-            width: '60px'
-          }, 300)
-        ;
-    }
-
-    },
-
     peek: function() {
       var
         $body     = $('html, body'),
@@ -742,10 +719,6 @@ semantic.ready = function() {
     handler.makeCode();
   }
 
-  $sidebarButton
-    .on('mouseenter', handler.menu.mouseenter)
-    .on('mouseleave', handler.menu.mouseleave)
-  ;
   $menu
     .sidebar({
       animation: 'scale down'
diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css
index f50c55759..6430c3a69 100755
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@@ -256,6 +256,12 @@ a:hover {
      Pushed
 ---------------*/
 
+#example.hide .attached.launch.button,
+#example.show .attached.launch.button {
+  transition: none !important;
+  pointer-events: none !important;
+}
+
 /*--------------
      Intro
 ---------------*/
@@ -295,6 +301,45 @@ body.guide .main.container > * {
 #example .masthead .ui.tag.label:after {
   background-color: #000000 !important;
 }
+body#example {
+  position: absolute;
+  background: #191919 url(../images/icons.png) !important;
+
+  -moz-transform-origin: 50% 50%;
+  -o-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+
+  -webkit-animation-name: masthead;
+  -moz-animation-name: masthead;
+  -o-animation-name: masthead;
+  animation-name: masthead;
+
+  opacity: 1;
+
+  -webkit-animation-duration: 30s;
+  -moz-animation-duration: 30s;
+  -ms-animation-duration: 30s;
+  -o-animation-duration: 30s;
+  animation-duration: 30s;
+
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -ms-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  animation-fill-mode: both;
+
+  animation-timing-function: linear;
+  -webkit-animation-timing-function: linear;
+
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  -ms-animation-iteration-count: infinite;
+  -o-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+
+  transform: rotateZ(0deg);
+}
 #example .masthead:before {
   position: absolute;
   z-index: 1;
@@ -558,18 +603,62 @@ body.guide .main.container > * {
 #example .stripe .message {
   margin: 2em 0em;
 }
-
+#example .attached.launch.button {
+  position: fixed;
+  top: 63px;
+  left: 0px;
+  z-index: 500;
+  width: 55px;
+  height: 50px;
+  overflow: hidden;
+  -webkit-transition:
+    0.3s width ease
+  ;
+  -moz-transition:
+    0.3s width ease
+  ;
+  -o-transition:
+    0.3s width ease
+  ;
+  -ms-transition:
+    0.3s width ease
+  ;
+  transition:
+    0.3s width ease
+  ;
+}
+#example .attached.launch.button .text {
+  position: absolute;
+  top: 15px;
+  left: 54px;
+  opacity: 0;
+  -webkit-transition:
+    0.3s opacity 0.3s
+  ;
+  -moz-transition:
+    0.3s opacity 0.3s
+  ;
+  -o-transition:
+    0.3s opacity 0.3s
+  ;
+  -ms-transition:
+    0.3s opacity 0.3s
+  ;
+  transition:
+    0.3s opacity 0.3s
+  ;
+}
+#example .attached.launch.button:hover {
+  width: 130px;
+}
+#example .attached.launch.button:hover .text {
+  opacity: 1;
+}
 
 #example .shortcuts {
   float: right;
   clear: both;
 }
-#example .launch.button {
-  position: fixed;
-  top: 63px;
-  z-index: 500;
-  width: 60px;
-}
 #example .launch.button .icon {
   margin-left: 0px;
 }
@@ -582,10 +671,6 @@ body.guide .main.container > * {
 #example.index .attached.launch.button {
   top: 96px;
 }
-#example .launch.button .text {
-  display: inline-block;
-  display: none;
-}
 
 #example .main.container {
   position: relative;
diff --git a/server/layouts/default.html.eco b/server/layouts/default.html.eco
index 6acbada11..28a88cc0c 100755
--- a/server/layouts/default.html.eco
+++ b/server/layouts/default.html.eco
@@ -147,7 +147,7 @@
 
   </script>
 </head>
-<body id="example" class="<%= @document.css %>" ontouchstart="">
+<body id="example" class="pushable <%= @document.css %>" ontouchstart="">
   <div class="ui vertical inverted labeled icon sidebar menu" id="menu">
     <a class="hide item">
       <i class="close icon"></i> Close Menu