diff --git a/build/_includes/examples.html b/build/_includes/examples.html index 730e39ad0..ded9c802b 100644 --- a/build/_includes/examples.html +++ b/build/_includes/examples.html @@ -1,6 +1,19 @@
-

Many examples appreciatively re-used from the Bootstrap documentation.

+
+

Examples

+

+ After you get up and running, you can place Font Awesome icons just about anywhere with the <i> tag. + Many examples appreciatively re-used from the Bootstrap documentation. +

+
+
+
+ {% include ads/carbon-light-horizontal.html %} +
+
+ +

Use Font Awesome icons in:

diff --git a/build/_includes/icons/new.html b/build/_includes/icons/new.html index 92a550bd8..af481ac29 100644 --- a/build/_includes/icons/new.html +++ b/build/_includes/icons/new.html @@ -1,49 +1,65 @@ -
-
-

New Icons in {{ site.font-awesome.version }}

-

- You asked, Font Awesome delivers with 40 shiny new icons in version {{ site.font-awesome.version }}. New icons can be requested on the - Font Awesome GitHub project. Or even - better, you can contribute your own icons. -

+
+ {% if page.navbar_active == "icons" %} +
+
+

New Icons in {{ site.font-awesome.version }}

+

+ You asked, Font Awesome delivers with 40 shiny new icons in version {{ site.font-awesome.version }}. New icons can be requested on the + Font Awesome GitHub project. +

+
+
+
+ {% include ads/carbon-light-horizontal.html %} +
+ {% else %} +

New Icons in {{ site.font-awesome.version }}

+

+ You asked, Font Awesome delivers with 40 shiny new icons in version {{ site.font-awesome.version }}. New icons can be requested on the + Font Awesome GitHub project. Or even + better, you can contribute your own icons. +

+ {% endif %} -
- +
+
+ +
diff --git a/build/_includes/integration.html b/build/_includes/integration.html index 1b39ea22b..350f6d056 100644 --- a/build/_includes/integration.html +++ b/build/_includes/integration.html @@ -1,6 +1,15 @@
-

Integration

-

It's easy to integrate Font Awesome into Twitter Bootstrap, or even use it on its own.

+
+
+

Integration

+

It's easy to get started with Font Awesome. And it plays really nicely with Bootstrap.

+
+
+
+ {% include ads/carbon-light-horizontal.html %} +
+
+

Easy Bootstrap + Font Awesome Integration

diff --git a/build/_includes/jumbotron.html b/build/_includes/jumbotron.html index 76aef4d00..6d6816d3a 100644 --- a/build/_includes/jumbotron.html +++ b/build/_includes/jumbotron.html @@ -1,6 +1,5 @@
-
{% include ads/carbon-dark-vertical.html %}

{{ jumbotron_h1 }}

{{ jumbotron_p }}

diff --git a/build/_includes/roadmap.html b/build/_includes/roadmap.html index b066f5f08..426911ddb 100644 --- a/build/_includes/roadmap.html +++ b/build/_includes/roadmap.html @@ -1,8 +1,15 @@
-

Here's the plan for future updates.

-
    -
  • Easier sub-setting with icon packs.
    • -
  • More icons. Have any requests? Open an issue in the Font Awesome GitHub project.
    • -
  • Tricks and tips for super-awesome creative CSS methods, like the star example above.
    • -
+
+
+

Here's the plan for future updates.

+
    +
  • Easier sub-setting with icon packs.
    • +
  • More icons. Have any requests? Open an issue in the Font Awesome GitHub project.
    • +
  • Tricks and tips for super-awesome creative CSS methods, like the star example above.
    • +
+
+
+ {% include ads/carbon-light-horizontal.html %} +
+
diff --git a/build/_includes/whats-new.html b/build/_includes/whats-new.html index 9d2e2d1a2..4daa3385e 100644 --- a/build/_includes/whats-new.html +++ b/build/_includes/whats-new.html @@ -1,4 +1,19 @@
+
+
+

New Features

+

+ We're always making Font Awesome a little awesome-er. Have some ideas for new features? Head on over to the + Font Awesome GitHub project. +

+
+
+
+ {% include ads/carbon-light-horizontal.html %} +
+
+ +

Pixel Perfection at 14px

