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

Download modal update v1

Browse Source
This commit is contained in:
Dave Gandy 2016-01-07 09:42:46 -05:00
parent fd2a793754
commit 8469f8e3b8
7 changed files with 251 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/_includes/modals/download.html
View File

@ -1,33 +1,156 @@
<div class="modal fade" id="modal-download" tabindex="-1" role="dialog" aria-labelledby="modal-download-label"> <div class="modal fade" id="modal-download" tabindex="-1" role="dialog" aria-labelledby="modal-download-label"
<div class="modal-dialog" role="document"> xmlns="http://www.w3.org/1999/html">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
<h2 class="modal-title" id="modal-download-label">Help Us Out!</h2> <h2 class="modal-title" id="modal-download-label"><i class="fa fa-download fa-lg"></i>&nbsp; Download</h2>
</div> </div>
<div class="modal-body text-lg"> <div class="modal-body">
<p class="margin-bottom-lg"> <div class="row">
I hope you love Font Awesome. If you've found it useful, <div class="col-md-8">
<a class="strong" href="https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.4_update" target="_blank"> <div class="panel panel-success">
please do me a favor and check out my latest project, Fonticons</a>. It makes it easy to put the perfect <div class="panel-heading">
icons on your website. Choose from our awesome, comprehensive icon sets or copy and paste your own. <div class="panel-title">
</p> <h3 class="margin-none">
<i class="fas fas-fort-logo fas-lg valign-baseline"></i> Fort Awesome
<p class="margin-bottom-lg"> </h3>
Please. Check it out.
</p>
<p>&mdash;Dave Gandy</p>
</div> </div>
<div class="modal-footer"> </div>
<a class="btn btn-default btn-lg block-xs" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip" <div class="panel-body padding-bottom-none">
<div class="lead text-center">
Take your icon game to the next level &amp;<br class="hide-xs"> start your 14 day free trial!
</div>
<div class="row">
<div class="col-md-6 col-sm-6 text-center">
<div class="panel panel-success">
<div class="panel-heading">
<div class="panel-title">
<h3 class="margin-none">Pro</h3>
<div class="text-normal">$99/year</div>
</div>
</div>
<div class="panel-body">
<div><strong>15</strong> Kits</div>
<div>Starter Icon Library</div>
<div>10,000+ Icons</div>
<div><strong>Unlimited</strong> Uploaded Icons</div>
<div>Upload Your Logo</div>
<div><strong>2500</strong> Icons per Kit</div>
<div><strong>8</strong> Typefaces per Kit</div>
<div>Kit Download</div>
<div><strong>1M</strong> Pageviews/month</div>
<div class="margin-top-sm strong"><a href="https://fonticons.com/start">Find out More</a></div>
<a href="<%= new_pro_path %>" class="btn btn-success btn-block btn-lg margin-top">Sign Up &nbsp;<i class="fa fa-pencil-square-o"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 text-center">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<h3 class="margin-none">Basic</h3>
<div class="text-normal">$49/year</div>
</div>
</div>
<div class="panel-body">
<div>5 Kits</div>
<div>Starter Icon Library</div>
<div>10,000+ Icons</div>
<div>20 Uploaded Icons</div>
<div>Upload Your Logo</div>
<div>100 Icons per Kit</div>
<div>4 Typefaces per Kit</div>
<div class="text-strike text-muted">Kit Download</div>
<div>250k Pageviews/month</div>
<div class="margin-top-sm strong"><a href="https://fonticons.com/start">Find out More</a></div>
<a href="<%= new_basic_path %>" class="btn btn-default btn-block btn-lg margin-top">Sign Up &nbsp;<i class="fa fa-pencil-square-o"></i></a>
</div>
</div>
</div>
</div>
<div class="lead">
You'll get even more Awesome:
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="alert alert-default clearfix">
<i class="fa fa-dashboard fa-4x pull-left"></i>
Subset & shrink your icons <strong>AND TYPEFACES</strong> by 10x.
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="alert alert-default clearfix">
<i class="fa fa-paint-brush fa-4x pull-left"></i>
Upload &amp; build your own logo and vector icons.
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="alert alert-default clearfix">
<i class="fa fa-eye fa-4x pull-left"></i>
Get the perfect visual with the right icon set. Tons to choose from.
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="alert alert-default clearfix">
<i class="fa fa-globe fa-4x pull-left"></i>
Serve your icons &amp; typefaces in a single request with our CDN.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<p class="">Or get regular 'ole Font Awesome...</p>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<h3 class="margin-none">
<i class="fas fas-flag-logo"></i> Font Awesome
</h3>
</div>
</div>
<div class="panel-body text-center">
<div class="text-strike text-muted">Upload Your Logo &amp; Icons</div>
<div class="text-strike text-muted">Shrink Your Icons by 10x</div>
<div class="text-strike text-muted">Serve Your Typefaces</div>
<div class="text-strike text-muted">Shrink Your Typefaces by 10x</div>
<div>Font Awesome Only</div>
<div>1 Icon Set</div>
<div>{{ icons | size }} Icons</div>
<a class="btn btn-default btn-lg block-xs margin-top" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip"
onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);"> onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);">
<i class="fa fa-download fa-lg"></i>&nbsp; <i class="fa fa-download fa-lg"></i>&nbsp;
Download Download
</a> </a>
<a class="btn btn-success btn-lg block-xs" href="https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.4_update" target="_blank"> </div>
Check out Fonticons &nbsp;<i class="fa fa-external-link fa-lg"></i> </div>
</a> <p class="margin-bottom">
I hope you love Font Awesome. If you've found it useful,
<a class="strong" href="https://fortawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.4_update" target="_blank">
please do me a favor and check out my latest project, Fort Awesome</a>.
</p>
<p>&mdash;Dave Gandy</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

