Skip to content

Commit ecdf35f

Browse files
MattIPv4MattIPv4
committed
feat(statuspage): initial statuspage styling
1 parent 39694e4 commit ecdf35f

1 file changed

Lines changed: 179 additions & 0 deletions

File tree

‎statuspage/styles.scss‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
/* Vars from website redesign */
2+
$gray0: #f5f6f7;
3+
$gray1: #eaedef;
4+
$gray2: #dae1e5;
5+
$gray3: #cbd4d8;
6+
$gray4: #b0bcc1;
7+
$gray5: #929fa5;
8+
$gray6: #6f7b82;
9+
$gray7: #556066;
10+
$gray8: #3f484c;
11+
$gray9: #2d3438;
12+
$red0: #faf0f0;
13+
$red1: #fad4d4;
14+
$red2: #fab6b6;
15+
$red3: #fa8e8e;
16+
$red4: #f55353;
17+
$red5: #de1b1b;
18+
$red6: #b80d0d;
19+
$red7: #8f0e0e;
20+
$red8: #661414;
21+
$red9: #451717;
22+
$orange0: #fcf2e6;
23+
$orange1: #fad8af;
24+
$orange2: #f5bc76;
25+
$orange3: #e89c3f;
26+
$orange4: #cf7911;
27+
$orange5: #ad5f00;
28+
$orange6: #8a4d03;
29+
$orange7: #693d07;
30+
$orange8: #4d2f0b;
31+
$orange9: #33210c;
32+
$green0: #ecf2e9;
33+
$green1: #c5e5b5;
34+
$green2: #9acc7d;
35+
$green3: #83ba63;
36+
$green4: #5fa04d;
37+
$green5: #417f38;
38+
$green6: #2c682c;
39+
$green7: #215127;
40+
$green8: #193f1d;
41+
$green9: #0f260f;
42+
$blue0: #e8f4fa;
43+
$blue1: #bbe5fa;
44+
$blue2: #8dd4f7;
45+
$blue3: #53baed;
46+
$blue4: #229ad6;
47+
$blue5: #0c7bb3;
48+
$blue6: #066391;
49+
$blue7: #064d70;
50+
$blue8: #093952;
51+
$blue9: #0c2938;
52+
$purple0: #f5f0fa;
53+
$purple1: #ead9fa;
54+
$purple2: #dabcf7;
55+
$purple3: #c79bf2;
56+
$purple4: #ae74e8;
57+
$purple5: #9656d6;
58+
$purple6: #7d3cbd;
59+
$purple7: #642b9e;
60+
$purple8: #4b2175;
61+
$purple9: #371c52;
62+
$pink0: #faf0f4;
63+
$pink1: #fad4e4;
64+
$pink2: #fab4d1;
65+
$pink3: #f78bb8;
66+
$pink4: #ed5393;
67+
$pink5: #d6246e;
68+
$pink6: #b01355;
69+
$pink7: #8a1244;
70+
$pink8: #611535;
71+
$pink9: #421527;
72+
$brand-light: $green3;
73+
$brand: $green5;
74+
$brand-dark: $green7;
75+
$banner-clip: polygon(0 0, 100% 0, 100% calc(100% - 72px), 0 100%);
76+
$banner-gradient: linear-gradient(90deg, $purple9, $blue7);
77+
$nav-height: 6.2rem;
78+
$hero-height: 36rem;
79+
$sans-serif: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
80+
$serif: "Merriweather", Georgia, Cambria, "Times New Roman", Times, serif;
81+
82+
/* Base */
83+
html {
84+
font-size: 10px;
85+
}
86+
87+
body {
88+
background: $gray0;
89+
color: $gray9;
90+
font-family: $sans-serif;
91+
font-size: 1.8rem;
92+
}
93+
94+
/* Font sizes */
95+
.font-large {
96+
line-height: 1.5;
97+
font-size: 2rem;
98+
}
99+
100+
.font-regular {
101+
line-height: 1.5;
102+
font-size: 1.8rem;
103+
}
104+
105+
.font-small, small, .small,
106+
.shared-partial.uptime-90-days-wrapper .legend .legend-item,
107+
#uptime-tooltip .no-outages-msg, #uptime-tooltip .outage-count {
108+
line-height: 1.5;
109+
font-size: 1.15rem;
110+
}
111+
112+
/* Gradient BG */
113+
.layout-content.status::before {
114+
display: block;
115+
content: '';
116+
position: absolute;
117+
top: 0;
118+
left: 0;
119+
right: 0;
120+
height: $hero-height * .75;
121+
-webkit-filter: brightness(160%) saturate(45%);
122+
filter: brightness(160%) saturate(45%);
123+
background: $banner-gradient;
124+
-webkit-clip-path: $banner-clip;
125+
clip-path: $banner-clip;
126+
z-index: -1;
127+
}
128+
129+
.layout-content.status-index::before {
130+
height: $hero-height * 1.2;
131+
}
132+
133+
/* Logo text */
134+
.layout-content.status .masthead-container.basic .masthead .logo-container {
135+
max-width: none;
136+
}
137+
138+
.layout-content.status .masthead-container.basic .masthead .logo-container::after {
139+
content: 'Node.js Status';
140+
color: #fff;
141+
font-size: 4.2rem;
142+
font-weight: 600;
143+
line-height: 1.5;
144+
vertical-align: middle;
145+
padding: 0 0 0 .5rem;
146+
147+
@media screen and (max-width: 850px) {
148+
display: block;
149+
padding: .25rem 0;
150+
}
151+
}
152+
153+
.layout-content.status.status-incident .page-title {
154+
margin: 0 0 20rem;
155+
}
156+
157+
/* Status box */
158+
.layout-content.status.status-index .page-status {
159+
margin-bottom: 96px;
160+
padding: .85rem 1.25rem 1.25rem;
161+
}
162+
163+
/* Buttons */
164+
.flat-button, .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
165+
box-shadow: none;
166+
font-size: 1.25rem;
167+
line-height: 1.5;
168+
}
169+
170+
/* Incidents */
171+
.unresolved-incident .incident-title a {
172+
color: $gray9 !important;
173+
}
174+
.unresolved-incident .incident-title .subscribe {
175+
font-size: 1em !important;
176+
}
177+
.unresolved-incident .updates {
178+
background: $gray0;
179+
}

0 commit comments

Comments
 (0)