diff --git a/build/assets/css/site.css b/build/assets/css/site.css index d5f97e4fc..98196b75e 100644 --- a/build/assets/css/site.css +++ b/build/assets/css/site.css @@ -5276,6 +5276,187 @@ body { height: 110px; padding: 30px 0 30px; } +.padding-none { + padding: 0 !important; +} +.padding { + padding: 10px !important; +} +.padding-small { + padding: 5px !important; +} +.padding-large { + padding: 22px !important; +} +.padding-top-none { + padding-top: 0 !important; +} +.padding-top { + padding-top: 10px !important; +} +.padding-top-small { + padding-top: 5px !important; +} +.padding-top-large { + padding-top: 22px !important; +} +.padding-right-none { + padding-right: 0 !important; +} +.padding-right { + padding-right: 10px !important; +} +.padding-right-small { + padding-right: 5px !important; +} +.padding-right-large { + padding-right: 22px !important; +} +.padding-bottom-none { + padding-bottom: 0 !important; +} +.padding-bottom { + padding-bottom: 10px !important; +} +.padding-bottom-small { + padding-bottom: 5px !important; +} +.padding-bottom-large { + padding-bottom: 22px !important; +} +.padding-left-none { + padding-left: 0 !important; +} +.padding-left { + padding-left: 10px !important; +} +.padding-left-small { + padding-left: 5px !important; +} +.padding-left-large { + padding-left: 22px !important; +} +.margin-none { + margin: 0 !important; +} +.margin { + margin: 10px !important; +} +.margin-small { + margin: 5px !important; +} +.margin-large { + margin: 22px !important; +} +.margin-top-none { + margin-top: 0 !important; +} +.margin-top { + margin-top: 10px !important; +} +.margin-top-large { + margin-top: 22px !important; +} +.margin-top-small { + margin-top: 5px !important; +} +.margin-right-none { + margin-right: 0 !important; +} +.margin-right { + margin-right: 10px !important; +} +.margin-right-large { + margin-right: 22px !important; +} +.margin-right-small { + margin-right: 5px !important; +} +.margin-bottom-none { + margin-bottom: 0 !important; +} +.margin-bottom { + margin-bottom: 10px !important; +} +.margin-bottom-large { + margin-bottom: 22px !important; +} +.margin-bottom-small { + margin-bottom: 5px !important; +} +.margin-left-none { + margin-left: 0 !important; +} +.margin-left { + margin-left: 10px !important; +} +.margin-left-large { + margin-left: 22px !important; +} +.margin-left-small { + margin-left: 5px !important; +} +.border-left-none { + border-left: none !important; +} +.border-right-none { + border-right: none !important; +} +.border-bottom-none { + border-bottom: none !important; +} +.border-top-none { + border-top: none !important; +} +.display-block { + display: block; +} +.no-underline:hover { + text-decoration: none; +} +.clickable { + cursor: pointer; +} +.strong { + font-weight: bold; +} +.em { + font-style: italic; +} +.small { + font-size: 85%; +} +.no-link { + color: #333333; +} +.text-sans-serif { + font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; +} +.text-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.text-default { + font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 20px; + font-weight: normal; +} +.hilite { + color: #c83025; +} +.hilite:hover { + color: #9d261d; + text-decoration: underline; +} +.hilite [class^="icon-"]:before, +.hilite [class*=" icon-"]:before { + display: inline; +} +.strike { + text-decoration: line-through; +} .navbar .brand { font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif; } diff --git a/build/assets/less/lazy.less b/build/assets/less/lazy.less new file mode 100644 index 000000000..34e22fc15 --- /dev/null +++ b/build/assets/less/lazy.less @@ -0,0 +1,83 @@ +.padding-none { padding: 0 !important; } +.padding { padding: 10px !important; } +.padding-small { padding: 5px !important; } +.padding-large { padding: 22px !important; } + +.padding-top-none { padding-top: 0 !important; } +.padding-top { padding-top: 10px !important; } +.padding-top-small { padding-top: 5px !important; } +.padding-top-large { padding-top: 22px !important; } + +.padding-right-none { padding-right: 0 !important; } +.padding-right { padding-right: 10px !important; } +.padding-right-small { padding-right: 5px !important; } +.padding-right-large { padding-right: 22px !important; } + +.padding-bottom-none { padding-bottom: 0 !important; } +.padding-bottom { padding-bottom: 10px !important; } +.padding-bottom-small { padding-bottom: 5px !important; } +.padding-bottom-large { padding-bottom: 22px !important; } + +.padding-left-none { padding-left: 0 !important; } +.padding-left { padding-left: 10px !important; } +.padding-left-small { padding-left: 5px !important; } +.padding-left-large { padding-left: 22px !important; } + +.margin-none { margin: 0 !important; } +.margin { margin: 10px !important; } +.margin-small { margin: 5px !important; } +.margin-large { margin: 22px !important; } + +.margin-top-none { margin-top: 0 !important; } +.margin-top { margin-top: 10px !important; } +.margin-top-large { margin-top: 22px !important; } +.margin-top-small { margin-top: 5px !important; } + +.margin-right-none { margin-right: 0 !important; } +.margin-right { margin-right: 10px !important; } +.margin-right-large { margin-right: 22px !important; } +.margin-right-small { margin-right: 5px !important; } + +.margin-bottom-none { margin-bottom: 0 !important; } +.margin-bottom { margin-bottom: 10px !important; } +.margin-bottom-large { margin-bottom: 22px !important; } +.margin-bottom-small { margin-bottom: 5px !important; } + +.margin-left-none { margin-left: 0 !important; } +.margin-left { margin-left: 10px !important; } +.margin-left-large { margin-left: 22px !important; } +.margin-left-small { margin-left: 5px !important; } + +.border-left-none { border-left: none !important; } +.border-right-none { border-right: none !important; } +.border-bottom-none { border-bottom: none !important; } +.border-top-none { border-top: none !important; } + +.display-block { display: block; } // use to swap an anchor tag to span a whole row to make click target larger +.no-underline:hover { text-decoration: none; } +.clickable { cursor: pointer; } +.strong { font-weight: bold; } +.em { font-style: italic; } +.small { font-size: 85%; } // Ex: 14px base font * 85% = about 12px +.no-link { color: @grayDark; } +.text-sans-serif { font-family: @sansFontFamily; } +.text-ellipsis { .text-overflow(); } // truncates text to a single line with an ellipsis at the end +.text-default { + font-family: @sansFontFamily; + font-size: @baseFontSize; + line-height: @baseLineHeight; + font-weight: normal; +} +.hilite { + color: @linkColor; + &:hover { + color: @linkColorHover; + text-decoration: underline; + } + [class^="icon-"], [class*=" icon-"] { + &:before { + display: inline; + } + } +} +.strike { text-decoration: line-through; } diff --git a/build/assets/less/site.less b/build/assets/less/site.less index 28b61dc13..515297432 100644 --- a/build/assets/less/site.less +++ b/build/assets/less/site.less @@ -3,6 +3,7 @@ @import "mixins.less"; @import "variables.less"; +@import "lazy.less"; .navbar .brand { // padding: 11px 20px 9px;