adding kickstarter widget

This commit is contained in:
Dave Gandy 2016-10-27 16:53:09 -04:00
parent e05d444714
commit a0b6d3bfec
21 changed files with 293 additions and 160 deletions

View File

@ -175,13 +175,21 @@
<div class="jumbotron jumbotron-ad hidden-print">
<div class="container">
<div class="jumbotron-kickstarter">
<div class="jumbotron-text">
<h1><i class="fa fa-universal-access" aria-hidden="true"></i>&nbsp; Accessibility</h1>
<p>Make your icons awesome for all of your users</p>
</div>
<div class="jumbotron-ks-ad">
<div id="kickstarter-widget" class="kickstarter-widget-index">
<iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="container">

File diff suppressed because one or more lines are too long

Binary file not shown.

View File

@ -44,6 +44,12 @@ $(function () {
url: "https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=fontawesome-banner",
btn_text: "Check out the Kickstarter",
},
{
quote: "Save 50% with the early backer price until Monday! Just $20!",
class: "kickstarter",
url: "https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=fontawesome-banner",
btn_text: "Font Awesome 5 Kickstarter",
},
];
selectAd();

View File

@ -32,6 +32,7 @@
@import "site/sumome";
@import "site/algolia";
@import "site/kickstarter";
@import "site/newsletter";
@import "site/views";
@import "site/store";

View File

@ -1,3 +1,13 @@
.btn-kickstarter {
.button-variant(#fff, #489fdf, mix(#000,#489fdf,10%));
}
#kickstarter-widget {
margin: -30px auto -70px;
width: 220px;
}
.jumbotron-ad .well {
background-color: rgba(255,255,255,.3);
border-color: rgba(255,255,255,.15);
}

View File

@ -0,0 +1,14 @@
.jumbotron-ad #newsletter {
.btn {
color: @jumbotron-color;
border-color: mix(@jumbotron-color, @jumbotron-bg, 75%);
background-color: transparent;
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
&:hover {
background-color: mix(@jumbotron-color, @jumbotron-bg, 95%);
border-color: mix(@jumbotron-color, @jumbotron-bg, 95%);
color: @jumbotron-bg;
text-shadow: 0 -1px 0 @jumbotron-color;
}
}
}

View File

@ -55,4 +55,11 @@
}
.hide-lg { display: none; }
.jumbotron-ad #newsletter {
margin-top: 30px;
margin-right: 250px;
margin-bottom: -70px;
}
}

View File

@ -15,4 +15,12 @@
}
}
.jumbotron-kickstarter {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
}

View File

@ -46,4 +46,9 @@
.hide-sm { display: none; }
.v-get-started .get-started-cdn { padding: 5px 22px 22px 22px; }
// .jumbotron-ks-ad { flex-basis: 25%; }
// .jumbotron-text { flex-basis: 75%; }
.jumbotron-ks-ad { width: 220px; }
.jumbotron-text { width: 500px; }
}

View File

@ -92,4 +92,12 @@
.signup-button .btn { white-space: normal; }
.v-get-started .get-started-cdn { padding: 5px 22px 22px 22px; }
#kickstarter-widget {
margin: 0 auto -40px;
}
.jumbotron-carousel {
#kickstarter-widget {
margin-top: 20px;
}
}
}

View File

@ -175,13 +175,21 @@
<div class="jumbotron jumbotron-ad hidden-print">
<div class="container">
<div class="jumbotron-kickstarter">
<div class="jumbotron-text">
<h1><i class="fa fa-list-ul" aria-hidden="true"></i>&nbsp; Cheatsheet</h1>
<p>The complete Font Awesome 4.7.0 icon reference</p>
</div>
<div class="jumbotron-ks-ad">
<div id="kickstarter-widget" class="kickstarter-widget-index">
<iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
</div>
</div>
</div>
</div>
</div>
<div id="social-buttons" class="hidden-print">
<div class="container">
@ -210,7 +218,7 @@
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
<a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @fontawesome</a>
</li>
<li class="tweet-btn hidden-phone">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>

View File

@ -175,13 +175,21 @@
<div class="jumbotron jumbotron-ad hidden-print">
<div class="container">
<div class="jumbotron-kickstarter">
<div class="jumbotron-text">
<h1><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>&nbsp; Community</h1>
<p>Lots of ways to get involved with Font Awesome</p>
</div>
<div class="jumbotron-ks-ad">
<div id="kickstarter-widget" class="kickstarter-widget-index">
<iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
</div>
</div>
</div>
</div>
</div>
<div id="social-buttons" class="hidden-print">
<div class="container">
@ -210,7 +218,7 @@
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
<a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @fontawesome</a>
</li>
<li class="tweet-btn hidden-phone">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>

View File

@ -175,13 +175,21 @@
<div class="jumbotron jumbotron-ad hidden-print">
<div class="container">
<div class="jumbotron-kickstarter">
<div class="jumbotron-text">
<h1><i class="fa fa-magic" aria-hidden="true"></i>&nbsp; Examples</h1>
<p>Lots of easy ways to use Font Awesome</p>
</div>
<div class="jumbotron-ks-ad">
<div id="kickstarter-widget" class="kickstarter-widget-index">
<iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
</div>
</div>
</div>
</div>
</div>
<div id="social-buttons" class="hidden-print">
<div class="container">
@ -210,7 +218,7 @@
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
<a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @fontawesome</a>
</li>
<li class="tweet-btn hidden-phone">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>

