FlandreScarle7/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-12-27 14:01:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding responsive screen-sm and screen-xs

Browse Source
This commit is contained in:
davegandy 2013-10-06 12:36:59 -04:00
parent de05be2a8b
commit 838ba8af05
7 changed files with 132 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/_includes/whats-new.html
View File

@ -7,32 +7,32 @@
{% endcapture %}
{% include stripe-ad.html %}
<div id="whats-new" class="feature-list">
<section id="whats-new" class="feature-list">
<div class="row">
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-compass"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4>
Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>.
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-terminal"></i> SCSS Support</h4>
A long term solution is now in place for SCSS support. Need SASS? Try <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax">sass-convert</a>.
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-legal"></i> <a href="{{ page.relative_path }}license/">Better & Simpler License</a></h4>
SIL OFL 1.1 for font, MIT license for code. No more attribution required, but much appreciated.
</div>
<div class="col-md-4 margin-bottom-large">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-magic"></i> Pixel Perfection at 14px</h4>
Version 3 was re-created from the ground up to be razor sharp at Bootstrap's default 14px.
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-th-large"></i> <a href="http://icnfnt.com/">Font Subsetting</a></h4>
Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and <a href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a href="http://icnfnt.com/">subset</a> to get just the icons you need.
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-question-sign"></i> Want More Details?</h4>
Check out the <a href="{{ site.fontawesome.github.url }}#changelog">CHANGELOG on the GitHub project</a> to see
what's new and changed.
</div>
</div>
</div>
</section>

8
src/_layouts/icon.html
View File

@ -7,9 +7,9 @@ relative_path: ../../
<div class="container">
<div class="info-icons">
<i class="fa fa-{{ page.icon.id }} fa-6"></i>&nbsp;&nbsp;
<span class="hidden-phone">
<span class="hide-xs">
<i class="fa fa-{{ page.icon.id }} fa-5"></i>&nbsp;&nbsp;
<span class="hidden-tablet"><i class="fa fa-{{ page.icon.id }} fa-4"></i>&nbsp;&nbsp;</span>
<span class="hide-sm"><i class="fa fa-{{ page.icon.id }} fa-4"></i>&nbsp;&nbsp;</span>
<i class="fa fa-{{ page.icon.id }} fa-3"></i>&nbsp;&nbsp;
<i class="fa fa-{{ page.icon.id }} fa-2"></i>&nbsp;
</span>
@ -41,7 +41,7 @@ relative_path: ../../
<div class="container">
<section>
<div class="row">
<div class="col-md-9">
<div class="col-md-9 col-sm-9">
<p>After you get <a href="{{ page.relative_path }}get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
<div class="well well-transparent">
<div style="font-size: 24px; line-height: 1.5em;">
@ -54,7 +54,7 @@ relative_path: ../../
<br>
<div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="{{ page.relative_path }}examples/">examples</a>.</div>
</div>
<div class="col-md-3">
<div class="col-md-3 col-sm-3">
<div class="info-ad">{% include ads/carbon-light-vertical.html %}</div>
</div>
</div>

3
src/assets/less/site-2.3.2/responsive-768px-979px.less
View File

@ -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 {

2
src/assets/less/site-3.0.0.less
View File

@ -20,3 +20,5 @@
@import "site/carbonad";
@import "site/responsive/screen-lg";
@import "site/responsive/screen-sm";
@import "site/responsive/screen-xs";

3
src/assets/less/site/carbonad.less
View File

@ -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; }

47
src/assets/less/site/responsive/screen-sm.less Normal file
View File

@ -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; }
}

68
src/assets/less/site/responsive/screen-xs.less Normal file
View File

@ -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; }
}