Lots of fixes, new homepage

Former-commit-id: 6c7ba63489
Former-commit-id: 2c6ba79941

build/minified/elements/input.min.css

@@ -1 +1 @@
-.ui.input{display:inline-block;position:relative}.ui.input input{font-family:"Helvetica Neue",Helvetica,Arial;margin:0;padding:.9em 1.2em;font-size:.825em;background-color:#FFF;border:1px solid rgba(0,0,0,.15);outline:0;color:rgba(0,0,0,.7);-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;-webkit-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-moz-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-o-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-ms-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.input::-web inputkit-input-placeholder{color:#E0E0E0}.ui.input::-moz input-placeholder{color:#E0E0E0}.ui.input input:active,.ui.input.down input{border-color:rgba(0,0,0,.3);background-color:#FAFAFA}.ui.input.focus input,.ui.input input:focus{border-color:rgba(0,0,0,.2);color:rgba(0,0,0,.85)}.ui.input.focus input input::-webkit-input-placeholder,.ui.input input:focus input::-webkit-input-placeholder{color:#AAA}.ui.input.focus input input::-moz-placeholder,.ui.input input:focus input::-moz-placeholder{color:#AAA}.ui.input.error input{background-color:#FFFAFA;border-color:#E7BEBE;color:#EF4D6D}.ui.input.error input ::-webkit-input-placeholder{color:rgba(255,80,80,.4)}.ui.input.error input ::-moz-placeholder{color:rgba(255,80,80,.4)}.ui.input.error input :focus::-webkit-input-placeholder{color:rgba(255,80,80,.7)}.ui.input.error input :focus::-moz-placeholder{color:rgba(255,80,80,.7)}.ui.icon.input>.icon{position:absolute;top:1px;left:1px;margin:0;border-right:1px solid rgba(0,0,0,.1);background-color:#E8E8E8;width:2.5em;height:2.5em;padding-top:.75em;text-align:center;-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;transition:opacity .3s ease-out}.ui.icon.input input{padding-left:4em!important;border-right:1px solid rgba(0,0,0,.3)}.ui.icon.input input.error,.ui.icon.input input.focus,.ui.icon.input input:focus{border-left-width:1px;-webkit-border-radius:.3125em!important;-moz-border-radius:.3125em!important;border-radius:.3125em!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.icon.input input:focus~.icon{opacity:1}.ui.labeled.input .corner.label{top:1px;right:1px;-webkit-border-top-right-radius:.3125em;-moz-border-top-right-radius:.3125em;border-top-right-radius:.3125em}.ui.labeled.input input{padding-right:2.5em!important}.ui.action.input .button{position:absolute;top:0;left:100%;opacity:.8;margin:0 0 0 -1px;line-height:1.26;padding:.92em 1.3em!important;border-top-left-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;font-size:.85em;white-space:nowrap}.ui.action.input input{border-top-right-radius:0;border-bottom-right-radius:0}.ui.action.input input:focus~.button{opacity:1;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;box-shadow:0 0 0 1px rgba(0,0,0,.2) inset}
+.ui.input{display:inline-block;position:relative}.ui.input input{font-family:"Helvetica Neue",Helvetica,Arial;margin:0;padding:.9em 1.2em;font-size:.825em;background-color:#FFF;border:1px solid rgba(0,0,0,.15);outline:0;color:rgba(0,0,0,.7);-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;-webkit-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-moz-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-o-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-ms-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.input::-web inputkit-input-placeholder{color:#E0E0E0}.ui.input::-moz input-placeholder{color:#E0E0E0}.ui.input input:active,.ui.input.down input{border-color:rgba(0,0,0,.3);background-color:#FAFAFA}.ui.input.focus input,.ui.input input:focus{border-color:rgba(0,0,0,.2);color:rgba(0,0,0,.85)}.ui.input.focus input input::-webkit-input-placeholder,.ui.input input:focus input::-webkit-input-placeholder{color:#AAA}.ui.input.focus input input::-moz-placeholder,.ui.input input:focus input::-moz-placeholder{color:#AAA}.ui.input.error input{background-color:#FFFAFA;border-color:#E7BEBE;color:#EF4D6D}.ui.input.error input ::-webkit-input-placeholder{color:rgba(255,80,80,.4)}.ui.input.error input ::-moz-placeholder{color:rgba(255,80,80,.4)}.ui.input.error input :focus::-webkit-input-placeholder{color:rgba(255,80,80,.7)}.ui.input.error input :focus::-moz-placeholder{color:rgba(255,80,80,.7)}.ui.icon.input>.icon{position:absolute;top:1px;left:1px;margin:0;border-right:1px solid rgba(0,0,0,.1);background-color:#E8E8E8;width:2.5em;height:2.5em;padding-top:.75em;text-align:center;-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;transition:opacity .3s ease-out}.ui.icon.input input{padding-left:4em!important;border-right:1px solid rgba(0,0,0,.3)}.ui.icon.input input.error,.ui.icon.input input.focus,.ui.icon.input input:focus{border-left-width:1px;-webkit-border-radius:.3125em!important;-moz-border-radius:.3125em!important;border-radius:.3125em!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.icon.input input:focus~.icon{opacity:1}.ui.labeled.input .corner.label{top:1px;right:1px;-webkit-border-top-right-radius:.3125em;-moz-border-top-right-radius:.3125em;border-top-right-radius:.3125em}.ui.labeled.input input{padding-right:2.5em!important}.ui.action.input .button{position:absolute;top:0;left:100%;opacity:.8;margin:0 0 0 -1px;line-height:1.26;padding:.9em 1.3em!important;border-top-left-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;font-size:.85em;white-space:nowrap}.ui.action.input input{border-top-right-radius:0;border-bottom-right-radius:0}.ui.action.input input:focus~.button{opacity:1;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;box-shadow:0 0 0 1px rgba(0,0,0,.2) inset}

build/packaged/semantic.min.css.REMOVED.git-id

@@ -1 +1 @@
-444da18b87ea7f6372cfc80abfd9f87caae2b20f
+41c98cd29c136dbfef76ec076e26ccd418f0d500

build/packaged/semantic.min.js.REMOVED.git-id

@@ -1 +1 @@
-d876032258d1a67275200e157a4230e6f2d8260e
+16ec33648431767c29f0341b2613602abe5981bb

build/uncompressed/collections/grid.css

@@ -17,7 +17,7 @@
   display: block;
   text-align: center;
   font-size: 0em;
-  margin: 0% -1.33%;
+  margin: 0% -1%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;

build/uncompressed/collections/menu.css

@@ -623,6 +623,7 @@
   opacity: 0.6;
   margin: 0em 1em;
   padding: 0em;
+  min-height: 0em !important;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
@@ -737,6 +738,7 @@
   -moz-box-shadow: none;
   box-shadow: none;
   border: none;
+  min-height: 0em !important;
   margin: 0em 0.25em;
   padding: 0.5em 1em;
   -webkit-border-radius: 0.325em;

build/uncompressed/elements/icons.css

@@ -701,7 +701,9 @@ i.circular.inverted.icon {
         Square 
 --------------------*/
 i.square.icon {
-  padding: 0.5em;
+  width: 2em;
+  height: 2em;
+  padding: 0.5em 0.35em !important;
   -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;

build/uncompressed/elements/input.css

@@ -172,7 +172,7 @@
   opacity: 0.8;
   margin: 0em 0em 0em -1px;
   line-height: 1.26;
-  padding: 0.92em 1.3em !important;
+  padding: 0.9em 1.3em !important;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;

node/src/documents/elements/input.html

@@ -7,10 +7,17 @@ type   : 'UI Element'
 ---
 <div class="segment">
   <div class="container">
-    <div class="ui small inverted teal download menu">
+    <div class="ui small download menu">
       <div class="header item">Download</div>
-      <a class="item"><i class="icon setting"></i> Uncompressed</a>
-      <a class="item"><i class="icon cloud"></i> Minified</a>
+      <div class="simple ui dropdown item">
+        <i class="icon setting"></i> Download <i class="icon dropdown"></i>
+        <div class="menu">
+          <a class="item">Uncompressed</a>
+          <a class="item">Minified</a>
+          <a class="item">LESS</a>
+        </div>
+      </div>
+      <a class="item"><i class="icon edit"></i> Authoring Guide</a>
     </div>
     <h1 class="ui header">
       Input
@@ -35,11 +42,6 @@ type   : 'UI Element'
     <div class="ui input">
       <input type="text">
     </div>
-    <br><br>
-    <div class="ui input">
-      <i class="search icon"></i>
-      <input type="text">
-    </div>
   </div>
 
   <h2 class="ui dividing header">States</h2>

node/src/documents/index.html

@@ -7,67 +7,79 @@ type   : 'Semantic'
 
 <div class="masthead segment">
   <div class="container">
-    <h1 class="ui header"><i class="icon book"></i>Semantic UI</h1>
+    <h1 class="ui header">Semantic UI</h1>
     <h2 class="ui header">UI is the DNA of the web.</h2>
     <p>Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.</p>
     
-      <a class="ui red large labeled icon button" href="download.html" class="ui button"><i class="icon upload"></i> Download</a>
-      <a class="ui black large labeled icon button" href="#" class="ui button"><i class="icon terminal"></i> Try it out</a>
+      <a class="ui red huge labeled icon button" href="download.html" class="ui button"><i class="icon upload"></i> Download</a>
+      <a class="ui black huge labeled icon button" href="#" class="ui button"><i class="icon terminal"></i> Try it out</a>
     
   </div>
 </div>
 
 <div class="solid">
-  <div class="container ui three divided column stackable grid">
+  <div class="ui three column stackable responsive grid">
     <div class="column"> 
-      <h1 class="ui icon header">
-        <i class="icon emphasized inverted red circular community"></i> 
-        Made for Everyone
+      <h1 class="ui red header">
+        <i class="inverted red circular community icon"></i> 
+        Code Like You Think
       </h1>
-      <p>Code written in Semantic is based on natural language, making it easy to understand and learn.</p>
+      <p>Semantic creates a re-usable vocabulary for user interface. Semantic lets designing pages be as easy as describing them.</p>
     </div>
     <div class="column">
-      <h1 class="ui icon header">
-        <i class="icon emphasized inverted circular paint"></i> 
-        Design Portably
+      <h1 class="ui teal header">
+        <i class="inverted teal circular terminal icon"></i> 
+        Expert Tools
       </h1>
-      <p>Semantic defines an exchange format for UI, so swapping out designs doesn't mean rewriting your site's codebase.</p>
-    </div>
-    <div class="column">
-      <h1 class="ui icon header">
-        <i class="icon emphasized inverted teal circular terminal"></i> 
-        Pro Tools
-      </h1>
-      <p>UI Modules all come with debugging and performance tools to help make sure they perform lightning fast.</p>
+      <p><b>Not happy with off the shelf plugins?</b> Semantic modules are written to be easy to read and extensible. Every plugin provides out of the box debug tools so you can monitor performance without breakpoints.</p>
     </div>
   </div>
 </div>
 <div class="stripe">
-  <div class="container ui stackable grid">
-      <div class="row">
-        <div class="seven wide column">
-          <h2 class="ui header"><i class="icon info"></i> Get Started</h2>
-          <p>Learn about how to get started with Semantic UI, and best practices for using the Semantic standard in your project.</p>
-          <div class="ui small secondary button">Learn more <i class="right arrow icon"></i></div>
+    <div class="two column stackable responsive divided ui grid">
+      <div class="column">
+        <div class="large red ui block header">
+          <i class="book icon"></i> HTML
+          <div class="sub header">Sometimes it is easier to just see the code</div>
         </div>
-        <div class="seven wide column">
-          <h2 class="ui header"><i class="icon paint"></i> See UI elements</h2>
-          <p>See some of the UI elements that the Semantic library has to offer.</p>
-          <div class="ui small secondary button">View Library <i class="right arrow icon"></i></div>
+        <p>This code example shows the code powering the code example.</p>
+        <div class="code" data-type="html">
+    <div class="two column stackable divided ui grid">
+      <div class="column">
+        <div class="large red ui block header">
+          <i class="book icon"></i> HTML
+          <div class="sub header">Sometimes it is easier to just see the code</div>
+        </div>
+        <p>This code example shows the code powering the code example.</p>
+        <div class="code"> 
+          <!-- Recursion Narrowly Avoided !-->
         </div>
       </div>
-    <div class="row">
-      <div class="seven wide column">
-        <h2 class="ui header"><i class="icon terminal"></i> Author Elements </h2>
-        <p>Learn about developing and releasing your own skins UI skins.</p>
-        <div class="ui small secondary button">Authoring Guide <i class="right arrow icon"></i></div>
-      </div>
-      <div class="seven wide column">
-        <h2 class="ui header"><i class="icon edit"></i> Help Write the Spec </h2>
-        <p>Semantic is a living spec. We need the communitys help to reach our full potential. Help Semantic develop specifications for missing UI elements.</p>
-        <div class="ui small secondary button">Contribute <i class="right arrow icon"></i></div>
+      <div class="column">
+        <div class="large teal ui block header">
+          <i class="terminal icon"></i> Javascript
+          <div class="sub header">Not everything is static</div>
+        </div>
+        <p>Javascript modules use verbs to show actions</p>
+        <div class="code"> 
+          <!-- Once more unto the breach, dear friends, once more; !-->
+        </div>
       </div>
     </div>
+      </div>
+        </div>
+      <div class="column">
+        <div class="large teal ui block header">
+          <i class="terminal icon"></i> Javascript
+          <div class="sub header">Not everything is static</div>
+        </div>
+        <p>Javascript modules use verbs to show actions</p>
+        <div class="code">
+    $('.ui.tab')
+      .tab('activate.tab', 'help')
+    ;
+        </div>
+      </div>
   </div>
 </div>
 

node/src/files/components/semantic/collections/grid.css

@@ -17,7 +17,7 @@
   display: block;
   text-align: center;
   font-size: 0em;
-  margin: 0% -1.33%;
+  margin: 0% -1%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;

node/src/files/components/semantic/collections/menu.css

@@ -623,6 +623,7 @@
   opacity: 0.6;
   margin: 0em 1em;
   padding: 0em;
+  min-height: 0em !important;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
@@ -737,6 +738,7 @@
   -moz-box-shadow: none;
   box-shadow: none;
   border: none;
+  min-height: 0em !important;
   margin: 0em 0.25em;
   padding: 0.5em 1em;
   -webkit-border-radius: 0.325em;

node/src/files/components/semantic/elements/icons.css

@@ -701,7 +701,9 @@ i.circular.inverted.icon {
         Square 
 --------------------*/
 i.square.icon {
-  padding: 0.5em;
+  width: 2em;
+  height: 2em;
+  padding: 0.5em 0.35em !important;
   -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;

node/src/files/components/semantic/elements/input.css

@@ -172,7 +172,7 @@
   opacity: 0.8;
   margin: 0em 0em 0em -1px;
   line-height: 1.26;
-  padding: 0.92em 1.3em !important;
+  padding: 0.9em 1.3em !important;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;

node/src/files/stylesheets/semantic.css

@@ -306,14 +306,19 @@ a:hover {
 ---------------*/
 
 #example .masthead {
+  text-align: center;
   background-color: #00B5AD;
   padding: 75px 0px 50px;
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: 0px;
   border-bottom: none;
 }
+#example .masthead .labeled.button {
+  margin-right: 1em;
+}
 #example .masthead h1 {
   font-size: 5em;
+  color: #FFFFFF;
   line-height: 1.2;
   margin-bottom: 0px;
   padding-bottom: 0px;
@@ -323,7 +328,7 @@ a:hover {
 }
 #example .masthead h2 {
   font-weight: normal;
-  margin: -10px 0 30px 122px;
+  margin: -10px 0 16px 0px;
   font-size: 1.75em;
   border-bottom: none;
   line-height: 1;
@@ -332,8 +337,8 @@ a:hover {
   width: 375px;
 }
 #example .masthead p {
-  font-size: 1.25em;
-  margin: 0.5em 0em 1.5em;
+  font-size: 1.5em;
+  margin: 1em 0em 1.5em;
   padding: 0px;
 }
 
@@ -347,18 +352,15 @@ a:hover {
 }
 
 
-
 /* content */
 #example .container {
   width: 915px;
   margin: 0px auto;
 }
 
-
-#example .solid .container,
-#example .stripe .container {
+#example .solid,
+#example .stripe {
   padding: 50px 0px;
-  overflow: hidden;
 }
 
 #example .solid {
@@ -369,14 +371,15 @@ a:hover {
 }
 #example .solid .column {
   text-align: center;
+  color: #555555;
+}
+#example .solid .column p {
+  color: rgba(0, 0, 0, 0.5);
 }
 
 #example .stripe {
   color: #7E7E7E;
 }
