Permalink
Browse files

Simplifying default state of the page. Explanation only reveals when …

…you click 'whats going on?'
  • Loading branch information...
1 parent 3f9eb75 commit ba4b1150a11933f6273238a0bcb8d102012fb8a5 @rupl committed Mar 11, 2012
Showing with 24 additions and 7 deletions.
  1. +17 −4 css/style.css
  2. +3 −3 index.php
  3. +4 −0 js/script.js
View
@@ -84,10 +84,6 @@ button { width: auto; overflow: visible; }
.clearfix { zoom: 1; }
- /* Primary Styles
- Author:
- */
-
/* -- ALL screens -- */
html {width: 100%; height: 100%; background: #223; }
@@ -263,6 +259,23 @@ footer a[class~=org] {display: block; width: 31px; height: 31px; background: url
a.another {display: inline-block; margin: 0 0 0 35%; }
fieldset#fs-opts input[type=text] {position: relative; top: -2px; }
+
+ /* -- styles for JS whizbang -- */
+ .js #what,
+ .js #need {
+ overflow: hidden;
+ height: 0;
+ -webkit-transition: .8s all ease-in-out;
+ -moz-transition: .8s all ease-in-out;
+ -ms-transition: .8s all ease-in-out;
+ -o-transition: .8s all ease-in-out;
+ transition: .8s all ease-in-out;
+ }
+ .js #what.open,
+ .js #need.open {
+ height: 300px;
+ }
+
}
View
@@ -34,9 +34,9 @@
<h1>Drush Make Generator</h1>
<nav>
<ol>
- <li><a href="/">what's going on?</a></li>
- <li><a href="/#generate">generate</a></li>
- <li><a href="http://drupal.org/project/drush_make">make</a></li>
+ <li><a href="/#what" id="huh">what's going on?</a></li>
+ <li><a href="/#generate" id="gen">generate</a></li>
+ <li><a href="http://drupal.org/project/drush_make" id="make">make</a></li>
</ol>
</nav>
</header>
View
@@ -13,6 +13,10 @@ $(function(){
// initialize
$('#fs-version :radio:checked').parent().addClass('active');
+ $('#huh').click(function(e){
+ $('#what, #need').addClass('open'); // Look in CSS for animation
+ e.preventDefault(); // Don't let the fallback URL load since we have JS
+ });
// slide to on-page anchors
$.localScroll({

0 comments on commit ba4b115

Please sign in to comment.