library-mirrors/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-11-20 11:14:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

responsive for tablet & phone

Browse Source
This commit is contained in:
davegandy 2013-06-06 13:59:03 -02:30
parent 796f930263
commit 63787fc5b3
11 changed files with 168 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
source/_includes/footer.html
View File

@ -1,13 +1,16 @@
<footer class="footer hidden-print"> <footer class="footer hidden-print">
<div class="container text-center"> <div class="container text-center">
<div> <div>
<i class="icon-flag"></i> Font Awesome {{ site.fontawesome.version }} &middot; <i class="icon-flag"></i> Font Awesome {{ site.fontawesome.version }}
<span class="hidden-phone">&middot;</span><br class="visible-phone">
Created and Maintained by Dave Gandy &middot; Created and Maintained by Dave Gandy &middot;
<a href="http://twitter.com/byscuits">@byscuits</a> <a href="http://twitter.com/byscuits">@byscuits</a>
</div> </div>
<div> <div>
Font Awesome font licensed under <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.version }}</a> &middot; Font Awesome font licensed under <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.version }}</a>
Code licensed under <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.version }}</a> &middot; <span class="hidden-phone">&middot;</span><br class="visible-phone">
Code licensed under <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.version }}</a>
<span class="hidden-phone hidden-tablet">&middot;</span><br class="visible-phone visible-tablet">
Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a> Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a>
</div> </div>
<div> <div>

2
source/_includes/jumbotron-slider.html
View File

@ -16,7 +16,7 @@
<a href="{{ site.fontawesome.github.url }}" <a href="{{ site.fontawesome.github.url }}"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);"> onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);">
GitHub Project</a> &nbsp;&nbsp;&middot;&nbsp;&nbsp; GitHub Project</a> &nbsp;&nbsp;&middot;&nbsp;&nbsp;
Version {{ site.fontawesome.version }} &nbsp;&nbsp;&middot;&nbsp;&nbsp; Version {{ site.fontawesome.version }} <span class="hidden-phone">&nbsp;&nbsp;&middot;&nbsp;&nbsp;</span><br class="visible-phone">
Created &amp; Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a> Created &amp; Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
</div> </div>
</div> </div>

112
source/_includes/navbar.html
View File