2
src/_includes/navbar.html
View File

@ -2,7 +2,7 @@
<div class="container"> <div class="container">
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li> <li>
<a href="http://fortawesome.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_5.0_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Take your front-end game<br>to the next level!"> <a href="http://fortawesome.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_5.0_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Take your front end game<br>to the next level!">
<i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp; <i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp;
Fort Awesome Fort Awesome
</a> </a>

90
src/_plugins/icon_page_generator.rb
View File

@ -1,45 +1,45 @@
## # ##
# Create individual pages for each icon in the FontAwesome set # # Create individual pages for each icon in the FontAwesome set
#
require 'yaml' # require 'yaml'
#
module Jekyll # module Jekyll
#
class IconPage < Page # class IconPage < Page
#
## # ##
# Take a single icon and render a page for it. # # Take a single icon and render a page for it.
#
def initialize(site, base, dir, icon) # def initialize(site, base, dir, icon)
@site = site # @site = site
@base = base # @base = base
@dir = dir # @dir = dir
@name = "#{icon.id}.html" # @name = "#{icon.id}.html"
@icon = icon # @icon = icon
#
self.process(@name) # self.process(@name)
#
self.read_yaml(File.join(base, site.config['layouts']), site.config['icon_layout']) # self.read_yaml(File.join(base, site.config['layouts']), site.config['icon_layout'])
#
self.data['icon'] = icon # self.data['icon'] = icon
self.data['title'] = "fa-#{icon.id}: " + self.data['title_suffix'] # self.data['title'] = "fa-#{icon.id}: " + self.data['title_suffix']
end # end
#
end # end
#
class IconGenerator < Generator # class IconGenerator < Generator
#
## # ##
# Iterate over every described icon in a YAML file and create a page for it # # Iterate over every described icon in a YAML file and create a page for it
#
safe true # safe true
#
def generate(site) # def generate(site)
site.icons.each do |icon| # site.icons.each do |icon|
site.pages << IconPage.new(site, site.source, site.config['icon_destination'], icon) # site.pages << IconPage.new(site, site.source, site.config['icon_destination'], icon)
end # end
end # end
#
end # end
#
end # end

1
src/assets/less/site.less
View File

@ -10,6 +10,7 @@
@import "site/bootstrap/type"; @import "site/bootstrap/type";
@import "site/bootstrap/alerts"; @import "site/bootstrap/alerts";
@import "site/bootstrap/tooltip"; @import "site/bootstrap/tooltip";
@import "site/bootstrap/panels";
@import "site/bootstrap/modals"; @import "site/bootstrap/modals";
@import "site/layout"; @import "site/layout";

4
src/assets/less/site/bootstrap/alerts.less
View File

@ -1 +1,5 @@
.alert-link { text-decoration: underline; } .alert-link { text-decoration: underline; }
.alert-default { .alert-variant(@alert-default-bg, @alert-default-border, @alert-default-text); }
.alert-well { .alert-variant(@alert-well-bg, @alert-well-border, @alert-well-text); }
.alert-well-alt { .alert-variant(@well-bg, @table-border-color, mix(@text-muted,@text-color,50%)); }

15
src/assets/less/site/bootstrap/panels.less Normal file
View File

@ -0,0 +1,15 @@
.panel {
.box-shadow(none);
}
.panel-heading {
margin: -1px;
border-bottom-width: 0;
padding: 11px 15px;
}
.panel-default .panel-heading {
margin: 0;
border-bottom-width: 1px;
padding: 10px 15px;
}

38
src/assets/less/site/bootstrap/variables.less
View File

@ -126,3 +126,41 @@
//== Type //== Type
//** Text muted color //** Text muted color
@text-muted: mix(@gray-light,@gray-lighter,50%); @text-muted: mix(@gray-light,@gray-lighter,50%);
@alert-well-bg: @panel-default-heading-bg;
@alert-well-text: @text-color;
@alert-well-border: @panel-default-border;
@alert-default-bg: transparent;
@alert-default-text: @text-color;
@alert-default-border: mix(#fff,@panel-default-border,40%);
//@panel-default-text: @gray-dark;
//@panel-default-border: @panel-default-heading-bg;
//@panel-default-heading-bg: #f5f5f5;
@panel-primary-text: #fff;
@panel-primary-border: mix(#fff,@brand-primary,50%);
@panel-primary-heading-bg: @brand-primary;
@panel-success-text: #fff;
@panel-success-border: mix(#fff,@brand-success,50%);
@panel-success-heading-bg: @brand-success;
@panel-info-text: #fff;
@panel-info-border: mix(#fff,@brand-info,50%);
@panel-info-heading-bg: @brand-info;
@panel-warning-text: #fff;
@panel-warning-border: mix(#fff,@brand-warning,50%);
@panel-warning-heading-bg: @brand-warning;
@panel-danger-text: #fff;
@panel-danger-border: mix(#fff,@brand-danger,50%);
@panel-danger-heading-bg: @brand-danger;