diff --git a/assets/js/search-interactions.js b/assets/js/search-interactions.js index 6aca60da0..4628111bd 100644 --- a/assets/js/search-interactions.js +++ b/assets/js/search-interactions.js @@ -1,10 +1,10 @@ // Fade content wrapper when focusing on search input $('#algolia-search-input').focus(function() { - $('.content-wrapper').fadeTo(400, .35); + $('.content-wrapper, .group-wrapper').fadeTo(300, .35); }) // Hide search dropdown when leaving search input $('#algolia-search-input').blur(function() { - $('.content-wrapper').fadeTo(200, 1); + $('.content-wrapper, .group-wrapper').fadeTo(200, 1); $('.ds-dropdown-menu').hide(); }) diff --git a/assets/styles/layouts/_content-wrapper.scss b/assets/styles/layouts/_content-wrapper.scss index de7e57a9b..5955680be 100644 --- a/assets/styles/layouts/_content-wrapper.scss +++ b/assets/styles/layouts/_content-wrapper.scss @@ -4,6 +4,7 @@ position: relative; border-radius: $radius 0 0 $radius; overflow: hidden; + z-index: 0; .copyright { padding: .5rem 1rem .5rem .5rem; 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..1b29ae8b3 --- /dev/null +++ b/assets/styles/layouts/_homepage.scss @@ -0,0 +1,311 @@ +//////////////////////////////// HOMEPAGE STYLES /////////////////////////////// + +.home { + display: flex; + flex-direction: column; + align-items: flex-start; + + .section { + display: flex; + width: 100%; + padding: 0rem 3rem; + flex-grow: 1; + + .row{ + flex-direction: row; + } + + .half { width: 50%; } + .third { width: 33.33%; } + .quarter { width: 25%; } + .two-thirds { width: 66.67%; } + .three-quarters { width: 75%; } + } + + ///////////////////////////// HERO SECTION STYLES //////////////////////////// + + .hero { + position: relative; + padding-top: 3.5rem; + padding-bottom: 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-top: 2rem; + padding-bottom: 2.25rem; + + .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, .algolia-autocomplete.algolia-autocomplete-right { + .ds-dropdown-menu { + top: auto !important; + left: 0 !important; + margin-bottom: 1.5rem; + + &:after { + content: ""; + box-shadow: 2px 2px 10px $sidebar-search-shadow; + height: 100%; + width: 100%; + mix-blend-mode: multiply; + } + } + } + } + } + + /////////////////////////////// PRODUCT CARDS //////////////////////////////// + + .group-wrapper { + 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 { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 1.25rem 1.5rem .75rem; + flex: 1 0; + + .card-content p { margin-bottom: 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%; } + } + } + } + + .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 { + + } + } + +} diff --git a/assets/styles/layouts/_top-nav.scss b/assets/styles/layouts/_top-nav.scss index 5667b85eb..3a5468b9c 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'; @@ -51,7 +52,7 @@ .selector-dropdowns { display: flex; z-index: 100; - right: 5.5rem; + padding-right: .25rem; } .dropdown { 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..2d3a44996 100644 --- a/assets/styles/tools/_color-palette.scss +++ b/assets/styles/tools/_color-palette.scss @@ -142,3 +142,6 @@ $grad-ScotchBonnet: $y-pineapple,$r-curacao; // New gradients $grad-PurpleFog: $p-potassium, $cp-munchkin; $grad-PurpleRain: $p-void, $cp-marguerite; + +// Transparent gradients +$grad-whiteFade: rgba($g20-white, .75), rgba($g20-white, 0); diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 000000000..497c21dd1 --- /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..5edc257b0 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,14 +1,104 @@ -{{ 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" . }} + ++ 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 +The leading modern time series platform, built for metrics and events.
+Collect metrics from stacks, sensors and systems.
+Write and query time series data.
+Visualize and manage time series data.
+Process and alert on time series data.
+Enterprise tools to meet your business needs.
+A scalable InfluxDB cluster designed for heavy workloads. Run InfluxDB Enterprise on your own infrastructure—on-premises, private cloud, public cloud, or at the edge.
+