<header> with .title + .subtitle style

examples/kitchen-sink/index.html

@@ -57,8 +57,11 @@
                 <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="share" target="_blank" ></a>
             </nav>
             <div class="left">
-                <span class="title">Lungo Framework</span>
-            </div>
+                <div class="centered title with-subtitle">
+                    Lungo Framework
+                    <small class="subtitle">version 2</small>
+                </div>
+                </div>
         </header>
 
         <article id="main-article" class="list indented scroll">

src/stylesheets/Lungo.layout.less

@@ -86,6 +86,16 @@ header {
         font-size: 1.2em;
         font-weight: bold;
 
+        &.with-subtitle {
+            line-height: 34px;
+            & .subtitle {
+                position: relative;
+                top: -4px;
+                display: block;
+                font-size: 0.7em;
+                line-height: 0.7em;}
+        }
+
         & img { height: 24px; }
 
         &.centered {

src/stylesheets/Lungo.layout.list.less

@@ -62,6 +62,17 @@
 
             & .bubble { display: none; }
         }
+
+        strong {
+            font-size: 1.15em; }
+
+        small {
+            display: block;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            font-size: 0.8em; }
+
     }
 
     & .bubble {

src/stylesheets/Lungo.theme.default.less

@@ -43,6 +43,11 @@ section > header {
         color: @white;
         text-shadow: 0 1px 0 rgba(0,0,0,0.2);
     }
+
+    & .subtitle {
+        color: @white;
+        opacity: 0.7;
+    }
 }
 section > footer {
     .linear-gradient(top, ~','@footer 0%, ~','@footer-dark 60%);

src/stylesheets/Lungo.widgets.less

@@ -11,17 +11,15 @@
 @import "mixins.less";
 
 .scroll {
-    // overflow: scroll;
-    //     overflow-x: hidden;
-    //     overflow-y: scroll;
+    overflow-x: hidden;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
     -webkit-box-flex: 1;
 
     &.horizontal {
-        overflow-x:scroll;
-        overflow-y:hidden;
-        white-space:nowrap;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        white-space: nowrap;
         /*
         & > * {
             min-width: 4096px;
@@ -30,28 +28,20 @@
         */
     }
 
-    // FIXES: position: relative childrens
+    // BUG (iOS) POSITION: relative childrens
     & > * { -webkit-transform: translate3d(0, 0, 0); }
 }
 
 .left { float: left; }
 .right { float: right;}
+
 .hidden { display: none; }
-.indented > * {
-    margin: 10px;
-}
-.wrapper {
-    padding: 8px 8px;
-}
+.indented > * { margin: 10px; }
+.wrapper { padding: 8px 8px; }
 
-.icon {
-    &.small {
-        font-size: 1.3em;
-    }
-}
+.icon.small { font-size: 1.3em; }
 
 .framed { border: 2px solid #fff;}
-
 .round { .border-radius(4px); }
 
 .bubble {
@@ -61,17 +51,4 @@
     font-size: 0.75em;
     font-weight: bold;
     line-height: 13px;
-    text-align: center;
-}
-
-& strong {
-    font-size: 1.15em;
-}
-
-& small {
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: 0.8em;
-}
+    text-align: center; }

src/stylesheets/css/Lungo.layout.css

@@ -142,6 +142,16 @@ header .title {
   font-size: 1.2em;
   font-weight: bold;
 }
+header .title.with-subtitle {
+  line-height: 34px;
+}
+header .title.with-subtitle .subtitle {
+  position: relative;
+  top: -4px;
+  display: block;
+  font-size: 0.7em;
+  line-height: 0.7em;
+}
 header .title img {
   height: 24px;
 }

src/stylesheets/css/Lungo.layout.list.css

@@ -68,6 +68,16 @@
 .list li.anchor .bubble {
   display: none;
 }
+.list li strong {
+  font-size: 1.15em;
+}
+.list li small {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 0.8em;
+}
 .list .bubble {
   padding-left: 4px;
   padding-right: 4px;

src/stylesheets/css/Lungo.theme.default.css

@@ -69,6 +69,10 @@ section > header .title {
   color: #ffffff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
 }
+section > header .subtitle {
+  color: #ffffff;
+  opacity: 0.7;
+}
 section > footer {
   background-image: -webkit-linear-gradient(top , #292f34 0% , #23282c 60%);
   background-image: -moz-linear-gradient(top , #292f34 0% , #23282c 60%);

src/stylesheets/css/Lungo.widgets.css

@@ -9,6 +9,7 @@
 /* DIMENSIONS */
 /* COLORS */
 .scroll {
+  overflow-x: hidden;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   -webkit-box-flex: 1;
@@ -72,13 +73,3 @@
   line-height: 13px;
   text-align: center;
 }
-strong {
-  font-size: 1.15em;
-}
-small {
-  display: block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-size: 0.8em;
-}