-#example .stripe .header {
-  color: #333333;
-}
 #example .stripe .message {
   margin: 0em;
   padding: 0em;
@@ -1030,12 +1033,16 @@ a:hover {
     display: none;
   }
   #example.index .masthead .button {
+    font-size: 1.1em;
     margin-bottom: 0.5em;
   }
   #example.index .masthead h2 {
     font-size: 1.25em;
     margin: 0em 0em 1em;
   }
+  #example.index .masthead p {
+    font-size: 1.35em;
+  }
   #example.index .container {
     margin-left: 2em;
     margin-right: 2em;

node/src/layouts/default.html.eco

@@ -57,6 +57,7 @@
   <%- @getBlock('scripts').toHTML() %>
 
   <script src="/javascript/library/jquery.js"></script>
+  <script src="/javascript/library/jquery-ui.js"></script>
   <script src="/javascript/library/easing.js"></script>
   <script src="/javascript/library/ace/ace.js"></script>
   <script src="/javascript/library/sidr.js"></script>

src/collections/grid.less

@@ -20,7 +20,7 @@
   text-align: center;
 
   font-size: 0em;
-  margin: 0% -1.33%;
+  margin: 0% -1%;
 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;

src/collections/menu.less

@@ -828,6 +828,7 @@
 
   margin: 0em 1em;
   padding: 0em;
+  min-height: 0em !important;
 
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
@@ -966,6 +967,7 @@
   box-shadow: none;
 
   border: none;
+  min-height: 0em !important;
 
   margin: 0em 0.25em;
   padding: 0.5em 1em;

src/elements/icons.less

@@ -359,10 +359,14 @@ i.circular.inverted.icon {
 --------------------*/
 
 i.square.icon {
-  padding: 0.5em;
+  width: 2em;
+  height: 2em;
+  padding: 0.5em 0.35em !important;
+
   -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+
   vertical-align: middle;
 }
 

src/elements/input.less

@@ -240,7 +240,7 @@
   margin: 0em 0em 0em -1px;
 
   line-height: 1.26;
-  padding: 0.92em 1.3em !important;
+  padding: 0.9em 1.3em !important;
 
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;