FlandreScarle7/Fork-Awesome
1
0
Fork 0
mirror of https://github.com/ForkAwesome/Fork-Awesome.git synced 2024-12-27 14:01:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Adding Kickstarter widget

Browse Source
This commit is contained in:
Dave Gandy 2016-10-27 16:52:43 -04:00
parent 6b4fd47b62
commit 6f5e03bd76
13 changed files with 96 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/_includes/jumbotron-carousel.html
View File

@ -1,7 +1,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">
@ -20,9 +20,11 @@
Created by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">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">
{% include kickstarter-widget.html %}
</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>
@ -40,7 +42,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>
@ -51,7 +52,7 @@
<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div> -->
</div>
</div>

22
src/_includes/jumbotron.html
View File

@ -1,19 +1,17 @@
<div class="jumbotron jumbotron-ad hidden-print">
<div class="container">
{% if page.in_page_nav %}
<div class="col-md-9">
<h1>{{ jumbotron_h1 }}</h1>
<p>{{ jumbotron_p }}</p>
<div class="jumbotron-kickstarter">
<div class="jumbotron-text">
<h1>{{ jumbotron_h1 }}</h1>
<p>{{ jumbotron_p }}</p>
</div>
<div class="jumbotron-ks-ad">
<div id="kickstarter-widget" class="kickstarter-widget-index">
{% include kickstarter-widget.html %}
</div>
</div>
</div>
<div class="col-md-3">
{{ jumbotron_nav }}
</div>
{% else %}
<h1>{{ jumbotron_h1 }}</h1>
<p>{{ jumbotron_p }}</p>
{% endif %}
</div>
</div>

1
src/_includes/kickstarter-widget.html Normal file
View File

@ -0,0 +1 @@
<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>

16
src/_includes/newsletter-subscribe.html Normal file
View File

@ -0,0 +1,16 @@
<form id="newsletter" method="post" action="https://formkeep.com/f/ba101f5b69f0">
<div class="row">
<div class="col-md-4 col-md-offset-2 col-sm-6">
<div class="form-group margin-bottom">
<input name="email" type="email" class="form-control" id="email" placeholder="Enter your email address&hellip;" required>
</div>
</div>
<div class="col-md-4 col-sm-6">
<button type="submit" class="btn btn-success btn-block margin-bottom-lg"
data-toggle="popover" data-trigger="hover" data-placement="top" title="Stay up to date with the Awesome"
data-content="We'll send you updates on new Font Awesome releases, icons, and other stuff that we're working on. We won't spam you. Scout's honor.">
Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i>
</button>
</div>
</div>
</form>

20
src/_includes/stripe-social.html
View File

@ -1,22 +1,6 @@
<div id="social-buttons" class="hidden-print">
<div class="container">
<form id="newsletter" method="post" action="https://formkeep.com/f/ba101f5b69f0">
<div class="row">
<div class="col-md-4 col-md-offset-2 col-sm-6">
<div class="form-group margin-bottom">
<input name="email" type="email" class="form-control" id="email" placeholder="Enter your email address&hellip;" required>
</div>
</div>
<div class="col-md-4 col-sm-6">
<button type="submit" class="btn btn-success btn-block margin-bottom-lg"
data-toggle="popover" data-trigger="hover" data-placement="top" title="Stay up to date with the Awesome"
data-content="We'll send you updates on new Font Awesome releases, icons, and other stuff that we're working on. We won't spam you. Scout's honor.">
Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i>
</button>
</div>
</div>
</form>
{% include newsletter-subscribe.html %}
<ul class="list-inline">
<li>
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
@ -25,7 +9,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/{{ site.fontawesome.twitter }}" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @{{ site.fontawesome.twitter }}</a>
<a href="https://twitter.com/{{ site.fontawesome.twitter }}" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @{{ site.fontawesome.twitter }}</a>
</li>
<li class="tweet-btn hidden-phone">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ site.fontawesome.url }}" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="{{ site.fontawesome.legacy_url }}" data-count="horizontal" data-via="{{ site.fontawesome.twitter }}" data-related="{{ site.fontawesome.author.twitter }}:Creator of Font Awesome">Tweet</a>

6
src/assets/js/site.js
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();

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

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

10
src/assets/less/site/kickstarter.less
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);
}

14
src/assets/less/site/newsletter.less Normal file
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;
}
}
}

7
src/assets/less/site/responsive/screen-lg.less
View File

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

8
src/assets/less/site/responsive/screen-sm-up.less
View File

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

5
src/assets/less/site/responsive/screen-sm.less
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; }
}

8
src/assets/less/site/responsive/screen-xs.less
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;
}
}
}