flatly: refactor code, style additional components

byk0t · May 15, 2013 · bf93db1 · bf93db1
1 parent 5ac3b31
commit bf93db1
Show file tree

Hide file tree

Showing 8 changed files with 1,377 additions and 1,345 deletions.
diff --git a/flat/bootstrap.min.css b/flat/bootstrap.min.css
diff --git a/flat/bootswatch.less b/flat/bootswatch.less
diff --git a/flat/bootstrap.css → flatly/bootstrap.css b/flat/bootstrap.css → flatly/bootstrap.css
diff --git a/flatly/bootstrap.min.css b/flatly/bootstrap.min.css
diff --git a/flatly/bootswatch.less b/flatly/bootswatch.less
diff --git a/flat/index.html → flatly/index.html b/flat/index.html → flatly/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Bootswatch: Flatness</title>
+    <title>Bootswatch: Flatly</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Flat and Clean.">
     <meta name="author" content="Jenil Gogari">
@@ -35,7 +35,7 @@
   </head>
 
   <body class="preview" id="top" data-spy="scroll" data-target=".subnav" data-offset="80">
-    <!-- <script src="../js/bsa.js"></script> -->
+    <script src="../js/bsa.js"></script>
 
 
   <!-- Navbar
@@ -100,24 +100,13 @@
 <header class="jumbotron subhead" id="overview">
   <div class="row">
     <div class="span6">
-      <h1>Flatness</h1>
-      <p class="lead">Flat and Clean</p>
+      <h1>Flatly</h1>
+      <p class="lead">Flat and clean.</p>
+      <p>By <a href="http://www.jgog.in">Jenil Gogari</a></p>
     </div>
     <div class="span4 offset2">
-<!--       <div class="bsa well">
+      <div class="bsa well">
           <div id="bsap_1277971" class="bsarocks bsap_c466df00a3cd5ee8568b5c4983b6bb19"></div>
-      </div> -->
-      <div class="well" style="padding: 15px 15px 0 15px;">
-        <a href="http://carboncostume.com/apple-store-genius/" target="_blank">
-          <span style="float: left; margin: 0 15px 15px 0;">
-            <img src="../img/carboncostume.png" width="175" height="135" style="border-radius: 5px;">
-          </span>
-        </a>
-        <a href="http://carboncostume.com" target="_blank">
-          <h4 style="margin-bottom: 0.4em; color: #fff;">Carbon Costume</h4>
-          <span style="display: block; margin-bottom: 1em; color: #fff;">DIY costumes using everyday gear.</span>
-        </a>
-        <div style="clear:both"></div>
       </div>
     </div>
   </div>

diff --git a/flat/thumbnail.png → flatly/thumbnail.png b/flat/thumbnail.png → flatly/thumbnail.png
diff --git a/flat/variables.less → flatly/variables.less b/flat/variables.less → flatly/variables.less
@@ -1,4 +1,4 @@
-// Flatness by Jenil(www.jgog.in)
+// Flatness by Jenil (www.jgog.in)
 // Bootswatch 2.3.1
 // --------------------------------------------------
 
@@ -9,7 +9,7 @@
 // Grays
 // -------------------------
 @black:                 #000;
-@grayDarker:            #7F8C8D;
+@grayDarker:            #222;
 @grayDark:              #7b8a8b;
 @gray:                  #95A5A6;
 @grayLight:             #b4bcc2;
@@ -20,36 +20,36 @@
 // Accent colors
 // -------------------------
 @blue:                  #3498DB;
-@blueDark:              #2980B9;
-@green:                 #2ECC71;
+@blueDark:              #2C3E50;
+@green:                 #18BC9C;
 @red:                   #E74C3C;
 @yellow:                #F1C40F;
-@orange:                #F39C12;
+@orange:                #EAB70F;
 @pink:                  #ff6699;
 @purple:                #8E44AD;
 
 
 // Scaffolding
 // -------------------------
 @bodyBackground:        @white;
-@textColor:             #34495E;
+@textColor:             @blueDark;
 
 
 // Links
 // -------------------------
 @linkColor:             #1ABC9C;
