git.roojs.org Git - bootswatch/blob - bower_components/font-awesome/src/assets/less/site.less

   1 ---
   2 ---
   3 @import "bootstrap-{{ site.bootstrap.version }}/bootstrap.less";
   4 @import "bootstrap-{{ site.bootstrap.version }}/responsive-utilities.less";
   5 @import "sticky-footer.less";
   6
   7 @import "mixins.less";
   8 @import "variables.less";
   9 @import "lazy.less";
  10
  11 .navbar .brand {
  12   font-family: @serifFontFamily;
  13   .icon-flag { padding-right: 3px; }
  14 }
  15
  16 .navbar .nav > li > a { padding: 12px 10px 9px; }
  17 .navbar .nav.pull-right { margin-right: -10px; }
  18 //.navbar, .jumbotron, #social-buttons { min-width: 990px; } // necessary fix for non-responsive layouts
  19
  20 h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
  21
  22 #iconCarousel {
  23   a { color: @white; }
  24   @size: 220px;
  25   font-size: @size;
  26   text-align: center;
  27   line-height: @size + 5;
  28   text-shadow: 2px 2px 3px @grayDarker;
  29   .carousel-control {
  30     top: @size + 33px;
  31     .square(30px);
  32     background: none;
  33     border-width: 0;
  34     font-size: 30px;
  35     line-height: 25px;
  36     left: 300/2 - 33px;
  37     &.right {
  38       left: auto;
  39       right: 300/2 - 33px;
  40     }
  41   }
  42 }
  43
  44 .jumbotron {
  45   background: @red;
  46   border-bottom: 1px solid @redDark;
  47   &, h1 { color: @white; }
  48   #gradient > .directional(@red, mix(@red, @redDark, 90%), -40deg);
  49 //  background-color: @red;
  50
  51 //  &:after {
  52 //    content:'';
  53 //    display:block;
  54 //    position:absolute;
  55 //    top:0;
  56 //    right:0;
  57 //    bottom:0;
  58 //    left:0;
  59 //    background:url(../img/grain-tm400.png);
  60 //    opacity:.5;
  61 //  }
  62
  63   h1 {
  64     font-size: 80px;
  65     letter-spacing: -2px;
  66     line-height: 1;
  67   }
  68   p {
  69     margin-top: 15px;
  70     margin-bottom: 15px;
  71     font-size: 30px;
  72     line-height: 1.3;
  73     font-weight: lighter;
  74   }
  75   .actions { margin-top: 25px;}
  76   text-shadow: 2px 2px 2px @grayDark;
  77   ul {
  78     margin-left: 50px;
  79     li {
  80       &.icon-large:before {
  81         text-indent: -2em;
  82         vertical-align: baseline;
  83       }
  84       font-size: 15px;
  85       line-height: 30px;
  86       text-shadow: 1px 1px 1px @grayDark;
  87     }
  88   }
  89   .btn-large {
  90     font-family: @serifFontFamily;
  91     font-weight: 500;
  92     font-size: 24px;
  93     padding: 17px 30px;
  94     letter-spacing: -1px;
  95   }
  96   .hero-content {
  97     text-align: center;
  98   }
  99   .shameless-self-promotion {
 100     font-size: 14px;
 101     margin-top: 25px;
 102     color: mix(@white, @red, 40%);
 103     text-shadow: none;
 104     a { color: mix(@white, @red, 70%); }
 105     a:hover { color: mix(@white, @red, 100%); }
 106   }
 107 }
 108
 109 .jumbotron-index {
 110   padding: 40px 0;
 111   h1 {
 112     font-size: 80px;
 113     letter-spacing: -2px;
 114     line-height: 1;
 115     margin: 0 0 15px;
 116   }
 117   p {
 118     margin-top: 15px;
 119     margin-bottom: 15px;
 120     font-size: 30px;
 121     line-height: 1.3;
 122   }
 123 }
 124
 125 .jumbotron-ad {
 126   padding: 20px 0;
 127   h1 { margin-top: 25px; }
 128   p { margin-bottom: 35px; }
 129 }
 130
 131 .jumbotron-icon {
 132   padding: 20px 0 30px;
 133   #gradient > .directional(@grayLighter, mix(@grayLighter, @grayLight, 90%), -40deg);
 134   color: @grayDarker;
 135   text-shadow: 1px 1px 1px @white;
 136   border-bottom: solid 1px mix(@grayLight, @grayLighter, 50%);
 137
 138   h1 {
 139     color: @grayDarker;
 140     font-size: 40px;
 141     small {
 142       letter-spacing: normal;
 143       font-family: @sansFontFamily;
 144       font-size: @baseFontSize;
 145       margin-left: 20px;
 146     }
 147   }
 148
 149   .info-details {
 150     float: left;
 151     p {
 152       margin: 25px 0;
 153       font-weight: bold;
 154     }
 155     .dl-horizontal {
 156       dt { width: @horizontalComponentOffset - 100; }
 157       dd { margin-left: @horizontalComponentOffset - 85; }
 158     }
 159   }
 160   .icon-2 { font-size: 2em; }
 161   .icon-3 { font-size: 4em; }
 162   .icon-4 { font-size: 7em; }
 163   .icon-5 { font-size: 12em; }
 164   .icon-6 { font-size: 20em; }
 165
 166   .icon-1, .icon-2, .icon-3, .icon-4, .icon-5, .icon-6 { margin-right: 1/14em; }
 167 }
 168
 169 //.info-ad {
 170 //  float: right;
 171 //  width: 154px;
 172 //  height: 219px;
 173 //  margin-left: 15px;
 174 //}
 175
 176 .stripe-ad {
 177   margin-bottom: 22px;
 178   .lead {
 179     margin-top: 10px;
 180     margin-right: 30px;
 181   }
 182 }
 183
 184 .btn-primary {
 185   color: @grayDark;
 186   text-shadow: 0 -1px 0 rgba(255,255,255,.25);
 187   &:hover {
 188     text-shadow: 0 -1px 0 rgba(255,255,255,.25);
 189     color: @grayDark;
 190   }
 191 }
 192
 193 section { margin-top: 40px; }
 194
 195 .stacked {
 196   padding-top: 35px;
 197   height: 105px;
 198 }
 199
 200 #social-buttons {
 201   ul.unstyled { margin: 0; }
 202
 203   padding: 22px 0 17px;
 204   text-align: center;
 205   background-color: #f5f5f5;
 206   border-top: 1px solid #fff;
 207   border-bottom: 1px solid #ddd;
 208   .btn {
 209 //    font-family: @serifFontFamily;
 210       font-weight: bold;
 211 //    font-size: @baseFontSize;
 212     padding: 0px 5px;
 213     line-height: @baseLineHeight - 3;
 214     margin: 0;
 215   }
 216   .count.btn {
 217     background: @white;
 218     font-weight: normal;
 219   }
 220 }
 221
 222 .the-icons {
 223   margin-top: 22px;
 224   .span3 {
 225     a {
 226       display: block;
 227       &, &:hover { color: @grayDarker; }
 228
 229       cursor: pointer;
 230       line-height: 32px;
 231       height: 32px;
 232       padding-left: 10px;
 233       .border-radius(6px);
 234
 235       [class^="icon-"],
 236       [class*=" icon-"] {
 237         width: 32px;
 238         font-size: 14px;
 239         display: inline-block;
 240         text-align: right;
 241         margin-right: 10px;
 242       }
 243
 244       &:hover {
 245         background-color: @errorBackground;
 246         text-decoration: none;
 247         [class^="icon-"], [class*=" icon-"] {
 248           *font-size: 28px;
 249           *vertical-align: middle;
 250         }
 251
 252         [class^="icon-"]:before,
 253         [class*=" icon-"]:before {
 254           font-size: 28px;
 255           vertical-align: -5px;
 256         }
 257       }
 258     }
 259   }
 260 }
 261
 262 #why, #whats-new {
 263   .span4 { margin-bottom: 20px; }
 264   h4 {
 265     [class^="icon-"]:before,
 266     [class*=" icon-"]:before {
 267       vertical-align: -10%;
 268       font-size: 28px;
 269       display: inline-block;
 270       width: 30/28em;
 271       text-align: center;
 272       margin-right: 5px;
 273 //      color: mix(@grayLight, @grayLighter, 70%);
 274
 275       // Gradient on the icons
 276 //      background: -webkit-linear-gradient(mix(@grayLight, @grayLighter, 50%), mix(@gray, @grayLight, 50%));
 277 //      -webkit-background-clip: text;
 278 //      -webkit-text-fill-color: transparent;
 279     }
 280   }
 281 }
 282
 283
 284 .rating {
 285   unicode-bidi: bidi-override;
 286   direction: rtl;
 287
 288   font-size: 30px;
 289   span.star {
 290     font-family: FontAwesome;
 291     font-weight: normal;
 292     font-style: normal;
 293     display: inline-block;
 294     &:hover {
 295       cursor: pointer;
 296     }
 297   }
 298   span.star:before {
 299     content: "\f006"; // empty star
 300     padding-right: 5px;
 301     color: @grayLight;
 302   }
 303
 304   span.star:hover:before, span.star:hover ~ span.star:before {
 305     content: "\f005"; // solid star
 306     color: #e3cf7a;
 307   }
 308 }
 309
 310
 311 .label,
 312 .badge {
 313   background-color: @grayLighter;
 314 }
 315
 316 .well.well-transparent {
 317   background-color: transparent;
 318 }
 319
 320 footer {
 321 //  #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
 322   background-color: @red;
 323   border-top: 1px solid mix(@red, @redDark, 50%);
 324   a {
 325     color: @white;
 326     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 327     &:hover {
 328       color: @white;
 329     }
 330
 331   }
 332
 333   color: mix(@red, @white, 35%);
 334   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 335   margin-top: 60px;
 336   padding-top: 45px;
 337   padding-bottom: 60px;
 338   *zoom: 1; // ie7 hack
 339   ul {
 340 //    margin-left: 30px;
 341     line-height: 25px;
 342   }
 343
 344   .project { margin-top: 10px; }
 345 }
 346
 347 // makes dropdowns closer for split dropdown
 348 // Links
 349 .navbar .nav > li {
 350   &.dropdown-split-right > a { padding-left: 7px; }
 351   &.dropdown-split-left > a { padding-right: 0; }
 352 }
 353
 354 @import "responsive.less";