mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2024-11-20 11:14:28 +00:00
Download modal update v1
This commit is contained in:
Dave Gandy
parent
fd2a793754
commit
8469f8e3b8
@ -1,33 +1,156 @@
|
||||
<div class="modal fade" id="modal-download" tabindex="-1" role="dialog" aria-labelledby="modal-download-label">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal fade" id="modal-download" tabindex="-1" role="dialog" aria-labelledby="modal-download-label"
|
||||
xmlns="http://www.w3.org/1999/html">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<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> Download</h2>
|
||||
</div>
|
||||
<div class="modal-body text-lg">
|
||||
<p class="margin-bottom-lg">
|
||||
I hope you love Font Awesome. If you've found it useful,
|
||||
<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">
|
||||
please do me a favor and check out my latest project, Fonticons</a>. It makes it easy to put the perfect
|
||||
icons on your website. Choose from our awesome, comprehensive icon sets or copy and paste your own.
|
||||
</p>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="panel panel-success">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-title">
|
||||
<h3 class="margin-none">
|
||||
<i class="fas fas-fort-logo fas-lg valign-baseline"></i> Fort Awesome
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body padding-bottom-none">
|
||||
<div class="lead text-center">
|
||||
Take your icon game to the next level &<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>
|
||||
|
||||
<p class="margin-bottom-lg">
|
||||
Please. Check it out.
|
||||
</p>
|
||||
<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 <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 <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 & 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 & 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 & 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']);">
|
||||
<i class="fa fa-download fa-lg"></i>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<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>—Dave Gandy</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p>—Dave Gandy</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn btn-default btn-lg block-xs" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip"
|
||||
onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);">
|
||||
<i class="fa fa-download fa-lg"></i>
|
||||
Download
|
||||
</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">
|
||||
Check out Fonticons <i class="fa fa-external-link fa-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="container">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<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>
|
||||
Fort Awesome
|
||||
</a>
|
||||
|
||||
@ -1,45 +1,45 @@
|
||||
##
|
||||
# Create individual pages for each icon in the FontAwesome set
|
||||
|
||||
require 'yaml'
|
||||
|
||||
module Jekyll
|
||||
|
||||
class IconPage < Page
|
||||
|
||||
##
|
||||
# Take a single icon and render a page for it.
|
||||
|
||||
def initialize(site, base, dir, icon)
|
||||
@site = site
|
||||
@base = base
|
||||
@dir = dir
|
||||
@name = "#{icon.id}.html"
|
||||
@icon = icon
|
||||
|
||||
self.process(@name)
|
||||
|
||||
self.read_yaml(File.join(base, site.config['layouts']), site.config['icon_layout'])
|
||||
|
||||
self.data['icon'] = icon
|
||||
self.data['title'] = "fa-#{icon.id}: " + self.data['title_suffix']
|
||||
end
|
||||
|
||||
end
|
||||
|
||||
class IconGenerator < Generator
|
||||
|
||||
##
|
||||
# Iterate over every described icon in a YAML file and create a page for it
|
||||
|
||||
safe true
|
||||
|
||||
def generate(site)
|
||||
site.icons.each do |icon|
|
||||
site.pages << IconPage.new(site, site.source, site.config['icon_destination'], icon)
|
||||
end
|
||||
end
|
||||
|
||||
end
|
||||
|
||||
end
|
||||
# ##
|
||||
# # Create individual pages for each icon in the FontAwesome set
|
||||
#
|
||||
# require 'yaml'
|
||||
#
|
||||
# module Jekyll
|
||||
#
|
||||
# class IconPage < Page
|
||||
#
|
||||
# ##
|
||||
# # Take a single icon and render a page for it.
|
||||
#
|
||||
# def initialize(site, base, dir, icon)
|
||||
# @site = site
|
||||
# @base = base
|
||||
# @dir = dir
|
||||
# @name = "#{icon.id}.html"
|
||||
# @icon = icon
|
||||
#
|
||||
# self.process(@name)
|
||||
#
|
||||
# self.read_yaml(File.join(base, site.config['layouts']), site.config['icon_layout'])
|
||||
#
|
||||
# self.data['icon'] = icon
|
||||
# self.data['title'] = "fa-#{icon.id}: " + self.data['title_suffix']
|
||||
# end
|
||||
#
|
||||
# end
|
||||
#
|
||||
# class IconGenerator < Generator
|
||||
#
|
||||
# ##
|
||||
# # Iterate over every described icon in a YAML file and create a page for it
|
||||
#
|
||||
# safe true
|
||||
#
|
||||
# def generate(site)
|
||||
# site.icons.each do |icon|
|
||||
# site.pages << IconPage.new(site, site.source, site.config['icon_destination'], icon)
|
||||
# end
|
||||
# end
|
||||
#
|
||||
# end
|
||||
#
|
||||
# end
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
@import "site/bootstrap/type";
|
||||
@import "site/bootstrap/alerts";
|
||||
@import "site/bootstrap/tooltip";
|
||||
@import "site/bootstrap/panels";
|
||||
@import "site/bootstrap/modals";
|
||||
|
||||
@import "site/layout";
|
||||
|
||||
@ -1 +1,5 @@
|
||||
.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
15
src/assets/less/site/bootstrap/panels.less
Normal 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;
|
||||
}
|
||||
@ -126,3 +126,41 @@
|
||||
//== Type
|
||||
//** Text muted color
|
||||
@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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user