mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2024-12-27 14:01:30 +08:00
responsive for tablet & phone
This commit is contained in:
davegandy
parent
796f930263
commit
63787fc5b3
@ -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 }} ·
|
||||
<i class="icon-flag"></i> Font Awesome {{ site.fontawesome.version }}
|
||||
<span class="hidden-phone">·</span><br class="visible-phone">
|
||||
Created and Maintained by Dave Gandy ·
|
||||
<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> ·
|
||||
Code licensed under <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.version }}</a> ·
|
||||
Font Awesome font licensed under <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.version }}</a>
|
||||
<span class="hidden-phone">·</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">·</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>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<a href="{{ site.fontawesome.github.url }}"
|
||||
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);">
|
||||
GitHub Project</a> ·
|
||||
Version {{ site.fontawesome.version }} ·
|
||||
Version {{ site.fontawesome.version }} <span class="hidden-phone"> · </span><br class="visible-phone">
|
||||
Created & Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,59 +1,69 @@
|
||||
<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>
|
||||
<ul class="nav">
|
||||
<li{% if page.navbar_active == "home" %} class="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 %}">
|
||||
<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 }}icons/"><i class="icon-flag icon-fixed-width"></i> Icons</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#new"><i class="icon-shield icon-fixed-width"></i> New Icons in {{ site.fontawesome.version }}</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#web-application"><i class="icon-camera-retro icon-fixed-width"></i> Web Application Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#currency"><i class="icon-won icon-fixed-width"></i> Currency Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#text-editor"><i class="icon-file-text-alt icon-fixed-width"></i> Text Editor Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#directional"><i class="icon-hand-right icon-fixed-width"></i> Directional Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#video-player"><i class="icon-play-sign icon-fixed-width"></i> Video Player Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#brand"><i class="icon-github icon-fixed-width"></i> Brand Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#medical"><i class="icon-medkit icon-fixed-width"></i> Medical Icons</a></li>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<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 hidden-phone{% if page.navbar_active == "icons" %} 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 }}icons/"><i class="icon-flag icon-fixed-width"></i> Icons</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#new"><i class="icon-shield icon-fixed-width"></i> New Icons in {{ site.fontawesome.version }}</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#web-application"><i class="icon-camera-retro icon-fixed-width"></i> Web Application Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#currency"><i class="icon-won icon-fixed-width"></i> Currency Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#text-editor"><i class="icon-file-text-alt icon-fixed-width"></i> Text Editor Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#directional"><i class="icon-hand-right icon-fixed-width"></i> Directional Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#video-player"><i class="icon-play-sign icon-fixed-width"></i> Video Player Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#brand"><i class="icon-github icon-fixed-width"></i> Brand Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#medical"><i class="icon-medkit icon-fixed-width"></i> 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 & 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>
|
||||
</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 %}">
|
||||
<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 & 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>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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>.
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -219,7 +219,7 @@
|
||||
|
||||
// Navbar
|
||||
// -------------------------
|
||||
@navbarCollapseWidth: 979px;
|
||||
@navbarCollapseWidth: 767px;
|
||||
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
|
||||
|
||||
@navbarHeight: 40px;
|
||||
|
||||
@ -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> Community{% endcapture %}
|
||||
{% capture jumbotron_h1 %}<i class="icon-thumbs-up-alt icon-large"></i> Community{% endcapture %}
|
||||
{% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %}
|
||||
|
||||
{% include jumbotron.html %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user