diff --git a/assets/styles/layouts/_global.scss b/assets/styles/layouts/_global.scss index e8394fe28..895aa26da 100644 --- a/assets/styles/layouts/_global.scss +++ b/assets/styles/layouts/_global.scss @@ -31,35 +31,6 @@ a { flex-grow: 1; } -/// Styles for the placeholder homepage only viewalbe with running locally /// -.home-placeholder { - max-width: 480px; - padding: 0 1.5rem; - margin: 20vh auto 0; - color: $article-text; - text-align:center; - font-style:italic; - - .welcome { - text-align:center; - font-weight: bold; - color: $article-heading; - font-size: 1.1rem; - } - p { - margin-top: 1rem; - line-height: 1.25rem; - } - a { - color: $article-link; - font-weight: bold; - text-decoration: none; - &:hover { - color: $article-link-hover; - } - } -} - //////////////////////////////////////////////////////////////////////////////// ///////////////////////////////// MEDIA QUERIES //////////////////////////////// //////////////////////////////////////////////////////////////////////////////// diff --git a/assets/styles/layouts/_homepage.scss b/assets/styles/layouts/_homepage.scss new file mode 100644 index 000000000..86512464d --- /dev/null +++ b/assets/styles/layouts/_homepage.scss @@ -0,0 +1,132 @@ +/// Styles for the placeholder homepage only viewalbe with running locally /// +.home { + display: flex; + flex-direction: column; + + h2 {font-weight: $medium;} + + .section { + display: flex; + + &.row{ + flex-direction: row; + } + + .card { + padding: 1.5rem; + } + + .half { width: 50%; } + .third { width: 33.33%; } + .two-thirds { width: 66.67%; } + + span.version { + font-size: 1.15rem; + opacity: .65; + } + } + + ///////////////////////////// HERO SECTION STYLES //////////////////////////// + + .hero { + position: relative; + padding: 3.5rem 3rem 4.5rem; + @include gradient($grad-WarpSpeed) + color: $g20-white; + z-index: 0; + // overflow: hidden; + + h2 { + margin: 1.5rem 0 .5rem; + font-weight: 300; + font-size: 3rem; + } + p { + font-size: 1.1rem; + line-height: 1.85rem; + } + + #hero-img { + position: absolute; + max-width: 50%; + max-height: 135%; + bottom: -25%; + right: 0; + } + + a.btn { + position: relative; + display: inline-block; + margin: .5rem .25rem .5rem 0; + padding: 1rem 2rem; + color: $article-btn-text !important; + border-radius: $radius; + font-weight: $medium; + text-decoration: none; + text-align: center; + z-index: 1; + @include gradient($article-btn-gradient); + + &:after { + content: ""; + position: absolute; + display: block; + top: 0; + right: 0; + width: 100%; + height: 100%; + border-radius: $radius; + @include gradient($article-btn-gradient-hover); + opacity: 0; + transition: opacity .2s; + z-index: -1; + } + + &:hover { + cursor: pointer; + + &:after { + opacity: 1; + } + } + } + } + + //////////////////////////// SEARCH SECTION STYLES /////////////////////////// + .search { + padding: 2rem 3rem; + + .sidebar--search { + max-width: 55%; + font-size: 1.1rem; + + input { + padding: .75em 2.35rem .75rem 1rem + } + + &:after { + font-size: 2rem; + top: .35rem; + right: .45rem; + } + .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu { + top: auto !important; + left: auto !important; + margin-bottom: 1.5rem; + + &:after { + content: ""; + box-shadow: 2px 2px 10px $sidebar-search-shadow; + height: 100%; + width: 100%; + mix-blend-mode: multiply; + } + } + } + } + + .telegraf {@include gradient($telegraf-dropdown-gradient); color: $g20-white;} + .influxdb {@include gradient($default-dropdown-gradient); color: $g20-white;} + .chronograf {@include gradient($chronograf-dropdown-gradient); color: $g20-white;} + .kapacitor {@include gradient($kapacitor-dropdown-gradient); color: $g20-white;} +} diff --git a/assets/styles/layouts/_top-nav.scss b/assets/styles/layouts/_top-nav.scss index 5667b85eb..6285aec54 100644 --- a/assets/styles/layouts/_top-nav.scss +++ b/assets/styles/layouts/_top-nav.scss @@ -4,6 +4,7 @@ justify-content: space-between; position: relative; box-sizing: border-box; + z-index: 1; .influx-home { font-family: 'icomoon'; diff --git a/assets/styles/styles-default.scss b/assets/styles/styles-default.scss index 26e6bf788..d507535fe 100644 --- a/assets/styles/styles-default.scss +++ b/assets/styles/styles-default.scss @@ -13,6 +13,7 @@ @import "normalize/import-now", "layouts/global", "layouts/top-nav", + "layouts/homepage", "layouts/sidebar", "layouts/sidebar-toggle", "layouts/content-wrapper", diff --git a/assets/styles/tools/_color-palette.scss b/assets/styles/tools/_color-palette.scss index acca516be..6e7a7659c 100644 --- a/assets/styles/tools/_color-palette.scss +++ b/assets/styles/tools/_color-palette.scss @@ -142,3 +142,7 @@ $grad-ScotchBonnet: $y-pineapple,$r-curacao; // New gradients $grad-PurpleFog: $p-potassium, $cp-munchkin; $grad-PurpleRain: $p-void, $cp-marguerite; + +// Transparent gradients +$grad-purpleFade: $br-pulsar, rgba($br-pulsar, 0); +$grad-blueFade: $b-ocean, rgba($b-ocean, 0); diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 000000000..b57639711 --- /dev/null +++ b/content/_index.md @@ -0,0 +1,10 @@ +--- +# Meta information for the documentation homepage +title: InfluxData Documentation +description: > + InfluxData provides the industry leading time series platform. + Store, process, and alert on time series data with InfluxDB and InfluxDB Cloud. + Use Telegraf to collect metrics from a growing number of technologies. + Visualize data with Chronograf. + Build robust monitoring and alerting pipelines with Kapacitor. +--- diff --git a/layouts/index.html b/layouts/index.html index f6be8b9ad..0a738c704 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,14 +1,81 @@ -{{ partial "header.html" . }} +{{ $influxdbVersionV2 := .Site.Data.products.influxdb.latest }} +{{ $influxdbVersionV1 := (index (last 1 (findRE `v1\.[0-9]{1,2}` (delimit .Site.Data.products.influxdb.versions " "))) 0) }} +{{ $enterpriseVersion := .Site.Data.products.enterprise_influxdb.latest }} +{{ $telegrafVersion := .Site.Data.products.telegraf.latest }} +{{ $chronografVersion := .Site.Data.products.chronograf.latest }} +{{ $kapacitorVersion := .Site.Data.products.kapacitor.latest }} -
-

- Welcome to the InfluxDB v2.x documentation -

-

- This page is never actually shown on the live docs since visiting the docs domain will redirect to the latest stable version. - Select your desired version from the dropdown above or go straight to the - latest stable version. -

+{{ partial "header.html" . }} +{{ partial "topnav.html" . }} + +
+
+ + {{ partial "svgs/homepage-hero.svg" }} + +
+

InfluxDB Cloud &
InfluxDB {{ $influxdbVersionV2 }} OSS

+

+ The most powerful time series database designed to handle high write and query loads. + Run in the cloud with InfluxDB Cloud or on your own hardware with InfluxDB {{ $influxdbVersionV2 }} OSS. +

+ View InfluxDB {{ $influxdbVersionV2 }} Documentation +
+
+
+
+ +
+
+
+ +
+

InfluxData Platform

+

Some marketing description about the TICK Stack

+ Learn more about the platform +
+
+

Telegraf {{ $telegrafVersion }}

+

Open source server agent to collect metrics from stacks, sensors and systems.

+ +
+
+

InfluxDB {{ $influxdbVersionV1 }}

+

The time series database designed to handle high write and query loads.

+ +
+
+

Chronograf {{ $chronografVersion }}

+

The administrative user interface and visualization engine for InfluxDB.

+ +
+
+

Kapacitor {{ $kapacitorVersion }}

+

Process and alert on stream and batch data from InfluxDB.

+ +
+
+ +
+
+

InfluxData Enterprise offerings

+

Some marketing description about Enterprise

+
+
+

InfluxDB Enterprise {{ $enterpriseVersion }}

+

A production-ready InfluxDB cluster that can run anywhere.

+ +
+
{{ partial "footer.html" . }} diff --git a/layouts/partials/svgs/homepage-hero.svg b/layouts/partials/svgs/homepage-hero.svg new file mode 100644 index 000000000..945937af6 --- /dev/null +++ b/layouts/partials/svgs/homepage-hero.svg @@ -0,0 +1,673 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +