indents in demo (icons, illustrations)

harp · Jul 17, 2013 · 9e77bc3 · 9e77bc3
1 parent 15ef9d8
commit 9e77bc3
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 24 deletions.
diff --git a/css/flat-ui.css b/css/flat-ui.css
@@ -242,14 +242,15 @@ you can use the generic selector below, but it's slower:
 }
 .demo-icons {
   font-size: 32px;
-  margin-left: -15px;
+  margin-left: -20px;
+  padding-left: 20px;
 }
 .demo-icons .demo-content {
-  margin: 0 0 0 -36px;
+  margin: 0 0 0 -35px;
 }
 .demo-icons .demo-content > span {
   display: inline-block;
-  margin: 0 0 32px 36px;
+  margin: 0 0 32px 35px;
   width: 24px;
   font-size: 24px;
 }
@@ -262,27 +263,24 @@ you can use the generic selector below, but it's slower:
   position: absolute;
   width: 80px;
 }
-.demo-illustrations {
-  margin-top: 40px;
+.demo-illustrations .demo-content {
+  margin: 0 0 0 -40px;
+  padding-top: 20px;
   *zoom: 1;
 }
-.demo-illustrations:before,
-.demo-illustrations:after {
+.demo-illustrations .demo-content:before,
+.demo-illustrations .demo-content:after {
   display: table;
   content: "";
 }
-.demo-illustrations:after {
+.demo-illustrations .demo-content:after {
   clear: both;
 }
-.demo-illustrations .demo-content {
-  margin: 0 0 0 -40px;
-  padding-top: 20px;
-}
 .demo-illustrations .demo-content > div {
   float: left;
   width: 100px;
   height: 100px;
-  margin: 0 0 80px 40px;
+  margin: 0 0 40px 40px;
   text-align: center;
 }
 .demo-illustrations img {

diff --git a/index.html b/index.html
@@ -348,9 +348,9 @@ <h6>Header 6</h6>
         </div> <!-- /headings -->
       </div> <!-- /row -->
 
+      <h3 class="demo-panel-title">Color Swatches</h3>
       <div class="row">
-        <div class="span10">
-          <h3 class="demo-panel-title">Color Swatches</h3>
+        <div class="span10">          
           <div class="row mbl">
             <div class="span2">
               <dl class="palette palette-turquoise">
@@ -467,7 +467,6 @@ <h3 class="demo-panel-title">Color Swatches</h3>
         </div>
 
         <div class="span2">
-          <h3 class="demo-panel-title">&nbsp;</h3>
           <h6 class="palette-headline">SWATCHES</h6>
           <p class="palette-paragraph">
             Colors &mdash; is almost the most important part of the <strong>Flat UI</strong>. Better to use different shades of provided colors than new.
@@ -501,8 +500,9 @@ <h3 class="demo-panel-title">Icons <small>(14)</small></h3>
         </div>
       </div>
 
-      <div class="demo-icons">
-        <h3 class="demo-panel-title">Glyphs <small>(30)</small></h3>
+
+      <h3 class="demo-panel-title">Glyphs <small>(30)</small></h3>
+      <div class="demo-icons">        
         <div class="demo-content">
           <span class="fui-arrow-right"></span>
           <span class="fui-arrow-left"></span>

diff --git a/less/modules/demo.less b/less/modules/demo.less
@@ -68,14 +68,15 @@
 
 .demo-icons {
   font-size: 32px;
-  margin-left: -15px;
+  margin-left: -20px;
+  padding-left: 20px;
 
   .demo-content {
-    margin: 0 0 0 -36px;
+    margin: 0 0 0 -35px;
 
     > span {
       display: inline-block;
-      margin: 0 0 32px 36px;
+      margin: 0 0 32px 35px;
       width: 24px;
       font-size: 24px;
     }  
@@ -95,18 +96,17 @@
 // Illustration Icons
 // --------------------------------------------------
 .demo-illustrations {
-  margin-top: 40px;
-  .clearfix();
 
   .demo-content {
     margin: 0 0 0 -40px;
     padding-top: 20px;
+    .clearfix();
 
     > div {
       float: left;
       width: 100px;
       height: 100px;
-      margin: 0 0 80px 40px;
+      margin: 0 0 40px 40px;
       text-align: center;
     }
   }