From 6f5e03bd76daf9a237313f4dbe100b638b8474b3 Mon Sep 17 00:00:00 2001 From: Dave Gandy Date: Thu, 27 Oct 2016 16:52:43 -0400 Subject: [PATCH] Adding Kickstarter widget --- src/_includes/jumbotron-carousel.html | 13 ++++++----- src/_includes/jumbotron.html | 22 +++++++++---------- src/_includes/kickstarter-widget.html | 1 + src/_includes/newsletter-subscribe.html | 16 ++++++++++++++ src/_includes/stripe-social.html | 20 ++--------------- src/assets/js/site.js | 6 +++++ src/assets/less/site.less | 1 + src/assets/less/site/kickstarter.less | 10 +++++++++ src/assets/less/site/newsletter.less | 14 ++++++++++++ .../less/site/responsive/screen-lg.less | 7 ++++++ .../less/site/responsive/screen-sm-up.less | 8 +++++++ .../less/site/responsive/screen-sm.less | 7 +++++- .../less/site/responsive/screen-xs.less | 8 +++++++ 13 files changed, 96 insertions(+), 37 deletions(-) create mode 100644 src/_includes/kickstarter-widget.html create mode 100644 src/_includes/newsletter-subscribe.html create mode 100644 src/assets/less/site/newsletter.less diff --git a/src/_includes/jumbotron-carousel.html b/src/_includes/jumbotron-carousel.html index bf938adec..52aa766e6 100644 --- a/src/_includes/jumbotron-carousel.html +++ b/src/_includes/jumbotron-carousel.html @@ -1,7 +1,7 @@
-
+

Font Awesome

The iconic font and CSS toolkit

@@ -20,9 +20,11 @@ Created by Dave Gandy
-
- -->
diff --git a/src/_includes/jumbotron.html b/src/_includes/jumbotron.html index 93920f7a7..33608b81b 100644 --- a/src/_includes/jumbotron.html +++ b/src/_includes/jumbotron.html @@ -1,19 +1,17 @@
- {% if page.in_page_nav %} -
-

{{ jumbotron_h1 }}

-

{{ jumbotron_p }}

+
+
+

{{ jumbotron_h1 }}

+

{{ jumbotron_p }}

+
+
+
+ {% include kickstarter-widget.html %} +
+
-
- {{ jumbotron_nav }} -
- {% else %} -

{{ jumbotron_h1 }}

-

{{ jumbotron_p }}

- {% endif %}
-
diff --git a/src/_includes/kickstarter-widget.html b/src/_includes/kickstarter-widget.html new file mode 100644 index 000000000..68cfa0159 --- /dev/null +++ b/src/_includes/kickstarter-widget.html @@ -0,0 +1 @@ + diff --git a/src/_includes/newsletter-subscribe.html b/src/_includes/newsletter-subscribe.html new file mode 100644 index 000000000..dd8916cff --- /dev/null +++ b/src/_includes/newsletter-subscribe.html @@ -0,0 +1,16 @@ +
+
+
+
+ +
+
+
+ +
+
+
diff --git a/src/_includes/stripe-social.html b/src/_includes/stripe-social.html index 9529bbd96..72dd70c97 100644 --- a/src/_includes/stripe-social.html +++ b/src/_includes/stripe-social.html @@ -1,22 +1,6 @@
-
-
-
-
- -
-
-
- -
-
-
- + {% include newsletter-subscribe.html %}
  • @@ -25,7 +9,7 @@
  • diff --git a/src/assets/js/site.js b/src/assets/js/site.js index b070e800b..1b6cfbed7 100644 --- a/src/assets/js/site.js +++ b/src/assets/js/site.js @@ -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(); diff --git a/src/assets/less/site.less b/src/assets/less/site.less index 7b074c7ee..125b3fd36 100644 --- a/src/assets/less/site.less +++ b/src/assets/less/site.less @@ -34,6 +34,7 @@ @import "site/sumome"; @import "site/algolia"; @import "site/kickstarter"; +@import "site/newsletter"; @import "site/views"; @import "site/store"; diff --git a/src/assets/less/site/kickstarter.less b/src/assets/less/site/kickstarter.less index 689a8c04a..65b3cf8a6 100644 --- a/src/assets/less/site/kickstarter.less +++ b/src/assets/less/site/kickstarter.less @@ -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); +} diff --git a/src/assets/less/site/newsletter.less b/src/assets/less/site/newsletter.less new file mode 100644 index 000000000..6822f0151 --- /dev/null +++ b/src/assets/less/site/newsletter.less @@ -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; + } + } +} diff --git a/src/assets/less/site/responsive/screen-lg.less b/src/assets/less/site/responsive/screen-lg.less index ae404bb8e..1205e44c7 100644 --- a/src/assets/less/site/responsive/screen-lg.less +++ b/src/assets/less/site/responsive/screen-lg.less @@ -55,4 +55,11 @@ } .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 b7037e54d..78c9d1226 100644 --- a/src/assets/less/site/responsive/screen-sm-up.less +++ b/src/assets/less/site/responsive/screen-sm-up.less @@ -15,4 +15,12 @@ } } + .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 4c782ca22..c6a9efea4 100644 --- a/src/assets/less/site/responsive/screen-sm.less +++ b/src/assets/less/site/responsive/screen-sm.less @@ -45,5 +45,10 @@ .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 156e5bc38..c41c0984f 100644 --- a/src/assets/less/site/responsive/screen-xs.less +++ b/src/assets/less/site/responsive/screen-xs.less @@ -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; + } + } }