| .nobr { |
| white-space:nowrap; |
| } |
| |
| #main-banner { |
| |
| |
| // box-shadow: |
| // inset 0px 15px 8px -10px theme-color('shadow-gray'); |
| |
| // box-shadow: |
| // inset 0 -9px 10px -10px #cccccc; |
| // inset 0px -15px 8px -15px theme-color('shadow-gray'); |
| background-color: lighten(theme-color('gray'), 5%); |
| |
| |
| .container { |
| padding-top: 3rem; |
| padding-bottom: 3rem; |
| align-items: center; |
| display: flex ; |
| // background: url('/images/svg/bg-flame-banner.svg') no-repeat right bottom; |
| min-height: 400px;; |
| } |
| |
| #particle-js { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| z-index: 0; |
| height: 480px; |
| } |
| |
| |
| .txt-wrapper { |
| background-color: rgba(246, 246, 246, 0.5); |
| width: 100%; |
| position: relative; |
| |
| } |
| |
| h1 { |
| text-align: center; |
| font: normal normal normal 28px/44px Open Sans; |
| letter-spacing: 0px; |
| white-space: nowrap; |
| color: #212529; |
| margin-bottom: 3rem; |
| |
| |
| strong { |
| text-align: center; |
| font: normal normal 600 56px/76px Open Sans; |
| letter-spacing: 0px; |
| color: #055799; |
| text-transform: uppercase; |
| margin-bottom: 1rem; |
| display: block; |
| } |
| |
| } |
| p { |
| text-align: center; |
| font: normal normal normal 20px/32px Open Sans; |
| letter-spacing: 0px; |
| color: #666666; |
| margin-bottom: 2rem; |
| } |
| .buttons { text-align: center; } |
| .btn { |
| font-size: 18px; |
| line-height: 1.5em; |
| padding: 0.5rem 1.5rem; |
| |
| span { |
| margin-left: 10px; |
| |
| } |
| } |
| |
| |
| |
| } |
| |
| #github-stats-bar { |
| padding: 0.5rem 0 0.2rem; |
| background-color: theme-color('gray'); |
| position: fixed; |
| bottom: 0; |
| width: 100%; |
| z-index: 100; |
| transition: transform .5s ease-in-out; |
| box-shadow: 0 8px 8px 10px #d5d5d5; |
| |
| |
| |
| a { |
| font-size: 18px; |
| margin-right: 2rem; |
| } |
| |
| |
| |
| .twitter-follow { |
| iframe { |
| position: absolute !important; |
| top: 5px; |
| right: 0; |
| } |
| } |
| } |
| body.headroom--unpinned { |
| #github-stats-bar { |
| transform: translate(0, 46px); |
| } |
| } |
| |
| .github-stats { |
| .github-link { |
| |
| .fa-github { |
| color: theme-color('primary'); |
| font-size: 30px; |
| margin-right: 1rem; |
| vertical-align: top; |
| } |
| } |
| } |
| .github-wrapper { |
| .fa-github { |
| color: #000000 !important; |
| } |
| |
| > * { |
| display: inline-block; |
| |
| } |
| * { |
| vertical-align: top !important; |
| line-height: 24px;; |
| } |
| |
| } |
| |
| #community-awards { |
| background: #0E5997; |
| box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.25); |
| padding: 75px 0; |
| color: white; |
| font-size: 16px; |
| line-height: 28px; |
| |
| |
| .award { |
| > a { |
| flex-wrap: nowrap; |
| display: flex; |
| color: white; |
| &:hover { |
| color: white; |
| text-decoration: none; |
| } |
| } |
| &:nth-child(2) > a { |
| justify-content: center; |
| } |
| &:last-of-type > a { |
| justify-content: flex-end; |
| } |
| |
| .star { |
| width: 64px; |
| height: 60px; |
| display: flex; |
| background: url('/images/star.png') no-repeat; |
| align-content: center; |
| align-items: center; |
| justify-content: center; |
| margin-right: 1rem; |
| span { |
| display: block; |
| font-weight: 800; |
| font-size: 18px; |
| margin-top: 3px; |
| } |
| } |
| p { |
| width: auto; |
| font-size: 18px; |
| line-height: 24px; |
| font-family: Open Sans; |
| display: flex; |
| justify-content: center; |
| align-content: center; |
| flex-direction: column; |
| font-weight: normal; |
| margin-bottom: 0; |
| font-weight: 300; |
| |
| strong { |
| font-weight: 800; |
| } |
| } |
| } |
| |
| .desc { |
| margin-top: 70px; |
| margin-bottom: 1rem; |
| justify-content: center; |
| |
| p { |
| font-size: 16px; |
| line-height: 28px; |
| text-align: center; |
| font-weight: 300; |
| } |
| } |
| .cta-link { |
| text-align: center; |
| a { |
| color: white; |
| font-weight: 300; |
| } |
| } |
| } |
| |
| |
| |
| #ignite-summit-banner { |
| background-color: #E6F0FA; |
| |
| .container { |
| |
| |
| .wrapper { |
| img { |
| width: 100%; |
| height: auto; |
| } |
| |
| } |
| } |
| } |
| |
| |
| #home-use-cases { |
| padding: 5rem 0; |
| background-color: #ffffff; |
| // box-shadow: inset 0 15px 8px -10px #d5d5d5; |
| |
| .container { |
| .row { |
| padding: 5rem 0; |
| border-bottom: 4px solid #EEEEEE; |
| |
| &:last-of-type { |
| border-bottom: 0; |
| } |
| |
| &:first-of-type { |
| padding-top: 0; |
| } |
| |
| |
| .txt-wrapper { |
| width: 50%; |
| display: flex; |
| flex-wrap: wrap; |
| align-content: center; |
| padding-right: 1.5rem; |
| |
| |
| h3 { |
| font-size: 20px; |
| margin-bottom: 15px; |
| font-weight: 600; |
| } |
| |
| |
| p { |
| font-size: 16px; |
| line-height: 2em; |
| margin-bottom: 20px; |
| } |
| .ctas { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: space-between; |
| |
| h4 { |
| width: 100%; |
| font-size: 17px; |
| font-weight: 600; |
| } |
| |
| .btn { |
| display: flex; |
| flex-wrap: wrap; |
| width: 49%; |
| border: 1px solid theme-color('primary'); |
| border-radius: 5px; |
| align-items: center; |
| justify-content: center; |
| padding: 1rem; |
| |
| .icon-wrapper{ |
| display: flex; |
| align-content: center; |
| |
| svg { |
| width: 100px; |
| height: 50px; |
| fill: theme-color('primary'); |
| |
| .a { |
| stroke:theme-color('primary') !important; |
| } |
| } |
| } |
| |
| span { |
| display: block; |
| width: 100%; |
| text-align: center; |
| color: theme-color('primary'); |
| font-weight: 600; |
| } |
| |
| &:hover { |
| background-color: lighten(theme-color('primary'), 5%); |
| |
| .icon-wrapper > svg { |
| fill: white; |
| |
| .a { |
| stroke: white !important; |
| } |
| } |
| span { |
| color: white; |
| } |
| } |
| } |
| } |
| } |
| .diagram-wrapper { |
| padding-left: 1.5rem; |
| |
| width: 50%; |
| text-align: center; |
| |
| img { |
| max-width: 100%; |
| } |
| } |
| |
| &:nth-of-type(2) { |
| flex-direction: row-reverse; |
| |
| .diagram-wrapper { |
| padding-right: 1.5rem; |
| } |
| .txt-wrapper { |
| |
| padding-left: 1.5rem; |
| |
| } |
| } |
| } |
| } |
| |
| } |
| |
| section.section-block { |
| |
| h2 { |
| text-align: center; |
| font-size: 32px; |
| text-transform: uppercase; |
| margin-bottom: 2em; |
| |
| strong { |
| color: theme-color('primary'); |
| |
| font-weight: 900; |
| } |
| } |
| } |
| |
| |
| #home-features { |
| |
| |
| .wrapper { |
| padding: 5rem 0; |
| } |
| |
| |
| #home-features-vtab { |
| a.nav-link { |
| display: flex; |
| align-items: center; |
| width: 100%; |
| background-color: theme-color('primary'); |
| color: #ffffff; |
| margin-bottom: 1.35em; |
| transition: background-color 0.5s ease-in-out; |
| box-shadow: 0 15px 8px -10px #d5d5d5; |
| padding: 1em 1em; |
| |
| svg { |
| width: 50px; |
| height: 50px; |
| fill: #ffffff; |
| |
| |
| } |
| |
| span { |
| font-size: 16.5px; |
| line-height: 1.5em; |
| font-weight: 600; |
| } |
| |
| &.active { |
| text-decoration: none; |
| background-color: theme-color('secondary'); |
| } |
| |
| &:last-of-type { |
| margin-bottom: 0; |
| } |
| } |
| } |
| |
| #v-pills-tabContent { |
| background-color: #ffffff; |
| border-radius: 5px;; |
| padding: 2em; |
| height: 100%; |
| box-shadow: 0 15px 8px -10px #d5d5d5; |
| |
| .tab-pane { |
| h3 { |
| font-size: 22px; |
| text-align: center; |
| font-weight: 600; |
| a { |
| text-decoration: none; |
| cursor: default; |
| |
| &:hover { |
| color: theme-color('primary'); |
| } |
| } |
| } |
| p { |
| font-size: 16px; |
| font-weight: 400;; |
| line-height: 2em; |
| } |
| |
| pre { |
| margin: 0 0 1em 0; |
| max-height: 270px; |
| } |
| code { |
| font-size: 16px; |
| |
| } |
| |
| .nav-tabs { |
| .nav-item { |
| a.nav-link { |
| color: #495057; |
| font-size: 1.2em; |
| |
| &.active { |
| color: theme-color('primary'); |
| font-weight: 600; |
| } |
| } |
| } |
| } |
| } |
| } |
| |
| |
| } |
| |
| |
| // Large devices (desktops, less than 1200px) |
| // @media (max-width: 1199.98px) { ... } |
| @include media-breakpoint-down(lg) { |
| #main-banner { |
| h1 { |
| font-size: 24px; |
| |
| strong { |
| font: normal normal 600 50px/64px Open Sans; |
| } |
| } |
| .container { |
| min-height: 360px; |
| |
| #particle-js { |
| height: 440px; |
| } |
| } |
| } |
| |
| #home-use-cases { |
| #use-cases-tabs { |
| width: 85%; |
| |
| .active:after { |
| left: calc(28% - 15px); |
| } |
| |
| li:last-child { |
| .active:after { |
| left: calc(73% - 15px); |
| } |
| } |
| } |
| } |
| #home-features #v-pills-tabContent .tab-pane pre { |
| max-height: 265px; |
| } |
| |
| #intro-text { |
| .poweredby-logos { |
| img { |
| margin: 0 .5rem; |
| } |
| } |
| } |
| |
| #ignite-summit-banner { |
| |
| .container { |
| |
| .wrapper { |
| |
| |
| } |
| } |
| } |
| |
| } |
| |
| |
| // Medium devices (tablets, less than 992px) |
| // @media (max-width: 991.98px) { ... } |
| @include media-breakpoint-down(md) { |
| |
| #main-banner { |
| .container { |
| |
| background-size: 300px; |
| |
| .txt-wrapper { |
| // width: 70%; |
| } |
| h1 { |
| font: normal normal normal 28px/38px Open Sans; |
| white-space: normal; |
| |
| strong { |
| font: normal normal 600 52px/70px Open Sans; |
| } |
| } |
| } |
| .buttons { |
| margin-top: 1.5rem; |
| } |
| } |
| |
| #github-stats-bar { |
| .github-stats { |
| span { |
| &:nth-of-type(3) { |
| display: none; |
| } |
| } |
| } |
| } |
| |
| #community-awards { |
| .award { |
| p { |
| font-size: 14px; |
| strong { |
| font-size: 15px; |
| } |
| // line-height: 24px; |
| } |
| } |
| .desc { |
| margin-top: 50px; |
| margin-bottom: 10px; |
| |
| p { |
| // font-weight: 400; |
| } |
| } |
| } |
| |
| |
| #home-use-cases { |
| |
| } |
| #home-features { |
| #v-pills-tabContent .tab-pane pre { |
| max-height: 215px; |
| } |
| #home-features-vtab { |
| a.nav-link { |
| span { |
| font-size: 14px; |
| margin-left: 7px; |
| } |
| } |
| } |
| } |
| |
| #ignite-summit-banner { |
| |
| .container { |
| |
| .wrapper { |
| |
| |
| |
| } |
| } |
| } |
| |
| } |
| |
| |
| |
| @media(min-width:768px) { |
| |
| #home-features { |
| #v-pills-tabContent { |
| .nav-tabs { |
| display: flex; |
| } |
| |
| .card .card-header { |
| |
| } |
| |
| .card .collapse{ |
| display:block; |
| } |
| |
| >.tab-pane h3 a svg { |
| display: none; |
| } |
| } |
| } |
| |
| |
| } |
| |
| |
| |
| |
| // Small devices (landscape phones, less than 768px) |
| // @media (max-width: 767.98px) { ... } |
| @include media-breakpoint-down(sm) { |
| #home-features { |
| #home-features-vtab { |
| display: none; |
| |
| a.nav-link { |
| padding: 1.25em 2em; |
| margin-bottom: 0.5em; |
| |
| |
| span { |
| font-size: 16px; |
| } |
| |
| &:last-of-type { |
| margin-bottom: 1.5em; |
| } |
| } |
| |
| } |
| |
| |
| #v-pills-tabContent { |
| padding: 2em 1em; |
| |
| > .tab-pane { |
| display: block !important; |
| opacity: 1; |
| |
| h3 { |
| a { |
| display: block; |
| width: 100%; |
| // height: 3rem; |
| |
| display: flex; |
| align-items: center; |
| width: 100%; |
| |
| margin-bottom: 1.35em; |
| transition: background-color 0.5s ease-in-out; |
| box-shadow: 0 15px 8px -10px #d5d5d5; |
| padding: .5em 1em; |
| text-decoration: none; |
| background-color: theme-color('secondary'); |
| color: white; |
| |
| &:hover { |
| color: white; |
| } |
| |
| &.collapsed { |
| background-color: theme-color('primary'); |
| color: #ffffff; |
| } |
| |
| |
| svg { |
| width: 50px; |
| height: 50px; |
| fill: #ffffff; |
| |
| } |
| |
| span { |
| margin-left: 1.5rem; |
| display: inline-block; |
| width: 100%; |
| text-align: left; |
| } |
| |
| } |
| } |
| |
| |
| .card-body { |
| margin-bottom: 2rem; |
| padding: 0 1em; |
| } |
| } |
| } |
| } |
| |
| #community-awards { |
| padding: 60px 0; |
| |
| .award { |
| margin-bottom: 30px;; |
| |
| > a { |
| justify-content: center !important; |
| } |
| p { |
| max-width: 200px; |
| width: calc(100% - 80px); |
| |
| } |
| } |
| .desc { |
| margin-top: 20px; |
| |
| p { |
| font-size: 14px; |
| line-height: 24px; |
| |
| } |
| } |
| .cta-link a { |
| font-size: 14px; |
| |
| } |
| } |
| |
| #github-stats-bar { |
| a { |
| margin-right: 0; |
| } |
| span { |
| &:nth-of-type(2) { |
| display: none; |
| } |
| } |
| } |
| |
| |
| #main-banner { |
| .container { |
| h1 { |
| font-size: 26px; |
| |
| strong { |
| font-size: 50px;; |
| } |
| } |
| } |
| } |
| |
| |
| #home-use-cases { |
| padding: 3rem 1rem; |
| |
| |
| .container { |
| .row { |
| padding: 4rem 0; |
| flex-wrap: wrap; |
| position: relative; |
| |
| h3 { |
| width: 100%; |
| } |
| |
| .txt-wrapper, .diagram-wrapper { |
| width: 100%; |
| padding-left: 0 !important; |
| padding-right: 0 !important; |
| margin-bottom: 2rem; |
| text-align: left; |
| } |
| .txt-wrapper { |
| p { |
| margin-bottom: 0;; |
| } |
| } |
| .diagram-wrapper { |
| text-align: center; |
| img { |
| height: auto; |
| } |
| } |
| |
| .btn { |
| margin: 0 auto; |
| position: absolute; |
| bottom: 10px; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| } |
| } |
| } |
| } |
| |
| |
| } |
| |
| |
| |
| |
| |
| // Extra small devices (portrait phones, less than 576px) |
| // @media (max-width: 575.98px) { ... } |
| @include media-breakpoint-down(xs) { |
| #main-banner { |
| .container { |
| background-size: unset; |
| background-position-x: 200%; |
| .txt-wrapper { |
| width: 100%; |
| padding-right: 1rem; |
| padding-left: 1rem; |
| } |
| h1 { |
| font-size: 22px; |
| strong { |
| font-size: 40px; |
| } |
| } |
| |
| .btn { |
| margin-bottom: 10px; |
| } |
| } |
| } |
| #home-features { |
| #v-pills-tabContent { |
| >.tab-pane { |
| h3 { |
| a { |
| span { |
| margin-left: .8rem; |
| font-size: 18px; |
| } |
| } |
| } |
| } |
| } |
| } |
| |
| #ignite-summit-banner { |
| |
| .container { |
| |
| .wrapper { |
| max-width: 400px; |
| margin: 0 auto; |
| } |
| } |
| } |
| |
| #github-stats-bar { |
| padding-left: 1rem; |
| padding-right: 1rem; |
| a { |
| margin-right: 0; |
| } |
| span { |
| &:nth-of-type(1) { |
| display: none; |
| } |
| } |
| } |
| |
| |
| |
| |
| } |
| |
| |
