Iterating on header theming

src/collections/menu.less

@@ -55,18 +55,6 @@
 .ui.menu > .item:last-child {
   border-radius: 0px @borderRadius @borderRadius 0px;
 }
-.ui.menu .item {
-  background: @itemBackground;
-  user-select: none;
-
-  vertical-align: middle;
-  line-height: 1;
-  text-decoration: none;
-  box-sizing: border-box;
-  transition: @transition;
-
-  -webkit-tap-highlight-color: transparent;
-}
 
 /*--------------
     Colors
@@ -111,8 +99,15 @@
   padding: @verticalPadding @horizontalPadding;
   border-top: @borderSize solid transparent;
 
+  background: @itemBackground;
+  vertical-align: middle;
+  line-height: 1;
+  text-decoration: none;
+  box-sizing: border-box;
+
   -webkit-tap-highlight-color: transparent;
   user-select: none;
+  transition: @transition;
 }
 
 .ui.menu .menu {

src/elements/header.less

@@ -28,12 +28,12 @@
   font-family: @fontFamily;
   margin: @topMargin 0em @bottomMargin;
   padding: @verticalPadding @horizontalPadding;
-  font-weight: bold;
+  font-weight: @fontWeight;
   line-height: @lineHeight;
 }
 
 .ui.header .sub.header {
-  font-size: 1rem;
+  font-size: @subHeaderFontSize;
   font-weight: normal;
   margin: 0em;
   padding: 0em;
@@ -44,12 +44,15 @@
 
 .ui.header .icon {
   display: table-cell;
-  vertical-align: middle;
+  font-size: @iconSize;
+  padding-top: @iconOffset;
+
+  vertical-align: @iconAlignment;
   padding-right: (@iconMargin / 2);
 }
 .ui.header .icon:only-child {
   display: inline-block;
-  vertical-align: @iconAlignment;
+  vertical-align: baseline;
 }
 
 .ui.header .content {

src/themes/bookish/elements/header.overrides

@@ -0,0 +1,5 @@
+/*******************************
+           Overrides
+*******************************/
+
+@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville);

src/themes/bookish/elements/header.variables

@@ -0,0 +1,32 @@
+/*-------------------
+       Header
+--------------------*/
+
+@fontFamily : 'Libre Baskerville', serif;
+@fontWeight: normal;
+
+@iconSize: 1.5em;
+@iconOffset: 0.2em;
+@iconAlignment: top;
+
+@subHeaderFontSize: 0.85rem;
+
+@dividedBorder: 1px dotted rgba(0, 0, 0, 0.2);
+
+/* Block Header */
+@blockVerticalPadding: 1.25em;
+@blockHorizontalPadding: 1em;
+
+/* HTML Headings */
+@h1: 1.5rem;
+@h2: 1.33rem;
+@h3: 1.33rem;
+@h4: 1rem;
+@h5: 0.9rem;
+
+/* Sizing */
+@tiny: 1.5em;
+@small: 1.33em;
+@medium: 1.33em;
+@large: 1em;
+@huge: 0.9em;

src/themes/default/elements/divider.variables

@@ -3,7 +3,7 @@
 *******************************/
 
 /*-------------------
-       Divider 
+       Divider
 --------------------*/
 
 @highlightWidth: 1px;
@@ -15,7 +15,7 @@
 @dividerTextColor: @textColor;
 
 /*-------------------
-       Coupling 
+       Coupling
 --------------------*/
 
 /* Icon */

src/themes/default/elements/header.variables

@@ -15,10 +15,11 @@
 *******************************/
 
 /*-------------------
-       Header 
+       Header
 --------------------*/
 
 @fontFamily : Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
+@fontWeight: bold;
 
 @topMargin: 1em;
 @bottomMargin: 1rem;
@@ -34,20 +35,28 @@
 @h4: 1.1rem;
 @h5: 1rem;
 
+/* Sizing */
+@tiny: 1em;
+@small: 1.1em;
+@medium: 1.33em;
+@large: 1.75em;
+@huge: 2em;
+
 /* Sub Header */
+@subHeaderFontSize: 1rem;
 @subHeaderLineHeight: 1.2;
 @subHeaderColor: rgba(0, 0, 0, 0.5);
 
-
-/*-------------------
-       Coupling 
---------------------*/
-
+/* Icon */
+@iconSize: 1em;
+@iconOffset: 0em;
 @iconMargin: 1em;
-@iconAlignment: baseline;
+@iconAlignment: middle;
 
+/* Content */
 @contentAlignment: top;
 
+/* Paragraph after Header */
 @precedingParagraphMargin: 0em;
 
 
@@ -86,10 +95,3 @@
 
 /* Floated */
 @floatedMargin: 0.5em;
-
-/* Sizing */
-@tiny: 1em;
-@small: 1.1em;
-@medium: 1.33em;
-@large: 1.75em;
-@huge: 2em;