diff options
Diffstat (limited to 'site/static/styles/scss/_home.scss')
| -rw-r--r-- | site/static/styles/scss/_home.scss | 362 |
1 files changed, 362 insertions, 0 deletions
diff --git a/site/static/styles/scss/_home.scss b/site/static/styles/scss/_home.scss new file mode 100644 index 0000000..10597f6 --- /dev/null +++ b/site/static/styles/scss/_home.scss @@ -0,0 +1,362 @@ +/* @media (min-width: $screen-sm-min) { body { font-size:.5em; } } */ + + +body { + height: 100%; +} + +html { + height: 100%; +} + +#hero { + min-height: 500px; + height: 70%; + background-color: $gray-transparent; + background-image: url($baseurl+"/static/img/wisplight.jpg"); + background-size: cover; + position:relative; + color:white; + + .row { + margin-left: 0px; + margin-right: 0px; + } + + #hero_section { + width:80%; + max-width:730px; + font-size:18px; + > div { + display: inline-block; + } + .cordova-bot { + text-align: center; + img { + max-width: 275px; + width: 100%; + } + } + .hero_content { + p { + color: $gray-10; + font-weight: 300; + color: rgb(166, 178, 180); + em { + font-style: normal; + font-weight: normal; + color: white; + } + } + .hero_supported_platforms { + padding-bottom: 40px; + img { + margin-right: 15px; + } + .platforms_more { + font-size: 12px; + font-weight: bold; + white-space: nowrap; + display: inline-block; + margin-top: 10px; + padding-left: 5px; + } + } + .hero_buttons { + .btn { + text-transform: uppercase; + font-size: 13px; + font-weight: bold; + letter-spacing: 0.1em; + border-radius: 2px; + padding: 15px; + margin-bottom: 10px; + } + } + } + } + .hero_logo { + width:100%; + padding-top:40px; + padding-bottom:20px; + } +} + +@media (min-width: $screen-sm-min) { + #hero { + #hero_section { + .hero_buttons { + .btn + .btn { + margin-left: 15px; + } + } + } + } +} + +@media (max-width: $screen-xs-max) { + #hero { + min-height: 620px; + height: 100%; + .hero_content p { + margin-bottom: 20px; + } + #hero_section .cordova-bot { + img { + width: 60%; + } + } + } +} + +#hero_bottom_strip { + background-color: rgb(42,42,42); + color: white; + width: 100%; + margin: 0; + + .container { + padding-top:30px; + padding-bottom:30px; + font-size: 18px; + } + .sprite_img { + position:relative; + left: 0px; + margin: 0; + padding: 0; + top:0; + width: 85px; + height: 85px; + background-repeat: no-repeat; + background-size: 255px 85px; + } +} +.value_prop { + max-width: 146px; + height: 4em; + p { + top:50%; + position: relative; + transform: translateY(-50%); + padding-left: 10px; + } +} + +@media (max-width: 767px) { + #hero #hero_section .hero_content { width:100%; } + #hero_bottom_strip { + min-height: initial; + .container { + padding-top: 15px; + padding-bottom: 30px; + font-size: 1em; + text-align: center; + } + } + .sprite_img { display:inline-block } + .value_prop { max-width:initial } +} + +@media (max-width: 550px) { /* Scrunch the icons even smaller on very small devices */ + .sprite_img { + width:45px; + height:45px; + background-size:135px 45px; + } +} + +@mixin sprite-img($a, $b) { + background: url($baseurl+"/static/img/value-prop-sprite.svg") $a $b; +} + +#sprite_shared_code { @include sprite-img(0px, 0) } +#sprite_offline { @include sprite-img(50%, 0) } +#sprite_apis { @include sprite-img(100%, 0) } + +.navbar-brand { + padding: 0; + position: absolute; +} + +img#logo_top { + width: 150px; + padding: 10px; + height: 50px; +} + +@media (min-width: 767px) { /* Center the navs when not collapsed */ + .nav_bar_center { + text-align: center; + height: 50px; + } + .nav_bar_center > ul { + display: inline-block; + float: none; + } +} + +/* +********* Getting Started *********** +*/ +.get-started-section { + margin-bottom:20px; +} +.number_circle { + display: inline-block; + width: 50px; + height:50px; + padding: 8px; + font-size: 24px; + color: #ffffff; + vertical-align: middle; + white-space: nowrap; + text-align: center; + background-color: $brand-primary-darker; + border-radius: 50%; + margin-top: 20px; +} + +.well_code { + @extend .well; + padding-bottom:19px + 50px; + position:relative; + background-color: $gray-10; + margin-top:25px; + div { + @extend .well_code; + position: absolute; + top: 100%; + @include vendor-prefix(transform, translateY(-100%)); + padding: 0; + margin:0; + background-color: $gray-20; + width: 100%; + margin-left:-19px; + button { + background-color: $brand-primary; + margin:5px; + } + } + .copy-text { + width:0px; + height:0px; + overflow:hidden; + } +} + + +/* +********* Showcase Section *********** +*/ + +.dark { + background-color: $gray-90; +} +.dark, .dark .container-fluid { /* Fixes an overflow problem in the showcase sections */ + margin-left:0; + margin-right:0; + padding-left:0; + padding-right:0; +} +.showcase_section_intro { + margin: auto; + float:none; + max-width: 700px; + h1 { + color: $brand-gold; + padding-bottom: 0; + } + h2 { + color: white; + font-size: 18px; + font-weight: normal; + padding: 0; + margin-top: 0; + } + p, span { color: $gray-40; text-align: left; } + padding-top: 4px; + padding-bottom: 35px; +} + +.supported_platforms { + background-color: darken(white, 85%); + margin-left: -15px; + margin-right: -15px; + margin-bottom: 40px; +} +.platform_logos { + list-style-type: none; + padding-left:0; + padding-top: 20px; + padding-bottom: 20px; +} +.card_gallery { + color:white; + .card { + padding:8px; + .card_inner { + background-color: darken(white, 85%); + padding: 32px 16px 24px 16px; + .card_title { + color: $brand-primary; + font-weight: bold; + font-size: 13px; + padding-top: 10px; + } + .img_container { + height: 50px; + img { + max-height: 100%; + max-width: 100%; + } + } + &.tool { + .text { + height: 250px; + } + } + &.app { + .card_title { + min-height: 46px; + } + .text { + height: 120px; + } + } + } + .showcase_app_thumb { + width: 100%; + height: 100px; + img { + height: 100%; + border-radius: 22px; + } + } + } +} +/* make cards smaller on smaller screens */ +@media (max-width: $screen-lg-min) { + .card_gallery .card .card_inner { + &.tool .text { + height: 120px; + } + &.app .text { + height: 70px; + } + } +} +@media (max-width: $screen-md-min) { + .card_gallery .card .card_inner { + &.tool .text { + height: 100px; + } + &.app .text { + height: 50px; + } + } +} +.add_seemore_links { + margin: 15px 0; + a { padding-left:30px; } +} |