@ -1,59 +1,69 @@
<div class="navbar navbar-inverse navbar-static-top hidden-print"> <div class="navbar navbar-inverse navbar-static-top hidden-print">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="{{ page.relative_path }}"><i class="icon-flag"></i> Font Awesome</a> <a class="brand" href="{{ page.relative_path }}"><i class="icon-flag"></i> Font Awesome</a>
<ul class="nav"> <div class="nav-collapse collapse">
<li{% if page.navbar_active == "home" %} class="active"{% endif %}><a href="{{ page.relative_path }}">Home</a></li> <ul class="nav">
<li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ page.relative_path }}get-started/">Get Started</a></li> <li class="hidden-tablet {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li>
<li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li> <li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ page.relative_path }}get-started/">Get Started</a></li>
<li class="dropdown dropdown-split-right{% if page.navbar_active == "icons" %} active{% endif %}"> <li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <li class="dropdown dropdown-split-right hidden-phone{% if page.navbar_active == "icons" %} active{% endif %}">
<i class="icon-caret-down"></i> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
</a> <i class="icon-caret-down"></i>
<ul class="dropdown-menu pull-right"> </a>
<li><a href="{{ page.relative_path }}icons/"><i class="icon-flag icon-fixed-width"></i>&nbsp; Icons</a></li> <ul class="dropdown-menu pull-right">
<li class="divider"></li> <li><a href="{{ page.relative_path }}icons/"><i class="icon-flag icon-fixed-width"></i>&nbsp; Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#new"><i class="icon-shield icon-fixed-width"></i>&nbsp; New Icons in {{ site.fontawesome.version }}</a></li> <li class="divider"></li>
<li><a href="{{ page.relative_path }}icons/#web-application"><i class="icon-camera-retro icon-fixed-width"></i>&nbsp; Web Application Icons</a></li> <li><a href="{{ page.relative_path }}icons/#new"><i class="icon-shield icon-fixed-width"></i>&nbsp; New Icons in {{ site.fontawesome.version }}</a></li>
<li><a href="{{ page.relative_path }}icons/#currency"><i class="icon-won icon-fixed-width"></i>&nbsp; Currency Icons</a></li> <li><a href="{{ page.relative_path }}icons/#web-application"><i class="icon-camera-retro icon-fixed-width"></i>&nbsp; Web Application Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#text-editor"><i class="icon-file-text-alt icon-fixed-width"></i>&nbsp; Text Editor Icons</a></li> <li><a href="{{ page.relative_path }}icons/#currency"><i class="icon-won icon-fixed-width"></i>&nbsp; Currency Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#directional"><i class="icon-hand-right icon-fixed-width"></i>&nbsp; Directional Icons</a></li> <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="icon-file-text-alt icon-fixed-width"></i>&nbsp; Text Editor Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#video-player"><i class="icon-play-sign icon-fixed-width"></i>&nbsp; Video Player Icons</a></li> <li><a href="{{ page.relative_path }}icons/#directional"><i class="icon-hand-right icon-fixed-width"></i>&nbsp; Directional Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#brand"><i class="icon-github icon-fixed-width"></i>&nbsp; Brand Icons</a></li> <li><a href="{{ page.relative_path }}icons/#video-player"><i class="icon-play-sign icon-fixed-width"></i>&nbsp; Video Player Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#medical"><i class="icon-medkit icon-fixed-width"></i>&nbsp; Medical Icons</a></li> <li><a href="{{ page.relative_path }}icons/#brand"><i class="icon-github icon-fixed-width"></i>&nbsp; Brand Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#medical"><i class="icon-medkit icon-fixed-width"></i>&nbsp; Medical Icons</a></li>
</ul>
</li>
<li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="dropdown dropdown-split-right hidden-phone{% if page.navbar_active == "examples" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="divider"></li>
<li><a href="{{ page.relative_path }}examples/#new-styles">New Styles</a></li>
<li><a href="{{ page.relative_path }}examples/#inline-icons">Inline Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#larger-icons">Larger Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</a></li>
<li><a href="{{ page.relative_path }}examples/#buttons">Buttons</a></li>
<li><a href="{{ page.relative_path }}examples/#button-groups">Button Groups</a></li>
<li><a href="{{ page.relative_path }}examples/#button-dropdowns">Button Dropdowns</a></li>
<li><a href="{{ page.relative_path }}examples/#bulleted-lists">Bulleted Lists</a></li>
<li><a href="{{ page.relative_path }}examples/#navigation">Navigation</a></li>
<li><a href="{{ page.relative_path }}examples/#form-inputs">Form Inputs</a></li>
<li><a href="{{ page.relative_path }}examples/#animated-spinner">Animated Spinner</a></li>
<li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped</a></li>
<li><a href="{{ page.relative_path }}examples/#stacked">Stacked</a></li>
<li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
</ul>
</li>
<li{% if page.navbar_active == "whats-new" %} class="active"{% endif %}><a href="{{ page.relative_path }}whats-new/">
<span class="hidden-tablet">What's </span>New</a>
</li>
<li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li>
<li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
</ul> </ul>
</li> <ul class="nav pull-right">
<li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li> <li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
<li class="dropdown dropdown-split-right{% if page.navbar_active == "examples" %} active{% endif %}"> </ul>
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> </div>
<i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="divider"></li>
<li><a href="{{ page.relative_path }}examples/#new-styles">New Styles</a></li>
<li><a href="{{ page.relative_path }}examples/#inline-icons">Inline Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#larger-icons">Larger Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</a></li>
<li><a href="{{ page.relative_path }}examples/#buttons">Buttons</a></li>
<li><a href="{{ page.relative_path }}examples/#button-groups">Button Groups</a></li>
<li><a href="{{ page.relative_path }}examples/#button-dropdowns">Button Dropdowns</a></li>
<li><a href="{{ page.relative_path }}examples/#bulleted-lists">Bulleted Lists</a></li>
<li><a href="{{ page.relative_path }}examples/#navigation">Navigation</a></li>
<li><a href="{{ page.relative_path }}examples/#form-inputs">Form Inputs</a></li>
<li><a href="{{ page.relative_path }}examples/#animated-spinner">Animated Spinner</a></li>
<li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped</a></li>
<li><a href="{{ page.relative_path }}examples/#stacked">Stacked</a></li>
<li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
</ul>
</li>
<li{% if page.navbar_active == "whats-new" %} class="active"{% endif %}><a href="{{ page.relative_path }}whats-new/">What's New</a></li>
<li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li>
<li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
</ul>
<ul class="nav pull-right">
<li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
</ul>
</div> </div>
</div> </div>
</div> </div>

2
source/_includes/whats-new.html
View File

@ -24,8 +24,6 @@
<a href="{{ page.relative_path }}examples/#stacked">stacking icons</a>, and better <a href="{{ page.relative_path }}examples/#stacked">stacking icons</a>, and better
<a href="{{ page.relative_path }}examples/#bulleted-lists">bulleted lists</a>. <a href="{{ page.relative_path }}examples/#bulleted-lists">bulleted lists</a>.
</div> </div>
</div>
<div class="row">
<div class="span4 margin-bottom-large"> <div class="span4 margin-bottom-large">
<h4><i class="icon-magic"></i> Pixel Perfection at 14px</h4> <h4><i class="icon-magic"></i> Pixel Perfection at 14px</h4>
Version 3.0 was re-created from the ground up to be razor sharp at Bootstrap's default 14px. Version 3.0 was re-created from the ground up to be razor sharp at Bootstrap's default 14px.

4
source/_includes/why.html
View File

