restyled landing page colors, added brand gradients

pull/963/head
Scott Anderson 2020-04-21 11:47:39 -06:00
parent 5475ae07c1
commit c05aa7187c
9 changed files with 142 additions and 112 deletions

View File

@ -2,19 +2,20 @@
<html>
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WXRH9C');</script>
<!-- End Google Tag Manager -->
<meta charset="utf8" />
<title>{{title}}</title>
<meta name="description" content="The InfluxDB API provides a programmatic interface for interactions with InfluxDB {{templateOptions.version}}.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/img/favicon.png" type="image/png" sizes="32x32">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-45024174-12"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-45024174-12');
</script>
<meta name="google-site-verification" content="_V6CNhaIIgVsTO9max_ECw7DUfPL-ZGE7G03MQgEGMU" />
<style>
@ -29,6 +30,11 @@
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WXRH9C" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="loading">
<div class="spinner"></div>
</div>

View File

@ -2282,7 +2282,17 @@ paths:
content:
application/json:
schema:
$ref: "#/components/schemas/Dashboard"
type: object
properties:
name:
description: optional, when provided will replace the name
type: string
description:
description: optional, when provided will replace the description
type: string
cells:
description: optional, when provided will replace all existing cells with the cells provided
$ref: "#/components/schemas/CellWithViewProperties"
parameters:
- $ref: '#/components/parameters/TraceSpan'
- in: path
@ -3751,6 +3761,11 @@ paths:
schema:
type: string
description: Filter organizations to a specific organization ID.
- in: query
name: userID
schema:
type: string
description: Filter organizations to a specific user ID.
responses:
'200':
description: A list of organizations
@ -7360,6 +7375,8 @@ components:
type: "string"
orgID:
type: "string"
pkgName:
type: string
name:
type: "string"
description:
@ -7377,12 +7394,18 @@ components:
items:
type: object
properties:
status:
type: string
resourcePkgName:
type: string
resourceName:
type: string
resourceID:
type: string
resourceType:
type: string
labelPkgName:
type: string
labelName:
type: string
labelID:
@ -7413,11 +7436,13 @@ components:
items:
type: object
properties:
pkgName:
type: string
name:
type: string
description:
type: string
endpointName:
endpointPkgName:
type: string
endpointID:
type: string
@ -7460,6 +7485,8 @@ components:
items:
type: object
properties:
pkgName:
type: string
id:
type: string
name:
@ -7483,6 +7510,8 @@ components:
- $ref: "#/components/schemas/TelegrafRequest"
- type: object
properties:
pkgName:
type: string
labelAssociations:
type: array
items:
@ -7516,8 +7545,8 @@ components:
items:
type: object
properties:
remove:
type: boolean
stateStatus:
type: string
id:
type: string
pkgName:
@ -7545,8 +7574,8 @@ components:
items:
type: object
properties:
remove:
type: boolean
stateStatus:
type: string
id:
type: string
pkgName:
@ -7560,8 +7589,8 @@ components:
items:
type: object
properties:
remove:
type: boolean
stateStatus:
type: string
id:
type: string
pkgName:
@ -7593,8 +7622,8 @@ components:
items:
type: object
properties:
remove:
type: boolean
stateStatus:
type: string
id:
type: string
pkgName:
@ -7622,16 +7651,20 @@ components:
items:
type: object
properties:
isNew:
type: boolean
status:
type: string
resourceType:
type: string
resourceID:
type: string
resourcePkgName:
type: string
resourceName:
type: string
labelID:
type: string
labelPkgName:
type: string
labelName:
type: string
notificationEndpoints:
@ -7639,8 +7672,8 @@ components:
items:
type: object
properties:
remove:
type: boolean
stateStatus:
type: string
id:
type: string
pkgName:
@ -7654,8 +7687,8 @@ components:
items:
type: object
properties:
remove:
type: boolean
stateStatus:
type: string
id:
type: string
pkgName:
@ -7747,8 +7780,8 @@ components:
items:
type: object
properties:
remove:
type: boolean
stateStatus:
type: string
id:
type: string
pkgName:
@ -7792,8 +7825,8 @@ components:
items:
type: object
properties:
remove:
type: boolean
stateStatus:
type: string
id:
type: string
pkgName:
@ -7807,8 +7840,8 @@ components:
items:
type: object
properties:
remove:
type: boolean
stateStatus:
type: string
id:
type: string
pkgName:

View File

@ -37,7 +37,7 @@ $bold: 700;
margin-left: -25px;
border-radius: 50%;
border: 3px solid $g16-pearl;
border-top-color: $br-galaxy;
border-top-color: $br-pulsar;
animation: spinner .6s linear infinite;
}
@ -47,7 +47,7 @@ $bold: 700;
font-family: $rubik;
padding: 15px 20px ;
display: block;
background-color: $wp-violentdark;
background-color: $g2-kevlar;
a {
color: $g20-white;
text-decoration: none;
@ -147,14 +147,14 @@ $bold: 700;
///////////////////////////// RESPONSE COLOR BLOCKS ////////////////////////////
// Green
.hLVzSF {
background-color: rgba($gr-wasabi, .5);
.hLVzSF, .fDvFMp {
background-color: rgba($gr-honeydew, .2);
color: $gr-emerald;
}
// Red
.byLrBg {
background-color: rgba($o-marmelade, .35);
background-color: rgba($r-curacao, .1);
color: $r-curacao;
}
@ -168,7 +168,7 @@ $bold: 700;
}
.gpbcFk:hover, .sc-eTuwsz.active {
background-color: rgb(237, 237, 237);
background-color: $g17-whisper;
}
// List item text
@ -183,9 +183,9 @@ $bold: 700;
// Request method tags
.cFwMcp {
&.post { background-color: $b-ocean; }
&.get { background-color: $gr-canopy; }
&.get { background-color: $gr-rainforest; }
&.put { background-color: $br-galaxy; }
&.patch { background-color: $y-thunder; }
&.patch { background-color: $y-thunder; color: rgba($g5-pepper, .75);}
&.delete { background-color: $r-curacao; }
}
@ -198,7 +198,7 @@ $bold: 700;
// Right column backgrounds
.dtUibw, .fLUKgj {
background-color: $wp-jagger;
background-color: $g2-kevlar;
h3,h4,h5,h6 {
font-family: $rubik !important;
font-weight: $medium !important;
@ -207,18 +207,18 @@ $bold: 700;
// Code backgrounds
.irpqyy > .react-tabs__tab-panel {
background-color: $wp-telopea;
background-color: $g0-obsidian;
}
.dHLKeu, .fVaxnA {
padding-left: 10px;
background-color: $wp-telopea;
background-color: $g0-obsidian;
}
// Response code tabs
.irpqyy > ul > li {
background-color: $wp-telopea;
background-color: $g0-obsidian;
border-radius: 3px;
&.react-tabs__tab--selected{ color: $cp-blueviolet; }
&.react-tabs__tab--selected{ color: $br-pulsar;}
&.tab-error { color: $r-fire; }
&.tab-success { color: $gr-viridian; }
}
@ -235,14 +235,14 @@ $bold: 700;
border-radius: 3px;
}
.bNYCAJ { background-color: $b-ocean; } /* Post */
.jBjYbV { background-color: $gr-canopy; } /* Get */
.jBjYbV { background-color: $gr-viridian; } /* Get */
.hOczRB { background-color: $br-galaxy; } /* Put */
.fRsrDc { background-color: $br-chartreuse; color: $ch-olive; } /* Patch */
.fRsrDc { background-color: $y-thunder; color: $g5-pepper; } /* Patch */
.hPskZd { background-color: $r-curacao; } /* Delete */
// Content type block
.gzAoUb {
background-color: rgba($wp-jagger, .4);
background-color: $g2-kevlar;
font-family: $rubik;
}
.iENVAs { font-family: $roboto-mono; }
@ -259,7 +259,7 @@ $bold: 700;
.jCgylq {
.token.string {
color: $gr-honeydew;
& + a { color: $b-malibu; }
& + a { color: $b-pool; }
}
.token.boolean { color: #f955b0; }
}

View File

@ -5,7 +5,7 @@
overflow: hidden;
border-radius: $radius 0 0 $radius;
min-height: 700px;
background: linear-gradient(55deg, $landing-lg-gradient-left, $landing-lg-gradient-right );
@include gradient($landing-artwork-gradient);
a {
text-decoration: none;
@ -99,15 +99,32 @@
&#get-started {
.btn {
position: relative;
display: inline-block;
padding: 1.25rem;
margin: 0 20% .35rem;
color: $landing-btn-text;
font-size: 1.1rem;
font-weight: $medium;
background: $landing-btn-bg;
@include gradient($landing-btn-grad);
transition: background-color .2s, color .2s;
border-radius: $radius;
z-index: 1;
&:before {
content: "";
position: absolute;
display: block;
top: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: $radius;
@include gradient($landing-btn-grad-hover);
opacity: 0;
transition: opacity .2s;
z-index: -1;
}
&.oss:after {
content: 'beta';
@ -123,9 +140,7 @@
}
&:hover {
background: $landing-btn-bg-hover;
color: $landing-btn-text-hover;
&:after { border-color: rgba($landing-btn-text-hover, .5) }
&:before { opacity: 1; }
}
}
}
@ -158,7 +173,6 @@
flex-grow: 2;
width: 49%;
text-align: center;
background: $landing-sm-bg-alt;
h3 {
margin: 0 0 .5rem;
font-size: 1.1rem;

View File

@ -13,7 +13,7 @@
left:0;
width: 100%;
height: 100%;
@include gradient($grad-miyazakisky);
@include gradient($grad-Miyazakisky);
opacity: .85;
}

View File

@ -19,7 +19,7 @@ $body-bg: $g0-obsidian;
// TopNav Colors
$topnav-link: $g20-white;
$topnav-link-hover: $b-pool;
$version-selector-gradient: $grad-miyazakisky;
$version-selector-gradient: $grad-Miyazakisky;
$theme-switch-light: inline-block;
$theme-switch-dark: none;
@ -68,7 +68,7 @@ $article-code-link-hover: $g20-white;
$article-code-scrollbar: $g3-castle;
// Article Tables
$article-table-header: $grad-gundampilot;
$article-table-header: $grad-GundamPilot;
$article-table-row-alt: $g3-castle;
$article-table-scrollbar: $g0-obsidian;
@ -163,16 +163,13 @@ $error-page-btn-hover: $g20-white;
$error-page-btn-hover-text: $b-pool;
// Landing Page colors
$landing-lg-gradient-left: #2d0749;
$landing-lg-gradient-right: #423681;
$landing-sm-bg: #52499A;
$landing-sm-bg-alt: #52499A;
$landing-artwork-gradient: $grad-GrapeSoda;
$landing-artwork-color: rgba($br-galaxy, .25);
$landing-sm-bg: rgba($g1-raven, .4);
$landing-sm-bg-hover: $b-pool;
$landing-btn-text: $g20-white;
$landing-btn-bg: $b-pool;
$landing-btn-text-hover: $b-pool;
$landing-btn-bg-hover: $g20-white;
$landing-artwork-color: #423681;
$landing-btn-grad: $grad-blue;
$landing-btn-grad-hover: $grad-blue-light;
// Tooltip colors
$tooltip-color: $br-chartreuse;

View File

@ -20,7 +20,7 @@ $radius: 3px !default;
// TopNav Colors
$topnav-link: $g8-storm !default;
$topnav-link-hover: $b-dodger !default;
$version-selector-gradient: $grad-pastelgothic !default;
$version-selector-gradient: $grad-PastelGothic !default;
$theme-switch-light: none !default;
$theme-switch-dark: inline-block !default;
@ -69,7 +69,7 @@ $article-code-link-hover: $cp-marguerite !default;
$article-code-scrollbar: $cp-periwinkle !default;
// Article Tables
$article-table-header: $grad-miyazakisky !default;
$article-table-header: $grad-Miyazakisky !default;
$article-table-row-alt: #F6F7F8 !default;
$article-table-scrollbar: $g14-chromium !default;
@ -163,16 +163,13 @@ $error-page-btn-hover: $b-pool !default;
$error-page-btn-hover-text: $g20-white !default;
// Landing Page colors
$landing-lg-gradient-left: $cp-jakarta !default;
$landing-lg-gradient-right: $wp-heart !default;
$landing-sm-bg: $wp-seance !default;
$landing-sm-bg-alt: $wp-jagger !default;
$landing-artwork-gradient: $grad-GundamPilot !default;
$landing-artwork-color: rgba($p-shadow, .35) !default;
$landing-sm-bg: rgba($p-void, .4) !default;
$landing-sm-bg-hover: $b-pool !default;
$landing-btn-text: $g20-white !default;
$landing-btn-bg: $b-pool !default;
$landing-btn-text-hover: $b-pool !default;
$landing-btn-bg-hover: $g20-white !default;
$landing-artwork-color: rgba($g20-white, .15) !default;
$landing-btn-grad: $grad-blue !default;
$landing-btn-grad-hover: $grad-blue-light !default;
// Tooltip colors
$tooltip-color: $p-amethyst !default;
@ -190,6 +187,6 @@ $svg-table-code-bg: $cp-titan !default;
$svg-table-code-operator: $b-pool !default;
$svg-table-code-string: #12A290 !default;
$svg-geo-s2-cell: $b-malibu !default;
$svg-geo-s2-cell: $b-hydrogen !default;
$svg-geo-region: $br-galaxy !default;
$svg-geo-point: $p-potassium !default;

View File

@ -81,7 +81,7 @@ $r-tungsten: #FFB6A0;
$r-marmelade: #FFDCCF;
$r-flan: #FFF7F4;
// Code
// Code (Light theme)
$cp-marguerite: #736ECD;
$cp-melrose: #A5A6FF;
$cp-munchkin: #B7B8FF;
@ -91,6 +91,19 @@ $cp-titan: #EDEDFF;
/////////////////////////////////// Gradients //////////////////////////////////
// Brand Gradients
$grad-WarpSpeed: $br-deeppurple, $p-void;
$grad-PowerStone: $p-void, $br-magenta;
$grad-MilkyWay: $br-magenta, $br-galaxy;
$grad-LazyAfternoon: $b-pool, $br-galaxy;
$grad-NineteenEightyFour: $b-pool, $br-magenta;
$grad-RadioactiveWarning: $b-pool, $br-chartreuse;
$grad-LostGalaxy: $br-deeppurple, $br-pulsar;
$grad-GrapeSoda: $br-deeppurple, $p-amethyst;
$grad-LavenderLatte: $br-deeppurple, $p-star;
$grad-OminousFog: $br-pulsar, $br-galaxy;
// Single Hue Gradient
$grad-grey-light: $g13-mist, $g18-cloud;
$grad-grey: $g10-wolf, $g13-mist;
$grad-grey-dark: $g3-castle, $g6-smoke;
@ -115,38 +128,8 @@ $grad-red-light: $r-dreamsicle, $r-tungsten;
$grad-red: $r-curacao, $r-dreamsicle;
$grad-red-dark: $r-ruby, $r-fire;
$grad-gundampilot: $p-amethyst, $b-ocean;
$grad-miyazakisky: $p-star, $b-pool;
$grad-pastelgothic: $p-comet, $b-laser;
$grad-garageband: $b-pool, $gr-rainforest;
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////// OLD COLORS //////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// Warm Purples - Magentas
$wp-telopea: #23043E;
$wp-violentdark: #2d0749;
$wp-jagger: #420D5F;
$wp-seance: #611581;
$wp-heart: #A026C4;
// Cool Purples
$cp-jakarta: #322368;
$cp-blueviolet: #625CB3;
// Blues
$b-malibu: #6CC8F9;
// Chartreuses
$ch-olive: #3B440A;
// Greens
$gr-canopy: #20B76F;
// Oranges
$o-marmelade: #FFDCCF;
// Multi-Hue Gradients
$grad-GundamPilot: $p-amethyst, $b-ocean;
$grad-Miyazakisky: $p-star, $b-pool;
$grad-PastelGothic: $p-comet, $b-laser;
$grad-GarageBand: $b-pool, $gr-rainforest;

View File

@ -8,9 +8,9 @@
<div class="cards">
<div class="card main" id="get-started">
{{ $currentVersion := replaceRE "v" "" (index (findRE "[^/]+.*?" .RelPermalink) 0) }}
<h1>Get started with InfluxDB</h1>
<h1>Get started with InfluxDB {{ $currentVersion }}</h1>
<a class="btn" href="cloud/get-started">Start with InfluxDB Cloud</a>
<a class="btn oss" href="get-started">Start with InfluxDB OSS {{ $currentVersion }}</a>
<a class="btn oss" href="get-started">Start with InfluxDB OSS</a>
</div>
{{ partial "svgs/hive.svg" }}
<div class="group">