mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2024-12-27 14:01:30 +08:00
responsive screen-lg updated
This commit is contained in:
parent
30d83f7517
commit
de05be2a8b
@ -1,7 +1,7 @@
|
||||
<{% if page.navbar_active == "examples" %}div{% else %}section{% endif %} id="new-styles">
|
||||
<h2 class="page-header">New Styles in {{ site.fontawesome.minor_version }}</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<div class="col-md-4">
|
||||
<h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4>
|
||||
<div class="well well-transparent">
|
||||
<i class="fa fa-shield"></i> normal<br>
|
||||
@ -12,7 +12,7 @@
|
||||
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<div class="col-md-4">
|
||||
<h4><a href="#stacked">Stacked Icons</a></h4>
|
||||
<div class="well well-transparent">
|
||||
<div class="margin-top-sm margin-bottom-sm">
|
||||
@ -39,7 +39,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6 col-sm-offset-3">
|
||||
<div class="col-md-4">
|
||||
<h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4>
|
||||
<div class="well well-transparent">
|
||||
<ul class="fa-ul">
|
||||
|
@ -1,4 +1,4 @@
|
||||
<div class="jumbotron hidden-print">
|
||||
<div class="jumbotron jumbotron-ad hidden-print">
|
||||
<div class="container">
|
||||
<h1>{{ jumbotron_h1 }}</h1>
|
||||
<p>{{ jumbotron_p }}</p>
|
||||
|
@ -6,7 +6,7 @@
|
||||
{% endcapture %}
|
||||
{% include stripe-ad.html %}
|
||||
|
||||
<div>
|
||||
<section>
|
||||
<div class="alert alert-info">
|
||||
<ul class="fa-ul margin-bottom-none">
|
||||
<li>
|
||||
@ -15,7 +15,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="page-header">Font License</h2>
|
||||
|
@ -15,50 +15,53 @@
|
||||
<li class="hidden-sm {% 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="fa fa-caret-down"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fixed-width"></i> Icons</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-shield fa-fixed-width"></i> New Icons in {{ site.fontawesome.version }}</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fixed-width"></i> Web Application Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fixed-width"></i> Currency Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-alt fa-fixed-width"></i> Text Editor Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-hand-right fa-fixed-width"></i> Directional Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-sign fa-fixed-width"></i> Video Player Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fixed-width"></i> Brand Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fixed-width"></i> Medical Icons</a></li>
|
||||
</ul>
|
||||
<li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "icons" %} active{% endif %}">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fixed-width"></i> Icons</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-shield fa-fixed-width"></i> New Icons in {{ site.fontawesome.version }}</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fixed-width"></i> Web Application Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fixed-width"></i> Currency Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-alt fa-fixed-width"></i> Text Editor Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-hand-right fa-fixed-width"></i> Directional Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-sign fa-fixed-width"></i> Video Player Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fixed-width"></i> Brand Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-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="fa fa-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 class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "examples" %} active{% endif %}">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="fa fa-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 class="hidden-sm{% if page.navbar_active == "whats-new" %} active{% endif %}">
|
||||
<a href="{{ page.relative_path }}whats-new/">What's New</a>
|
||||
</li>
|
||||
<li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "whats-new" %} active{% endif %}">
|
||||
<a href="{{ page.relative_path }}whats-new/">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>
|
||||
|
@ -1,4 +1,4 @@
|
||||
<div id="why" class="feature-list">
|
||||
<section id="why" class="feature-list">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-flag"></i> One Font, {{ icons | size }} Icons</h4>
|
||||
@ -38,4 +38,4 @@
|
||||
Font Awesome won't trip up screen readers, unlike other icon fonts.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
@ -2,11 +2,12 @@
|
||||
---
|
||||
@import "bootstrap-{{ site.bootstrap.version }}/bootstrap";
|
||||
|
||||
@import "site/variables";
|
||||
@import "site/navbar";
|
||||
@import "site/jumbotron";
|
||||
@import "site/code";
|
||||
@import "site/wells";
|
||||
@import "site/bootstrap/variables";
|
||||
@import "site/bootstrap/navbar";
|
||||
@import "site/bootstrap/jumbotron";
|
||||
@import "site/bootstrap/code";
|
||||
@import "site/bootstrap/wells";
|
||||
|
||||
@import "site/layout";
|
||||
@import "site/social-buttons";
|
||||
@import "site/jumbotron-carousel";
|
||||
@ -17,3 +18,5 @@
|
||||
@import "site/footer";
|
||||
@import "site/lazy";
|
||||
@import "site/carbonad";
|
||||
|
||||
@import "site/responsive/screen-lg";
|
||||
|
@ -9,7 +9,7 @@
|
||||
.fa-flag { padding-right: 3px; }
|
||||
}
|
||||
|
||||
//.navbar .nav > li > a { padding: 12px 10px 9px; }
|
||||
.navbar-nav > li > a { padding: 12px 10px 9px; }
|
||||
|
||||
//.navbar-nav > li > a {
|
||||
// padding-top: 16px;
|
52
src/assets/less/site/responsive/screen-lg.less
Normal file
52
src/assets/less/site/responsive/screen-lg.less
Normal file
@ -0,0 +1,52 @@
|
||||
@media (min-width: @screen-lg) {
|
||||
#icon-carousel {
|
||||
@size: 290px;
|
||||
font-size: @size;
|
||||
line-height: @size + 5;
|
||||
.carousel-control {
|
||||
top: @size + 20px;
|
||||
.square(30px);
|
||||
font-size: 40px;
|
||||
line-height: 35px;
|
||||
left: 370/2 - 40px;
|
||||
&.right {
|
||||
right: 370/2 - 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron-ad {
|
||||
padding: 65px 0 50px;
|
||||
h1 {
|
||||
margin-top: 25px;
|
||||
font-size: 90px;
|
||||
}
|
||||
p {
|
||||
font-size: 35px;
|
||||
margin: 35px 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron-carousel {
|
||||
padding: 50px 0;
|
||||
h1 { font-size: 100px; }
|
||||
p {
|
||||
font-size: 40px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.btn-large {
|
||||
font-size: 30px;
|
||||
padding: 21px 35px;
|
||||
}
|
||||
.shameless-self-promotion {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.stripe-ad .lead { margin-top: 7px; }
|
||||
|
||||
.lead {
|
||||
font-size: 26px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
@ -4,7 +4,7 @@ title: Font Awesome Examples
|
||||
navbar_active: examples
|
||||
relative_path: ../
|
||||
---
|
||||
{% capture jumbotron_h1 %}<i class="fa fa-magic fa-large"></i> Examples{% endcapture %}
|
||||
{% capture jumbotron_h1 %}<i class="fa fa-magic fa-lg"></i> Examples{% endcapture %}
|
||||
{% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %}
|
||||
|
||||
{% include jumbotron.html %}
|
||||
|
Loading…
Reference in New Issue
Block a user