@ -12,8 +12,6 @@
<h4><i class="icon-fullscreen"></i> Infinite Scalability</h4> <h4><i class="icon-fullscreen"></i> Infinite Scalability</h4>
Scalable vector graphics means every icon looks awesome at any size. Scalable vector graphics means every icon looks awesome at any size.
</div> </div>
</div>
<div class="row">
<div class="span4"> <div class="span4">
<h4><i class="icon-microphone"></i> Free, as in Speech</h4> <h4><i class="icon-microphone"></i> Free, as in Speech</h4>
Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>. Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>.
@ -26,8 +24,6 @@
<h4><i class="icon-eye-open"></i> Perfect on Retina Displays</h4> <h4><i class="icon-eye-open"></i> Perfect on Retina Displays</h4>
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays. Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
</div> </div>
</div>
<div class="row">
<div class="span4"> <div class="span4">
<h4><i class="icon-thumbs-up-alt"></i> Made for Bootstrap</h4> <h4><i class="icon-thumbs-up-alt"></i> Made for Bootstrap</h4>
Designed from scratch to be fully compatible with <a href="{{ site.bootstrap.url }}">Bootstrap {{ site.bootstrap.version }}</a>. Designed from scratch to be fully compatible with <a href="{{ site.bootstrap.url }}">Bootstrap {{ site.bootstrap.version }}</a>.

46
source/assets/less/responsive-767px-max.less
View File

@ -4,6 +4,52 @@
@media (max-width: 767px) { @media (max-width: 767px) {
.jumbotron, footer, #social-buttons {
padding-left: 20px;
padding-right: 20px;
margin-right: -20px;
margin-left: -20px;
}
#iconCarousel {
@size: 220px;
width: 352px;
margin: 30px auto 0;
.carousel-control {
top: @size / 2;
.square(44px);
font-size: 44px;
line-height: 44px;
left: 0;
&.right { right: 0; }
}
}
.jumbotron-index {
h1 { font-size: 50px; }
p { font-size: 20px; }
.btn-large {
font-size: 20px;
padding: 14px 26px;
}
.shameless-self-promotion { font-size: 12px; }
}
.jumbotron-ad {
h1 { font-size: 48px; }
p {
font-size: 24px;
margin-bottom: 20px;
}
}
.stripe-ad .lead {
margin: 0 0 30px;
}
.sticky-footer(170px, 40px, 40px, 60px); // sets default values for sticky footer
.footer {
padding-left: 20px;
padding-right: 20px;
}
} }

49
source/assets/less/responsive-768px-979px.less
View File

@ -5,5 +5,54 @@
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 979px) {
#iconCarousel {
@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-index {
padding: 50px 0;
h1 { font-size: 65px; }
p { font-size: 25px; }
.shameless-self-promotion { font-size: 12px; }
}
.jumbotron-ad {
p { font-size: 28px; }
}
.stripe-ad {
.lead {
margin: 0;
font-size: 19px;
}
@ad-width: 302px;
.span8 { width: 476px + 228px - @ad-width; }
.span4 { width: @ad-width; }
}
#why, #whats-new {
.span4 { width: 352px; }
}
.the-icons {
.span3 { width: 228px; }
}
.sticky-footer(110px, 40px, 40px, 60px); // sets default values for sticky footer
.footer {
padding-left: 20px;
padding-right: 20px;
}
} }

6
source/assets/less/site.less
View File

@ -15,7 +15,7 @@
.navbar .nav > li > a { padding: 12px 10px 9px; } .navbar .nav > li > a { padding: 12px 10px 9px; }
.navbar .nav.pull-right { margin-right: -10px; } .navbar .nav.pull-right { margin-right: -10px; }
.navbar, .jumbotron, #social-buttons { min-width: 990px; } // necessary fix for non-responsive layouts //.navbar, .jumbotron, #social-buttons { min-width: 990px; } // necessary fix for non-responsive layouts
h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; } h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
@ -255,9 +255,7 @@ section { margin-top: 40px; }
} }
#why, #whats-new { #why, #whats-new {
.row { .span4 { margin-bottom: 20px; }
margin-bottom: 20px;
}
h4 { h4 {
[class^="icon-"]:before, [class^="icon-"]:before,
[class*=" icon-"]:before { [class*=" icon-"]:before {

2
source/assets/less/sticky-footer.less
View File

@ -12,6 +12,6 @@ html, body {
height: 100%; height: 100%;
} }
.footer { min-width: 990px; } // necessary fix for non-responsive layouts //.footer { min-width: 990px; } // necessary fix for non-responsive layouts
.sticky-footer(90px, 40px, 40px, 60px); // sets default values for sticky footer .sticky-footer(90px, 40px, 40px, 60px); // sets default values for sticky footer

2
source/assets/less/variables.less
View File

@ -219,7 +219,7 @@
// Navbar // Navbar
// ------------------------- // -------------------------
@navbarCollapseWidth: 979px; @navbarCollapseWidth: 767px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 40px; @navbarHeight: 40px;

2
source/community.html
View File

@ -4,7 +4,7 @@ title: The Font Awesome Community
navbar_active: community navbar_active: community
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="icon-thumbs-up icon-large"></i>&nbsp; Community{% endcapture %} {% capture jumbotron_h1 %}<i class="icon-thumbs-up-alt icon-large"></i>&nbsp; Community{% endcapture %}
{% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %} {% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}