finalized new homepage, resolves #1327
Scott Anderson
parent
4217911a9e
commit
205e26d75b
|
|
@ -1,10 +1,10 @@
|
||||||
// Fade content wrapper when focusing on search input
|
// Fade content wrapper when focusing on search input
|
||||||
$('#algolia-search-input').focus(function() {
|
$('#algolia-search-input').focus(function() {
|
||||||
$('.content-wrapper').fadeTo(400, .35);
|
$('.content-wrapper, .group-wrapper').fadeTo(300, .35);
|
||||||
})
|
})
|
||||||
|
|
||||||
// Hide search dropdown when leaving search input
|
// Hide search dropdown when leaving search input
|
||||||
$('#algolia-search-input').blur(function() {
|
$('#algolia-search-input').blur(function() {
|
||||||
$('.content-wrapper').fadeTo(200, 1);
|
$('.content-wrapper, .group-wrapper').fadeTo(200, 1);
|
||||||
$('.ds-dropdown-menu').hide();
|
$('.ds-dropdown-menu').hide();
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: $radius 0 0 $radius;
|
border-radius: $radius 0 0 $radius;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
.copyright {
|
.copyright {
|
||||||
padding: .5rem 1rem .5rem .5rem;
|
padding: .5rem 1rem .5rem .5rem;
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,33 @@
|
||||||
/// Styles for the placeholder homepage only viewalbe with running locally ///
|
//////////////////////////////// HOMEPAGE STYLES ///////////////////////////////
|
||||||
|
|
||||||
.home {
|
.home {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
h2 {font-weight: $medium;}
|
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0rem 3rem;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
&.row{
|
.row{
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.half { width: 50%; }
|
.half { width: 50%; }
|
||||||
.third { width: 33.33%; }
|
.third { width: 33.33%; }
|
||||||
|
.quarter { width: 25%; }
|
||||||
.two-thirds { width: 66.67%; }
|
.two-thirds { width: 66.67%; }
|
||||||
|
.three-quarters { width: 75%; }
|
||||||
span.version {
|
|
||||||
font-size: 1.15rem;
|
|
||||||
opacity: .65;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
///////////////////////////// HERO SECTION STYLES ////////////////////////////
|
///////////////////////////// HERO SECTION STYLES ////////////////////////////
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 3.5rem 3rem 4.5rem;
|
padding-top: 3.5rem;
|
||||||
|
padding-bottom: 4.5rem;
|
||||||
@include gradient($grad-WarpSpeed)
|
@include gradient($grad-WarpSpeed)
|
||||||
color: $g20-white;
|
color: $g20-white;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
|
|
@ -94,7 +91,8 @@
|
||||||
|
|
||||||
//////////////////////////// SEARCH SECTION STYLES ///////////////////////////
|
//////////////////////////// SEARCH SECTION STYLES ///////////////////////////
|
||||||
.search {
|
.search {
|
||||||
padding: 2rem 3rem;
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 2.25rem;
|
||||||
|
|
||||||
.sidebar--search {
|
.sidebar--search {
|
||||||
max-width: 55%;
|
max-width: 55%;
|
||||||
|
|
@ -109,24 +107,203 @@
|
||||||
top: .35rem;
|
top: .35rem;
|
||||||
right: .45rem;
|
right: .45rem;
|
||||||
}
|
}
|
||||||
.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
|
.algolia-autocomplete.algolia-autocomplete-left, .algolia-autocomplete.algolia-autocomplete-right {
|
||||||
top: auto !important;
|
.ds-dropdown-menu {
|
||||||
left: auto !important;
|
top: auto !important;
|
||||||
margin-bottom: 1.5rem;
|
left: 0 !important;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
content: "";
|
content: "";
|
||||||
box-shadow: 2px 2px 10px $sidebar-search-shadow;
|
box-shadow: 2px 2px 10px $sidebar-search-shadow;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
mix-blend-mode: multiply;
|
mix-blend-mode: multiply;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.telegraf {@include gradient($telegraf-dropdown-gradient); color: $g20-white;}
|
/////////////////////////////// PRODUCT CARDS ////////////////////////////////
|
||||||
.influxdb {@include gradient($default-dropdown-gradient); color: $g20-white;}
|
|
||||||
.chronograf {@include gradient($chronograf-dropdown-gradient); color: $g20-white;}
|
.group-wrapper {
|
||||||
.kapacitor {@include gradient($kapacitor-dropdown-gradient); color: $g20-white;}
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: $radius;
|
||||||
|
background-color: $sidebar-search-bg;
|
||||||
|
box-shadow: 2px 2px 10px $sidebar-search-shadow;
|
||||||
|
overflow: hidden;
|
||||||
|
color: $article-text;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: .5rem;
|
||||||
|
font-weight: $medium;
|
||||||
|
color: $article-heading-alt;
|
||||||
|
a {color: inherit; &:hover{color: inherit;}}
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
line-height: 1.45rem;
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: $article-link;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: $medium;
|
||||||
|
&:hover{ color: $article-link-hover; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 1.5rem 1.5rem 1rem;
|
||||||
|
flex: 1 0;
|
||||||
|
|
||||||
|
span.version {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
opacity: .65;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#tick-cards {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
position: relative;
|
||||||
|
color: $g20-white;
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
color: $g20-white;
|
||||||
|
&:after{
|
||||||
|
content: "";
|
||||||
|
margin-top: .15rem;
|
||||||
|
width: 0;
|
||||||
|
display: block;
|
||||||
|
height: 2px;
|
||||||
|
@include gradient($grad-whiteFade)
|
||||||
|
transition: width .2s;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
&:after { width: 100%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#platform {
|
||||||
|
|
||||||
|
}
|
||||||
|
.telegraf {@include gradient($telegraf-dropdown-gradient);}
|
||||||
|
.influxdb {@include gradient($default-dropdown-gradient);}
|
||||||
|
.chronograf {@include gradient($chronograf-dropdown-gradient);}
|
||||||
|
.kapacitor {@include gradient($kapacitor-dropdown-gradient);}
|
||||||
|
|
||||||
|
#enterprise {
|
||||||
|
padding-top: 2.5rem;
|
||||||
|
padding-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
//////////////////////////// HOMEPAGE MEDIA QUERIES ////////////////////////////
|
||||||
|
|
||||||
|
@include media(large) {
|
||||||
|
overflow-x: hidden;
|
||||||
|
.hero #hero-img{
|
||||||
|
max-height: 130%;
|
||||||
|
max-width: 70%;
|
||||||
|
right: -20%;
|
||||||
|
bottom: -30%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1020px) {
|
||||||
|
#tick-stack #tick-cards .card { width: 50%; flex: none;}
|
||||||
|
.section {
|
||||||
|
.quarter { width: 33.33%; }
|
||||||
|
.three-quarters { width: 66.64%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 920px) {
|
||||||
|
.section {
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
&.hero { padding-top: 2rem; padding-bottom: 3rem;}
|
||||||
|
&.search,
|
||||||
|
&#enterprise { padding-top: 1.5rem; padding-bottom: 1.5rem; }
|
||||||
|
}
|
||||||
|
.hero {
|
||||||
|
#hero-img{ display: none; }
|
||||||
|
.half { width: 100%; }
|
||||||
|
}
|
||||||
|
.search {
|
||||||
|
.sidebar--search { max-width: 100%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media(medium) {
|
||||||
|
.search .algolia-autocomplete.algolia-autocomplete-right, .algolia-autocomplete.algolia-autocomplete-right {
|
||||||
|
.ds-dropdown-menu {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media(small) {
|
||||||
|
.section {
|
||||||
|
|
||||||
|
.quarter, .three-quarters { width: 100%; }
|
||||||
|
|
||||||
|
&.hero {
|
||||||
|
order: 2;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
h2 { font-size: 2rem; margin-top: .5rem; }
|
||||||
|
p { font-size: 1rem; line-height: 1.5rem; }
|
||||||
|
}
|
||||||
|
&.search {
|
||||||
|
order: 1;
|
||||||
|
padding: 0 1rem .5rem;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.sidebar--search {
|
||||||
|
max-width: 100%;
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
input {
|
||||||
|
padding: .5em 2.15rem .5rem .75rem
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
top: .15rem;
|
||||||
|
right: .25rem;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
.algolia-autocomplete.algolia-autocomplete-right, .algolia-autocomplete.algolia-autocomplete-right {
|
||||||
|
.ds-dropdown-menu {
|
||||||
|
width: 100vw;
|
||||||
|
left: -1rem !important;
|
||||||
|
right: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&#tick-stack {
|
||||||
|
order: 3;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
#tick-cards {
|
||||||
|
flex-direction: column;
|
||||||
|
.card { width: 100%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&#enterprise { order: 4; padding-left: 0; padding-right: 0; }
|
||||||
|
}
|
||||||
|
.group-wrapper {flex-direction: column;}
|
||||||
|
.row {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -52,7 +52,7 @@
|
||||||
.selector-dropdowns {
|
.selector-dropdowns {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
right: 5.5rem;
|
padding-right: .25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown {
|
.dropdown {
|
||||||
|
|
|
||||||
|
|
@ -144,5 +144,4 @@ $grad-PurpleFog: $p-potassium, $cp-munchkin;
|
||||||
$grad-PurpleRain: $p-void, $cp-marguerite;
|
$grad-PurpleRain: $p-void, $cp-marguerite;
|
||||||
|
|
||||||
// Transparent gradients
|
// Transparent gradients
|
||||||
$grad-purpleFade: $br-pulsar, rgba($br-pulsar, 0);
|
$grad-whiteFade: rgba($g20-white, .75), rgba($g20-white, 0);
|
||||||
$grad-blueFade: $b-ocean, rgba($b-ocean, 0);
|
|
||||||
|
|
|
||||||
|
|
@ -9,10 +9,9 @@
|
||||||
{{ partial "topnav.html" . }}
|
{{ partial "topnav.html" . }}
|
||||||
|
|
||||||
<div class="home">
|
<div class="home">
|
||||||
|
|
||||||
<div class="section hero">
|
<div class="section hero">
|
||||||
|
|
||||||
{{ partial "svgs/homepage-hero.svg" }}
|
{{ partial "svgs/homepage-hero.svg" }}
|
||||||
|
|
||||||
<div class="half">
|
<div class="half">
|
||||||
<h2>InfluxDB Cloud & <br />InfluxDB {{ $influxdbVersionV2 }} OSS</h2>
|
<h2>InfluxDB Cloud & <br />InfluxDB {{ $influxdbVersionV2 }} OSS</h2>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -36,46 +35,55 @@
|
||||||
placeholder='Search the docs'>
|
placeholder='Search the docs'>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="section row">
|
|
||||||
|
|
||||||
<div class="card">
|
<div id="tick-stack" class="section row">
|
||||||
<h2>InfluxData Platform</h2>
|
<div class="group-wrapper">
|
||||||
<p>Some marketing description about the TICK Stack</p>
|
<div id="platform" class="card quarter">
|
||||||
<a href="/platform/">Learn more about the platform</a>
|
<h2><a href="/platform/">InfluxData TICK Stack</a></h2>
|
||||||
</div>
|
<p>The leading modern time series platform, built for metrics and events.</p>
|
||||||
<div class="card telegraf">
|
<p><a href="/platform/">Learn more about the platform</a></p>
|
||||||
<h2>Telegraf <span class="version">{{ $telegrafVersion }}</span></h2>
|
</div>
|
||||||
<p>Open source server agent to collect metrics from stacks, sensors and systems.</p>
|
<div id="tick-cards" class="three-quarters row">
|
||||||
<a href="/telegraf/{{ $telegrafVersion }}/"></a>
|
<div class="card telegraf">
|
||||||
</div>
|
<h2><a href="/telegraf/{{ $telegrafVersion }}/">Telegraf <span class="version">{{ $telegrafVersion }}</span></a></h2>
|
||||||
<div class="card influxdb">
|
<p>Collect metrics from stacks, sensors and systems.</p>
|
||||||
<h2>InfluxDB <span class="version">{{ $influxdbVersionV1 }}</span></h2>
|
<p><a href="/telegraf/{{ $telegrafVersion }}/">Telegraf documentation</a></p>
|
||||||
<p>The time series database designed to handle high write and query loads.</p>
|
</div>
|
||||||
<a href="/influxdb/{{ $influxdbVersionV1 }}/"></a>
|
<div class="card influxdb">
|
||||||
</div>
|
<h2><a href="/influxdb/{{ $influxdbVersionV1 }}/">InfluxDB <span class="version">{{ $influxdbVersionV1 }}</span></a></h2>
|
||||||
<div class="card chronograf">
|
<p>Write and query time series data.</p>
|
||||||
<h2>Chronograf <span class="version">{{ $chronografVersion }}</span></h2>
|
<p><a href="/influxdb/{{ $influxdbVersionV1 }}/">InfluxDB documentation</a></p>
|
||||||
<p>The administrative user interface and visualization engine for InfluxDB.</p>
|
</div>
|
||||||
<a href="/chronograf/{{ $chronografVersion }}/"></a>
|
<div class="card chronograf">
|
||||||
</div>
|
<h2><a href="/chronograf/{{ $chronografVersion }}/">Chronograf <span class="version">{{ $chronografVersion }}</span></a></h2>
|
||||||
<div class="card kapacitor">
|
<p>Visualize and manage time series data.</p>
|
||||||
<h2>Kapacitor <span class="version">{{ $kapacitorVersion }}</span></h2>
|
<p><a href="/chronograf/{{ $chronografVersion }}/">Chronograf documentation</a></p>
|
||||||
<p>Process and alert on stream and batch data from InfluxDB.</p>
|
</div>
|
||||||
<a href="/kapacitor/{{ $kapacitorVersion }}/"></a>
|
<div class="card kapacitor">
|
||||||
|
<h2><a href="/kapacitor/{{ $kapacitorVersion }}/">Kapacitor <span class="version">{{ $kapacitorVersion }}</span></a></h2>
|
||||||
|
<p>Process and alert on time series data.</p>
|
||||||
|
<p><a href="/kapacitor/{{ $kapacitorVersion }}/">Kapacitor documentation</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section row">
|
<div id="enterprise" class="section row">
|
||||||
<div class="card">
|
<div class="group-wrapper">
|
||||||
<h2>InfluxData Enterprise offerings</h2>
|
<div class="card quarter">
|
||||||
<p>Some marketing description about Enterprise</p>
|
<h2>Enterprise offerings</h2>
|
||||||
|
<p>Enterprise tools to meet your business needs.</p>
|
||||||
|
<p><a href="https://www.influxdata.com/contact-sales/">Contact Sales</a></p>
|
||||||
|
</div>
|
||||||
|
<div id="tick-cards" class="three-quarters row">
|
||||||
|
<div class="card influxdb">
|
||||||
|
<h2><a href="/enterprise_influxdb/{{ $enterpriseVersion }}/">InfluxDB Enterprise <span class="version">{{ $enterpriseVersion }}</span></a></h2>
|
||||||
|
<p>A scalable InfluxDB cluster designed for heavy workloads. Run InfluxDB Enterprise on your own infrastructure — on-premise, private cloud, public cloud, or on the edge.</p>
|
||||||
|
<p><a href="/enterprise_influxdb/{{ $enterpriseVersion }}/">InfluxDB Enterprise documentation</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card influxdb">
|
</div>
|
||||||
<h2>InfluxDB Enterprise <span class="version">{{ $enterpriseVersion }}</span></h2>
|
|
||||||
<p>A production-ready InfluxDB cluster that can run anywhere.</p>
|
|
||||||
<a href="/enterprise_influxdb/{{ $enterpriseVersion }}/"></a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ partial "footer.html" . }}
|
{{ partial "footer.html" . }}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue