diff options
author | Brian Talbot <talbs@fortawesome.com> | 2016-12-01 21:35:54 +0300 |
---|---|---|
committer | Brian Talbot <talbs@fortawesome.com> | 2016-12-02 19:41:49 +0300 |
commit | 1d401c6917e46909980e6f349d7330ff799c728a (patch) | |
tree | 609c5dccc96d0c3797a957462d68e23ece7da5f2 /src | |
parent | 2fde87192a4821b25f8cc7ab702c5d27e12a9238 (diff) |
updating site after Font Awesome 5 Kickstarter ended
Diffstat (limited to 'src')
-rw-r--r-- | src/_includes/jumbotron-carousel.html | 12 | ||||
-rw-r--r-- | src/_includes/jumbotron.html | 22 | ||||
-rw-r--r-- | src/_includes/kickstarter-widget.html | 1 | ||||
-rw-r--r-- | src/_includes/modals/fa5.html (renamed from src/_includes/modals/kickstarter.html) | 12 | ||||
-rw-r--r-- | src/_includes/navbar.html | 7 | ||||
-rw-r--r-- | src/_layouts/base.html | 3 | ||||
-rw-r--r-- | src/assets/js/site.js | 97 | ||||
-rw-r--r-- | src/assets/less/site.less | 2 | ||||
-rw-r--r-- | src/assets/less/site/banner-ad.less | 74 | ||||
-rw-r--r-- | src/assets/less/site/fa5.less (renamed from src/assets/less/site/kickstarter.less) | 7 | ||||
-rw-r--r-- | src/assets/less/site/responsive/screen-lg.less | 7 | ||||
-rw-r--r-- | src/assets/less/site/responsive/screen-sm-up.less | 9 | ||||
-rw-r--r-- | src/assets/less/site/responsive/screen-sm.less | 6 | ||||
-rw-r--r-- | src/assets/less/site/responsive/screen-xs.less | 9 |
14 files changed, 55 insertions, 213 deletions
diff --git a/src/_includes/jumbotron-carousel.html b/src/_includes/jumbotron-carousel.html index 52aa766e6..b7d79b668 100644 --- a/src/_includes/jumbotron-carousel.html +++ b/src/_includes/jumbotron-carousel.html @@ -1,7 +1,7 @@ <div class="jumbotron jumbotron-carousel hidden-print"> <div class="container"> <div class="row"> - <div class="col-md-9 col-sm-8 text-center"> + <div class="col-md-8 col-sm-8 text-center"> <h1>Font Awesome</h1> <p>The iconic font and CSS toolkit</p> <div class="actions"> @@ -20,11 +20,8 @@ Created by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a> </div> </div> - <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="col-md-4 col-sm-4"> + <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> @@ -42,6 +39,7 @@ <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> @@ -52,7 +50,7 @@ <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> <span class="sr-only">Next</span> </a> - </div> --> + </div> </div> </div> diff --git a/src/_includes/jumbotron.html b/src/_includes/jumbotron.html index 33608b81b..84b5a51d1 100644 --- a/src/_includes/jumbotron.html +++ b/src/_includes/jumbotron.html @@ -1,17 +1,17 @@ <div class="jumbotron jumbotron-ad hidden-print"> <div class="container"> - - <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> + {% if page.in_page_nav %} + <div class="col-md-9"> + <h1>{{ jumbotron_h1 }}</h1> + <p>{{ jumbotron_p }}</p> </div> + <div class="col-md-3"> + {{ jumbotron_nav }} + </div> + {% else %} + <h1>{{ jumbotron_h1 }}</h1> + <p>{{ jumbotron_p }}</p> + {% endif %} </div> </div> diff --git a/src/_includes/kickstarter-widget.html b/src/_includes/kickstarter-widget.html deleted file mode 100644 index 68cfa0159..000000000 --- a/src/_includes/kickstarter-widget.html +++ /dev/null @@ -1 +0,0 @@ -<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> diff --git a/src/_includes/modals/kickstarter.html b/src/_includes/modals/fa5.html index b275b82f7..f105d67c3 100644 --- a/src/_includes/modals/kickstarter.html +++ b/src/_includes/modals/fa5.html @@ -1,23 +1,23 @@ -<div class="modal" id="modal-kickstarter" tabindex="-1" role="dialog" aria-labelledby="modal-kickstarter-label"> +<div class="modal" id="modal-fa5" tabindex="-1" role="dialog" aria-labelledby="modal-fa5-label"> <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" aria-hidden="true"></i><span class="close"></span></button> - <h2 class="modal-title" id="modal-kickstarter-label">Font Awesome 5!</h2> + <h2 class="modal-title" id="modal-fa5-label">Font Awesome 5 is funded and coming!</h2> </div> <div class="modal-body"> <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> <div class='embed-container'> - <iframe id="kickstarter-iframe" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/video.html" frameborder="0" scrolling="no" allowfullscreen></iframe> + <iframe id="fa5-iframe" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/video.html" frameborder="0" scrolling="no" allowfullscreen></iframe> </div> <p class="lead text-center margin-top-lg margin-bottom-lg"> - Early backer prices extended and tons of stretch goals already funded! + Thanks to all of our Kickstarter backers who helped make the project successful. More information and updates are to come. </p> - <a class="btn btn-kickstarter btn-lg btn-block" href="https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=1oakzw" + <a class="btn btn-fa5 btn-lg btn-block" href="https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=1oakzw" onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Check out the Kickstarter']);"> - <h3 class="margin text-sans-serif strong">Check out the <br class="hide-sm hide-md hide-lg">Kickstarter! <i class="fa fa-external-link-square" aria-hidden="true"></i></h3> + <h3 class="margin text-sans-serif strong">Check out the details on <br class="hide-sm hide-md hide-lg">Kickstarter <i class="fa fa-external-link-square" aria-hidden="true"></i></h3> </a> </div> diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index 0b672e70f..97f4dc789 100644 --- a/src/_includes/navbar.html +++ b/src/_includes/navbar.html @@ -3,9 +3,6 @@ <div class="message-container"> <div class="tagline"> <span id="rotating-message"></span> - <div class="time-left"> - <span id="time-left-message"></span> - </div> </div> <div class="action"> <a id="rotating-url" class="btn btn-primary btn-lg btn-block" href=""></a> @@ -14,7 +11,7 @@ </div> </div> -<!-- <div class="navbar navbar-org navbar-static-top"> +<div class="navbar navbar-org navbar-static-top"> <div class="container"> <ul class="nav navbar-nav navbar-right"> <li> @@ -37,7 +34,7 @@ </ul> <div class="navbar-text navbar-right hide-xs">Build and serve a faster front end!</div> </div> -</div> --> +</div> <div class="navbar navbar-inverse navbar-static-top hidden-print"> <div class="container"> diff --git a/src/_layouts/base.html b/src/_layouts/base.html index 336f88976..3a784def0 100644 --- a/src/_layouts/base.html +++ b/src/_layouts/base.html @@ -45,7 +45,7 @@ {{ content }} </div> {% include footer.html %} - {% include modals/kickstarter.html %} + {% include modals/fa5.html %} <script src="https://platform.twitter.com/widgets.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/{{ site.jquery.version }}/jquery.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/{{ site.jquery_validate.version }}/jquery.validate.min.js"></script> @@ -55,7 +55,6 @@ <script src="https://cdn.jsdelivr.net/underscorejs/1.8.3/underscore-min.js" integrity="sha256-obZACiHd7gkOk9iIL/pimWMTJ4W/pBsKu+oZnSeBIek=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/backbonejs/1.2.2/backbone-min.js" integrity="sha256-p6bkfFqmxtebrKOS+wyGi+Qf3d111eWUQP67keyXJ6Q=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/jsdelivr-rum/1.5/jsdelivr-rum.min.js" integrity="sha256-HlY2rbkgbiHhtilMXmQ86rjL/EIxGDtdg9GU9/T2ZxE=" crossorigin="anonymous"></script> - <script src="https://cdn.jsdelivr.net/momentjs/2.15.1/moment.min.js" integrity="sha256-4PIvl58L9q7iwjT654TQJM+C/acEyoG738iL8B8nhXg=" crossorigin="anonymous"></script> <script src="{{ page.relative_path }}assets/js/site.js"></script> <script src="{{ page.relative_path }}assets/js/search.js"></script> <script src="{{ page.relative_path }}assets/js/monetization.js" type="text/javascript"></script> diff --git a/src/assets/js/site.js b/src/assets/js/site.js index 256a2fb64..cff7af431 100644 --- a/src/assets/js/site.js +++ b/src/assets/js/site.js @@ -2,54 +2,36 @@ $(function () { $("#newsletter").validate(); var ads = [ - // { - // quote: "<i class='fas fas-perfect fas-2x valign-middle margin-right'></i>Looking for the best icon sets? Check out <strong>Symbolset</strong>, <a href='https://articles.fortawesome.com/fort-awesome-acquires-symbolset-72229dab2c13'>now</a> from the maker of Font Awesome.", - // class: "symbolset", - // url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_best_icons&utm_campaign=promo_4.7_update", - // btn_text: "Gimme Some!" - // }, - // { - // quote: "<i class='fas fas-curate fas-2x valign-middle margin-right'></i>Need a different look for your icons? Check out <strong>Symbolset</strong>, <a href='https://articles.fortawesome.com/fort-awesome-acquires-symbolset-72229dab2c13'>now</a> from the maker of Font Awesome.", - // class: "symbolset", - // url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_different_look&utm_campaign=promo_4.7_update", - // btn_text: "Gimme Some!" - // }, - // { - // quote: "Take your icon game to the next level. Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.", - // class: "fort-awesome", - // url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.7_update", - // btn_text: "Gimme Some!" - // }, - // { - // quote: "Make your icons load 10x faster! Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.", - // class: "fort-awesome", - // url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.7_update", - // btn_text: "Gimme Some!" - // }, - // { - // quote: "Want to add your own icon? Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.", - // class: "fort-awesome", - // url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.7_update", - // btn_text: "Gimme Some!" - // } { - quote: "Font Awesome 5. The most awesome-est Font Awesome ever!", - class: "kickstarter", - url: "https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=c92610", - btn_text: "Check out the Kickstarter", + quote: "<i class='fas fas-perfect fas-2x valign-middle margin-right'></i>Looking for the best icon sets? Check out <strong>Symbolset</strong>, <a href='https://articles.fortawesome.com/fort-awesome-acquires-symbolset-72229dab2c13'>now</a> from the maker of Font Awesome.", + class: "symbolset", + url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_best_icons&utm_campaign=promo_4.7_update", + btn_text: "Gimme Some!" }, { - quote: "Get 1,000+ more icons and SVG in Font Awesome 5 Pro!", - class: "kickstarter", - url: "https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=c92610", - btn_text: "Check out the Kickstarter", + quote: "<i class='fas fas-curate fas-2x valign-middle margin-right'></i>Need a different look for your icons? Check out <strong>Symbolset</strong>, <a href='https://articles.fortawesome.com/fort-awesome-acquires-symbolset-72229dab2c13'>now</a> from the maker of Font Awesome.", + class: "symbolset", + url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_different_look&utm_campaign=promo_4.7_update", + btn_text: "Gimme Some!" }, { - quote: "Early backer prices extended and tons of stretch goals already funded!", - class: "kickstarter", - url: "https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=c92610", - btn_text: "Font Awesome 5 Kickstarter", + quote: "Take your icon game to the next level. Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.", + class: "fort-awesome", + url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.7_update", + btn_text: "Gimme Some!" }, + { + quote: "Make your icons load 10x faster! Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.", + class: "fort-awesome", + url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.7_update", + btn_text: "Gimme Some!" + }, + { + quote: "Want to add your own icon? Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.", + class: "fort-awesome", + url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.7_update", + btn_text: "Gimme Some!" + } ]; selectAd(); @@ -62,41 +44,20 @@ $(function () { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="popover"]').popover(); - if (storageAvailable('localStorage') && !localStorage.seenKickstarterModal) { - $('#modal-kickstarter') + if (storageAvailable('localStorage') && !localStorage.seenFA5Modal) { + $('#modal-fa5') .modal('toggle') .on('hidden.bs.modal', function (e) { - $('#kickstarter-iframe').remove(); + $('#fa5-iframe').remove(); }); ; } if (storageAvailable('localStorage')) { - localStorage.seenKickstarterModal = true; + localStorage.seenFA5Modal = true; // Yippee! We can use localStorage awesomeness } - function timeLeft() { - var now, ksEndsAt, hoursLeft, minutesLeft, humanized; - - try { - now = moment(); - ksEndsAt = moment("2016-12-01 12:01:00-05"); - hoursLeft = ksEndsAt.diff(now, "hours"); - minutesLeft = ksEndsAt.diff(now, "minutes") - hoursLeft * 60; - } catch (e) {} - - if (hoursLeft < 0 || minutesLeft < 0) { - return; - } - - humanized = hoursLeft + " " + ((hoursLeft === 1) ? "hour" : "hours") + ", " + minutesLeft + " " + ((minutesLeft === 1) ? "minute" : "minutes"); - - $('#time-left-message').html('Just <span class="duration">' + humanized + '</span> left to support the Font Awesome 5 Kickstarter for $20'); - - setTimeout(timeLeft, 2000); - } - function storageAvailable(type) { try { var storage = window[type], @@ -114,8 +75,6 @@ $(function () { random_number = Math.floor(Math.random() * ads.length); random_ad = ads[random_number]; - timeLeft(); - $('#banner').addClass(random_ad.class); $('#rotating-message').html(random_ad.quote); $('#rotating-url').attr("href", random_ad.url); diff --git a/src/assets/less/site.less b/src/assets/less/site.less index 125b3fd36..5207be2e4 100644 --- a/src/assets/less/site.less +++ b/src/assets/less/site.less @@ -33,7 +33,7 @@ @import "site/bsap-ad"; @import "site/sumome"; @import "site/algolia"; -@import "site/kickstarter"; +@import "site/fa5"; @import "site/newsletter"; @import "site/views"; diff --git a/src/assets/less/site/banner-ad.less b/src/assets/less/site/banner-ad.less index cd065f2cc..dd12f4b51 100644 --- a/src/assets/less/site/banner-ad.less +++ b/src/assets/less/site/banner-ad.less @@ -210,78 +210,4 @@ } } } - - &.kickstarter { - @kickstarter-bg: #489fdf; - background-color: @kickstarter-bg; - border-bottom: rgba(0,0,0,0.2); - .message-container { padding: 40px 0; } - .tagline { font-size: 24px; } - .time-left { - font-size: 18px; - color: mix(@kickstarter-bg, #fff, 20%); - } - @keyframes flash-duration { - from { - color: #fff; - } - to { - color: mix(@kickstarter-bg, #fff, 20%); - } - } - .duration { - font-weight: 600; - animation-name: flash-duration; - animation-duration: 1.0s; - } - a:not(.btn) { - text-decoration: underline; - color: #fff; - &:hover { color: rgba(255,255,255,.8); } - } - .btn-primary { - @color: @kickstarter-bg; - @background: #fff; - @border: mix(#000,@kickstarter-bg,10%); - font-weight: 600; - font-size: 22px; - padding: 14px 28px; - border-radius: 30px; - - color: @color; - background-color: @background; - border-color: @border; - border-bottom-width: 2px; - text-shadow: none; - - &:hover, - &:focus, - &:active, - &.active, - .open > &.dropdown-toggle { - color: #fff; - background-color: rgba(0,0,0,0.2); - border-color: rgba(0,0,0,0.2); - border-bottom-color: rgba(0,0,0,0.2); - } - &:active, - &.active, - .open > &.dropdown-toggle { - background-image: none; - } - &.disabled, - &[disabled], - fieldset[disabled] & { - &, - &:hover, - &:focus, - &:active, - &.active { - background-color: @background; - border-color: @border; - } - } - } - } - } diff --git a/src/assets/less/site/kickstarter.less b/src/assets/less/site/fa5.less index 65b3cf8a6..55bf2bdc1 100644 --- a/src/assets/less/site/kickstarter.less +++ b/src/assets/less/site/fa5.less @@ -1,12 +1,7 @@ -.btn-kickstarter { +.btn-fa5 { .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); diff --git a/src/assets/less/site/responsive/screen-lg.less b/src/assets/less/site/responsive/screen-lg.less index 1205e44c7..ae404bb8e 100644 --- a/src/assets/less/site/responsive/screen-lg.less +++ b/src/assets/less/site/responsive/screen-lg.less @@ -55,11 +55,4 @@ } .hide-lg { display: none; } - - .jumbotron-ad #newsletter { - margin-top: 30px; - margin-right: 250px; - margin-bottom: -70px; - } - } diff --git a/src/assets/less/site/responsive/screen-sm-up.less b/src/assets/less/site/responsive/screen-sm-up.less index 78c9d1226..5bc078fdc 100644 --- a/src/assets/less/site/responsive/screen-sm-up.less +++ b/src/assets/less/site/responsive/screen-sm-up.less @@ -14,13 +14,4 @@ border-bottom-left-radius: 0; } } - - .jumbotron-kickstarter { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - } - } diff --git a/src/assets/less/site/responsive/screen-sm.less b/src/assets/less/site/responsive/screen-sm.less index c6a9efea4..676b2d688 100644 --- a/src/assets/less/site/responsive/screen-sm.less +++ b/src/assets/less/site/responsive/screen-sm.less @@ -45,10 +45,4 @@ .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; } } diff --git a/src/assets/less/site/responsive/screen-xs.less b/src/assets/less/site/responsive/screen-xs.less index c41c0984f..da5030d48 100644 --- a/src/assets/less/site/responsive/screen-xs.less +++ b/src/assets/less/site/responsive/screen-xs.less @@ -91,13 +91,4 @@ .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; - } - } } |