Changes in example

example/app/sections/list.html

@@ -8,6 +8,7 @@
     <nav class="groupbar">
         <a href="#list-normal" data-router="article" class="active" data-icon="checkmark" data-label="Normal"></a>
         <a href="#list-indented" data-router="article" data-label="Indented"></a>
+        <a href="#list-examples" data-router="article" data-label="Examples"></a>
     </nav>
 
     <article id="list-normal" class="active list scroll">
@@ -267,6 +268,48 @@
                 <small>&lt;small&gt;</small>
             </li>
         </ul>
+    </article>
+
+
 
+    <article id="list-examples" class="list scroll">
+        <ul>
+            <li class="feature">
+                <div class="right  ">15:49</div>
+                <strong class="text bold">Enrique Amodeo Rubio</strong>
+                <div class="text small">[madridJS] [JOB] Front Developer Position</div>
+                <small>
+                    <div class="right tag ">theme</div>
+                    Hola a todos, nos llega esta oportunida muy inteeresante
+                </small>
+            </li>
+            <li class="feature">
+                <div class="right ">15:49</div>
+                <strong class="text normal">Enrique Amodeo Rubio</strong>
+                <small class="text small">[madridJS] [JOB] Front Developer Position</small>
+                <small>
+                    <div class="right tag cancel">important</div>
+                    Hola a todos, nos llega esta oportunida muy inteeresante
+                </small>
+            </li>
+            <li class="feature">
+                <div class="right tag accept">sended</div>
+                <strong class="text bold">Open Source Project</strong>
+                <p class="text thin">Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.</p>
+            </li>
+            <li class="feature">
+                <strong>Powerfull JavaScript API</strong>
+                Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
+            </li>
+            <li class="feature">
+                <strong>Multi-Device full support</strong>
+                Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
+            </li>
+
+            <li>
+                <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="brand twitter" target="_blank" class="button anchor theme" data-label="Tweet me"></a>
+                <button data-icon="brand twitter" class="anchor theme" data-label="Tweet me"></button>
+            </li>
+        </ul>
     </article>
 </section>

example/components/lungo/lungo.css

