From 838ba8af0566f43bf14bc6cf711ab70aa3bab1b3 Mon Sep 17 00:00:00 2001 From: davegandy Date: Sun, 6 Oct 2013 12:36:59 -0400 Subject: [PATCH] adding responsive screen-sm and screen-xs --- src/_includes/whats-new.html | 16 ++--- src/_layouts/icon.html | 8 +-- .../site-2.3.2/responsive-768px-979px.less | 3 - src/assets/less/site-3.0.0.less | 2 + src/assets/less/site/carbonad.less | 3 + .../less/site/responsive/screen-sm.less | 47 +++++++++++++ .../less/site/responsive/screen-xs.less | 68 +++++++++++++++++++ 7 files changed, 132 insertions(+), 15 deletions(-) create mode 100644 src/assets/less/site/responsive/screen-sm.less create mode 100644 src/assets/less/site/responsive/screen-xs.less diff --git a/src/_includes/whats-new.html b/src/_includes/whats-new.html index 1c1c2f6a8..aeb888998 100644 --- a/src/_includes/whats-new.html +++ b/src/_includes/whats-new.html @@ -7,32 +7,32 @@ {% endcapture %} {% include stripe-ad.html %} -
+
-
+

{{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}

Requested by the active community on the Font Awesome GitHub project.
-
+

SCSS Support

A long term solution is now in place for SCSS support. Need SASS? Try sass-convert.
-
+

Better & Simpler License

SIL OFL 1.1 for font, MIT license for code. No more attribution required, but much appreciated.
-
+

Pixel Perfection at 14px

Version 3 was re-created from the ground up to be razor sharp at Bootstrap's default 14px.
-
+

Font Subsetting

Thanks to @grantgordon and @johnsmclay, you can subset to get just the icons you need.
-
+

Want More Details?

Check out the CHANGELOG on the GitHub project to see what's new and changed.
-
+
diff --git a/src/_layouts/icon.html b/src/_layouts/icon.html index 5419429bf..6e5bf21ca 100644 --- a/src/_layouts/icon.html +++ b/src/_layouts/icon.html @@ -7,9 +7,9 @@ relative_path: ../../
   - +    -    +         @@ -41,7 +41,7 @@ relative_path: ../../
-
+

After you get up and running, you can place Font Awesome icons just about anywhere with the <i> tag:

@@ -54,7 +54,7 @@ relative_path: ../../
Looking for more? Check out the examples.
-
+
{% include ads/carbon-light-vertical.html %}
diff --git a/src/assets/less/site-2.3.2/responsive-768px-979px.less b/src/assets/less/site-2.3.2/responsive-768px-979px.less index 3d3ebcac7..0f18d7cd4 100755 --- a/src/assets/less/site-2.3.2/responsive-768px-979px.less +++ b/src/assets/less/site-2.3.2/responsive-768px-979px.less @@ -46,9 +46,6 @@ margin: 0; font-size: 19px; } - @ad-width: 302px; - .span8 { width: 476px + 228px - @ad-width; } - .span4 { width: @ad-width; } } #why, #whats-new, #new-styles { diff --git a/src/assets/less/site-3.0.0.less b/src/assets/less/site-3.0.0.less index f8eb0a5c6..c91b0b188 100644 --- a/src/assets/less/site-3.0.0.less +++ b/src/assets/less/site-3.0.0.less @@ -20,3 +20,5 @@ @import "site/carbonad"; @import "site/responsive/screen-lg"; +@import "site/responsive/screen-sm"; +@import "site/responsive/screen-xs"; diff --git a/src/assets/less/site/carbonad.less b/src/assets/less/site/carbonad.less index d32120fb0..5e6033b55 100644 --- a/src/assets/less/site/carbonad.less +++ b/src/assets/less/site/carbonad.less @@ -3,7 +3,10 @@ background: @table-bg-accent; border-color: @table-border-color; border-radius: (@border-radius-base); + border-width: 1px; float: right; margin-left: @buffer-lg; } } + +.info-ad #carbonads-container .carbonad { float: none; } \ No newline at end of file diff --git a/src/assets/less/site/responsive/screen-sm.less b/src/assets/less/site/responsive/screen-sm.less new file mode 100644 index 000000000..4d2650ee9 --- /dev/null +++ b/src/assets/less/site/responsive/screen-sm.less @@ -0,0 +1,47 @@ +@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + #icon-carousel { + @size: 200px; + font-size: @size; + line-height: @size + 5; + .carousel-control { + top: @size + 30px; + .square(30px); + font-size: 40px; + line-height: 40px; + left: 228/2 - 40px; + &.right { + right: 228/2 - 40px; + } + } + } + + .jumbotron-carousel { + padding: 50px 0; + h1 { font-size: 65px; } + p { font-size: 25px; } + .shameless-self-promotion { font-size: 12px; } + } + + .jumbotron-ad { + p { font-size: 28px; } + } + + .jumbotron-icon { + h1 small { + display: block; + margin-top: 15px; + margin-left: 0; + line-height: 20px; + } + } + + .stripe-ad { + .lead { + margin: 0; + padding-top: 5px; + font-size: 19px; + } + } + + .hide-sm { display: none; } +} diff --git a/src/assets/less/site/responsive/screen-xs.less b/src/assets/less/site/responsive/screen-xs.less new file mode 100644 index 000000000..96a93e5df --- /dev/null +++ b/src/assets/less/site/responsive/screen-xs.less @@ -0,0 +1,68 @@ +@media (max-width: @screen-xs-max) { + #icon-carousel { + @size: 180px; + font-size: @size; + line-height: @size; + width: 280px; + margin: 30px auto 0; + .carousel-control { + top: @size / 2; + .square(44px); + font-size: 44px; + line-height: 44px; + left: -7px; + &.right { right: -7px; } + } + } + + .jumbotron-carousel { + h1 { font-size: 58px; } + p { font-size: 24px; } + .btn-large { + font-size: 20px; + padding: 14px 26px; + } + .shameless-self-promotion { font-size: 12px; } + } + + .jumbotron-ad { + h1 { font-size: 39px; } + p { + font-size: 20px; + margin-bottom: 20px; + } + } + + .jumbotron-icon { + .fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 0; } + .fa-6 { font-size: 16em; } + h1 small { + display: block; + margin-top: 15px; + margin-left: 0; + line-height: 20px; + } + } + + .stripe-ad .lead { + margin-top: @buffer-lg; + padding: 0; + } + + #carbonads-container { + .carbonad { + margin-left: 0; + margin-top: -20px; + float: none; + width: 100%; + height: 120px; + } + } + #azcarbon { + width: 300px; + margin: 0 auto; + } + .info-ad #carbonads-container .carbonad { margin-top: @buffer-lg; } + + .hide-xs { display: none; } +} \ No newline at end of file