aesthetic changes, adds responsive styles

docs/button.html

@@ -109,7 +109,7 @@
   <div class="ui blue menu button">Menu</div>
 </div>
 <div class="segment">
-  <div class="text">
+  <div class="container">
   <h1>Button</h1>
   <p>Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.</p>
   </div>
@@ -117,7 +117,6 @@
 <div class="main container">
 
   <div class="peek">
-    <div class="top attached ui header">Overview</div>
     <div class="ui large vertical pointing bottom attached panel">
       <li class="active">Standard</li>
       <li>States</li>

docs/javascript/example.js

@@ -25,6 +25,7 @@ shape.ready = function() {
 
     peek: function() {
       $('html, body')
+        .stop()
         .animate({
           scrollTop: $waypoints.eq( $peekMenu.index( $(this) ) ).offset().top - 90
         }, 500, function(){
@@ -71,6 +72,7 @@ shape.ready = function() {
               ? ($waypoints.index(this) - 1)
               : 0
         ;
+        console.log(index, $waypoints.index(this));
         $peekMenu
           .removeClass('active')
           .eq( index )

docs/module.html

@@ -82,7 +82,7 @@
         <i class="icon left-dir"></i>
       </div>
       <div class="section dropdown item">
-        1 of 2
+        1 of 5
         <div class="menu">
           <div class="active item">1. Introduction</div>
           <div class="item">2. Download</div>
@@ -100,7 +100,7 @@
   <div class="ui blue menu button">Menu</div>
 </div>
 <div class="segment">
-  <div class="text">
+  <div class="container">
     <h1>Semantic</h1>
     <p>UI is the DNA of the web. Semantic empowers designers and developers by creating a shared vocabulary for UI.</p>
   </div>

docs/stylesheets/example.css

@@ -65,8 +65,7 @@ a:hover {
   padding: 50px 0px 5px;
   border-bottom: 1px solid #DDDDDD;
 }
-#example h1 .text {
-  width: 800px;
+#example h1 {
   margin: 0px auto;
 }
 #example h1:first-child {
@@ -179,4 +178,23 @@ a:hover {
   top: 75px;
   left: 50%;
   margin-left: -630px;
+}
+
+
+@media only screen and (max-width : 1320px) {
+
+  #example .container {
+    width: auto;
+    margin: 0px 0px 0px 355px;
+  }
+
+}
+
+
+@media only screen and (max-width : 1540px) {
+
+  #example .container {
+    width: 600px;
+  }
+
 }

src/ui/flat/icons.css

@@ -4,12 +4,12 @@
 
 @font-face {
   font-family: 'Icons';
-  src: url("..//fonts/icons.eot");
+  src: url(../fonts/icons.eot);
   src:
-    url("../fonts/icons.eot?#iefix") format('embedded-opentype'),
-    url("../fonts/icons.woff") format('woff'),
-    url("../fonts/icons.ttf") format('truetype'),
-    url("../fonts/icons.svg#icons") format('svg')
+    url(../fonts/icons.eot?#iefix) format('embedded-opentype'),
+    url(../fonts/icons.woff) format('woff'),
+    url(../fonts/icons.ttf) format('truetype'),
+    url(../fonts/icons.svg#icons) format('svg')
   ;
   font-weight: normal;
   font-style: normal;

src/ui/flat/panel.css

@@ -29,7 +29,6 @@
   vertical-align: middle;
 
   font-size: 13px;
-  font-weight: bold;
 
   color: #555555;
 
@@ -490,7 +489,6 @@
 }
 .large.ui.panel li {
   font-size: 15px;
-  font-weight: bold;
   padding: 16px 35px;
 }
 .large.vertical.ui.panel li.active {