View File

@ -175,13 +175,21 @@
<div class="jumbotron jumbotron-ad hidden-print">
<div class="container">
<div class="jumbotron-kickstarter">
<div class="jumbotron-text">
<h1><i class="fa fa-cogs" aria-hidden="true"></i>&nbsp; Get Started</h1>
<p>Easy ways to get Font Awesome 4.7.0 onto your website</p>
</div>
<div class="jumbotron-ks-ad">
<div id="kickstarter-widget" class="kickstarter-widget-index">
<iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="content-underlay"></div>

View File

@ -2270,7 +2270,7 @@ icons:
id: gavel
unicode: f0e3
created: 2.0
label:
filter:
- judge
- lawyer
- opinion
@ -2283,7 +2283,7 @@ icons:
id: tachometer
unicode: f0e4
created: 2.0
label:
filter:
- speedometer
- fast
aliases:

View File

@ -175,13 +175,21 @@
<div class="jumbotron jumbotron-ad hidden-print">
<div class="container">
<div class="jumbotron-kickstarter">
<div class="jumbotron-text">
<h1><i class="fa fa-flag" aria-hidden="true"></i>&nbsp; The Icons</h1>
<p>The complete set of 675 icons in Font Awesome 4.7.0</p>
</div>
<div class="jumbotron-ks-ad">
<div id="kickstarter-widget" class="kickstarter-widget-index">
<iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
</div>
</div>
</div>
</div>
</div>
<div id="social-buttons" class="hidden-print">
<div class="container">
@ -210,7 +218,7 @@
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
<a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @fontawesome</a>
</li>
<li class="tweet-btn hidden-phone">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>

View File

@ -172,7 +172,7 @@
<div class="jumbotron jumbotron-carousel hidden-print">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8 text-center">
<div class="col-md-9 col-sm-8 text-center">
<h1>Font Awesome</h1>
<p>The iconic font and CSS toolkit</p>
<div class="actions">
@ -191,9 +191,12 @@
Created by <a href="http://twitter.com/davegandy">Dave Gandy</a>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div id="icon-carousel" class="carousel slide">
<!-- Carousel items -->
<div class="col-md-3 col-sm-4">
<div id="kickstarter-widget" class="kickstarter-widget-index">
<iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
</div>
<!-- <div id="icon-carousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><div><i class="fa fa-font-awesome" aria-hidden="true"></i><span class="sr-only">flag icon</span></div></div>
<div class="item"><div><i class="fa fa-handshake-o" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div>
@ -211,7 +214,6 @@
<div class="item"><div><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sr-only">thumbs up icon</span></div></div>
<div class="item"><div><i class="fa fa-pied-piper-alt" aria-hidden="true"></i><span class="sr-only">pied piper icon</span></div></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#icon-carousel" data-slide="prev"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);">
<i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
@ -222,7 +224,7 @@
<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div> -->
</div>
</div>
@ -256,7 +258,7 @@
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
<a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @fontawesome</a>
</li>
<li class="tweet-btn hidden-phone">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>

View File

@ -175,13 +175,21 @@
<div class="jumbotron jumbotron-ad hidden-print">
<div class="container">
<div class="jumbotron-kickstarter">
<div class="jumbotron-text">
<h1><i class="fa fa-gavel" aria-hidden="true"></i>&nbsp; License</h1>
<p>The full details of how Font Awesome is licensed</p>
</div>
<div class="jumbotron-ks-ad">
<div id="kickstarter-widget" class="kickstarter-widget-index">
<iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
</div>
</div>
</div>
</div>
</div>
<div id="social-buttons" class="hidden-print">
<div class="container">
@ -210,7 +218,7 @@
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
<a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @fontawesome</a>
</li>
<li class="tweet-btn hidden-phone">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>

View File

@ -175,13 +175,21 @@
<div class="jumbotron jumbotron-ad hidden-print">
<div class="container">
<div class="jumbotron-kickstarter">
<div class="jumbotron-text">
<h1><i class="fa fa-shopping-cart fa-lg valign-baseline" aria-hidden="true"></i>&nbsp; Awesome Swag</h1>
<p>Show your love &amp; support of Font Awesome with official merchandise!</p>
</div>
<div class="jumbotron-ks-ad">
<div id="kickstarter-widget" class="kickstarter-widget-index">
<iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="content-underlay"></div>

View File

@ -175,13 +175,21 @@
<div class="jumbotron jumbotron-ad hidden-print">
<div class="container">
<div class="jumbotron-kickstarter">
<div class="jumbotron-text">
<h1><i class="fa fa-lightbulb-o" aria-hidden="true"></i>&nbsp; What's New</h1>
<p>What's New in the latest version &mdash; Font Awesome 4.7</p>
</div>
<div class="jumbotron-ks-ad">
<div id="kickstarter-widget" class="kickstarter-widget-index">
<iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
</div>
</div>
</div>
</div>
</div>
<div id="social-buttons" class="hidden-print">
<div class="container">
@ -210,7 +218,7 @@
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
<a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @fontawesome</a>
</li>
<li class="tweet-btn hidden-phone">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>