New example of layout

examples/test/app/resources/asides/features.html

@@ -4,7 +4,16 @@
         <ul>
             <!-- Basic Layout -->
             <li class="current">
-                <a href="#list" class="current" data-target="section">
+                <a href="#main-article" data-target="article">
+                    <div class="bubble right">8</div>
+                    <strong>Presentation</strong>
+                    <small>Indented, Scroll</small>
+                </a>
+            </li>
+
+            <!-- Basic Layout -->
+            <li>
+                <a href="#layout" data-target="section">
                     <div class="bubble right">8</div>
                     <strong>Layout</strong>
                     <small>Indented, Scroll</small>

examples/test/app/resources/sections/aside.html

@@ -1,5 +1,5 @@
-<section id="asides">
-    <header data-back="home" data-title="Aside"></header>
+<section id="aside" data-target="slide">
+    <header data-back="home" data-title="Asides"></header>
     <article id="aside-example" class="indented">
         <div>
             <a href="#left" data-target="aside" data-icon="left" class="button big blue">Example of normal aside</a>

examples/test/app/resources/sections/layout.html

@@ -0,0 +1,31 @@
+<section id="layout" data-transition="slide">
+    <header data-title="Layout" class="extended">
+        <nav class="left button">
+            <a href="#back" data-target="section" data-icon="home"></a>
+        </nav>
+        <nav class="right button">
+            <a href="#" data-icon="user" data-label="button"></a>
+        </nav>
+    </header>
+
+    <nav class="groupbar">
+        <a href="#layout-art1" data-target="article" class="current" data-icon="home" data-label="aaa"></a>
+        <a href="#layout-art2" data-target="article" data-icon="user" data-label="aaa"></a>
+        <a href="#layout-art3" data-target="article" data-icon="user" data-label="aaa"></a>
+        <a href="#layout-art4" data-target="article" data-icon="user" data-label="aaa"></a>
+    </nav>
+
+    <footer>
+        <nav class="with-labels">
+            <a href="#layout-art1" data-target="article" class="current" data-icon="home" data-label="aaa"></a>
+            <a href="#layout-art2" data-target="article" data-icon="user" data-label="aaa"></a>
+            <a href="#layout-art3" data-target="article" data-icon="user" data-label="aaa"></a>
+            <a href="#layout-art4" data-target="article" data-icon="user" data-label="aaa"></a>
+        </nav>
+    </footer>
+
+    <article id="layout-art1"></article>
+    <article id="layout-art2"></article>
+    <article id="layout-art3"></article>
+    <article id="layout-art4"></article>
+</section>

examples/test/kitchensink.html

@@ -97,7 +97,7 @@
             </nav> -->
 
 
-        <article id="art-1" class="list">
+        <article id="main-article" class="list">
 
 
         </article>
@@ -151,7 +151,7 @@
             version: '2.0',
             sugars: ['map', 'pull'],
             resources: {
-                sections: [ 'notification.html', 'list.html', 'icon.html', 'grid.html', 'form.html', 'aside.html'],
+                sections: [ 'layout.html', 'notification.html', 'list.html', 'icon.html', 'grid.html', 'form.html', 'aside.html'],
                 templates: [],
                 asides: ['features.html', 'left.html', 'right.html']
             }

src/stylesheets/Lungo.layout.nav.less

