From ecdf35f007d09f3ec021d9eb1610338205251e65 Mon Sep 17 00:00:00 2001 From: MattIPv4 Date: Mon, 20 Apr 2020 14:22:43 +0100 Subject: [PATCH 1/5] feat(statuspage): initial statuspage styling --- statuspage/styles.scss | 179 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 statuspage/styles.scss diff --git a/statuspage/styles.scss b/statuspage/styles.scss new file mode 100644 index 000000000..654c205fb --- /dev/null +++ b/statuspage/styles.scss @@ -0,0 +1,179 @@ +/* Vars from website redesign */ +$gray0: #f5f6f7; +$gray1: #eaedef; +$gray2: #dae1e5; +$gray3: #cbd4d8; +$gray4: #b0bcc1; +$gray5: #929fa5; +$gray6: #6f7b82; +$gray7: #556066; +$gray8: #3f484c; +$gray9: #2d3438; +$red0: #faf0f0; +$red1: #fad4d4; +$red2: #fab6b6; +$red3: #fa8e8e; +$red4: #f55353; +$red5: #de1b1b; +$red6: #b80d0d; +$red7: #8f0e0e; +$red8: #661414; +$red9: #451717; +$orange0: #fcf2e6; +$orange1: #fad8af; +$orange2: #f5bc76; +$orange3: #e89c3f; +$orange4: #cf7911; +$orange5: #ad5f00; +$orange6: #8a4d03; +$orange7: #693d07; +$orange8: #4d2f0b; +$orange9: #33210c; +$green0: #ecf2e9; +$green1: #c5e5b5; +$green2: #9acc7d; +$green3: #83ba63; +$green4: #5fa04d; +$green5: #417f38; +$green6: #2c682c; +$green7: #215127; +$green8: #193f1d; +$green9: #0f260f; +$blue0: #e8f4fa; +$blue1: #bbe5fa; +$blue2: #8dd4f7; +$blue3: #53baed; +$blue4: #229ad6; +$blue5: #0c7bb3; +$blue6: #066391; +$blue7: #064d70; +$blue8: #093952; +$blue9: #0c2938; +$purple0: #f5f0fa; +$purple1: #ead9fa; +$purple2: #dabcf7; +$purple3: #c79bf2; +$purple4: #ae74e8; +$purple5: #9656d6; +$purple6: #7d3cbd; +$purple7: #642b9e; +$purple8: #4b2175; +$purple9: #371c52; +$pink0: #faf0f4; +$pink1: #fad4e4; +$pink2: #fab4d1; +$pink3: #f78bb8; +$pink4: #ed5393; +$pink5: #d6246e; +$pink6: #b01355; +$pink7: #8a1244; +$pink8: #611535; +$pink9: #421527; +$brand-light: $green3; +$brand: $green5; +$brand-dark: $green7; +$banner-clip: polygon(0 0, 100% 0, 100% calc(100% - 72px), 0 100%); +$banner-gradient: linear-gradient(90deg, $purple9, $blue7); +$nav-height: 6.2rem; +$hero-height: 36rem; +$sans-serif: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +$serif: "Merriweather", Georgia, Cambria, "Times New Roman", Times, serif; + +/* Base */ +html { + font-size: 10px; +} + +body { + background: $gray0; + color: $gray9; + font-family: $sans-serif; + font-size: 1.8rem; +} + +/* Font sizes */ +.font-large { + line-height: 1.5; + font-size: 2rem; +} + +.font-regular { + line-height: 1.5; + font-size: 1.8rem; +} + +.font-small, small, .small, +.shared-partial.uptime-90-days-wrapper .legend .legend-item, +#uptime-tooltip .no-outages-msg, #uptime-tooltip .outage-count { + line-height: 1.5; + font-size: 1.15rem; +} + +/* Gradient BG */ +.layout-content.status::before { + display: block; + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: $hero-height * .75; + -webkit-filter: brightness(160%) saturate(45%); + filter: brightness(160%) saturate(45%); + background: $banner-gradient; + -webkit-clip-path: $banner-clip; + clip-path: $banner-clip; + z-index: -1; +} + +.layout-content.status-index::before { + height: $hero-height * 1.2; +} + +/* Logo text */ +.layout-content.status .masthead-container.basic .masthead .logo-container { + max-width: none; +} + +.layout-content.status .masthead-container.basic .masthead .logo-container::after { + content: 'Node.js Status'; + color: #fff; + font-size: 4.2rem; + font-weight: 600; + line-height: 1.5; + vertical-align: middle; + padding: 0 0 0 .5rem; + + @media screen and (max-width: 850px) { + display: block; + padding: .25rem 0; + } +} + +.layout-content.status.status-incident .page-title { + margin: 0 0 20rem; +} + +/* Status box */ +.layout-content.status.status-index .page-status { + margin-bottom: 96px; + padding: .85rem 1.25rem 1.25rem; +} + +/* Buttons */ +.flat-button, .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown { + box-shadow: none; + font-size: 1.25rem; + line-height: 1.5; +} + +/* Incidents */ +.unresolved-incident .incident-title a { + color: $gray9 !important; +} +.unresolved-incident .incident-title .subscribe { + font-size: 1em !important; +} +.unresolved-incident .updates { + background: $gray0; +} From 159acf4e34b9d3dfa5b5d48fb660332e48344de2 Mon Sep 17 00:00:00 2001 From: MattIPv4 Date: Mon, 20 Apr 2020 14:23:35 +0100 Subject: [PATCH 2/5] feat(statuspage): initial statuspage custom footer html --- statuspage/footer.html | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 statuspage/footer.html diff --git a/statuspage/footer.html b/statuspage/footer.html new file mode 100644 index 000000000..c14e3356d --- /dev/null +++ b/statuspage/footer.html @@ -0,0 +1,2 @@ + + From b7c22dce786475ff7addfecdef91355381e696d6 Mon Sep 17 00:00:00 2001 From: MattIPv4 Date: Mon, 20 Apr 2020 14:26:41 +0100 Subject: [PATCH 3/5] feat(statuspage): initial statuspage custom header html --- statuspage/header.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 statuspage/header.html diff --git a/statuspage/header.html b/statuspage/header.html new file mode 100644 index 000000000..e69de29bb From 9e39fa966786d417bd791d1dc10d883a54e172b1 Mon Sep 17 00:00:00 2001 From: MattIPv4 Date: Mon, 20 Apr 2020 14:41:32 +0100 Subject: [PATCH 4/5] feat(statuspage): initial statuspage custom colors --- statuspage/colors.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 statuspage/colors.md diff --git a/statuspage/colors.md b/statuspage/colors.md new file mode 100644 index 000000000..55c47f357 --- /dev/null +++ b/statuspage/colors.md @@ -0,0 +1,17 @@ +# StatusPage Colors + +These are the colors used on the colors customisation page for the Node.js status page. + +| Name | Value | Variable | Preview | +|------------------|---------|----------|---------------------------------------------------| +| Body background | #f5f6f7 | $gray0 | ![](http://singlecolorimage.com/get/f5f6f7/32x32) | +| Font color | #2d3438 | $gray9 | ![](http://singlecolorimage.com/get/2d3438/32x32) | +| Light font color | #b0bcc1 | $gray4 | ![](http://singlecolorimage.com/get/b0bcc1/32x32) | +| Greens | #5fa04d | $green4 | ![](http://singlecolorimage.com/get/5fa04d/32x32) | +| Yellows | #fad8af | $orange1 | ![](http://singlecolorimage.com/get/fad8af/32x32) | +| Oranges | #e89c3f | $orange3 | ![](http://singlecolorimage.com/get/e89c3f/32x32) | +| Reds | #f55353 | $red4 | ![](http://singlecolorimage.com/get/f55353/32x32) | +| Blues | #229ad6 | $blue4 | ![](http://singlecolorimage.com/get/229ad6/32x32) | +| Link color | #229ad6 | $blue4 | ![](http://singlecolorimage.com/get/229ad6/32x32) | +| Border color | #eaedef | $gray1 | ![](http://singlecolorimage.com/get/eaedef/32x32) | +| Graph color | #229ad6 | $blue4 | ![](http://singlecolorimage.com/get/229ad6/32x32) | From d9840d59d4de249b297cda1bfc19e21d2012e2cc Mon Sep 17 00:00:00 2001 From: MattIPv4 Date: Mon, 20 Apr 2020 22:27:54 +0100 Subject: [PATCH 5/5] doc(statuspage): initial doc for statuspage --- doc/statuspage.md | 58 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 doc/statuspage.md diff --git a/doc/statuspage.md b/doc/statuspage.md new file mode 100644 index 000000000..8f40b8cac --- /dev/null +++ b/doc/statuspage.md @@ -0,0 +1,58 @@ +# StatusPage + +This document relates to the [StatusPage](https://www.statuspage.io/) for Node.js, which can be +found at [status.nodejs.org](https://status.nodejs.org). + +## Access + +The following people have access to the StatusPage control panel. New accounts can be added via the +[User Management](https://admin.atlassian.com/s/f6b1a2fe-1302-40aa-9a3f-4f7523370639/users) page. + +Atlassian StatusPage has three groups available, `site-admins` that have full administration access +in Atlassian, `statuspage-administrators` that have full administration access specifically for the +StatusPage product, and `statuspage-users` who have regular operational access to StatusPage. + +Atlassian organizations also have a separate concept of org-wide administrators, that have full +access to everything (this is technically different from `site-admins` as that is scoped to the +"site", but this org only has one site, so they are effectively the same). + +| GitHub | Site Role | Org Admin | +|------------------------------------------------|--------------------|-----------| +| [@MattIPv4](https://github.com/MattIPv4) | `site-admins` | Yes | +| OpenJSF Operations | `site-admins` | Yes | +| [@MylesBorins](https://github.com/MylesBorins) | `statuspage-users` | No | + +## Twitter + +There is also a Twitter account, [@NodejsStatus](https://twitter.com/NodejsStatus), for the +status page. + +This account is run via the +[Twitter integration](https://manage.statuspage.io/pages/rxy2rhgm8q1n/twitter) on StatusPage and +will automatically tweet any incident updates (if tweeting is selected for an incident update). + +## Customisations + +The [statuspage](../statuspage) directory in this repository contains a backup of the major +customisations applied to the Node.js status page. These should be updated whenever the +customisations are changed on the status page. + +[colors.md](../statuspage/colors.md) contains the custom color set for the whole status page +(including emails for subscribers) in +[Your Page > Customize page and emails > Colors](https://manage.statuspage.io/pages/rxy2rhgm8q1n/design#colors-container). + +[styles.scss](../statuspage/styles.scss) stores the custom styling that is applied to all web pages +of the Node.js StatusPage site. This is controlled from the +[Customize HTML & CSS](https://manage.statuspage.io/pages/rxy2rhgm8q1n/full-customize) view +accessed from the button top-right on +[Your Page > Customize page and emails > Customize status page](https://manage.statuspage.io/pages/rxy2rhgm8q1n/design#design-container). + +[header.html](../statuspage/header.html) contains the custom HTML used for the header on the +status page. It is important to note that this replaces the default header (logo & subscribe +button), so using this should be avoided if possible. Like the custom styling, this is managed from +the [Customize HTML & CSS](https://manage.statuspage.io/pages/rxy2rhgm8q1n/full-customize) page. + +[footer.html](../statuspage/footer.html) contains custom HTML injected into the footer of the +status page website. This doesn't replace any default content and is a good place for custom +scripting if needed. This is also controlled from the +[Customize HTML & CSS](https://manage.statuspage.io/pages/rxy2rhgm8q1n/full-customize) page.