+ Search for Species+ on your mobile app store +
+ + \ No newline at end of file diff --git a/app/assets/javascripts/species/templates/index.handlebars b/app/assets/javascripts/species/templates/index.handlebars index 01f409170b..eadb1c6c11 100644 --- a/app/assets/javascripts/species/templates/index.handlebars +++ b/app/assets/javascripts/species/templates/index.handlebars @@ -13,3 +13,5 @@ --> {{outlet downloadsButton}} + +{{partial 'species/promo_banner'}} \ No newline at end of file diff --git a/app/assets/stylesheets/species/_variables.scss b/app/assets/stylesheets/species/_variables.scss new file mode 100644 index 0000000000..c2b6795005 --- /dev/null +++ b/app/assets/stylesheets/species/_variables.scss @@ -0,0 +1,7 @@ +// Structure +$main-container-width: 860px; + +// Colors +$color-gray-light: #F3F1F1; +$color-navy-dark: #2D3237; +$color-navy: #253748; \ No newline at end of file diff --git a/app/assets/stylesheets/species/all.scss b/app/assets/stylesheets/species/all.scss index 81b98f77b2..bc037efabc 100755 --- a/app/assets/stylesheets/species/all.scss +++ b/app/assets/stylesheets/species/all.scss @@ -4,6 +4,7 @@ */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,600,700); +@import './variables'; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; @@ -29,7 +30,7 @@ body { margin: 0; color: #868686; font: 14px/18px 'Open Sans', Helvetica, Arial, sans-serif; - background: #f3f1f1; + background: $color-gray-light; height: 100%; min-width: 980px; background-image: image-url('species/background_1.jpg'); @@ -132,7 +133,6 @@ span.beta{ } #nav { float: right; - margin: 0 -25px 0 0; padding: 13px 0 0; } #nav > li { @@ -143,13 +143,14 @@ span.beta{ position: relative; } #nav > li:first-child { background: none; } +#nav > li:last-child { padding-right: 0; } #nav > li > a { - color: #2d3237; + color: $color-navy-dark; text-decoration: none; } #nav > li > a:hover { - border-bottom: 1px dotted #2D3237; + border-bottom: 1px dotted $color-navy-dark; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; @@ -158,8 +159,8 @@ span.beta{ } #nav > li.add { - border-left: 1px solid #2d3237; - border-right: 1px solid #2d3237; + border-left: 1px solid $color-navy-dark; + border-right: 1px solid $color-navy-dark; padding-bottom: 0; } @@ -209,8 +210,8 @@ span.beta{ #nav > li > ul > li > a { float: left; text-decoration: none; - border-bottom: 1px dotted #2D3237; - color: #2D3237; + border-bottom: 1px dotted $color-navy-dark; + color: $color-navy-dark; } #nav > li > ul > li > a:hover { @@ -226,7 +227,7 @@ span.beta{ } #main { - width: 860px; + width: $main-container-width; margin: 0 auto; font-size: 13px; text-align: center; @@ -236,17 +237,18 @@ span.beta{ #main p { margin: 20px 0 28px 0; font-size: 15px; - color: #2D3237; + color: $color-navy-dark; } #main h1 { font-size: 50px; font-weight: lighter; margin: 0 0 3px; - color: #2d3237; + color: $color-navy-dark; line-height: 60px; } -.text-species { + +@mixin text-species { margin-top: 10px; width: 210px; vertical-align: top; @@ -257,6 +259,15 @@ span.beta{ background: image-url('species/species+_logo_text.png') no-repeat; background-size: 100%; } +.text-species { + @include text-species; + + &--sm { + @include text-species; + width: 100px; height: 29px; + } +} + html.lt-ie9 .text-species{ background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( @@ -264,8 +275,8 @@ html.lt-ie9 .text-species{ sizingMethod='scale'); } a.learn-more { - color: #2D3237; - border-bottom: 1px dotted #2D3237; + color: $color-navy-dark; + border-bottom: 1px dotted $color-navy-dark; } a.learn-more:hover { text-decoration: none; @@ -623,7 +634,7 @@ body.inner #footer .holder{ padding: 16px 0 13px 20px; } .doc-type .heading { - color: #2d3237; + color: $color-navy-dark; font-weight: bold; display: block; margin: 0 0 4px; @@ -809,7 +820,7 @@ body.inner #footer .holder{ line-height: 60px; } #main .heading-holder h2 { - color: #2d3237; + color: $color-navy-dark; font-size: 24px; padding: 5px 0 15px 0; font-weight: normal; @@ -981,7 +992,7 @@ body.inner #footer .holder{ #main .block .title { display: block; font-size: 15px; - color: #2d3237; + color: $color-navy-dark; font-weight: bold; padding: 0; margin: 0 0 12px; @@ -1264,7 +1275,7 @@ body.inner #footer .holder{ margin: 0 0 51px; } #main .block04 .title { - color: #2D3237; + color: $color-navy-dark; display: block; font-size: 15px; margin: 0 0 8px; @@ -1302,7 +1313,7 @@ body.inner #footer .holder{ margin: 0 0 18px; } #main .block06 .title { - color: #2D3237; + color: $color-navy-dark; display: block; font-size: 15px; font-weight: bold; diff --git a/app/assets/stylesheets/species/promo-banner.scss b/app/assets/stylesheets/species/promo-banner.scss new file mode 100644 index 0000000000..ceb6422783 --- /dev/null +++ b/app/assets/stylesheets/species/promo-banner.scss @@ -0,0 +1,87 @@ +@import './variables'; + +$promo-banner-padding-left: 418px; +$promo-banner-image-scale: 1.45; +$promo-banner-image-radius: $promo-banner-image-scale * $promo-banner-padding-left; +$promo-banner-image-padding-right: 76px; +$promo-banner-image-translate-x: ($promo-banner-image-scale - 1) * $promo-banner-padding-left + $promo-banner-image-padding-right; +$promo-banner-width: $main-container-width; + +$promo-banner-badge-height: 42px; +$promo-banner-badge-ratio--google: 120/36; +$promo-banner-badge-ratio--apple: 120/40; + +@mixin promo-banner-link { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + cursor: pointer; + margin-right: 18px; + height: $promo-banner-badge-height; + + &:not(:last-child) { + margin-right: 18px; + } +} + +.promo-banner { + background-color: $color-gray-light; + box-sizing: border-box; + overflow: hidden; + padding: 34px 71px 41px $promo-banner-padding-left; + text-align: left; + width: $promo-banner-width; + + position: absolute; + bottom: 44px; + + &__image { + background: image_url('species/promo_banner_image.png') no-repeat right 241px; + background-size: 346px 197px; + border-radius: 100%; + width: $promo-banner-image-radius; height: $promo-banner-image-radius; + + position: absolute; + left: 0; + top: 50%; + transform: translate(-$promo-banner-image-translate-x, -56%); + } + + &__title { + color: $color-navy; + font-size: 20px; + font-weight: 700; + line-height: 1.2em; + margin-bottom: 8px; + + .text-species--sm { + margin-top: 0; + } + } + + &__text { + #main & { + color: $color-navy-dark; + font-size: 16px; + margin: 0 0 24px; + } + } + + &__links { + display: flex; + } + + &__link { + &--google { + @include promo-banner-link; + background-image: image_url('species/google_play_badge.png'); + width: $promo-banner-badge-height * $promo-banner-badge-ratio--google; + } + + &--apple { + @include promo-banner-link; + background-image: image-url('species/apple_store_badge.svg'); + width: $promo-banner-badge-height * $promo-banner-badge-ratio--apple; + } + } +} \ No newline at end of file