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">
<div class="container text-center">
<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;
<a href="http://twitter.com/byscuits">@byscuits</a>
</div>
<div>
Font Awesome font licensed under <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.version }}</a> &middot;
Code licensed under <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.version }}</a> &middot;
Font Awesome font licensed under <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.version }}</a>
<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>
</div>
<div>

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

@ -16,7 +16,7 @@
<a href="{{ site.fontawesome.github.url }}"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);">
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>
</div>
</div>

18
source/_includes/navbar.html
View File

@ -1,12 +1,19 @@
<div class="navbar navbar-inverse navbar-static-top hidden-print">
<div class="navbar-inner">
<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>
<div class="nav-collapse collapse">
<ul class="nav">
<li{% if page.navbar_active == "home" %} class="active"{% endif %}><a href="{{ page.relative_path }}">Home</a></li>
<li class="hidden-tablet {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</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-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li>
<li class="dropdown dropdown-split-right{% if page.navbar_active == "icons" %} active{% endif %}">
<li class="dropdown dropdown-split-right hidden-phone{% if page.navbar_active == "icons" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-caret-down"></i>
</a>
@ -24,7 +31,7 @@
</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{% if page.navbar_active == "examples" %} active{% endif %}">
<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>
@ -47,7 +54,9 @@
<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 == "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>
@ -56,4 +65,5 @@
</ul>
</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/#bulleted-lists">bulleted lists</a>.
</div>
</div>
<div class="row">
<div class="span4 margin-bottom-large">
<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.

4
source/_includes/why.html
View File

@ -12,8 +12,6 @@
<h4><i class="icon-fullscreen"></i> Infinite Scalability</h4>
Scalable vector graphics means every icon looks awesome at any size.
</div>
</div>
<div class="row">
<div class="span4">
<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>.
@ -26,8 +24,6 @@
<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.
</div>
</div>
<div class="row">
<div class="span4">
<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>.

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

@ -4,6 +4,52 @@
@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) {
#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.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; }
@ -255,9 +255,7 @@ section { margin-top: 40px; }
}
#why, #whats-new {
.row {
margin-bottom: 20px;
}
.span4 { margin-bottom: 20px; }
h4 {
[class^="icon-"]:before,
[class*=" icon-"]:before {

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

@ -12,6 +12,6 @@ html, body {
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

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

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

2
source/community.html
View File

@ -4,7 +4,7 @@ title: The Font Awesome Community
navbar_active: community
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 %}
{% include jumbotron.html %}