Permalink
Browse files

Working on banner layout.

  • Loading branch information...
1 parent 090ca84 commit b90e811761070eda7b66e0fa7f0b2a615ab0b67e @rishabhsrao committed Nov 14, 2012
Showing with 66 additions and 28 deletions.
  1. +14 −24 index.html
  2. +23 −2 less/component/body/body.less
  3. +21 −2 less/style.css
  4. +8 −0 less/util/common.less
View
@@ -47,46 +47,36 @@
<div class="main container">
- <div class="row-fluid">
- <div class="span6"></div>
- <div class="span6">
- <form class="pull-right form-search">
- <div class="control-group">
- <div class="controls">
- <div class="input-append">
- <input class="search-query" type="text" placeholder="Search..." data-provide="typeahead" data-items="4" data-source="[&quot;grc&quot;,&quot;it&quot;,&quot;software&quot;,&quot;support&quot;,&quot;risk&quot;,&quot;mitigation&quot;,&quot;plan&quot;,&quot;legal&quot;,&quot;law&quot;,&quot;IT GRC&quot;,&quot;Risk Management&quot;,&quot;Legal GRC&quot;,&quot;Policy Management&quot;,&quot;policy&quot;,&quot;data&quot;,&quot;collection&quot;]" />
- <button type="submit" class="btn"><i class="icon-search"></i></button>
- </div>
- </div>
- </div>
- </form>
- </div>
- </div>
-
<section class="find-language">Find languages</section>
<section class="info-banner row-fluid">
<div class="metrics span8">
- <div class="info-box metric">
+ <div class="row-fluid">
+ <div class="info-box span3 metric">
<span class="title">Projects</span>
<span class="value">22</span>
</div>
- <div class="info-box metric">
+ <div class="info-box span3 metric">
<span class="title">Translators</span>
<span class="value">15</span>
</div>
- <div class="info-box metric">
+
+ <div class="info-box span3 picture"></div>
+ <div class="info-box span3 picture"></div>
+ </div>
+
+ <div class="row-fluid">
+ <div class="info-box span3 metric">
<span class="title">Completed Projects</span>
<span class="value">13</span>
</div>
- <div class="info-box metric">
+ <div class="info-box span3 metric">
<span class="title">Completion</span>
<span class="value">67%</span>
</div>
- <div class="info-box picture"></div>
- <div class="info-box picture"></div>
- <div class="info-box picture"></div>
- <div class="info-box picture"></div>
+ <div class="info-box span3 picture"></div>
+ <div class="info-box span3 picture"></div>
+ </div>
</div>
<aside class="register span4">
@@ -7,7 +7,28 @@
.drop-shadow();
}
-section.home-section {
- margin: 100px auto;
+section.info-banner {
+ @baseMargin: @gridGutterWidth / 4;
+
+ .info-box {
+ background: #85BEFF;
+ margin: @baseMargin;
+ height: @gridColumnWidth * 2.5;
+ padding: (@baseMargin * 8) @baseMargin;
+
+ &:first-child {
+ margin-left: @baseMargin;
+ }
+
+ .title {
+ margin: @baseMargin;
+ display: block;
+ font-size: @baseFontSize * 1.2;
+ }
+
+ .value {
+ font-size: @baseFontSize * 2;
+ }
+ }
}
View
@@ -10278,6 +10278,11 @@ ul.horizontal-list li {
i {
color: #777777;
}
+@media (max-width: 480px) {
+ .row-fluid [class*="span"]:first-child {
+ margin-left: inherit;
+ }
+}
.main {
padding: 0px 50px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
@@ -10286,8 +10291,22 @@ i {
-moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
}
-section.home-section {
- margin: 100px auto;
+section.info-banner .info-box {
+ background: #85BEFF;
+ margin: 5px;
+ height: 150px;
+ padding: 40px 5px;
+}
+section.info-banner .info-box:first-child {
+ margin-left: 5px;
+}
+section.info-banner .info-box .title {
+ margin: 5px;
+ display: block;
+ font-size: 18px;
+}
+section.info-banner .info-box .value {
+ font-size: 30px;
}
.dropdown-form {
margin: 15px;
View
@@ -14,4 +14,12 @@ ul.horizontal-list li {
i {
color: @gray;
+}
+
+// Fix for mobile layout
+// See https://github.com/twitter/bootstrap/pull/5028
+@media (max-width: 480px) {
+ .row-fluid [class*="span"]:first-child {
+ margin-left: inherit;
+ }
}

0 comments on commit b90e811

Please sign in to comment.