Merge pull request #1371 from influxdata/updates/styles-404
Update 404 page and InfluxDB landing page stylespull/1342/head^2
Scott Anderson
GitHub
commit
c72a77a16c
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
.error-content {
|
||||
margin-top: 10vh;
|
||||
max-width: 310px;
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
|
|
@ -56,24 +56,50 @@
|
|||
margin: 2rem 0 1.5rem;
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
margin-right: 4px;
|
||||
padding: .75rem 1rem;
|
||||
border-radius: $radius;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $error-page-btn-text;
|
||||
transition: background-color .2s;
|
||||
z-index: 1;
|
||||
@include gradient($article-btn-gradient);
|
||||
&:hover {
|
||||
@include gradient($article-btn-gradient-hover);
|
||||
}
|
||||
|
||||
&.back:before {
|
||||
content: "\e90a";
|
||||
font-family: "icomoon";
|
||||
margin-right: .35rem;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,8 @@
|
|||
width: 90%;
|
||||
position: relative;
|
||||
margin-bottom: 1px;
|
||||
padding: 2rem 3.5vw 2rem 3vw;
|
||||
// padding: 2rem 3.5vw 2rem 3vw;
|
||||
padding: 0 3.5vw 0 3vw; // added
|
||||
min-height: 140px;
|
||||
background: $landing-sm-bg;
|
||||
transition: background-color .4s, width .2s;
|
||||
|
|
@ -61,28 +62,31 @@
|
|||
background: $landing-sm-bg-hover;
|
||||
width: 100%;
|
||||
h3 {
|
||||
transform: translateY(-1.2rem);
|
||||
font-weight: $medium;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
p {
|
||||
opacity: 1;
|
||||
transition-delay: 100ms;
|
||||
// transition-delay: 100ms;
|
||||
max-height: 3.75rem; // added
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
transition: all .2s;
|
||||
margin: 0; // added
|
||||
}
|
||||
p {
|
||||
position: absolute;
|
||||
// position: absolute;
|
||||
margin: .5rem 0 0; // added
|
||||
max-height: 0; // added
|
||||
width: 80%;
|
||||
color: $g20-white;
|
||||
font-size: .95rem;
|
||||
line-height: 1.25rem;
|
||||
opacity: 0;
|
||||
transition: opacity .2s;
|
||||
transition: opacity .2s .1s, max-height .2s;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -181,13 +185,14 @@
|
|||
p {
|
||||
opacity: .6;
|
||||
position: relative;
|
||||
max-height: fit-content;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: $landing-sm-bg-hover;
|
||||
h3 { transform: none; }
|
||||
p { opacity: 1; }
|
||||
p { opacity: 1; max-height: fit-content; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: InfluxDB v2.0 documentation
|
|||
description: >
|
||||
InfluxDB is an open source time series database designed to handle high write and query loads.
|
||||
Learn how to use and leverage InfluxDB in use cases such as monitoring metrics, IoT data, and events.
|
||||
layout: version-landing
|
||||
layout: landing-influxdb
|
||||
menu:
|
||||
influxdb_2_0:
|
||||
name: InfluxDB 2.0 home
|
||||
|
|
|
|||
|
|
@ -1,34 +1,70 @@
|
|||
{{ partial "header.html" . }}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{ partial "header/google-analytics-head.html" }}
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Page not found</title>
|
||||
<meta name="description" content="Whoops! Looks like this page doesn't exist.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="shortcut icon" href="/img/favicon.png" type="image/png" sizes="32x32">
|
||||
|
||||
<div class="error-page">
|
||||
<div class="error-content">
|
||||
<div class="error-code">
|
||||
<div class="error-code-border">
|
||||
<h1>404</h1>
|
||||
{{ partial "header/stylesheets.html" }}
|
||||
{{ partial "header/google-fonts.html" }}
|
||||
{{ partial "header/javascript.html" }}
|
||||
|
||||
<meta name="Copyright" content="InfluxData Inc." />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{{ partial "header/google-analytics-body.html" }}
|
||||
|
||||
<div class="error-page">
|
||||
<div class="error-content">
|
||||
<div class="error-code">
|
||||
<div class="error-code-border">
|
||||
<h1>404</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wayfinding">
|
||||
<a class="btn back" href="javascript:history.back()">Back</a>
|
||||
<a class="btn version"></a>
|
||||
</div>
|
||||
<p>Whoops! Looks like this page doesn't exist. If a link brought you here, <a href="https://github.com/influxdata/docs-v2/issues/new" target="_blank">let us know</a>. We'd like to fix it.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wayfinding">
|
||||
<a class="btn back" href="javascript:history.back()">Back</a>
|
||||
<a class="btn version">InfluxDB</a>
|
||||
</div>
|
||||
<p>Whoops! Looks like this page doesn't exist. If a link brought you here, <a href="https://github.com/influxdata/docs-v2/issues/new" target="_blank">let us know</a>. We'd like to fix it.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function getProjectVersion(urlPath) {
|
||||
if (/v[0-9][.][0-9]*/.test(urlPath)) { return urlPath.match(/v[0-9][.][0-9]*/)[0] }
|
||||
else { return undefined }
|
||||
}
|
||||
<script>
|
||||
function getProject(urlPath) {
|
||||
if (/^\/influxdb\//.test(urlPath)) { return {name: 'InfluxDB', path: '/influxdb'} }
|
||||
else if (/^\/telegraf\//.test(urlPath)) { return {name: 'Telegraf', path: '/telegraf'} }
|
||||
else if (/^\/chronograf\//.test(urlPath)) { return {name: 'Chronograf', path: '/chronograf'} }
|
||||
else if (/^\/kapacitor\//.test(urlPath)) { return {name: 'Kapacitor', path: '/kapacitor'} }
|
||||
else if (/^\/enterprise_influxdb\//.test(urlPath)) { return {name: 'InfluxDB Enterprise', path: '/enterprise_influxdb'} }
|
||||
else if (/^\/platform\//.test(urlPath)) { return {name: 'InfluxData Platform', path: '/platform'} }
|
||||
else { return undefined }
|
||||
}
|
||||
function getProjectVersion(urlPath) {
|
||||
if (/v[0-9][.][0-9]*/.test(urlPath)) { return urlPath.match(/v[0-9][.][0-9]*/)[0] }
|
||||
else { return undefined }
|
||||
}
|
||||
|
||||
var path = window.location.pathname
|
||||
var projectVersion = getProjectVersion(path)
|
||||
var path = window.location.pathname
|
||||
var project = getProject(path)
|
||||
var projectVersion = getProjectVersion(path)
|
||||
|
||||
if ( projectVersion != undefined ) {
|
||||
$('.btn.version').append(' ' + projectVersion).attr('href', '/' + projectVersion + '/');
|
||||
} else {
|
||||
$('.btn.version').hide()
|
||||
}
|
||||
</script>
|
||||
if ( project != undefined && project.path === '/platform') {
|
||||
$('.btn.version').append(`${project.name}`).attr('href', `${project.path}/`);
|
||||
} else if ( project != undefined && projectVersion != undefined ) {
|
||||
$('.btn.version').append(`${project.name} ${projectVersion}`).attr('href', `${project.path}/${projectVersion}/`);
|
||||
} else if ( project != undefined && projectVersion == undefined ){
|
||||
$('.btn.version').append(`${project.name}`).attr('href', `${project.path}/`);
|
||||
} else {
|
||||
$('.btn.version').hide()
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
{{ partial "footer/javascript.html" . }}
|
||||
</html>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue