iterating on header themes

server/documents/elements/header.html.eco

@@ -7,7 +7,7 @@ type        : 'UI Element'
 
 element     : 'header'
 elementType : 'element'
-themes      : ['default', 'bookish']
+themes      : ['default', 'bookish', 'chubby']
 ---
 
 <%- @partial('header') %>

server/layouts/default.html.eco

@@ -28,7 +28,7 @@
   <meta name="description" content="<%= @getPreparedDescription() %>" />
   <meta name="keywords" content="<%= @getPreparedKeywords() %>" />
 
-  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
+  <link href='Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" type="text/css" href="/stylesheets/reset.css">
   <link rel="stylesheet" type="text/css" href="/stylesheets/library/basic.icon.css">
 

src/elements/header.less

@@ -30,6 +30,7 @@
   padding: @verticalPadding @horizontalPadding;
   font-weight: @fontWeight;
   line-height: @lineHeight;
+  text-transform: @textTransform;
 }
 
 .ui.header .sub.header {
@@ -42,6 +43,7 @@
   color: @subHeaderColor;
 }
 
+/* Icon and Content Together */
 .ui.header .icon {
   display: table-cell;
   font-size: @iconSize;
@@ -50,19 +52,20 @@
   vertical-align: @iconAlignment;
   padding-right: (@iconMargin / 2);
 }
+.ui.header .icon + .content {
+  padding-left: (@iconMargin / 2);
+  display: table-cell;
+}
+
+/* Only One */
 .ui.header .icon:only-child {
   display: inline-block;
   vertical-align: baseline;
 }
-
 .ui.header .content {
   display: inline-block;
   vertical-align: @contentAlignment;
 }
-.ui.header .icon + .content {
-  padding-left: (@iconMargin / 2);
-  display: table-cell;
-}
 
 /* Positioning */
 .ui.header:first-child {
@@ -334,7 +337,7 @@ h5.ui.header {
 --------------------*/
 
 .ui.attached.header {
-  background: @attachedColor;
+  background: @attachedBackground;
   margin: 0em;
   padding: @attachedVerticalPadding @attachedVerticalPadding;
   box-shadow: @attachedBoxShadow;

src/themes/bookish/elements/header.overrides

@@ -2,4 +2,14 @@
            Overrides
 *******************************/
 
-@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville);
+@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville);
+
+h1.ui.header,
+.ui.huge.header {
+  font-weight: bold;
+}
+
+h2.ui.header,
+.ui.large.header {
+  font-weight: bold;
+}

src/themes/bookish/elements/header.variables

@@ -14,11 +14,16 @@
 @dividedBorder: 1px dotted rgba(0, 0, 0, 0.2);
 
 /* Block Header */
-@blockVerticalPadding: 1.25em;
+@blockVerticalPadding: 1.3em;
 @blockHorizontalPadding: 1em;
 
+/* Attached  */
+@attachedBackground: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03)) repeat scroll 0 0 #F8F8F8;
+@attachedVerticalPadding: 1.3;
+@attachedHorizontalPadding: 1em;
+
 /* HTML Headings */
-@h1: 1.5rem;
+@h1: 1.75rem;
 @h2: 1.33rem;
 @h3: 1.33rem;
 @h4: 1rem;

src/themes/chubby/elements/header.overrides

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

src/themes/chubby/elements/header.variables

@@ -0,0 +1,21 @@
+/*-------------------
+       Header
+--------------------*/
+
+@fontFamily : Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
+@fontWeight: bold;
+@textTransform: none;
+
+/* HTML Headings */
+@h1: 1.33rem;
+@h2: 1.2rem;
+@h3: 1rem;
+@h4: 0.9rem;
+@h5: 0.8rem;
+
+/* Sizing */
+@tiny: 1.33em;
+@small: 1.2em;
+@medium: 1em;
+@large: 0.9em;
+@huge: 0.8em;

src/themes/default/elements/header.overrides

@@ -1,3 +1,5 @@
 /*******************************
            Overrides
 *******************************/
+
+@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);

src/themes/default/elements/header.variables

@@ -20,6 +20,7 @@
 
 @fontFamily : Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
 @fontWeight: bold;
+@textTransform: none;
 
 @topMargin: 1em;
 @bottomMargin: 1rem;
@@ -87,7 +88,7 @@
 @blockVerticalPadding: 0.5em;
 
 /* Attached */
-@attachedColor: #F0F0F0;
+@attachedBackground: #F0F0F0;
 @attachedVerticalPadding: 0.75rem;
 @attachedHorizontalPadding: 1rem;
 @attachedBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);