@@ -25,7 +25,7 @@ section[data-transition="cover"].show,section[data-transition="cover"].hide{-web
 section[data-transition="fade"]{opacity:0;}
 section[data-transition="fade"]:first-child,section[data-transition="fade"].show{opacity:1}
 section[data-transition="fade"]:hide{opacity:0}
-header,footer{position:absolute;left:0;width:100%;display:block;z-index:2}
+header,footer{position:absolute;left:0;width:100%;display:block;z-index:1}
 header{top:0;height:44px;line-height:44px;}
 header .title{margin-left:4px;float:left;z-index:-1;font-size:1.44em;}
 header .title img{height:24px}
@@ -100,7 +100,7 @@ aside.small nav a:first-child{margin-top:8px}
 .list .right .icon,.list small .icon{height:13px !important;width:13px !important;margin-right:1px !important;font-size:1.2em !important;line-height:1.1em}
 .list.indented li{margin-bottom:10px}
 
-nav.groupbar,footer nav{display:-webkit-box;display:-moz-box;display:box;-webkit-box-pack:justify;-moz-box-pack:justify;box-pack:justify;}
+nav.groupbar,footer nav{display:-webkit-box;display:-moz-box;display:box;-webkit-box-pack:justify;-moz-box-pack:justify;box-pack:justify;width:100%;}
 nav.groupbar > a,footer nav > a{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}
 header nav a{padding:0 11px !important;z-index:1000;float:left}
 header nav a.button{margin:6px 2px 0 2px;font-size:.9em;line-height:30px;}
@@ -114,7 +114,7 @@ header nav abbr{font-size:.9em;font-weight:700}
 header nav .icon ~ abbr{margin-left:4px;float:right}
 header nav .loading{margin-top:.5em;font-size:1.6em;}
 header nav .loading + .icon{display:none}
-nav.groupbar{position:absolute;top:44px;height:30px;width:100%;z-index:2;line-height:30px;}
+nav.groupbar{position:relative;top:44px;height:30px;width:100%;z-index:2;line-height:30px;}
 nav.groupbar > a{padding:0;margin:0;height:30px !important;display:block;text-align:center;}
 nav.groupbar > a .icon{font-size:1em;margin-right:2px}
 nav.groupbar > a .tag{position:relative;top:-1px;left:2px}

example/index.html

@@ -100,59 +100,16 @@
             </ul>
         </article>
 
-        <article id="second-article" class="list  scroll">
-            <ul>
-                <li class="feature">
-                    <div class="right  ">15:49</div>
-                    <strong class="text bold">Enrique Amodeo Rubio</strong>
-                    <div class="text small">[madridJS] [JOB] Front Developer Position</div>
-                    <small>
-                        <div class="right tag ">theme</div>
-                        Hola a todos, nos llega esta oportunida muy inteeresante
-                    </small>
-                </li>
-                <li class="feature">
-                    <div class="right ">15:49</div>
-                    <strong class="text normal">Enrique Amodeo Rubio</strong>
-                    <small class="text small">[madridJS] [JOB] Front Developer Position</small>
-                    <small>
-                        <div class="right tag cancel">important</div>
-                        Hola a todos, nos llega esta oportunida muy inteeresante
-                    </small>
-                </li>
-                <li class="feature">
-                    <div class="right tag accept">sended</div>
-                    <strong class="text bold">Open Source Project</strong>
-                    <p class="text thin">Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.</p>
-                </li>
-                <li class="feature">
-                    <strong>Powerfull JavaScript API</strong>
-                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
-                </li>
-                <li class="feature">
-                    <strong>Multi-Device full support</strong>
-                    Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
-                </li>
-
-                <li>
-                    <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="brand twitter" target="_blank" class="button anchor theme" data-label="Tweet me"></a>
-                    <button data-icon="brand twitter" class="anchor theme" data-label="Tweet me"></button>
-                </li>
-            </ul>
-        </article>
-
         <article id="environment" class="list">
             <ul>
                 <li id="os" class="dark" data-icon="mobile">
                     <strong>Desktop</strong>
                     <small>unknown</small>
                 </li>
-
                 <li id="resolution" data-icon="picture">
                     <strong>0p x 0p</strong>
                     <small>Screen Resolution</small>
                 </li>
-
                 <li id="navigator" data-icon="brand html5">
                     <strong>webkit</strong>
                     <small>Mobile: </small>

packages/lungo/lungo.css

@@ -25,7 +25,7 @@ section[data-transition="cover"].show,section[data-transition="cover"].hide{-web
 section[data-transition="fade"]{opacity:0;}
 section[data-transition="fade"]:first-child,section[data-transition="fade"].show{opacity:1}
 section[data-transition="fade"]:hide{opacity:0}
-header,footer{position:absolute;left:0;width:100%;display:block;z-index:2}
+header,footer{position:absolute;left:0;width:100%;display:block;z-index:1}
 header{top:0;height:44px;line-height:44px;}
 header .title{margin-left:4px;float:left;z-index:-1;font-size:1.44em;}
 header .title img{height:24px}
@@ -100,7 +100,7 @@ aside.small nav a:first-child{margin-top:8px}
 .list .right .icon,.list small .icon{height:13px !important;width:13px !important;margin-right:1px !important;font-size:1.2em !important;line-height:1.1em}
 .list.indented li{margin-bottom:10px}
 
-nav.groupbar,footer nav{display:-webkit-box;display:-moz-box;display:box;-webkit-box-pack:justify;-moz-box-pack:justify;box-pack:justify;}
+nav.groupbar,footer nav{display:-webkit-box;display:-moz-box;display:box;-webkit-box-pack:justify;-moz-box-pack:justify;box-pack:justify;width:100%;}
 nav.groupbar > a,footer nav > a{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}
 header nav a{padding:0 11px !important;z-index:1000;float:left}
 header nav a.button{margin:6px 2px 0 2px;font-size:.9em;line-height:30px;}
@@ -114,7 +114,7 @@ header nav abbr{font-size:.9em;font-weight:700}
 header nav .icon ~ abbr{margin-left:4px;float:right}
 header nav .loading{margin-top:.5em;font-size:1.6em;}
 header nav .loading + .icon{display:none}
-nav.groupbar{position:absolute;top:44px;height:30px;width:100%;z-index:2;line-height:30px;}
+nav.groupbar{position:relative;top:44px;height:30px;width:100%;z-index:2;line-height:30px;}
 nav.groupbar > a{padding:0;margin:0;height:30px !important;display:block;text-align:center;}
 nav.groupbar > a .icon{font-size:1em;margin-right:2px}
 nav.groupbar > a .tag{position:relative;top:-1px;left:2px}