Optimized stylesheets

examples/test/index.html

@@ -42,16 +42,14 @@
     <section id="test-1" class="pop">
         <header class="extended">
             <nav class="onleft">
-                <a href="#kitchen-sink-scroll" class="active" data-target="aside" data-icon="home"></a>
+                <a href="#kitchen-sink-scroll" data-target="aside" data-icon="user"></a>
             </nav>
             <div class="onleft">
-                <span class="title with-subtitle">Javi Jiménez</span>
-                <span class="subtitle ">@souhavi</span>
+                <span class="title with-subtitle">Javi Jiménez Villar</span>
+                <span class="subtitle">@soyjavi</span>
             </div>
             <nav class="onright">
-                <a href="#profiles" class="active" data-target="aside" data-icon="plus"></a>
-
-                <a href="#" class="active" data-icon="mail" style="background: rgba(0, 255, 0, 0.4);"data-label="ENVIAR"></a>
+                <a href="#profiles" data-target="aside" data-icon="group"></a>
             </nav>
         </header>
 
@@ -151,9 +149,8 @@
                 <a href="#back" data-target="section" class="current" data-icon="left"></a>
             </nav>
 
-            <nav class="onright plain">
-                <a href="#" class="" data-icon="items" data-label="Text"></a>
-                <a href="#" class="" data-icon="remove"></a>
+            <nav class="onright ">
+                <a href="#" class="active" data-icon="mail" style="background: rgba(0, 255, 0, 0.4);"data-label="ENVIAR"></a>
             </nav>
         </header>
         <article></article>

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

@@ -25,6 +25,14 @@ header {
   position: absolute;
   z-index: 2;
 }
+header .title {
+  color: #ffffff;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+}
+header .subtitle {
+  color: rgba(255, 255, 255, 0.6);
+  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
+}
 footer {
   background: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(50%, #272a2d));
   border-top: 1px inset #2A2A2A;
@@ -32,13 +40,6 @@ footer {
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
 }
-.title {
-  color: #ffffff;
-}
-.subtitle {
-  color: rgba(255, 255, 255, 0.6);
-  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
-}
 article {
   background-color: #EBEBEB;
 }
@@ -55,13 +56,10 @@ header nav a {
 header nav:not(.plain) a {
   box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), inset -1px 0 0 rgba(0, 0, 0, 0.2);
 }
-header nav:not(.plain) a:active {
-  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 0 42px rgba(0, 0, 0, 0.5);
-}
 header nav:not(.plain).onright a {
   box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2), inset 1px 0 0 rgba(0, 0, 0, 0.2);
 }
-header nav:not(.plain).onright a:active {
+header nav:not(.plain) a:active {
   box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 0 42px rgba(0, 0, 0, 0.5);
 }
 header nav.plain a:active {

src/stylesheets/less/Lungo.layout.less

@@ -83,35 +83,35 @@ header, footer  {
 
 header  {
 	top: 0px;
-	/*& .onleft { margin-left: 4px !important;}
-	& .onright {margin-right: 4px !important;}*/
-}
-
-footer  { bottom: 0px; }
-
-header .title, footer .title  {
-	//margin: 0 4px;	
-	z-index: -1;
-	font-size: 15px;
-	font-weight: bold;
-	display:block;
 	
-	&.centered {
-		position: absolute;
-		left: 0px;
-		right: 0px;
-		text-align: center;
-		display: inline-block;
+	& .title {
+		margin-left: 4px;
+		float: left;
+		z-index: -1;
+		font-size: 15px;
+		font-weight: bold;
+		
+		&.centered {
+			position: absolute;
+			left: 0px;
+			right: 0px;
+			text-align: center;
+			display: inline-block;
+		}
+		&.with-subtitle {
+			line-height: 20px;
+			padding-top: 4px;
+		}
 	}
-	&.with-subtitle {
-		line-height: 20px;
-		padding-top: 4px;
+	
+	& .subtitle {
+		margin-left: 4px;
+		display:block;
+		font-size: 11px;
+		line-height: 11px;
+		width: 100%;
 	}
 }
 
-.subtitle {
-	display:block;
-	font-size: 11px;
-	line-height: 11px;
-}
+footer  { bottom: 0px; }
 /* @end */

src/stylesheets/less/Lungo.theme.default.less

@@ -46,6 +46,16 @@ header {
 	
 	position: absolute;
 	z-index: 2;
+	
+	& .title {
+		color: @white;
+		text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
+	}
+
+	& .subtitle {
+		color: rgba(255,255,255,0.6);
+		text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
+	}
 }
 
 footer {
@@ -57,15 +67,8 @@ footer {
 	border-bottom-left-radius: 5px;
 	border-bottom-right-radius: 5px;
 }
-.title {
-	color: @white;
-	//text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
-}
 
-.subtitle {
-	color: rgba(255,255,255,0.6);
-	text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
-}
+
 
 article {
 	background-color: #EBEBEB;
@@ -77,7 +80,6 @@ article {
 /* @end */
 
 /* @group <nav> */
-@nav-a-active: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5);
 header nav {
 	
 	& a {
@@ -86,15 +88,10 @@ header nav {
 	}
 	
 	&:not(.plain) {
-		& a {
-			box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
-			&:active { box-shadow: @nav-a-active; }
-		}
-			
-		&.onright a {
-			box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
-			&:active { box-shadow: @nav-a-active }
-		}
+		& a { box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2); }
+		&.onright a { box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2); }
+		
+		& a:active { box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5); }
 	}
 		
 	&.plain a:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
@@ -109,7 +106,6 @@ header nav {
 		background: #111;
 		box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
 	}
-	
 }