-@linkColorHover:        darken(@linkColor, 15%);
+@linkColorHover:        lighten(@linkColor, 5%);
 
 
 // Typography
 // -------------------------
-@sansFontFamily:        "Lato", sans-serif;
+@sansFontFamily:        "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
 @monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
 
 @baseFontSize:          15px;
 @baseFontFamily:        @sansFontFamily;
-@baseLineHeight:        20px;
+@baseLineHeight:        21px;
 @altFontFamily:         @serifFontFamily;
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
@@ -65,12 +65,12 @@
 @fontSizeSmall:         @baseFontSize * 0.85; // ~12px
 @fontSizeMini:          @baseFontSize * 0.75; // ~11px
 
-@paddingLarge:          11px 19px; // 44px
-@paddingSmall:          2px 10px;  // 26px
-@paddingMini:           1px 6px;   // 24px
+@paddingLarge:          18px 36px; // 44px
+@paddingSmall:          2px 12px;  // 26px
+@paddingMini:           1px 8px;   // 24px
 
-@baseBorderRadius:      4px;
-@borderRadiusLarge:     6px;
+@baseBorderRadius:      6px;
+@borderRadiusLarge:     10px;
 @borderRadiusSmall:     3px;
 
 
@@ -83,27 +83,27 @@
 
 // Buttons
 // -------------------------
-@btnBackground:                     @gray;
-@btnBackgroundHighlight:            lighten(@btnBackground,10%);
-@btnBorder:                         #bbb;
+@btnBackground:                     @grayLight;
+@btnBackgroundHighlight:            lighten(@btnBackground, 10%);
+@btnBorder:                         #ddd;
 
 @btnPrimaryBackground:              @textColor;
-@btnPrimaryBackgroundHighlight:     #4e6d8d;
+@btnPrimaryBackgroundHighlight:     lighten(@btnPrimaryBackground, 10%);
 
 @btnInfoBackground:                 @blue;
-@btnInfoBackgroundHighlight:        #2383c4;
+@btnInfoBackgroundHighlight:        lighten(@btnInfoBackground, 10%);
 
 @btnSuccessBackground:              @green;
-@btnSuccessBackgroundHighlight:     #55d98d;
+@btnSuccessBackgroundHighlight:     lighten(@btnSuccessBackground, 10%);
 
-@btnWarningBackground:              lighten(@orange, 15%);
-@btnWarningBackgroundHighlight:     @orange;
+@btnWarningBackground:              @orange;
+@btnWarningBackgroundHighlight:     lighten(@btnWarningBackground, 10%);
 
-@btnDangerBackground:               #ee5f5b;
-@btnDangerBackgroundHighlight:      #bd362f;
+@btnDangerBackground:               @red;
+@btnDangerBackgroundHighlight:      lighten(@btnDangerBackground, 10%);
 
-@btnInverseBackground:              @purple;
-@btnInverseBackgroundHighlight:     #9B59B6;
+@btnInverseBackground:              @grayDarker;
+@btnInverseBackgroundHighlight:     lighten(@btnInverseBackground, 10%);
 
 
 // Forms
@@ -118,17 +118,17 @@
 
 // Dropdowns
 // -------------------------
-@dropdownBackground:            @white;
+@dropdownBackground:            @blueDark;
 @dropdownBorder:                rgba(0,0,0,0);
-@dropdownDividerTop:            #2C3E50;
-@dropdownDividerBottom:         #2C3E50;
+@dropdownDividerTop:            rgba(0,0,0,0.2);
+@dropdownDividerBottom:         rgba(0,0,0,0.2);
 
-@dropdownLinkColor:             #34495E;
-@dropdownLinkColorHover:        #34495E;
+@dropdownLinkColor:             @white;
+@dropdownLinkColorHover:        @white;
 @dropdownLinkColorActive:       @dropdownLinkColor;
 
-@dropdownLinkBackgroundActive:  @linkColor;
-@dropdownLinkBackgroundHover:   @linkColor;
+@dropdownLinkBackgroundActive:  @green;
+@dropdownLinkBackgroundHover:   @green;
 
 
 
