docs-v2/assets/styles/layouts/_homepage.scss

626 lines
13 KiB
SCSS

////////////////////////////// HOMEPAGE VARIABLES //////////////////////////////
$home-body-width: 1300px;
//////////////////////////////// HOMEPAGE STYLES ///////////////////////////////
body.home {
background-image: url('/img/hero-bg-light-1-diamond.png');
background-size: 65%;
background-repeat: no-repeat;
}
.home {
color: $article-bold;
.section{
width: 100%;
margin: 0 auto;
padding: 2rem 2rem 0;
max-width: $home-body-width;
display: block;
position: relative;
}
//////////////////////////// SEARCH SECTION STYLES ///////////////////////////
.search {
.sidebar--search {
font-size: 1.1rem;
input {
padding: .75em 2.35rem .75rem 1rem;
border-radius: 6px;
position: relative;
box-shadow: none;
&::placeholder {color: rgba($sidebar-search-text, .65);}
}
&:after {
font-size: 2rem;
top: .45rem;
right: .45rem;
}
.algolia-autocomplete {
position: relative;
&:after {
content: "";
position: absolute;
display: block;
border-radius: 6px;
top: 0;
left: 0;
box-shadow: 2px 2px 6px $sidebar-search-shadow;
height: 100%;
width: 100%;
mix-blend-mode: multiply;
z-index: -1;
}
}
.algolia-autocomplete.algolia-autocomplete-left, .algolia-autocomplete.algolia-autocomplete-right {
.ds-dropdown-menu {
top: auto !important;
left: 0 !important;
margin-bottom: 1.5rem;
&:after {
content: "";
box-shadow: 2px 2px 6px $sidebar-search-shadow;
height: 100%;
width: 100%;
mix-blend-mode: multiply;
}
}
}
}
}
///////////////////////////////// SPAN STYLES ////////////////////////////////
span {
&.magenta {color: $br-new-magenta;}
&.orange {color: $r-dreamsicle;}
&.blue {color: $b-pool;}
}
///////////////////////////// EXPANDABLE BUTTONS /////////////////////////////
.exp-btn-wrapper {
position: relative;
display: block;
.exp-btn {
background: $br-dark-blue;
border-radius: 6px;
color: $br-teal;
padding: 1.5rem 2rem;
font-weight: $medium;
align-items: center;
min-width: 340px;
min-height: 70px;
cursor: pointer;
transition: color .2s, background .2s, padding .2s;
&:hover, &.open {
background: $br-teal;
color: $br-dark-blue;
}
p {
margin: 0 !important;
text-align: center;
}
& > * {width: 100%;}
&.open {
padding: 0;
li a {padding: 1rem 2rem;}
}
}
.exp-btn-links {
border-radius: 6px;
color: $br-dark-blue;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
display: none;
li {
background: $br-teal;
&:first-child {
border-radius: 6px 6px 0 0;
border-bottom: 1px solid rgba($br-dark-blue, .5);
}
&:last-child {
border-radius: 0 0 6px 6px;
border-bottom: none;
}
a {
display: block;
padding: 0rem 2rem;
color: $br-dark-blue;
text-decoration: none;
text-align: center;
transition: padding .2s;
}
}
}
.close-btn {
position: absolute;
top: 38%;
right: -32px;
color: rgba($br-teal, .6);
font-size: 1.5rem;
display: none;
cursor: pointer;
transition: color .2s;
&:hover {
opacity: 1;
color: $br-teal;
}
}
}
//////////////////////////////// PRODUCT CARDS ///////////////////////////////
.product-cards {
display: flex;
flex-direction: row;
.card {
padding: 3rem;
background: $sidebar-search-bg;
border-radius: 30px;
box-shadow: 1px 1px 7px $sidebar-search-shadow;
flex: 1 1 0;
display: flex;
flex-direction: column;
&:first-child {margin-right: 1rem}
&:last-child {margin-left: 1rem}
h3 {
margin: 0 0 1.5rem;
line-height: 1.1em;
font-size: 2.75rem;
}
p {
margin-bottom: 2rem;
};
.card-links {
margin-top: auto;
a {
position: relative;
display: block;
color: $article-text;
font-weight: $medium;
text-decoration: none;
margin-bottom: .3rem;
&:after {
content: "";
display: block;
margin-top: .15rem;
border-top: 2px solid $br-new-magenta;
width: 0;
transition: width .2s;
}
&:hover{
color: $br-new-magenta;
&:after {width: 30%}
}
}
}
}
}
///////////////////////// GENERAL BLUE SECTION STYLES ////////////////////////
.section.blue {
h2, h3, h4 {
color: $br-teal;
}
.padding-wrapper {
width: 100%;
max-width: $home-body-width;
color: $g20-white;
background: $br-dark-blue;
background-size: cover;
border-radius: 30px;
}
&.flush-left .padding-wrapper {
padding: 2rem;
background-image: url('/svgs/home-bg-circle-right.svg')}
&.flush-right .padding-wrapper {
padding: 2rem;
background-image: url('/svgs/home-bg-circle-left.svg');
}
}
////////////////////////////// INFLUXDB SECTION //////////////////////////////
#influxdb {
padding-top: .5rem;
display: flex;
.actions {
display: flex;
justify-content: center;
align-items: center;
max-width: 50%;
padding: 0 3rem 3rem;
flex: 1 1 0;
}
h2 {
margin: 0;
font-size: 3.5rem;
line-height: 1.1em;
& + p {
font-size: 1.2rem;
margin: .5rem 0 2rem;
}
}
h3 {
margin: 0;
color: $g20-white;
font-size: 2.25rem;
& + p {margin: .5rem 0;}
}
.hero-img {
background-image: url('/img/wind-turbine.jpg');
background-size: cover;
margin: -.5rem .75rem 0 1rem;
z-index: -1;
min-height: 600px;
border-radius: 0 0 30px 30px;
flex: 1 1 0;
}
}
#influxdb-btn {
.exp-btn {
@include gradient($grad-burningDusk, 270deg);
color: $g20-white;
position: relative;
z-index: 1;
&:after {
content: "";
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
@include gradient($grad-coolDusk);
border-radius: 6px;
z-index: -1;
opacity: 0;
transition: opacity .2s;
}
&:hover, &.open {
&:after {opacity: 1;}
}
&.open {
padding: 0;
li a {padding: 1rem 2rem;}
}
}
.exp-btn-links {
color: $g20-white;
li {
@include gradient($grad-coolDusk);
&:first-child {
border-bottom: 1px solid rgba($body-bg, .5);
a:after {border-radius: 6px 6px 0 0;}
}
&:last-child a:after {border-radius: 0 0 6px 6px;}
a {
color: $g20-white;
position: relative;
z-index: 1;
&:after {
content: "";
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
@include gradient($grad-burningDusk, 270deg);
border-radius: 6px;
z-index: -1;
opacity: 0;
transition: opacity .2s;
}
&:hover:after {opacity: 1}
}
}
}
.close-btn {
color: rgba($br-new-magenta, .6);
&:hover {color: $br-new-magenta;}
}
}
///////////////////////////////// API SECTION ////////////////////////////////
#api-guides {
.padding-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3.5rem;
.text {margin-right: 2rem;}
h3 {
margin: 0;
font-size: 1.8rem;
}
p {
margin: .5rem 0;
line-height: 1.5rem;
}
}
}
///////////////////////////////// LEARN ITEMS ////////////////////////////////
#learn-more {
margin-bottom: 2rem;
h4 {
font-size: 1.8rem;
margin: 1rem 0 2rem;
}
.learn-items {
display: flex;
flex-direction: row;
justify-content: flex-start;
.item {
max-width: 25%;
flex: 1 1 0;
display: flex;
flex-direction: column;
margin: 0 .75rem;
.icon {
svg {max-height: 60px; max-width: 60px}
.c1 {fill: $home-icon-c1;}
.c2 {fill: $home-icon-c2;}
.magenta {fill: $br-new-magenta;}
}
h5 {
font-size: 1.4rem;
margin: 1rem 0 0;
}
p {
margin: .5rem 0 1.5rem;
line-height: 1.7rem;
}
a {
position: relative;
color: $br-new-magenta;
font-weight: $medium;
text-decoration: none;
&:after {
content: "";
display: block;
margin-top: .25rem;
border-top: 2px solid $br-new-magenta;
width: 0;
transition: width .2s;
}
&:hover:after {width: 30%}
}
& > *:last-child {margin-top: auto}
}
}
}
////////////////////////////// TICK STACK STYLES /////////////////////////////
#tick {
padding-bottom: 0;
.padding-wrapper {
display: flex;
flex-direction: row;
align-items: center;
padding: 2rem 3rem;
h4 {
margin: 0;
font-size: 1.5rem;
& > a {color: inherit; text-decoration: none;}
& + p {margin: .5rem 0;}
}
h5 {
margin: 0 0 .5rem;
text-transform: uppercase;
letter-spacing: .06rem;
// font-weight: $medium;
}
.tick-title {
padding-right: 3rem;
}
.tick-links {
border-left: 1px solid rgba($br-teal, .3);
padding-left: 3rem;
display: flex;
ul {
padding: 0;
margin-right: 4rem;
list-style: none;
&:last-child {margin-right: 0;}
li a {
color: $g20-white;
line-height: 1.6rem;
text-decoration: none;
&:hover {color: $br-teal;}
span {
font-size: .75em;
opacity: .5;
}
}
}
}
}
}
#copyright {
width: 100vw;
max-width: $home-body-width;
padding: 1rem 3rem;
color: rgba($article-text, .5);
p {
margin: 0;
text-align: right;
font-size: .9rem;
}
}
/////////////////////////// HOMEPAGE MEDIA QUERIES ///////////////////////////
@media (max-width: 900px) {
#tick .padding-wrapper{
flex-direction: column;
align-items: flex-start;
padding-top: 3rem;
.tick-links {
padding-left: 0;
border: none;
}
}
}
@include media(medium) {
#influxdb {
.actions {
max-width: 100%;
padding-top: 3rem;
text-align: center;
}
.hero-img {display: none}
}
#api-guides {
.padding-wrapper{
flex-direction: column;
align-items: flex-start;
padding: 3rem;
}
.exp-btn-wrapper {width: 100%;}
.exp-btn {
margin-top: 2rem;
width: 100%;
background: $br-teal;
color: $br-dark-blue;
}
}
.product-cards {
flex-direction: column;
.card {
margin-bottom: 2rem;
&:first-child {margin-right: 0;}
&:last-child {margin-left: 0;}
}
}
#learn-more {
margin-bottom: 0;
h4 {margin-top: 0;}
.learn-items {
flex-wrap: wrap;
.item {
max-width: 45%;
flex: 1 1 50%;
margin-bottom: 2rem;
}
}
}
}
@include media(small) {
.section {padding: 1rem 1rem 0;}
.search.section {padding-top: .25rem;}
.exp-btn-wrapper .exp-btn {min-width: revert;}
.product-cards .card {
padding: 2rem;
margin-bottom: 1rem;
h3 {font-size: 2rem;}
}
#influxdb {
.actions {padding: 2rem;}
h2 {font-size: 2.65rem;}
}
#api-guides {
.padding-wrapper {
padding: 2rem;
h3 {font-size: 1.6rem;}
p {font-size: 1.1rem;}
}
}
#learn-more {
h4 {margin-left: 1rem;}
.learn-items {
flex-direction: column;
.item {max-width: 100%;}
}
}
#tick .padding-wrapper {padding: 2rem;}
}
@media (max-width: 480px) {
#tick .padding-wrapper .tick-links {flex-direction: column;}
}
}