@@ -119,7 +119,7 @@ footer nav a {
         & .bubble { top: -34px; }
 
         & abbr {
-            display: block;
+            display: block !important;
             position: absolute;
             top: 30px;
             width: inherit;

src/stylesheets/Lungo.theme.default.less

@@ -14,9 +14,9 @@
 @theme: #2A95D3;
 @theme-light:  #39ABE1;
 @theme-dark: #1984C2;
-@theme: #2C8BCA;
-@theme-light:  #2C8BCA;
-@theme-dark: #154F93;
+// @theme: #2C8BCA;
+// @theme-light:  #2C8BCA;
+// @theme-dark: #154F93;
 @footer: #292F34;
     @footer-dark: #23282C;
 @color: #484a49;

src/stylesheets/css/Lungo.layout.nav.css

@@ -113,7 +113,7 @@ footer nav a.with-labels .bubble {
   top: -34px;
 }
 footer nav a.with-labels abbr {
-  display: block;
+  display: block !important;
   position: absolute;
   top: 30px;
   width: inherit;

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

@@ -15,25 +15,25 @@
 .theme,
 li.theme,
 a.theme {
-  background: #2c8bca;
+  background: #2a95d3;
 }
 .theme:active,
 li.theme:active,
 a.theme:active {
-  background: #154f93;
+  background: #1984c2;
 }
 /* @group <header> & <footer> & <article> */
 section > header {
-  background-image: -webkit-linear-gradient(top , #2c8bca , #154f93);
-  background-image: -moz-linear-gradient(top , #2c8bca , #154f93);
-  background-image: -ms-linear-gradient(top , #2c8bca , #154f93);
-  background-image: -o-linear-gradient(top , #2c8bca , #154f93);
-  background-image: linear-gradient(top , #2c8bca , #154f93);
-  background-image: -webkit-linear-gradient(top , #2c8bca , #154f93);
-  background-image: -moz-linear-gradient(top , #2c8bca , #154f93);
-  background-image: -ms-linear-gradient(top , #2c8bca , #154f93);
-  background-image: -o-linear-gradient(top , #2c8bca , #154f93);
-  background-image: linear-gradient(top , #2c8bca , #154f93);
+  background-image: -webkit-linear-gradient(top , #2a95d3 , #1984c2);
+  background-image: -moz-linear-gradient(top , #2a95d3 , #1984c2);
+  background-image: -ms-linear-gradient(top , #2a95d3 , #1984c2);
+  background-image: -o-linear-gradient(top , #2a95d3 , #1984c2);
+  background-image: linear-gradient(top , #2a95d3 , #1984c2);
+  background-image: -webkit-linear-gradient(top , #2a95d3 , #1984c2);
+  background-image: -moz-linear-gradient(top , #2a95d3 , #1984c2);
+  background-image: -ms-linear-gradient(top , #2a95d3 , #1984c2);
+  background-image: -o-linear-gradient(top , #2a95d3 , #1984c2);
+  background-image: linear-gradient(top , #2a95d3 , #1984c2);
   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
   -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
@@ -179,12 +179,12 @@ nav.groupbar a.current {
   text-shadow: 0 0 1px #ffffff;
 }
 nav.groupbar a.current {
-  -webkit-box-shadow: inset 0 -3px 0 #2c8bca;
-  -moz-box-shadow: inset 0 -3px 0 #2c8bca;
-  box-shadow: inset 0 -3px 0 #2c8bca;
-  -webkit-box-shadow: inset 0 -3px 0 #2c8bca;
-  -moz-box-shadow: inset 0 -3px 0 #2c8bca;
-  box-shadow: inset 0 -3px 0 #2c8bca;
+  -webkit-box-shadow: inset 0 -3px 0 #2a95d3;
+  -moz-box-shadow: inset 0 -3px 0 #2a95d3;
+  box-shadow: inset 0 -3px 0 #2a95d3;
+  -webkit-box-shadow: inset 0 -3px 0 #2a95d3;
+  -moz-box-shadow: inset 0 -3px 0 #2a95d3;
+  box-shadow: inset 0 -3px 0 #2a95d3;
 }
 /* @end */
 /* @group <aside> */
@@ -260,7 +260,7 @@ section.aside.right {
   color: #ffffff !important;
 }
 .list li.selectable:active {
-  background: #2c8bca;
+  background: #39abe1;
 }
 .list li.selectable:active,
 .list li.selectable:active a {
@@ -277,17 +277,17 @@ aside .list li {
   border-bottom: 1px solid ;
 }
 aside .list li.current {
-  border-top-color: #2c8bca;
-  background-image: -webkit-linear-gradient(top , #2c8bca 25% , #154f93 100%);
-  background-image: -moz-linear-gradient(top , #2c8bca 25% , #154f93 100%);
-  background-image: -ms-linear-gradient(top , #2c8bca 25% , #154f93 100%);
-  background-image: -o-linear-gradient(top , #2c8bca 25% , #154f93 100%);
-  background-image: linear-gradient(top , #2c8bca 25% , #154f93 100%);
-  background-image: -webkit-linear-gradient(top , #2c8bca 25% , #154f93 100%);
-  background-image: -moz-linear-gradient(top , #2c8bca 25% , #154f93 100%);
-  background-image: -ms-linear-gradient(top , #2c8bca 25% , #154f93 100%);
-  background-image: -o-linear-gradient(top , #2c8bca 25% , #154f93 100%);
-  background-image: linear-gradient(top , #2c8bca 25% , #154f93 100%);
+  border-top-color: #2a95d3;
+  background-image: -webkit-linear-gradient(top , #39abe1 25% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #39abe1 25% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #39abe1 25% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #39abe1 25% , #1984c2 100%);
+  background-image: linear-gradient(top , #39abe1 25% , #1984c2 100%);
+  background-image: -webkit-linear-gradient(top , #39abe1 25% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #39abe1 25% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #39abe1 25% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #39abe1 25% , #1984c2 100%);
+  background-image: linear-gradient(top , #39abe1 25% , #1984c2 100%);
   background-color: #e33100;
 }
 aside .list li strong {
@@ -407,13 +407,13 @@ input:focus,
 textarea:focus,
 select:focus {
   color: #484a49;
-  border-color: #2c8bca;
-  -webkit-box-shadow: 0 0 6px #2c8bca;
-  -moz-box-shadow: 0 0 6px #2c8bca;
-  box-shadow: 0 0 6px #2c8bca;
-  -webkit-box-shadow: 0 0 6px #2c8bca;
-  -moz-box-shadow: 0 0 6px #2c8bca;
-  box-shadow: 0 0 6px #2c8bca;
+  border-color: #2a95d3;
+  -webkit-box-shadow: 0 0 6px #39abe1;
+  -moz-box-shadow: 0 0 6px #39abe1;
+  box-shadow: 0 0 6px #39abe1;
+  -webkit-box-shadow: 0 0 6px #39abe1;
+  -moz-box-shadow: 0 0 6px #39abe1;
+  box-shadow: 0 0 6px #39abe1;
 }
 .select:after {
   background: #ccc;
@@ -457,16 +457,16 @@ input[type="radio"] + span::before {
 }
 input[type="checkbox"]:checked + span,
 input[type="radio"]:checked + span {
-  background-image: -webkit-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -moz-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -ms-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -o-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -webkit-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -moz-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -ms-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -o-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -webkit-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -webkit-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: linear-gradient(top , #2a95d3 0% , #1984c2 100%);
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
@@ -527,22 +527,22 @@ input[type="range"]::-webkit-slider-thumb {
   background: #a0a0a0;
 }
 input[type="range"]:active::-webkit-slider-thumb {
-  -webkit-box-shadow: 0px 0px 4px #2c8bca;
-  -moz-box-shadow: 0px 0px 4px #2c8bca;
-  box-shadow: 0px 0px 4px #2c8bca;
-  -webkit-box-shadow: 0px 0px 4px #2c8bca;
-  -moz-box-shadow: 0px 0px 4px #2c8bca;
-  box-shadow: 0px 0px 4px #2c8bca;
-  background-image: -webkit-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -moz-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -ms-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -o-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -webkit-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -moz-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -ms-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -o-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  -webkit-box-shadow: 0px 0px 4px #39abe1;
+  -moz-box-shadow: 0px 0px 4px #39abe1;
+  box-shadow: 0px 0px 4px #39abe1;
+  -webkit-box-shadow: 0px 0px 4px #39abe1;
+  -moz-box-shadow: 0px 0px 4px #39abe1;
+  box-shadow: 0px 0px 4px #39abe1;
+  background-image: -webkit-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -webkit-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: linear-gradient(top , #2a95d3 0% , #1984c2 100%);
 }
 /* @end */
 /* @group .progress */
@@ -568,16 +568,16 @@ input[type="range"]:active::-webkit-slider-thumb {
   background-clip: padding-box;
 }
 .progress .bar .value {
-  background-image: -webkit-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -moz-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -ms-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -o-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -webkit-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -moz-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -ms-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -o-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -webkit-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -webkit-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: linear-gradient(top , #39abe1 0% , #1984c2 100%);
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
@@ -617,16 +617,16 @@ input[type="range"]:active::-webkit-slider-thumb {
   background-clip: padding-box;
 }
 .bubble.count {
-  background-image: -webkit-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -moz-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -ms-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -o-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -webkit-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -moz-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -ms-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: -o-linear-gradient(top , #2c8bca 0% , #154f93 100%);
-  background-image: linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -webkit-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -webkit-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: linear-gradient(top , #39abe1 0% , #1984c2 100%);
 }
 footer .bubble {
   -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);