| @charset "utf-8"; |
| |
| @import "normalize", |
| "bootstrap"; |
| |
| |
| |
| // SETUP - COLORS |
| $green: #49a348; |
| $orange: #E45635; // annoucement bg |
| $dark-space: #3B3B3C; // header bg |
| $deep-purple: #292E4B; // content bg |
| $purple: #525C86; // links |
| $yellow: #FDB940; // links |
| $charcoal: #292C2F; // footer bg |
| $gray80: #58595B; // text dark, heading |
| $gray50: #939598; // text med, paragraph, |
| $gray20: #D1D3D4; // footer link |
| $gray5: #F1F2F2; // light gray bg |
| |
| |
| |
| |
| // SETUP - MIXINS |
| @mixin transform($val) { |
| -webkit-transform: $val; |
| -moz-transform: $val; |
| -ms-transform: $val; |
| -o-transform: $val; |
| transform: $val; |
| } |
| |
| @mixin transition($val) { |
| -webkit-transition: $val; |
| -moz-transition: $val; |
| -ms-transition: $val; |
| -o-transition: $val; |
| transition: $val; |
| } |
| |
| @mixin box-shadow($val) { |
| -webkit-box-shadow: $val; |
| -moz-box-shadow: $val; |
| box-shadow: $val; |
| } |
| |
| @mixin opacity($val) { |
| opacity: $val; |
| $opacity-ie: $val * 100; |
| filter: alpha(opacity=$opacity-ie); //IE8 |
| } |
| |
| |
| |
| // COMPONENT - GENERAL |
| body {font-family: 'Source Sans Pro', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} |
| |
| h1, h2, h3, h4, h5, h6 {color: $gray80; font-weight: inherit;} |
| |
| p {margin: 15px 0 0;} |
| |
| br {content: ""; display: block; margin: 0;} |
| |
| blockquote .reference {display: block; margin-top: 40px; font-size: 66%; @include opacity(0.5);} |
| |
| a:hover {@include transition(all 0.3s linear);} |
| a.larger {font-size: 20px; |
| @media (min-width: 768px) {font-size: 32px;} |
| } |
| |
| .separator {height: 40px; |
| @media (min-width: 768px) {height: 60px;} |
| } |
| |
| .content {padding-top: 60px; padding-bottom: 60px; |
| a {border-bottom: 1px dashed $gray20;} |
| @media (min-width: 768px) {padding-top: 60px; padding-bottom: 60px;} |
| } |
| |
| |
| |
| // COMPONENT - TEXT COLORS |
| .text-purple {color: $purple;} |
| .text-yellow {color: $yellow;} |
| .text-light {color: $gray50;} |
| .text-dark {color: $gray80;} |
| |
| .monospace {font-family: monospace;} |
| |
| |
| |
| // COMPONENT - GENERAL - HR |
| hr {margin: 0; |
| &.gray {border-top: 10px solid rgba(0,0,0,0.11);} |
| } |
| |
| |
| |
| // COMPONENT - GENERAL INSET BOX-SHADOW |
| .inset-box-shadow-top {@include box-shadow(inset 0 10px 0 0 rgba(0,0,0,0.15));} |
| .inset-box-shadow-bottom {@include box-shadow(inset 0 -10px 0 0 rgba(0,0,0,0.15));} |
| |
| |
| |
| // COMPONENT - GENERAL - BACKGROUND COLORS |
| .bg-deep-purple, .bg-purple, .bg-gray5 {padding: 60px 0; |
| .content {padding-top: 0; padding-bottom: 0;} |
| @media (min-width: 768px) {padding: 80px 0;} |
| } |
| .bg-deep-purple, .bg-purple, .bg-orange {color: #fff; |
| h1, h2, h3, h4, h5, h6 {color: inherit;} |
| a {color: $yellow; |
| &:hover {color: darken($yellow,15%);} |
| } |
| } |
| |
| .bg-orange {background-color: $orange;} |
| .bg-deep-purple {background-color: $deep-purple;} |
| .bg-purple {background-color: $purple;} |
| .bg-gray5 {background-color: $gray5;} |
| |
| |
| |
| // COMPONENT - BUTTONS |
| .btn-outline-dark, .btn-green, .btn-gray80 {display: inline-block; color: #fff !important; height: 50px; line-height: 50px; text-align: center; border-radius: 5px; |
| &:hover {color: #fff !important;} |
| } |
| .btn-outline-dark {padding: 0; width: 190px; font-size: 16px; border: 1px solid $purple; |
| &:hover {border: 1px solid lighten($purple,15%); background-color: lignten($dark-space,25%);} |
| span {color: $yellow;} |
| @media (min-width: 768px) {width: 230px; font-size: 18px;} |
| } |
| .btn-green, .btn-gray80 {margin-top: 20px; font-size: 20px; border: none !important; width: 200px; |
| @media (min-width: 768px) {width: 260px;} |
| } |
| .btn-green {background-color: $green; |
| &:hover {background-color: darken($green,10%);} |
| } |
| .btn-gray80 {background-color: $gray80; |
| &:hover {background-color: darken($gray80,10%);} |
| } |
| |
| |
| |
| |
| // COMPONENT - JUMBOTRON |
| .jumbotron {background-color: $purple; background-repeat: no-repeat; background-position: center bottom; background-size: auto 100%; @extend .inset-box-shadow-top; |
| h1, h2, h3, h4, h5, h6, p {color: #fff;} |
| a {color: $yellow; |
| &:hover {color: darken($yellow,15%);} |
| } |
| @media (min-width: 1025px) { |
| .container {position: relative; top: 50%; @include transform(translateY(-50%)); max-height: 100%;} |
| } |
| } |
| |
| |
| |
| // COMPONENT - TABS |
| ul.tabs {list-style: none; margin: 0 -25px; padding: 0; |
| li[class^="col"] div {padding: 40px 20px; border-width: 10px 1px 1px; border-color: $gray20; border-style: solid;} |
| li.active div {border-color: $purple; border-bottom-color: #FFF; position: relative; z-index: 10;} |
| } |
| ul.tabs+.tab-content {margin-top: -1px; padding-top: 40px; border-top: 1px solid $purple; position: relative; z-index:0; |
| @media (min-width: 768px) {padding-top: 60px;} |
| } |
| |
| |
| |
| // LAYOUT - GENERAL |
| .logo {display: block; width: 166px; height: auto; |
| @media (min-width: 768px) {width: 225px;} |
| } |
| |
| |
| // LAYOUT - HEADER |
| header {position: relative; height: 105px; background-color: $dark-space; //@include box-shadow(0 10px 0 0 rgba(0,0,0,0.15)); |
| a.logo, nav {display: inline-block; line-height: 105px;} |
| |
| a {color: #fff; |
| &:visited {color: #fff;} |
| &:hover {color: #ccc;} |
| &:active {color: #ccc;} |
| &:focus {color: #ccc;} |
| &.logo {float: left;} |
| } |
| |
| nav {float: right;} |
| |
| nav.menu-mobile { |
| ul {margin: 0; padding: 0; list-style: none; color: #fff; font-size: 16px; line-height: 30px;} |
| |
| a.mobile-menu-toggle {color: $purple; font-size: 35px;} |
| ul.mobile-menu-items {list-style: none; padding-top: 15px; padding-bottom: 15px; width: 100%; background-color: darken($purple,5%); position: absolute; top: 95px; left: 0; z-index: 99999; @include box-shadow(0 10px 0 0 rgba(0,0,0,0.06)); |
| li {text-indent: 30px; |
| a {display: block; font-size: inherit; line-height: 3; cursor: pointer;} |
| &:hover {background-color: darken($purple,15%);}; |
| } |
| |
| @media (min-width: 768px) {top: 115px;} |
| } |
| @media (min-width: 1120px) {display: none;} |
| } |
| |
| nav.menu-desktop {display: none; font-size: 18px; |
| ul {margin: 0; padding: 0; list-style: none; |
| li {display: inline-block; padding-right: 20px; |
| iframe {margin-bottom: -4px;} |
| &:last-child {padding-right: 0;} |
| } |
| } |
| |
| @media (min-width: 1120px) {display: block;} |
| } |
| |
| @media (min-width: 768px) {height: 105px; |
| a.logo, nav {line-height: 105px;} |
| } |
| } |
| |
| |
| |
| // LAYOUT - FOOTER |
| footer {padding: 80px 0 0; background-color: $charcoal; color: $gray50; font-size: 16px; @include box-shadow(inset 0 10px 0 0 rgba(0,0,0,0.5)); |
| ul {margin: 0; padding: 0; list-style: none;} |
| |
| .tagline, .sitemap, .btn-outline-dark, .copyright {margin-bottom: 40px;} |
| |
| .sitemap { |
| ul li { |
| a {color: $gray20; |
| &:hover {color: lighten($gray20,15%);} |
| } |
| } |
| } |
| .copyright {font-size: 11px;} |
| |
| @media (min-width: 768px) {font-size: 18px;} |
| } |
| |
| |
| |
| // LAYOUT FOOTER - TWITTER SHARE |
| .twitter-share {margin: 0 auto 40px; padding: 0 30px; max-width: 1200px; |
| h6 {margin-top: 0;} |
| .fa-twitter {color: #55ACEE; font-size: 33px;} |
| a {color: #55ACEE;} |
| @media (min-width: 768px) {padding: 0 50px;} |
| } |
| |
| |
| |
| // PAGE - HOME |
| body.index { |
| .annoucement {@extend .bg-orange; padding: 30px 0; |
| h3, img {display: inline-block; vertical-align: middle;} |
| h3 {margin: 0;} |
| img.pull-right {width: 229px; height: auto; display: none;} |
| a {border-bottom: 1px dashed $yellow;} |
| @media (min-width: 768px) { |
| h3 {font-size: 28px;} |
| } |
| @media (min-width: 1024px) { |
| img.pull-right {display: inline-block;} |
| } |
| } |
| |
| .jumbotron {padding-bottom: 0; background-image: url(../images/hero-home-bg@2x.png); background-position: center center; background-size: cover;} |
| |
| #getting-started { |
| .row.top { |
| div { |
| &.cloud,&.download {padding: 40px 20px; border-width: 10px 1px 1px; border-style: solid;} |
| &.cloud {border-color: $yellow $gray20 $gray20; |
| a {color: $yellow;} |
| a:hover {color: darken($yellow,10%);} |
| } |
| &.download {border-color: $purple $gray20 $gray20;} |
| } |
| } |
| .row {margin-top: 40px; margin-bottom: 60px; |
| @media (max-width: 768px) { |
| div[class^="col"] {margin-bottom: 40px; |
| &:last-child {margin-bottom: 0;} |
| } |
| } |
| } |
| } |
| |
| .features {@extend .bg-gray5; |
| h2 {margin-bottom: 30px; |
| &.text-light {margin-bottom: 0;} |
| } |
| h3, p {margin: 0;} |
| img {margin-bottom: 20px;} |
| |
| @media (max-width: 768px) { |
| div[class^="col"] {margin-bottom: 40px;} |
| } |
| @media (min-width: 768px) { |
| .row {margin-bottom: 80px;} |
| img {margin-bottom: 30px;} |
| } |
| } |
| |
| .video {@extend .bg-purple; @extend .inset-box-shadow-top; color: #fff; |
| h3 {margin: 15px 0 0;} |
| a {color: inherit; border: none; |
| &:hover {color: inherit; @include opacity(0.5); |
| img {@include opacity(0.75);} |
| } |
| } |
| p {margin: 0;} |
| ul {list-style: none; |
| a {color: $yellow; border-bottom: 1px dashed #fff;} |
| } |
| @media (max-width: 1024px) { |
| div[class^="col"] {margin-top: 40px;} |
| h3.col-sm-12 {margin: 60px 0 5px} |
| ul {margin-bottom: 0;} |
| } |
| @media (min-width: 1024px) {padding-top: 100px; padding-bottom: 100px; |
| .row {margin-top: 40px;} |
| h3.col-sm-12 {margin: 30px 0 15px} |
| } |
| } |
| |
| .tech {@extend .bg-deep-purple; @extend .inset-box-shadow-top; |
| img {margin-top: 20px; margin-bottom: 20px;} |
| h3 {margin-top: 40px;} |
| ul {margin: 30px 0; padding-left: 15px;} |
| .row {margin-bottom: 30px;} |
| @media (min-width: 768px) {padding-top: 90px; padding-bottom: 90px; |
| h3 {margin-top: 80px;} |
| .row {margin-bottom: 60px;} |
| } |
| @media (min-width: 1024px) { |
| .clearfix {display: none;} |
| } |
| } |
| |
| .contributors { |
| ul {list-style: none; margin: 20px 0; padding: 0; |
| li {display: inline-block; margin-right: 40px; margin-bottom: 20px;} |
| a {border: none; |
| &:hover img {@include opacity(0.75);} |
| img {max-height: 79px; max-width: 230px;} |
| } |
| } |
| @media (min-width: 768px) { |
| ul {margin: 40px 0; |
| li {margin-right: 80px;} |
| } |
| } |
| } |
| } |
| |
| |
| |
| // PAGE - FEATURES |
| body.features { |
| .content { |
| .quick-links {margin-bottom: 40px; |
| ul {margin-bottom: 0; list-style: none;} |
| a {padding-bottom: 2px;} |
| } |
| .row {margin-bottom: 30px; |
| &:last-child {margin-bottom: 0;} |
| } |
| |
| @media (max-width: 768px) { |
| div[class^="col"] {margin-top: 20px;} |
| } |
| @media (min-width: 768px) { |
| .row {margin-bottom: 80px;} |
| img {margin-top: 65px;} |
| } |
| } |
| } |
| |
| |
| // PAGE - COMMUNITY |
| body.community { |
| .jumbotron {padding-bottom: 0; |
| a:hover img {@include opacity(0.75);} |
| } |
| .comm-highlights { |
| h2 {margin-bottom: 0;} |
| img {display: block; margin-bottom: 20px; width: auto; height: 120px;} |
| a {display: inline-block; margin-top: 20px;} |
| div [class^="col"] {margin-top: 40px;} |
| } |
| .media-highlights {@extend .bg-gray5; @extend .inset-box-shadow-top; |
| h4 {margin-bottom: 10px solid; color: $gray50;} |
| } |
| .photo-gallery {@extend .bg-deep-purple; @extend .inset-box-shadow-top; |
| h2 + .row {margin-top: -30px;} |
| div[class^="col"] {margin-top: 50px;} |
| a:hover img {@include opacity(0.75);} |
| } |
| .content { |
| ul {margin: 15px 0 40px; padding: 0; list-style: none; font-size: 24px;} |
| p.talk {font-size: 24px;} |
| @media (min-width: 768px) { |
| ul {margin-bottom: 80px; font-size: 38px;} |
| p.talk {font-size: 38px; margin-top: 30px;} |
| } |
| } |
| } |
| |
| |
| |
| // PAGE - DOWNLOAD |
| body.download { |
| .content { |
| .block {margin-bottom: 40px; |
| &:last-child {margin-bottom: 20px;} |
| ul {margin: 20px 0 0; padding: 0; list-style: none; font-size: 20px; |
| h4 {margin: 0;} |
| } |
| } |
| |
| @media (min-width: 768px) { |
| .block {margin-bottom: 80px; |
| ul {margin: 30px 0 0;font-size: 24px;} |
| } |
| } |
| } |
| } |
| |
| |
| |
| // PAGE - GETTING STARTED CLOUD & DOWNLOAD |
| body.getting-started-cloud, body.getting-started-download { |
| ul.tabs li:first-child.active div {border-color: $yellow; border-bottom-color: #fff;} |
| ul.tabs+.tab-content {border: none !important; padding-top: 0;} |
| #tab1, #tab2 {padding-top: 40px; |
| @media (min-width: 768px) {padding-top: 60px;} |
| } |
| #tab1.active {border-top: 1px solid $yellow;} |
| #tab2.active {border-top: 1px solid $purple;} |
| |
| #tab1 { |
| div[class^="col"] {margin-bottom: 50px; |
| div.border.media {padding: 15px 15px 0; border: 1px solid $gray20; border-radius: 5px; |
| .media-left {padding-right: 15px;} |
| h4 {margin: 0;} |
| p {margin-top: 5px;} |
| } |
| } |
| a[class^="btn"] {display: block; margin-left: -15px; margin-right: -15px; width: auto; border-radius: 0 0 5px 5px; white-space: nowrap; overflow: hidden;} |
| } |
| } |
| |
| |
| |
| // PAGE - ECLIPSECON 2016 |
| body.eclipsecon2016 { |
| .jumbotron {background-image: url(../images/hero-home-bg@2x.png); background-position: center center; background-size: cover; |
| img {display: block; margin: 20px 0 30px; width: 430px; height: auto; max-width: 100%;} |
| a {border-bottom: 1px dashed #D1D3D4;} |
| } |
| .content { |
| h2 {margin-bottom: 20px;} |
| } |
| .meet-experts { |
| div[class^="col"] {text-align: center; |
| img {display: inline-block; max-width: 280px; margin-bottom: 20px;} |
| h3 {margin-bottom: 0;} |
| p {margin-top: 5px;} |
| } |
| @media (max-width: 768px) { |
| div[class^="col"] {margin-bottom: 40px; |
| &:last-child {margin-bottom: 0;} |
| } |
| } |
| } |
| .keynote {background-image: url(../images/eclipsecon-hero-keynote@2x.jpg); background-position: center; background-size: cover; |
| h2, p {color: #fff;} |
| h3, a {color: $yellow;} |
| @media (max-width: 768px) { |
| .content { |
| div[class^="col"] {margin-top: 40px;} |
| } |
| } |
| @media (min-width: 768px) { |
| .content{padding-top: 100px; padding-bottom: 100px; |
| .row {margin-bottom: 60px; |
| &:last-child {margin-bottom: 0;} |
| } |
| } |
| } |
| } |
| .cloud {@extend .bg-gray5; |
| h3 {margin-top: 40px;} |
| ul {list-style: none; padding-left: 0;} |
| } |
| .join-us { |
| a {margin-top: 20px; font-size: 24px;} |
| |
| @media (min-width: 768px) { |
| a {font-size: 38px;} |
| } |
| } |
| } |
| |
