headers: working on new header styles

Former-commit-id: 292e6c79b8 Former-commit-id: 2e9bd00805
12 years ago · d2d4831637
9 changed files with 358 additions and 303 deletions
--- a/node/src/documents/collections/grid.html
+++ b/node/src/documents/collections/grid.html
@ -21,10 +21,11 @@ type   : 'UI Collection'
  <div class="highlighted example">
    <h4>Grid</h4>
    <p>A grid is made up of columns of content. By default a grid must assume a certain number of columns. The semantic library assumes 12 columns by default.</p>
    <p>A grid is made up of columns of content. By default a grid must assume a certain number of columns.</p>
    <p>Each set of columns matching up to the number of columns in a grid create a row.</p>
    <div class="ui ignore warning message"><i class="icon heart"></i> <b>Tip</b>
    <p>If only a single column is specified inside a grid or a grid row, semantic will assume the column to take up the entire grid width. If you would like to override this behavior, specify the grid width as a <b>one wide column</b></p>
    <div class="ui ignore warning message"><i class="icon heart"></i> <b>Using Grids</b>
    <p>The semantic library assumes 12 columns by default. If only a single column is specified inside a grid or a grid row, semantic will assume the column to take up the entire grid width. If you would like to override this behavior, specify the grid width as a <b>one wide column</b></p>
    <p>It is also important to note, that padding is applied directly to columns, which means other ui elements should not be used in combination with column, but directly as children.</div>
    <div class="ui grid">
      <div class="column">
@ -91,8 +92,7 @@ type   : 'UI Collection'
  </div>
  <div class="highlighted example">
    <h4>Rows</h4>
    <p>A basic grid has padding on the first and last columns of each row.</p>
    <p>A row is used to create vertical padding between rows of columns on a page. If no rows are specified, a grid column will sit flush along each side of the grid.</p>
    <p>A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit vertically flushed against the edge of a grid, but will still have vertical and horizontal gutters on the first and last column.</p>
    <p>
    <div class="ui grid">
      <div class="row">
@ -222,31 +222,28 @@ type   : 'UI Collection'
    </div>
  </div>
  <div class="highlighted example">
    <h4>Grid</h4>
    <p>A  grid will automatically center any columns that do not match a full row width. This is useful for centering content</p>
    <h4>Columns</h4>
    <p>Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.</p>
    <p>A grid will automatically center any columns that do not match a full row width.</p>
    <div class="ui three column grid">
      <div class="row">
        <div class="column">
          <div class="ui segment">
            1
          </div>
      <div class="column">
        <div class="ui segment">
          1
        </div>
        <div class="column">
          <div class="ui segment">
            2
          </div>
      </div>
      <div class="column">
        <div class="ui segment">
          2
        </div>
        <div class="column">
          <div class="ui segment">
            3
          </div>
      </div>
      <div class="column">
        <div class="ui segment">
          3
        </div>
      </div>
      <div class="row">
        <div class="column">
          <div class="ui segment">
            4
          </div>
      <div class="column">
        <div class="ui segment">
          4
        </div>
      </div>
    </div>
@ -256,7 +253,7 @@ type   : 'UI Collection'
  <h3>Grid</h3>
  <div class="highlighted example">
  <div class="example">
    <h4>Page Grid</h4>
    <p>A grid can be formatted for page content adding gutters before and after the content of the grid to help make page contents easier to read.</p>
@ -286,9 +283,9 @@ type   : 'UI Collection'
    </div>
  </div>
  <div class="highlighted example">
  <div class="example">
    <h4>Responsive Grid</h4>
    <p>A grid can be responsive to a browsers width.</p>
    <p>A grid can be responsive to a browsers width. This means the gutters to left and right of grid columns will alter in size as a browser's resolution increases.</p>
    <div class="ui text message info ignore">
      <p>
@ -321,9 +318,9 @@ type   : 'UI Collection'
    </div>
  </div>
  <div class="highlighted example">
    <h4>Changing column count</h4>
    <p>A grid can have a different number of columns</p>
  <div class="example">
    <h4>Changing grid column count</h4>
    <p>A grid can have a different number of columns per row</p>
    <div class="ui three column grid">
      <div class="column">
        <div class="ui fluid form segment">
@ -394,44 +391,13 @@ type   : 'UI Collection'
      </div>
    </div>
  </div>
  <div class="highlighted example">
    <h4>Floating (Horizontal Alignment)</h4>
    <p>A column can be aligned, or "floated", to either the left or right of its row.</p>
    <div class="ui grid">
      <div class="left aligned four wide column">
        <div class="ui vertical fluid menu">
          <div class="header item">
            Dogs
          </div>
          <div class="item">
            Poodle
          </div>
          <div class="item">
            Cockerspaniel
          </div>
        </div>
      </div>
      <div class="right aligned four wide column">
        <div class="ui vertical fluid menu">
          <div class="header item">
            Cats
          </div>
          <div class="item">
            Abysinnian
          </div>
          <div class="item">
            Sphynx
          </div>
        </div>
      </div>
    </div>
  <div class="highlighted example">
  <div class="example">
    <h4>Vertical Alignment</h4>
    <p>A grid or row can specify its vertical alignment can have its columns vertically centered.</p>
    <div class="ui centered three column grid">
      <div class="top aligned row">
    <p>A grid can specify its vertical alignment to have all its columns vertically centered.</p>
    <div class="ui middle aligned three column grid">
      <div class="row">
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
@ -460,11 +426,19 @@ type   : 'UI Collection'
          </div>
        </div>
      </div>
      <div class="middle aligned row">
    </div>
  </div>
  <h3>Rows</h3>
  <div class="example">
    <h4>Vertical Alignment</h4>
    <p>A row can also specify its vertical alignment to have its columns vertically centered.</p>
    <div class="ui three column grid">
      <div class="top aligned row">
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Dogs
              Cats
            </div>
          </div>
        </div>
@ -489,11 +463,11 @@ type   : 'UI Collection'
          </div>
        </div>
      </div>
      <div class="bottom aligned row">
      <div class="middle aligned row">
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Cats
              Dogs
            </div>
          </div>
        </div>
@ -518,43 +492,12 @@ type   : 'UI Collection'
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="highlighted example">
    <h4>Evenly Divided Grid w/ Rows</h4>
    <p>Content that does not match evenly finish a row will be centered in the next row</p>
    <div class="ui two column grid">
      <div class="row">
      <div class="bottom aligned row">
        <div class="column">
          <div class="ui fluid form segment">
            <p>Let's go ahead and get you signed up.</p>
            <div class="two fields">
              <div class="field">
                <label>First Name</label>
                <input placeholder="First Name" type="text">
              </div>
              <div class="field">
                <label>Last Name</label>
                <input placeholder="Last Name" type="text">
              </div>
            </div>
            <div class="field">
              <label>Username</label>
              <input placeholder="Username" type="text">
            </div>
            <div class="field">
              <label>Password</label>
              <input type="password">
            </div>
            <div class="inline field">
              <div class="ui checkbox">
                <input type="checkbox" id="terms" />
                <label for="terms"></label>
              </div>
              <label>I agree to the terms and conditions</label>
          <div class="ui vertical fluid menu">
            <div class="header item">
              Cats
            </div>
            <div class="ui blue submit button">Submit</div>
          </div>
        </div>
        <div class="column">
@ -568,31 +511,13 @@ type   : 'UI Collection'
            <div class="item">
              Cockerspaniel
            </div>
            <div class="header item">
              Cats
            </div>
            <div class="item">
              Abysinnian
            </div>
            <div class="item">
              Sphynx
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="column">
          <div class="ui fluid form segment">
            <p>Log in to your account</p>
            <div class="field">
              <label>Username</label>
              <input placeholder="Username" type="text">
            </div>
            <div class="field">
              <label>Password</label>
              <input type="password">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Monkeys
            </div>
            <div class="ui blue submit button">Login</div>
          </div>
        </div>
      </div>
