day of iterating on header variations, tweaks to homepage, icons, menus

node/src/documents/collections/menu.html

@@ -403,11 +403,19 @@ type   : 'UI Collection'
 
   <div class="example">
     <h4>Fluid</h4>
-    <p>A menu may take the size of its container, and be divided evenly.</p>
-    <div class="ui three fluid menu">
-      <div class="item">Choice 1</div>
-      <div class="item">Choice 2</div>
-      <div class="item">Choice 3</div>
+    <p>A menu may take the size of its container.</p>
+    <div class="ui fluid menu">
+      <div class="item">Choice</div>
+    </div>
+  </div>
+  
+  <div class="example">
+    <h4>Evenly sized items</h4>
+    <p>A menu may divide its items evenly</p>
+    <div class="ui fluid three item menu">
+      <div class="item">Buy</div>
+      <div class="item">Sell</div>
+      <div class="item">Rent</div>
     </div>
   </div>
 

node/src/documents/elements/header.html

@@ -22,10 +22,10 @@ type   : 'UI Element'
   </div>
   <h2>Standard</h2>
   
-  <h3>Page Headings</h3>
-  <p>Page headings are ordered headings showing the structure of content on a page. There size is always relative to the page's font size</p>
   <div class="example">
-    <div class="ui segment">
+    <h4>Page Headings</h4>
+    <p>Page headings are ordered headings showing the structure of content on a page. There size is always relative to the page's font size</p>
+    <div class="ui top attached segment">
       <h1 class="ui header">First header</h1>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
       <h2 class="ui header">Second header</h2>
@@ -37,16 +37,16 @@ type   : 'UI Element'
       <h5 class="ui header">Fifth header</h5>
       <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
     </div>
+    <div class="ui two item bottom attached small basic font menu">
+      <a class="increase item"> <i class="icon plus"></i> Base Font</a>
+      <a class="decrease item"> <i class="icon minus"></i> Base Font</a>
+    </div>
   </div>
   
-  <h3>Content Headings</h3>
-  <p>Content headings are specified by their size and will change their size relative to the font-size of the content that surrounds it.</p>
   <div class="example">
-    <div class="ui segment">
-      <div class="ui two font icon buttons">
-        <div class="ui increase positive button"> <i class="icon plus"></i></div>
-        <div class="ui decrease negative button"> <i class="icon minus"></i></div>
-      </div>
+    <h4>Content Headings</h4>
+    <p>Content headings are specified by their size and will change their size relative to the font-size of the content that surrounds it.</p>
+    <div class="ui top attached segment">
       <h3 class="ui huge header">Huge Header</h3>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
       <h3 class="ui large header">Large Header</h3>
@@ -58,13 +58,17 @@ type   : 'UI Element'
       <h3 class="ui tiny header">Tiny Header</h3>
       <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
     </div>
+    <div class="ui two item bottom attached small basic font menu">
+      <a class="increase item"> <i class="icon plus"></i> Base Font</a>
+      <a class="decrease item"> <i class="icon minus"></i> Base Font</a>
+    </div>
   </div>
 
   <h2>States</h2>
   
   <div class="example">
     <h4>Disabled</h4>
-    <p>A header bar can show activity</p>
+    <p>A header can show that its inactive</p>
     <div class="ui disabled header">
       Disabled Header
     </div>
@@ -72,4 +76,71 @@ type   : 'UI Element'
   
   <h2>Variations</h2>
   
+  <div class="example">
+    <h4>Icon Header</h4>
+    <p>A header can be formatted to be displayed with an icon</p>
+    <h1 class="ui icon header">
+      <i class="icon easel"></i>
+      Paint a Picture
+    </h1>
+  </div>
+  
+  <div class="example">
+    <h4>Floated Header</h4>
+    <p>A header can be formatted to be displayed with an icon</p>
+    <div class="ui segment">
+      <h3 class="ui right floated header">
+        Go Forward
+      </h3>
+      <h3 class="ui left floated header">
+        Go Back
+      </h3>
+    </div>
+  </div>
+  <div class="example">
+    <h4>Text Alignment</h4>
+    <p>A header can be formatted to be displayed with an icon</p>
+    <div class="ui segment">
+      <h3 class="ui right aligned header">
+        Right
+      </h3>
+      <h3 class="ui left aligned header">
+        Left
+      </h3>
+      <h3 class="ui center aligned header">
+        and Center
+      </h3>
+    </div>
+  </div>
+  
+  <div class="example">
+    <h4>Dividing Header</h4>
+    <p>A header can be formatted to be displayed with an icon</p>
+    <h1 class="ui dividing header">
+      <i class="icon easel"></i>
+      Step 1
+    </h1>
+  </div>
+  
+  <div class="example">
+    <h4>Attached</h4>
+    <p>A header can be attached to other content</p>
+    <h3 class="ui top attached header">
+      Sign Up For Our Site
+    </h3>
+    <div class="ui segment attached">
+      <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
+      <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
+    </div>
+    <h3 class="ui bottom attached header">
+      Thanks
+    </h3>
+    
+  </div>
+  
+  
+  <h2>Groups</h2>
+  
+  
+  
 </div>

node/src/documents/index.html

@@ -22,15 +22,24 @@ type   : 'Semantic'
 <div class="solid">
   <div class="container ui three column grid">
     <div class="column"> 
-      <h1 class="ui header"><i class="icon users"></i> Learn HTML</h1>
+      <h1 class="ui icon header">
+        <i class="icon users"></i> 
+        Learn HTML
+      </h1>
       <p>Semantic code is designed to be human readable, so front end code can be understood by anyone.</p>
     </div>
     <div class="column">
-      <h1 class="ui header"><i class="icon easel"></i> Redesign? Easy</h1>
+      <h1 class="ui icon header">
+        <i class="icon easel"></i> 
+        Swap Designs
+      </h1>
       <p>Semantic provides 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 header"><i class="icon terminal"></i>  Build Smarter</h1>
+      <h1 class="ui icon header">
+        <i class="icon terminal"></i> 
+        Build Smarter
+      </h1>
       <p>Semantic UI is developed around the semantic standard which seeks to make front end decisions less arbitrary.</p>
     </div>
   </div>

node/src/documents/modules/checkbox.html

@@ -34,7 +34,7 @@ type   : 'UI Module'
 ;
 </div>
 
-  <div class="example">
+  <div class="shown example">
     <h3>Check Box</h3>
     <p>The html required for a standard UI checkbox</p>
     <div class="ui checkbox">

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

@@ -59,7 +59,7 @@
   vertical-align: middle;
 
   line-height: 1.2em;
-  min-height: 1.2em;
+  min-height: 1.25em;
 
   -webkit-transition:
     opacity 0.1s linear,
@@ -624,11 +624,18 @@
 .ui.basic.menu .item:before {
   display: none;
 }
+
+/* disable variations */
 .ui.basic.pointing.menu item.active:after {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
 }
+.ui.basic.attached.menu {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
 
 /*--------------
     Icon Only
@@ -829,49 +836,50 @@
 .ui.vertical.menu.fluid {
   width: 100%;
 }
-.ui.menu.fluid,
-.ui.menu.fluid .item {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-  text-align: center;
-}
-.ui.menu.fluid .item {
+
+
+/*-------------------
+      Evenly Sized
+--------------------*/
+
+.ui.item.menu,
+.ui.item.menu .item {
+  width: 100%;
   padding-left: 0px !important;
   padding-right: 0px !important;
+  text-align: center;
 }
-.ui.menu.two.fluid .item {
+.ui.menu.two.item .item {
   width: 50%;
 }
-.ui.menu.three.fluid .item {
+.ui.menu.three.item .item {
   width: 33.333%;
 }
-.ui.menu.four.fluid .item {
+.ui.menu.four.item .item {
   width: 25%;
 }
-.ui.menu.five.fluid .item {
+.ui.menu.five.item .item {
   width: 20%;
 }
-.ui.menu.six.fluid .item {
+.ui.menu.six.item .item {
   width: 16.666%;
 }
-.ui.menu.seven.fluid .item {
+.ui.menu.seven.item .item {
   width: 14.285%;
 }
-.ui.menu.eight.fluid .item {
+.ui.menu.eight.item .item {
   width: 12.500%;
 }
-.ui.menu.nine.fluid .item {
+.ui.menu.nine.item .item {
   width: 11.11%;
 }
-.ui.menu.ten.fluid .item {
+.ui.menu.ten.item .item {
   width: 10.0%;
 }
-.ui.menu.eleven.fluid .item {
+.ui.menu.eleven.item .item {
   width: 9.09%;
 }
-.ui.menu.twelve.fluid .item {
+.ui.menu.twelve.item .item {
   width: 8.333%;
 }
 

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

@@ -185,9 +185,9 @@
   background-position: 50% 50%;
   background-repeat: no-repeat;
 
-  -moz-border-radius: 0.3125em;
-  -webkit-border-radius: 0.3125em;
-  border-radius: 0.3125em;
+  -moz-border-radius: 0.2em;
+  -webkit-border-radius: 0.2em;
+  border-radius: 0.2em;
 }
 /* Opposite color loader */
 .ui.grey.button.loading,
@@ -261,7 +261,9 @@
   border-color: #588D0F;
 }
 
-/* Disabled State */
+/*-------------------
+      Disabled
+--------------------*/
 .ui.button.disabled,
 .ui.button.disabled.hover,
 .ui.button.disabled.down {

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

@@ -107,26 +107,148 @@ h5.ui.header {
 *******************************/
 
 
-/* Attached Header */
-.ui.header.attached,
-.ui.header.attached.top {
+/*-------------------
+       Colors
+--------------------*/
+
+.ui.blue.header {
+  color: #6ECFF5;
+}
+.ui.black.header {
+  color: #5C6166;
+}
+.ui.green.header {
+  color: #A1CF64;
+}
+.ui.red.header {
+  color: #EF4D6D;
+}
+.ui.purple.header {
+  color: #564F8A;
+}
+.ui.teal.header {
+  color: #00B5AD;
+}
+
+/*-------------------
+   Inverted Colors
+--------------------*/
+
+.ui.inverted.blue.header {
+  background-color: #6ECFF5;
+  color: #FFFFFF;
+}
+.ui.inverted.header {
+  background-color: #5C6166;
+  color: #FFFFFF;
+}
+.ui.inverted.green.header {
+  background-color: #A1CF64;
+  color: #FFFFFF;
+}
+.ui.inverted.red.header {
+  background-color: #EF4D6D;
+  color: #FFFFFF;
+}
+.ui.inverted.purple.header {
+  background-color: #564F8A;
+  color: #FFFFFF;
+}
+.ui.inverted.teal.header {
+  background-color: #00B5AD;
+  color: #FFFFFF;
+}
+
+/*-------------------
+       Aligned
+--------------------*/
+
+.ui.left.aligned.header {
+  text-align: left;
+}
+.ui.right.aligned.header {
+  text-align: right;
+}
+.ui.center.aligned.header {
+  text-align: center;
+}
+
+/*-------------------
+       Floated
+--------------------*/
+
+.ui.floated.header,
+.ui.left.floated.header {
+  float: left;
+}
+.ui.right.floated.header {
+  float: right;
+}
+
+/*-------------------
+      Dividing
+--------------------*/
+
+.huge.ui.header {
+  min-height: 1em;
+  line-height: 1.33em;
+  font-size: 2em;
+}
+.large.ui.header {
+  line-height: 1.33em;
+  font-size: 1.5em;
+}
+.medium.ui.header {
+  margin-bottom: 0.25em;
+}
+.small.ui.header {
+  margin-bottom: 0.25em;
+}
+.tiny.ui.header {
+  margin-bottom: 0em;
+}
+
+/*-------------------
+       Attached
+--------------------*/
+
+.ui.attached.header {
+  padding: 0.7em 1rem;
+
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  margin: 0em;
+}
+.ui.top.attached.header {   
+  margin-bottom: 0em;
 
-  -webkit-border-radius: 4px 4px 0px 0px;
-  -moz-border-radius: 4px 4px 0px 0px;
-  border-radius: 4px 4px 0px 0px;
+  -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
+  -moz-border-radius: 0.3125em 0.3125em 0em 0em;
+  border-radius: 0.3125em 0.3125em 0em 0em;
 }
-.ui.header.attached.bottom {
+.ui.bottom.attached.header {
   margin-top: 0em;
-  -webkit-border-radius: 0px 0px 4px 4px;
-  -moz-border-radius: 0px 0px 4px 4px;
-  border-radius: 0px 0px 4px 4px;
-}
-.ui.header.simple {
-  border-radius: 0em;
-  background-color: #FAFAFA;
-  background-image: none;
+
+  -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
+  -moz-border-radius: 0em 0em 0.3125em 0.3125em;
+  border-radius: 0em 0em 0.3125em 0.3125em;
+}
+
+
+/*-------------------
+        Icon
+--------------------*/
+
+.ui.header.icon {
+  display: inline-block;
+  text-align: center;
+}
+.ui.header.icon .icon {
+  display: block;
+  font-size: 4em;
+  width: auto;
+  margin: 0rem auto 2rem;
+  padding: 0em;
 }
 
 

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

@@ -21,7 +21,7 @@ i.icon {
   width: 1em;
   height: 1em;
 
-  margin: 0em 0.2em 0em 0em;
+  margin: 0em 0.25em 0em 0em;
 
   font-style: normal;
   line-height: 1;

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

@@ -201,9 +201,6 @@
 .ui.red.progress .bar {
   background-color: #EF4D6D;
 }
-.ui.blue.progress .bar {
-  background-color: #6ECFF5;
-}
 .ui.purple.progress .bar {
   background-color: #564F8A;
 }

node/src/files/components/semantic/src/ui.css

@@ -0,0 +1,3 @@
+.ui.red {
+  
+}

node/src/files/javascript/semantic.js

@@ -54,7 +54,7 @@ semantic.ready = function() {
 
       increase: function() {
         var
-          $container = $(this).closest('.ui.segment'),
+          $container = $(this).parent().prev('.ui.segment'),
           fontSize   = parseInt( $container.css('font-size'), 10)
         ;
         $container
@@ -63,7 +63,7 @@ semantic.ready = function() {
       },
       decrease: function() {
         var
-          $container = $(this).closest('.ui.segment'),
+          $container = $(this).parent().prev('.ui.segment'),
           fontSize   = parseInt( $container.css('font-size'), 10)
         ;
         $container

node/src/files/stylesheets/semantic.css

@@ -362,9 +362,16 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 }
+#example .solid .column {
+  text-align: center;
+}
+
 #example .stripe {
   color: #7E7E7E;
 }
+#example .stripe .header {
+  color: #333333;
+}
 #example .stripe .message {
   margin: 0em;
   padding: 0em;
@@ -594,6 +601,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
 
 /* examples */
 #example .example {
+  clear: both;
   position: relative;
 }
 #example .example .grid i.code {

node/src/layouts/default.html.eco

@@ -24,6 +24,7 @@
 
   <link rel="stylesheet" type="text/css" href="/stylesheets/reset.css">
 
+  <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/ui.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/icons.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/button.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/header.css">

src/collections/menu.css

@@ -59,7 +59,7 @@
   vertical-align: middle;
 
   line-height: 1.2em;
-  min-height: 1.2em;
+  min-height: 1.25em;
 
   -webkit-transition:
     opacity 0.1s linear,
@@ -624,11 +624,18 @@
 .ui.basic.menu .item:before {
   display: none;
 }
+
+/* disable variations */
 .ui.basic.pointing.menu item.active:after {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
 }
+.ui.basic.attached.menu {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
 
 /*--------------
     Icon Only
@@ -829,49 +836,50 @@
 .ui.vertical.menu.fluid {
   width: 100%;
 }
-.ui.menu.fluid,
-.ui.menu.fluid .item {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-  text-align: center;
-}
-.ui.menu.fluid .item {
+
+
+/*-------------------
+      Evenly Sized
+--------------------*/
+
+.ui.item.menu,
+.ui.item.menu .item {
+  width: 100%;
   padding-left: 0px !important;
   padding-right: 0px !important;
+  text-align: center;
 }
-.ui.menu.two.fluid .item {
+.ui.menu.two.item .item {
   width: 50%;
 }
-.ui.menu.three.fluid .item {
+.ui.menu.three.item .item {
   width: 33.333%;
 }
-.ui.menu.four.fluid .item {
+.ui.menu.four.item .item {
   width: 25%;
 }
-.ui.menu.five.fluid .item {
+.ui.menu.five.item .item {
   width: 20%;
 }
-.ui.menu.six.fluid .item {
+.ui.menu.six.item .item {
   width: 16.666%;
 }
-.ui.menu.seven.fluid .item {
+.ui.menu.seven.item .item {
   width: 14.285%;
 }
-.ui.menu.eight.fluid .item {
+.ui.menu.eight.item .item {
   width: 12.500%;
 }
-.ui.menu.nine.fluid .item {
+.ui.menu.nine.item .item {
   width: 11.11%;
 }
-.ui.menu.ten.fluid .item {
+.ui.menu.ten.item .item {
   width: 10.0%;
 }
-.ui.menu.eleven.fluid .item {
+.ui.menu.eleven.item .item {
   width: 9.09%;
 }
-.ui.menu.twelve.fluid .item {
+.ui.menu.twelve.item .item {
   width: 8.333%;
 }
 

src/elements/button.css

@@ -185,9 +185,9 @@
   background-position: 50% 50%;
   background-repeat: no-repeat;
 
-  -moz-border-radius: 0.3125em;
-  -webkit-border-radius: 0.3125em;
-  border-radius: 0.3125em;
+  -moz-border-radius: 0.2em;
+  -webkit-border-radius: 0.2em;
+  border-radius: 0.2em;
 }
 /* Opposite color loader */
 .ui.grey.button.loading,
@@ -261,7 +261,9 @@
   border-color: #588D0F;
 }
 
-/* Disabled State */
+/*-------------------
+      Disabled
+--------------------*/
 .ui.button.disabled,
 .ui.button.disabled.hover,
 .ui.button.disabled.down {

src/elements/header.css

@@ -107,26 +107,148 @@ h5.ui.header {
 *******************************/
 
 
-/* Attached Header */
-.ui.header.attached,
-.ui.header.attached.top {
+/*-------------------
+       Colors
+--------------------*/
+
+.ui.blue.header {
+  color: #6ECFF5;
+}
+.ui.black.header {
+  color: #5C6166;
+}
+.ui.green.header {
+  color: #A1CF64;
+}
+.ui.red.header {
+  color: #EF4D6D;
+}
+.ui.purple.header {
+  color: #564F8A;
+}
+.ui.teal.header {
+  color: #00B5AD;
+}
+
+/*-------------------
+   Inverted Colors
+--------------------*/
+
+.ui.inverted.blue.header {
+  background-color: #6ECFF5;
+  color: #FFFFFF;
+}
+.ui.inverted.header {
+  background-color: #5C6166;
+  color: #FFFFFF;
+}
+.ui.inverted.green.header {
+  background-color: #A1CF64;
+  color: #FFFFFF;
+}
+.ui.inverted.red.header {
+  background-color: #EF4D6D;
+  color: #FFFFFF;
+}
+.ui.inverted.purple.header {
+  background-color: #564F8A;
+  color: #FFFFFF;
+}
+.ui.inverted.teal.header {
+  background-color: #00B5AD;
+  color: #FFFFFF;
+}
+
+/*-------------------
+       Aligned
+--------------------*/
+
+.ui.left.aligned.header {
+  text-align: left;
+}
+.ui.right.aligned.header {
+  text-align: right;
+}
+.ui.center.aligned.header {
+  text-align: center;
+}
+
+/*-------------------
+       Floated
+--------------------*/
+
+.ui.floated.header,
+.ui.left.floated.header {
+  float: left;
+}
+.ui.right.floated.header {
+  float: right;
+}
+
+/*-------------------
+      Dividing
+--------------------*/
+
+.huge.ui.header {
+  min-height: 1em;
+  line-height: 1.33em;
+  font-size: 2em;
+}
+.large.ui.header {
+  line-height: 1.33em;
+  font-size: 1.5em;
+}
+.medium.ui.header {
+  margin-bottom: 0.25em;
+}
+.small.ui.header {
+  margin-bottom: 0.25em;
+}
+.tiny.ui.header {
+  margin-bottom: 0em;
+}
+
+/*-------------------
+       Attached
+--------------------*/
+
+.ui.attached.header {
+  padding: 0.7em 1rem;
+
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  margin: 0em;
+}
+.ui.top.attached.header {   
+  margin-bottom: 0em;
 
-  -webkit-border-radius: 4px 4px 0px 0px;
-  -moz-border-radius: 4px 4px 0px 0px;
-  border-radius: 4px 4px 0px 0px;
+  -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
+  -moz-border-radius: 0.3125em 0.3125em 0em 0em;
+  border-radius: 0.3125em 0.3125em 0em 0em;
 }
-.ui.header.attached.bottom {
+.ui.bottom.attached.header {
   margin-top: 0em;
-  -webkit-border-radius: 0px 0px 4px 4px;
-  -moz-border-radius: 0px 0px 4px 4px;
-  border-radius: 0px 0px 4px 4px;
-}
-.ui.header.simple {
-  border-radius: 0em;
-  background-color: #FAFAFA;
-  background-image: none;
+
+  -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
+  -moz-border-radius: 0em 0em 0.3125em 0.3125em;
+  border-radius: 0em 0em 0.3125em 0.3125em;
+}
+
+
+/*-------------------
+        Icon
+--------------------*/
+
+.ui.header.icon {
+  display: inline-block;
+  text-align: center;
+}
+.ui.header.icon .icon {
+  display: block;
+  font-size: 4em;
+  width: auto;
+  margin: 0rem auto 2rem;
+  padding: 0em;
 }
 
 

src/elements/icons.css

@@ -21,7 +21,7 @@ i.icon {
   width: 1em;
   height: 1em;
 
-  margin: 0em 0.2em 0em 0em;
+  margin: 0em 0.25em 0em 0em;
 
   font-style: normal;
   line-height: 1;

src/elements/progress.css

@@ -201,9 +201,6 @@
 .ui.red.progress .bar {
   background-color: #EF4D6D;
 }
-.ui.blue.progress .bar {
-  background-color: #6ECFF5;
-}
 .ui.purple.progress .bar {
   background-color: #564F8A;
 }