@@ -171,7 +171,7 @@
 
 // Wells
 // -------------------------
-@wellBackground:                  #ECF0F1;
+@wellBackground:                  @grayLighter;
 
 
 // Navbar
@@ -182,7 +182,7 @@
 @navbarHeight:                    50px;
 @navbarBackgroundHighlight:       @textColor;
 @navbarBackground:                @textColor;
-@navbarBorder:                    darken(@navbarBackground, 12%);
+@navbarBorder:                    darken(@navbarBackground, 5%);
 
 @navbarText:                      @white;
 @navbarLinkColor:                 @white;
@@ -194,21 +194,21 @@
 @navbarBrandColor:                @navbarLinkColor;
 
 // Inverted navbar
-@navbarInverseBackground:                @grayLighter;
-@navbarInverseBackgroundHighlight:       @grayLighter;
-@navbarInverseBorder:                    @grayLight;
-
-@navbarInverseText:                      @textColor;
-@navbarInverseLinkColor:                 @textColor;
-@navbarInverseLinkColorHover:            @linkColor;
-@navbarInverseLinkColorActive:           @linkColor;
+@navbarInverseBackground:                @green;
+@navbarInverseBackgroundHighlight:       @green;
+@navbarInverseBorder:                    darken(@green, 5%);
+
+@navbarInverseText:                      @white;
+@navbarInverseLinkColor:                 @white;
+@navbarInverseLinkColorHover:            @yellow;
+@navbarInverseLinkColorActive:           @yellow;
 @navbarInverseLinkBackgroundHover:       transparent;
 @navbarInverseLinkBackgroundActive:      darken(@navbarInverseBackground, 5%);
 
-@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
+@navbarInverseSearchBackground:          @white;
 @navbarInverseSearchBackgroundFocus:     @white;
 @navbarInverseSearchBorder:              @grayLight;
-@navbarInverseSearchPlaceholderColor:    @textColor;
+@navbarInverseSearchPlaceholderColor:    @gray;
 
 @navbarInverseBrandColor:                @navbarInverseLinkColor;
 
@@ -229,34 +229,34 @@
 
 // Form states and alerts
 // -------------------------
-@warningText:             desaturate(@yellow,10%);
+@warningText:             @yellow;
 @warningBackground:       desaturate(lighten(@yellow,45%),30%);
-@warningBorder:           darken(spin(@warningBackground, -10), 3%);
+@warningBorder:           transparent;
 
 @errorText:               @red;
-@errorBackground:         desaturate(lighten(@red,42%),30%);
-@errorBorder:             darken(spin(@errorBackground, -10), 3%);
+@errorBackground:         desaturate(lighten(@red,45%),30%);
+@errorBorder:             transparent;
 
-@successText:             desaturate(@green,20%);
+@successText:             @green;
 @successBackground:       desaturate(lighten(@green,45%),30%);
-@successBorder:           darken(spin(@successBackground, -10), 5%);
+@successBorder:           transparent;
 
 @infoText:                @blue;
 @infoBackground:          desaturate(lighten(@blue,43%),30%);
-@infoBorder:              darken(spin(@infoBackground, -10), 7%);
+@infoBorder:              transparent;
 
 
 // Tooltips and popovers
 // -------------------------
 @tooltipColor:            #fff;
-@tooltipBackground:       @textColor;
+@tooltipBackground:       @blueDark;
 @tooltipArrowWidth:       5px;
 @tooltipArrowColor:       @tooltipBackground;
 
-@popoverBackground:       lighten(@grayLighter,5%);
+@popoverBackground:       @blueDark;
 @popoverArrowWidth:       10px;
-@popoverArrowColor:       lighten(@grayLighter,5%);
-@popoverTitleBackground:  darken(@popoverBackground, 3%);
+@popoverArrowColor:       @blueDark;
+@popoverTitleBackground:  @blueDark;
 
 // Special enhancement for popovers
 @popoverArrowOuterWidth:  @popoverArrowWidth + 1;