Iteration on homepage animations

build/less/definitions/elements/step.less

@@ -227,6 +227,16 @@
   color: @activeIconColor;
 }
 
+/* Active Hover */
+.ui.steps .link.active.step:hover::after,
+.ui.steps .link.active.step:hover,
+.ui.steps a.active.step:hover::after,
+.ui.steps a.active.step:hover {
+  cursor: pointer;
+  background: @activeHoverBackground;
+  color: @activeHoverColor;
+}
+
 /* Completed */
 .ui.steps .step.completed > .icon:before,
 .ui.ordered.steps .step.completed:before {
@@ -237,6 +247,7 @@
 .ui.steps .disabled.step {
   cursor: auto;
   background: @disabledBackground;
+  pointer-events: none;
 }
 .ui.steps .disabled.step,
 .ui.steps .disabled.step .title,

build/less/themes/packages/default/elements/step.variables

@@ -80,12 +80,15 @@
 @downColor: @pressedTextColor;
 
 /* Active */
-@activeBackgroundColor: #F0F0F0;
-@activeBackground: @activeBackgroundColor;
-
+@activeBackground: #F0F0F0;
 @activeColor: @linkColor;
 @activeIconColor: @darkTextColor;
 
+/* Active + Hover */
+@activeHoverBackground: #FAFAFA;
+@activeHoverColor: @textColor;
+
+
 /* Disabled */
 @disabledBackground: '';
 @disabledColor: @disabledTextColor;

build/packaged/definitions/css/semantic.css

@@ -16451,6 +16451,9 @@ ol.ui.horizontal.list li:before,
 /*---  Standard  ---*/
 /*---  Emotive  ---*/
 /*---  Neutrals  ---*/
+/*------------------
+     Load Theme
+-------------------*/
 /*******************************
              Step
 *******************************/
@@ -16471,10 +16474,8 @@ ol.ui.horizontal.list li:before,
 /* Hover */
 /* Down */
 /* Active */
+/* Active + Hover */
 /* Disabled */
-/*------------------
-     Load Theme
--------------------*/
 /*------------------
      Load Site
 -------------------*/
@@ -16665,6 +16666,15 @@ ol.ui.horizontal.list li:before,
 .ui.steps .active.step .icon {
   color: rgba(0, 0, 0, 0.85);
 }
+/* Active Hover */
+.ui.steps .link.active.step:hover::after,
+.ui.steps .link.active.step:hover,
+.ui.steps a.active.step:hover::after,
+.ui.steps a.active.step:hover {
+  cursor: pointer;
+  background: #fafafa;
+  color: rgba(0, 0, 0, 0.8);
+}
 /* Completed */
 .ui.steps .step.completed > .icon:before,
 .ui.ordered.steps .step.completed:before {
@@ -16674,6 +16684,7 @@ ol.ui.horizontal.list li:before,
 .ui.steps .disabled.step {
   cursor: auto;
   background: '';
+  pointer-events: none;
 }
 .ui.steps .disabled.step,
 .ui.steps .disabled.step .title,
@@ -17950,12 +17961,6 @@ a:hover {
 /*------------------
     Load Defaults
 -------------------*/
-/*******************************
-            Chatroom
-*******************************/
-/*------------------
-     Load Theme
--------------------*/
 /*******************************
          Site Settings
 *******************************/
@@ -18047,6 +18052,12 @@ a:hover {
 /*---  Standard  ---*/
 /*---  Emotive  ---*/
 /*---  Neutrals  ---*/
+/*******************************
+            Chatroom
+*******************************/
+/*------------------
+     Load Theme
+-------------------*/
 /*------------------
      Load Site
 -------------------*/

build/uncompressed/definitions/elements/step.css

@@ -136,6 +136,9 @@
 /*---  Standard  ---*/
 /*---  Emotive  ---*/
 /*---  Neutrals  ---*/
+/*------------------
+     Load Theme
+-------------------*/
 /*******************************
              Step
 *******************************/
@@ -156,10 +159,8 @@
 /* Hover */
 /* Down */
 /* Active */
+/* Active + Hover */
 /* Disabled */
-/*------------------
-     Load Theme
--------------------*/
 /*------------------
      Load Site
 -------------------*/
@@ -350,6 +351,15 @@
 .ui.steps .active.step .icon {
   color: rgba(0, 0, 0, 0.85);
 }
+/* Active Hover */
+.ui.steps .link.active.step:hover::after,
+.ui.steps .link.active.step:hover,
+.ui.steps a.active.step:hover::after,
+.ui.steps a.active.step:hover {
+  cursor: pointer;
+  background: #fafafa;
+  color: rgba(0, 0, 0, 0.8);
+}
 /* Completed */
 .ui.steps .step.completed > .icon:before,
 .ui.ordered.steps .step.completed:before {
@@ -359,6 +369,7 @@
 .ui.steps .disabled.step {
   cursor: auto;
   background: '';
+  pointer-events: none;
 }
 .ui.steps .disabled.step,
 .ui.steps .disabled.step .title,

build/uncompressed/definitions/modules/chatroom.css

@@ -45,12 +45,6 @@
 /*------------------
     Load Defaults
 -------------------*/
-/*******************************
-            Chatroom
-*******************************/
-/*------------------
-     Load Theme
--------------------*/
 /*******************************
          Site Settings
 *******************************/
@@ -142,6 +136,12 @@
 /*---  Standard  ---*/
 /*---  Emotive  ---*/
 /*---  Neutrals  ---*/
+/*******************************
+            Chatroom
+*******************************/
+/*------------------
+     Load Theme
+-------------------*/
 /*------------------
      Load Site
 -------------------*/

server/documents/index.html.eco

@@ -10,12 +10,6 @@ type   : 'Semantic'
 <% uiViews       = @getCollection("uiViews").toJSON() %>
 <% uiModules     = @getCollection("uiModules").toJSON() %>
 <script src="/javascript/home.js"></script>
-<script type="text/javascript">
-  semantic.config = {};
-  semantic.config.type = [
-    "User interface"
-  ];
-</script>
 <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/button.less" />
 
 <div class="following bar">
@@ -28,7 +22,7 @@ type   : 'Semantic'
       <div class="ui large inverted right floated secondary menu">
         <div class="ui language top right pointing dropdown item" id="languages">
           <i class="world icon"></i>
-          <div class="text">Language</div>
+          <div class="text">Select Language</div>
           <div class="menu">
             <div class="item" data-percent="100" data-value="en">English</div>
             <div class="item" data-percent="19" data-value="nl">Nederlands</div>
@@ -58,7 +52,7 @@ type   : 'Semantic'
           <span class="library">
             Semantic
           </span>
-          <b>HTML</b>
+          <b data-text="User Interface">HTML</b>
           <span class="typed-cursor">|</span>
           <span class="text">is the vocabulary of the web.</span>
         </h1>
@@ -91,7 +85,7 @@ type   : 'Semantic'
       <p>Semantic provides true design freedom. Change the look and feel of your components with just a few variables.</p>
     </div>
     <div class="column">
-      <div data-type="element" data-element="button" class="ui theme dropdown button">
+      <div data-type="element" data-element="button" class="ui theme floating dropdown button">
         <span class="text">Select Theme</span>
         <i class="dropdown icon"></i>
         <div class="menu ui transition hidden" tabindex="-1">
@@ -293,7 +287,7 @@ type   : 'Semantic'
             </div>
             <div class="extra content">
               <a class="right floated created">
-                Joined in 2014
+                Joined in 1998
               </a>
               <a class="friends">
                 <i class="user icon"></i>
@@ -662,14 +656,14 @@ type   : 'Semantic'
         <div class="column">
           <h3 class="ui header">Enterprise Ready</h3>
           <p>Build tools, performance logging, support for custom definitions, multiple-levels of theme inheritanceance—a developer's wet dream.</p>
-          <a class="ui large labeled icon button">
+          <a class="ui disabled large right labeled icon button">
             <i class="right chevron icon"></i>
             View Expert Guide</a>
         </div>
         <div class="column">
           <h3 class="ui header">Beginner Friendly</h3>
           <p>Don't feel comfortable tweaking everything? Download free community designed themes and use our customizer to build a package fit for your needs.</p>
-          <a class="ui large labeled icon button">
+          <a class="ui disabled large right labeled icon button">
             <i class="right chevron icon"></i>
             View Basic Guide</a>
         </div>

server/files/javascript/home.js

@@ -20,16 +20,21 @@ semantic.home.ready = function() {
     .removeClass('zoomed')
   ;
 
-  setTimeout(function() {
-    $ui.typed({
-      replaceBaseText : true,
-      strings         : window.semantic.config.type,
-      showCursor      : false,
-      typeSpeed       : 100,
-      backSpeed       : 100,
-      backDelay       : 1000
-    });
-  }, 0);
+  window.Transifex.live.onTranslatePage(function(name){
+    name = $('.language.dropdown .item[data-value=' + name + ']').text();
+    $('.language.dropdown > .text').html(name);
+  });
+
+  $ui.typed({
+    replaceBaseText : true,
+    strings         : [
+      $ui.data('text')
+    ],
+    showCursor      : false,
+    typeSpeed       : 100,
+    backSpeed       : 100,
+    backDelay       : 2000
+  });
 
   $('.demo .ui.accordion')
     .accordion()

server/files/stylesheets/semantic.css

@@ -356,7 +356,7 @@ a:hover {
 #example .masthead {
   position: relative;
   overflow: hidden;
-  background: #111111 url(../images/bg-moonlight.jpg);
+  background: #111111 url(../images/bg-sky.jpg);
   background-size: cover;
   text-align: center;
   padding: 7em 0px;
@@ -439,12 +439,12 @@ body#example.hide {
   -o-animation-name: masthead;
   animation-name: masthead;
 
-  -ms-transition: transform 5s ease-in-out;
-  -webkit-transition: transform 5s ease-in-out;
-  -moz-transition: transform 5s ease-in-out;
-  transition: transform 5s ease-in-out;
+  -ms-transition: opacity 5s ease-in-out, transform 5s ease-in-out;
+  -webkit-transition: opacity 5s ease-in-out, transform 5s ease-in-out;
+  -moz-transition: opacity 5s ease-in-out, transform 5s ease-in-out;
+  transition: opacity 5s ease-in-out, transform 5s ease-in-out;
 
-  opacity: 0.15;
+  opacity: 0.08;
 
   -webkit-animation-duration: 15s;
   -moz-animation-duration: 15s;
@@ -472,6 +472,7 @@ body#example.hide {
   transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-2%) translateZ(300px);
 }
 #example .masthead.zoomed:before {
+  opacity: 0.15;
   -webkit-transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
   -moz-transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
   transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
@@ -556,7 +557,8 @@ body#example.hide {
 #example.index .masthead {
   position: relative;
   overflow: hidden;
-  background: linear-gradient(#081919, #001c1c) #191919;
+  /*background: linear-gradient(#081919, #001c1c) #191919;*/
+  /*background: radial-gradient(farthest-corner, #073a3a, rgba(0, 0, 0, 0.1)) repeat scroll 0 0 #191919;*/
   background-color: #191919;
   padding: 3em 0px 3em;
   color: rgba(255, 255, 255, 0.9);
@@ -633,7 +635,8 @@ body#example.hide {
   text-align: center;
 }
 #example.index .fixed.launch.button {
-  background-color: #303D3D;
+  top: 275px;
+  background-color: #333333;
 }
 #example.index .main.menu {
   top: 0px;

server/layouts/default.html.eco

@@ -169,6 +169,7 @@
       detectlang   : true,
       autocollect  : true,
       ignore_tags  : ['i'],
+      parse_attr   : ['data-title', 'data-content', 'data-text'],
       ignore_class : ["code", "ace_editor"]
     };
   </script>

src/definitions/elements/step.less

@@ -227,6 +227,16 @@
   color: @activeIconColor;
 }
 
+/* Active Hover */
+.ui.steps .link.active.step:hover::after,
+.ui.steps .link.active.step:hover,
+.ui.steps a.active.step:hover::after,
+.ui.steps a.active.step:hover {
+  cursor: pointer;
+  background: @activeHoverBackground;
+  color: @activeHoverColor;
+}
+
 /* Completed */
 .ui.steps .step.completed > .icon:before,
 .ui.ordered.steps .step.completed:before {
@@ -237,6 +247,7 @@
 .ui.steps .disabled.step {
   cursor: auto;
   background: @disabledBackground;
+  pointer-events: none;
 }
 .ui.steps .disabled.step,
 .ui.steps .disabled.step .title,

src/themes/packages/default/elements/step.variables

@@ -72,7 +72,7 @@
 @completedColor: @positiveColor;
 
 /* Hover */
-@hoverBackground: #FFFFFF;
+@hoverBackground: #FAFAFA;
 @hoverColor: @hoveredTextColor;
 
 /* Down */
@@ -80,12 +80,15 @@
 @downColor: @pressedTextColor;
 
 /* Active */
-@activeBackgroundColor: #F0F0F0;
-@activeBackground: @activeBackgroundColor;
-
+@activeBackground: #F0F0F0;
 @activeColor: @linkColor;
 @activeIconColor: @darkTextColor;
 
+/* Active + Hover */
+@activeHoverBackground: #ECECEC;
+@activeHoverColor: @textColor;
+
+
 /* Disabled */
 @disabledBackground: '';
 @disabledColor: @disabledTextColor;