[add] add custom error page if upstream fails

This commit is contained in:
2020-06-06 18:13:13 -04:00
parent 9378ae4a00
commit 55823e6cfa
22 changed files with 625 additions and 3 deletions

View File

@@ -0,0 +1,243 @@
.blinking-cursor{
animation:blinkingCursor 1.25s infinite;
}
@keyframes blinkingCursor{
0%{ color: transparent; }
24%{ color: transparent; }
25%{ color: #ccc; }
75%{ color: #ccc; }
76%{ color: transparent; }
100%{ color: transparent; }
}
.loader {
position: absolute
}
.loader.pipe {
top: 5px;
font-size: 12px;
margin-left: 2px;
}
.loader-0-3 {
animation:loader0-3 0.5s infinite;
}
@keyframes loader0-3 {
0%{ color: #ccc; }
24%{ color: #ccc; }
25%{ color: transparent; }
100%{ color: transparent; }
}
.loader-1-3 {
animation:loader1-3 0.5s infinite;
}
@keyframes loader1-3 {
0%{ color: transparent; }
24%{ color: transparent; }
25%{ color: #ccc; }
49%{ color: #ccc; }
50%{ color: transparent; }
100%{ color: transparent; }
}
.loader-2-3 {
animation:loader2-3 0.5s infinite;
}
@keyframes loader2-3 {
0%{ color: transparent; }
49%{ color: transparent; }
50%{ color: #ccc; }
74%{ color: #ccc; }
75%{ color: transparent; }
100%{ color: transparent; }
}
.loader-3-3 {
animation:loader3-3 0.5s infinite;
}
@keyframes loader3-3 {
0%{ color: transparent; }
74%{ color: transparent; }
75%{ color: #ccc; }
100%{ color: #ccc; }
}
/* <span class="blinking-cursor">&#x258a;</span> */
.loader-0-9 {
animation:loader0-9 1s infinite;
}
@keyframes loader0-9 {
0%{ color: #ccc; }
9%{ color: #ccc; }
10%{ color: transparent; }
100%{ color: transparent; }
}
.loader-1-9 {
animation:loader1-9 1s infinite;
}
@keyframes loader1-9 {
0%{ color: transparent; }
9%{ color: transparent; }
10%{ color: #ccc; }
19%{ color: #ccc; }
20%{ color: transparent; }
100%{ color: transparent; }
}
.loader-2-9 {
animation:loader2-9 1s infinite;
}
@keyframes loader2-9 {
0%{ color: transparent; }
19%{ color: transparent; }
20%{ color: #ccc; }
29%{ color: #ccc; }
30%{ color: transparent; }
100%{ color: transparent; }
}
.loader-3-9 {
animation:loader3-9 1s infinite;
}
@keyframes loader3-9 {
0%{ color: transparent; }
29%{ color: transparent; }
30%{ color: #ccc; }
39%{ color: #ccc; }
40%{ color: transparent; }
100%{ color: transparent; }
}
.loader-4-9 {
animation:loader4-9 1s infinite;
}
@keyframes loader4-9 {
0%{ color: transparent; }
39%{ color: transparent; }
40%{ color: #ccc; }
49%{ color: #ccc; }
50%{ color: transparent; }
100%{ color: transparent; }
}
.loader-5-9 {
animation:loader5-9 1s infinite;
}
@keyframes loader5-9 {
0%{ color: transparent; }
49%{ color: transparent; }
50%{ color: #ccc; }
59%{ color: #ccc; }
60%{ color: transparent; }
100%{ color: transparent; }
}
.loader-6-9 {
animation:loader6-9 1s infinite;
}
@keyframes loader6-9 {
0%{ color: transparent; }
59%{ color: transparent; }
60%{ color: #ccc; }
69%{ color: #ccc; }
70%{ color: transparent; }
100%{ color: transparent; }
}
.loader-7-9 {
animation:loader7-9 1s infinite;
}
@keyframes loader7-9 {
0%{ color: transparent; }
69%{ color: transparent; }
70%{ color: #ccc; }
79%{ color: #ccc; }
80%{ color: transparent; }
100%{ color: transparent; }
}
.loader-8-9 {
animation:loader8-9 1s infinite;
}
@keyframes loader8-9 {
0%{ color: transparent; }
79%{ color: transparent; }
80%{ color: #ccc; }
89%{ color: #ccc; }
90%{ color: transparent; }
100%{ color: transparent; }
}
.loader-9-9 {
animation:loader9-9 1s infinite;
}
@keyframes loader9-9 {
0%{ color: transparent; }
89%{ color: transparent; }
90%{ color: #ccc; }
100%{ color: #ccc; }
}
/* 0-4 */
.loader-0-4 {
animation:loader0-4 0.5s infinite;
}
@keyframes loader0-4 {
0%{ color: #ccc; }
19%{ color: #ccc; }
20%{ color: transparent; }
100%{ color: transparent; }
}
.loader-1-4 {
animation:loader1-4 0.5s infinite;
}
@keyframes loader1-4 {
0%{ color: transparent; }
19%{ color: transparent; }
20%{ color: #ccc; }
39%{ color: #ccc; }
40%{ color: transparent; }
100%{ color: transparent; }
}
.loader-2-4 {
animation:loader2-4 0.5s infinite;
}
@keyframes loader2-4 {
0%{ color: transparent; }
39%{ color: transparent; }
40%{ color: #ccc; }
59%{ color: #ccc; }
60%{ color: transparent; }
100%{ color: transparent; }
}
.loader-3-4 {
animation:loader3-4 0.5s infinite;
}
@keyframes loader3-4 {
0%{ color: transparent; }
59%{ color: transparent; }
60%{ color: #ccc; }
79%{ color: #ccc; }
80%{ color: transparent; }
100%{ color: transparent; }
}
.loader-4-4 {
animation:loader4-4 0.5s infinite;
}
@keyframes loader4-4 {
0%{ color: transparent; }
79%{ color: transparent; }
80%{ color: #ccc; }
100%{ color: #ccc; }
}

View File

@@ -0,0 +1,72 @@
/* latin-ext */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('Overpass Mono Light'), local('OverpassMono-Light'), url(fonts/OverpassMono-Light_ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('Overpass Mono Light'), local('OverpassMono-Light'), url(fonts/OverpassMono-Light.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Overpass Mono Regular'), local('OverpassMono-Regular'), url(fonts/OverpassMono-Regular_ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Overpass Mono Regular'), local('OverpassMono-Regular'), url(fonts/OverpassMono-Regular.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: local('Overpass Mono SemiBold'), local('OverpassMono-SemiBold'), url(fonts/OverpassMono-SemiBold_ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: local('Overpass Mono SemiBold'), local('OverpassMono-SemiBold'), url(fonts/OverpassMono-SemiBold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Overpass Mono Bold'), local('OverpassMono-Bold'), url(fonts/OverpassMono-Bold_ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Overpass Mono Bold'), local('OverpassMono-Bold'), url(fonts/OverpassMono-Bold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

View File

@@ -0,0 +1,38 @@
.logo {
font-weight: 700;
color: #fff;
font-size: 20px;
padding: 10px;
margin-bottom: 10px;
float: left;
background-color: rgb(46, 46, 46);
clear: both;
/*width: 100%;*/
}
.logo > div {
float: left;
}
.logo .left {
color: #fff;
}
.logo .hash {
margin-left: 5px;
margin-right: 5px;
color: rgb(241, 118, 3);
}
.logo .right {
color: #fff;
}
.right .blinking-cursor {
font-size: 30px;
vertical-align:top;
position: relative;
display:inline-block;
transform:scale(1,1.34);
top: 2px;
}

View File

@@ -0,0 +1,43 @@
.spacer:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 10px;
}
body {
font-family: 'Overpass Mono', monospace;
background-color: rgb(46, 46, 46);
color: #fff;
}
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
/* pure.css font */
font-family: 'Overpass Mono', monospace;
}
.center-elements {
display:flex;
justify-content:center;
align-items:center;
text-align: center;
}
.vert-10 { height: 10vh }
.vert-20 { height: 20vh }
.vert-30 { height: 30vh }
.vert-40 { height: 40vh }
.vert-50 { height: 50vh }
.vert-60 { height: 60vh }
.vert-70 { height: 70vh }
.vert-80 { height: 80vh }
.vert-90 { height: 90vh }
.status-code .code{
font-size: 40px;
}
.status-code .msg{
font-size: 20px;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long