@ -601,22 +526,53 @@ type   : 'UI Collection'
  <h3>Columns</h3>
  <div class="highlighted example">
  <div class="example">
    <h4>Row Alignment (Floating)</h4>
    <p>A column can be aligned, or "floated", to either the left or right of its row.</p>
    <div class="ui grid">
      <div class="left aligned four wide column">
        <div class="ui vertical fluid menu">
          <div class="header item">
            Dogs
          </div>
          <div class="item">
            Poodle
          </div>
          <div class="item">
            Cockerspaniel
          </div>
        </div>
      </div>
      <div class="right aligned four wide column">
        <div class="ui vertical fluid menu">
          <div class="header item">
            Cats
          </div>
          <div class="item">
            Abysinnian
          </div>
          <div class="item">
            Sphynx
          </div>
        </div>
      </div>
    </div>
  <div class="example">
    <h4>Column Width</h4>
    <p>A column can span across multiple grid columns.</p>
    <div class="ui grid">
      <div class="three wide column">
        <div class="ui segment"><b>Colume One</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien sed dui porta id sagittis sapien imperdiet. Quisque suscipit dui vel sapien dapibus a faucibus sapien mattis. Nulla facilisi. Aliquam vitae ante a quam tincidunt blandit. Duis adipiscing, metus at dictum auctor, odio enim ornare urna, quis aliquam arcu nibh vitae felis. Donec gravida aliquam enim in mattis. Phasellus risus purus, luctus quis lobortis eget, dignissim quis ante.</div>
        <div class="ui segment"><b>Colume One</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.</div>
      </div>
      <div class="six wide column">
        <div class="ui segment"><b>Colume Two</b> Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.</div>
      </div>
      <div class="three wide column">
        <div class="ui segment"><b>Colume Three</b> Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. Pellentesque aliquet pellentesque nibh ut tincidunt. Nunc faucibus euismod tincidunt. Etiam convallis adipiscing est, id rutrum erat facilisis eu. Mauris in porttitor diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consectetur orci nec quam semper sit amet bibendum nulla feugiat. Nam vehicula, arcu blandit semper sodales, nisi nisl imperdiet dolor, nec hendrerit dui lorem id felis. Integer diam ante, tempus dictum varius in, bibendum vitae nibh. Sed placerat, libero quis ultricies tempor, nisl ipsum semper orci, vitae viverra mauris lectus nec enim. Quisque eget massa eu ligula blandit molestie.</div>
        <div class="ui segment"><b>Colume Three</b> Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. </div>
      </div>
    </div>
  </div>
 </div>
 </div>
--- a/node/src/documents/collections/menu.html
+++ b/node/src/documents/collections/menu.html
@ -8,8 +8,8 @@ type   : 'UI Collection'
 <div class="segment">
  <div class="container">
    <h1>Menu</h1>
    <p>A menu is a ui collection made up of items. These items can be links, dropdowns, menus themselves, badges, or other standard html types.</p>
    <p>Items containing menus are formatted as sub menus. Menus containing menus are formatted as the same tier as the parent menu.</p>
    <p>A menu is a collection of interface elements. These items can be links, dropdowns, menus themselves, badges, or other standard html types.</p>
    <p>Menu items containing menus themselves are formatted as sub menus. Menus with menus as children are formatted as the same tier as the parent menu.</p>
  </div>
 </div>
 <div class="main container">
@ -59,6 +59,7 @@ type   : 'UI Collection'
    <div class="ui ignore warning message"><i class="icon heart"></i> A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with <a href="grid.html">ui grid</a>.</div>
    <div class="ui vertical menu">
      <div class="item">
        <i class="icon user"></i>
        <b>Username</b>
      </div>
      <div class="item">
@ -125,22 +126,22 @@ type   : 'UI Collection'
    </div>
    <div class="ui vertical menu">
      <div class="item">
        Text Item
        <p>Are you ready to try out a pro membership?</p>
      </div>
      <div class="text item">
        <p>Welcome back <b>username</b></p>
        <p>You have had:</p>
        <ul>
          <li><b>12 messages</b></li>
          <li><b>9 new invites</b></li>
        </ul>
        <p>..and a birthday cake since you last were on the site.</p>
      <div class="item">
        <p>Welcome back <i class="icon user"></i><b>username</b></p>
      </div>
    </div>
  </div>
  <div class="example">
    <h4>Link Item</h4>
    <p>A menu may have either a real page link or an item that behaves as a link.</p>
    <p>A menu may contain a link item, or an item formatted as if it is a link.</p>
    <div class="ui ignore info message">
      <p><i class="icon heart"></i> Items that are anchor tags will automatically be formatted as a link.</p>
    </div>
    <div class="ui vertical menu">
      <a href="http://www.google.com" class="item">
        Visit Google
@ -263,15 +264,15 @@ type   : 'UI Collection'
    <h4>Basic</h4>
    <p>A menu may reduce its complexity to blend in with a page</p>
    <div class="ui basic menu">
      <div class="item">
      <a class="item">
        Section 1
      </div>
      <div class="item">
      </a>
      <a class="item">
        Section 2
      </div>
      <div class="item">
      </a>
      <a class="item">
        Section 3
      </div>
      </a>
    </div>
  </div>
--- a/node/src/files/components/semantic/src/collections/grid.css
+++ b/node/src/files/components/semantic/src/collections/grid.css
@ -106,7 +106,7 @@
@media only screen and (max-width : 1000px) {
  .ui.responsive.grid {
    padding: 0% 5%;
    padding: 0% 5.55%;
  }
  .ui.responsive.grid > .column,
  .ui.responsive.grid > .row > .column {
@ -114,7 +114,7 @@
 }
@media only screen and (min-width : 1000px) {
  .ui.responsive.grid {
    padding: 0% 10%;
    padding: 0% 8%;
  }
  .ui.responsive.grid > .column,
  .ui.responsive.grid > .row > .column {
@ -282,10 +282,13 @@
 /* Vertical Centered */
 .ui.aligned.grid,
 .ui.grid .aligned.row {
 .ui.grid > .aligned.row {
  display: table;
  width: 100%;
 }
 .ui.aligned.grid > .row {
  display: table-row;
 }
 .ui.aligned.grid .column,
 .ui.grid .aligned.row .column {
  display: table-cell;
@ -293,17 +296,17 @@
 .ui.top.aligned.grid .column,
 .ui.grid .top.aligned.column,
 .ui.grid .top.aligned.row .column {
 .ui.grid > .top.aligned.row .column {
  vertical-align: top;
 }
 .ui.middle.aligned.grid .column,
 .ui.grid .middle.aligned.column,
 .ui.grid .middle.aligned.row .column {
 .ui.grid > .middle.aligned.row .column {
  vertical-align: middle;
 }
 .ui.bottom.aligned.grid .column,
 .ui.grid .bottom.aligned.column,
 .ui.grid .bottom.aligned.row .column {
 .ui.grid > .bottom.aligned.row .column {
  vertical-align: bottom;
 }
--- a/node/src/files/components/semantic/src/collections/menu.css
+++ b/node/src/files/components/semantic/src/collections/menu.css
@ -48,7 +48,9 @@
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  vertical-align: middle;
  min-height: 1.33em;
  line-height: 1.2em;
  min-height: 1.2em;
  -webkit-transition:
    opacity 0.1s linear,
@ -204,7 +206,6 @@
 .ui.menu .text.item > *,
 .ui.menu .item > p:only-child {
  font-size: 0.95em;
  line-height: 1.3;
 }
 .ui.menu .item > p:first-child {
@ -628,6 +629,7 @@
 .ui.vertical.icon.menu {
  width: auto;
  display: inline-block;
  min-height: 0em;
 }
 .ui.icon.menu .item {
  text-align: center;
@ -956,7 +958,7 @@
 .ui.vertical.pointing.menu .item.active:after {
  position: absolute;
  top: 50%;
  right: -0.3em;
  right: -0.4em;
  bottom: auto;
  left: auto;
--- a/node/src/files/components/semantic/src/elements/header.css
+++ b/node/src/files/components/semantic/src/elements/header.css
@ -1,98 +1,141 @@
 /*
 * # Semantic Headers - Flat
 * http://github.com/quirkyinc/semantic
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 * Released: April 29 2013
 */
 /*******************************
      Headers & Text Blocks
            Header
 *******************************/
 /* Header Block */
 /* Standard */
 .ui.header {
  min-height: 18px;
  margin: 15px 0px;
  padding: 8px 13px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
  line-height: 1.33;
  line-height: 1.5;
  font-size: 16px;
  font-size: 1.33em;
  font-weight: bold;
  text-shadow: 0px 1px 0px #FFFFFF;
  color: rgba(50, 50, 50, 0.9);
  -webkit-border-radius: 4px 4px 4px 4px;
  -moz-border-radius: 4px 4px 4px 4px;
  border-radius: 4px 4px 4px 4px;
  padding: 0em;
  border: none;
 }
 /* Sub Header (De-emphasized) */
 .ui.sub.header {
  margin: 0px;
 /* Positioning */
 .ui.header:first-child {
  margin-top: 0em;
 }
 .ui.header + p {
  margin-top: 0em;
 }
  border: none;
  border-bottom: 1px solid #DADADA;
  border-radius: 0px;
  background-color: #FFFFFF;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
  background: linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
 /*--------------
  Page Heading
 ---------------*/
  font-size: 14px;
  padding: 6px 25px;
  color: #55356A;
 h1.ui.header {
  min-height: 1rem;
  margin: 2rem 0rem 1.5rem;
  line-height: 1.33rem;
  font-size: 2rem;
  color: rgba(20, 20, 20, 1);
 }
 h2.ui.header {
  margin: 1.5rem 0rem 1rem;
  line-height: 1.33rem;
  font-size: 1.5rem;
  color: rgba(20, 20, 20, 0.9);
 }
 h3.ui.header {
  margin: 1.3rem 0rem 1rem;
  line-height: 1.33rem;
  font-size: 1.33rem;
  color: rgba(30, 30, 30, 0.9);
 }
 h4.ui.header {
  margin: 0.75rem 0rem 0.3rem;
  line-height: 1.33rem;
  font-size: 1.1rem;
  color: rgba(30, 30, 30, 0.9);
 }
 h5.ui.header {
  margin: 0rem 0rem 0.2rem;
  line-height: 1.2rem;
  font-size: 1rem;
  color: rgba(40, 40, 40, 0.9);
 }
 /* Neutral Header */
 .ui.neutral.block,
 .ui.neutral.header {
  background-color: #E0E0E0;
  background: -webkit-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
  background: -moz-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
  background: -o-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
  background: -ms-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
  background: linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
  border-color: #CCCCCC;
 /*--------------
 Content Heading
 ---------------*/
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
 .huge.ui.header {
  min-height: 1em;
  line-height: 1.33em;
  font-size: 2em;
  color: rgba(20, 20, 20, 1);
 }
 .large.ui.header {
  line-height: 1.33em;
  font-size: 1.5em;
  color: rgba(20, 20, 20, 0.9);
 }
 .small.ui.header {
  margin-bottom: 0.25em;
  line-height: 1.33em;
  font-size: 1.1em;
  color: rgba(30, 30, 30, 0.9);
 }
 .tiny.ui.header {
  margin-bottom: 0em;
  line-height: 1.2em;
  font-size: 1em;
  color: rgba(40, 40, 40, 0.9);
 }
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7);
 /*******************************
            States
 *******************************/
 .ui.header.disabled {
  opacity: 0.5;
 }
 /*******************************
           Variations
 *******************************/
 /* Attached Header */
 .ui.header.attached,
 .ui.header.attached.top {
  margin: 0px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  margin: 0em;
  -webkit-border-radius: 4px 4px 0px 0px;
  -moz-border-radius: 4px 4px 0px 0px;
  border-radius: 4px 4px 0px 0px;
 }
 .ui.header.attached.bottom {
  margin-top: 0px;
  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: 0px;
  border-radius: 0em;
  background-color: #FAFAFA;
  background-image: none;
 }
 /*--------------
     Resizes
 ---------------*/
 .ui.header {
  font-size: 16px;
 }
 .ui.header.large {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 18px;
 }
 .ui.header.huge {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 22px;
 }
 /*******************************
            Groups
 *******************************/
--- a/node/src/files/stylesheets/semantic.css
+++ b/node/src/files/stylesheets/semantic.css
@ -153,6 +153,12 @@ li {
 */
 ul.list {
  list-style-type: disc;
 }
 ul.list li {
  list-style-position: outside;
 }
 /* text and headers */
@ -185,7 +191,6 @@ h4 {
 }
 h4 + p {
  margin: 0px 0px 20px;
  color: #888888;
 }
 pre {
  background-color: #F0F0F0;
@ -207,7 +212,7 @@ table code {
  background-color: transparent;
 }
 p {
  margin: 10px 0px;
  margin: 1em 0em;
 }
 p > a {
  font-weight: bold;
@ -556,29 +561,26 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
 #example .highlighted.example .grid,
 #example .ui.type.items .image .grid {
  background-color: #F0F0F0;
  background-color: #FCFCFC;
 }
 #example .highlighted.example .grid .row,
 #example .ui.type.items .image .grid .row {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 1px solid #DDDDDD;
 }
 #example .highlighted.example .grid .column,
 #example .ui.type.items .image .grid .column {
  background-color: #F4F4F4;
  min-height: 100px;
  min-height: 50px;
  -webkit-box-shadow: 0px 0px 0px 1px #E2E2E2;
  -moz-box-shadow: 0px 0px 0px 1px #E2E2E2;
  box-shadow: 0px 0px 0px 1px #E2E2E2;
 }
 #example .highlighted.example .grid .segment,
 #example .ui.type.items .image .grid .segment {
  min-height: 100px;
  border: 1px solid #DDDDDD;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  min-height: 50px;
  -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
  -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
  box-shadow: 0px 0px 0px 1px #DDDDDD;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
@ -609,7 +611,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
  }
  #example .sticky-wrapper.stuck .peek {
    margin-left: 0px;
    left: 105px;
    left: 165px;
  }
 }
--- a/src/collections/grid.css
+++ b/src/collections/grid.css
@ -106,7 +106,7 @@
@media only screen and (max-width : 1000px) {
  .ui.responsive.grid {
    padding: 0% 5%;
    padding: 0% 5.55%;
  }
  .ui.responsive.grid > .column,
  .ui.responsive.grid > .row > .column {
@ -114,7 +114,7 @@
 }
@media only screen and (min-width : 1000px) {
  .ui.responsive.grid {
    padding: 0% 10%;
    padding: 0% 8%;
  }
  .ui.responsive.grid > .column,
  .ui.responsive.grid > .row > .column {
@ -282,10 +282,13 @@
 /* Vertical Centered */
 .ui.aligned.grid,
 .ui.grid .aligned.row {
 .ui.grid > .aligned.row {
  display: table;
  width: 100%;
 }
 .ui.aligned.grid > .row {
  display: table-row;
 }
 .ui.aligned.grid .column,
 .ui.grid .aligned.row .column {
  display: table-cell;
@ -293,17 +296,17 @@
 .ui.top.aligned.grid .column,
 .ui.grid .top.aligned.column,
 .ui.grid .top.aligned.row .column {
 .ui.grid > .top.aligned.row .column {
  vertical-align: top;
 }
 .ui.middle.aligned.grid .column,
 .ui.grid .middle.aligned.column,
 .ui.grid .middle.aligned.row .column {
 .ui.grid > .middle.aligned.row .column {
  vertical-align: middle;
 }
 .ui.bottom.aligned.grid .column,
 .ui.grid .bottom.aligned.column,
 .ui.grid .bottom.aligned.row .column {
 .ui.grid > .bottom.aligned.row .column {
  vertical-align: bottom;
 }
--- a/src/collections/menu.css
+++ b/src/collections/menu.css
@ -48,7 +48,9 @@
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  vertical-align: middle;
  min-height: 1.33em;
  line-height: 1.2em;
  min-height: 1.2em;
  -webkit-transition:
    opacity 0.1s linear,
@ -204,7 +206,6 @@
 .ui.menu .text.item > *,
 .ui.menu .item > p:only-child {
  font-size: 0.95em;
  line-height: 1.3;
 }
 .ui.menu .item > p:first-child {
@ -628,6 +629,7 @@
 .ui.vertical.icon.menu {
  width: auto;
  display: inline-block;
  min-height: 0em;
 }
 .ui.icon.menu .item {
  text-align: center;
@ -956,7 +958,7 @@
 .ui.vertical.pointing.menu .item.active:after {
  position: absolute;
  top: 50%;
  right: -0.3em;
  right: -0.4em;
  bottom: auto;
  left: auto;
--- a/src/elements/header.css
+++ b/src/elements/header.css
@ -1,98 +1,141 @@
 /*
 * # Semantic Headers - Flat
 * http://github.com/quirkyinc/semantic
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 * Released: April 29 2013
 */
 /*******************************
      Headers & Text Blocks
            Header
 *******************************/
 /* Header Block */
 /* Standard */
 .ui.header {
  min-height: 18px;
  margin: 15px 0px;
  padding: 8px 13px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
  line-height: 1.33;
  line-height: 1.5;
  font-size: 16px;
  font-size: 1.33em;
  font-weight: bold;
  text-shadow: 0px 1px 0px #FFFFFF;
  color: rgba(50, 50, 50, 0.9);
  -webkit-border-radius: 4px 4px 4px 4px;
  -moz-border-radius: 4px 4px 4px 4px;
  border-radius: 4px 4px 4px 4px;
  padding: 0em;
  border: none;
 }
 /* Sub Header (De-emphasized) */
 .ui.sub.header {
  margin: 0px;
 /* Positioning */
 .ui.header:first-child {
  margin-top: 0em;
 }
 .ui.header + p {
  margin-top: 0em;
 }
  border: none;
  border-bottom: 1px solid #DADADA;
  border-radius: 0px;
  background-color: #FFFFFF;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
  background: linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
 /*--------------
  Page Heading
 ---------------*/
  font-size: 14px;
  padding: 6px 25px;
  color: #55356A;
 h1.ui.header {
  min-height: 1rem;
  margin: 2rem 0rem 1.5rem;
  line-height: 1.33rem;
  font-size: 2rem;
  color: rgba(20, 20, 20, 1);
 }
 h2.ui.header {
  margin: 1.5rem 0rem 1rem;
  line-height: 1.33rem;
  font-size: 1.5rem;
  color: rgba(20, 20, 20, 0.9);
 }
 h3.ui.header {
  margin: 1.3rem 0rem 1rem;
  line-height: 1.33rem;
  font-size: 1.33rem;
  color: rgba(30, 30, 30, 0.9);
 }
 h4.ui.header {
  margin: 0.75rem 0rem 0.3rem;
  line-height: 1.33rem;
  font-size: 1.1rem;
  color: rgba(30, 30, 30, 0.9);
 }
 h5.ui.header {
  margin: 0rem 0rem 0.2rem;
  line-height: 1.2rem;
  font-size: 1rem;
  color: rgba(40, 40, 40, 0.9);
 }
 /* Neutral Header */
 .ui.neutral.block,
 .ui.neutral.header {
  background-color: #E0E0E0;
  background: -webkit-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
  background: -moz-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
  background: -o-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
  background: -ms-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
  background: linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
  border-color: #CCCCCC;
 /*--------------
 Content Heading
 ---------------*/
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
 .huge.ui.header {
  min-height: 1em;
  line-height: 1.33em;
  font-size: 2em;
  color: rgba(20, 20, 20, 1);
 }
 .large.ui.header {
  line-height: 1.33em;
  font-size: 1.5em;
  color: rgba(20, 20, 20, 0.9);
 }
 .small.ui.header {
  margin-bottom: 0.25em;
  line-height: 1.33em;
  font-size: 1.1em;
  color: rgba(30, 30, 30, 0.9);
 }
 .tiny.ui.header {
  margin-bottom: 0em;
  line-height: 1.2em;
  font-size: 1em;
  color: rgba(40, 40, 40, 0.9);
 }
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7);
 /*******************************
            States
 *******************************/
 .ui.header.disabled {
  opacity: 0.5;
 }
 /*******************************
           Variations
 *******************************/
 /* Attached Header */
 .ui.header.attached,
 .ui.header.attached.top {
  margin: 0px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  margin: 0em;
  -webkit-border-radius: 4px 4px 0px 0px;
  -moz-border-radius: 4px 4px 0px 0px;
  border-radius: 4px 4px 0px 0px;
 }
 .ui.header.attached.bottom {
  margin-top: 0px;
  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: 0px;
  border-radius: 0em;
  background-color: #FAFAFA;
  background-image: none;
 }
 /*--------------
     Resizes
 ---------------*/
 .ui.header {
  font-size: 16px;
 }
 .ui.header.large {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 18px;
 }
 .ui.header.huge {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 22px;
 }
 /*******************************
            Groups
 *******************************/