Skip to content

Commit 5bb5d09

Browse files
czechianczechian
committed
WEB-4512 404 page rebranding & a11y fixes
1 parent 95de93c commit 5bb5d09

44 files changed

Lines changed: 2825 additions & 198 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,6 @@ node_modules/
22
public/
33
resources/_gen/
44
.hugo_build.lock
5+
.DS_Store
6+
pa11y-report.json
7+
.a11y-site/

‎.nvmrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
20
2+

‎assets/icons/chevron-right-pink.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎assets/icons/chevron-right.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/scss/404.scss‎

Lines changed: 156 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,187 @@
1+
// (C) 2026 GoodData Corporation
2+
13
.td-404 {
2-
background-color: $color-mist-gray;
4+
background-color: $color-white;
5+
6+
.td-sidebar,
7+
.td-toc {
8+
display: none;
9+
}
10+
11+
main {
12+
flex: 0 0 100%;
13+
max-width: 100%;
14+
padding-left: 0 !important;
15+
}
316

417
.td-main {
518
padding-top: $header-height-desktop + 40px;
619
padding-bottom: 40px;
720

821
@include mq(x-large) {
9-
padding-top: $header-height-x-big-desktop + 80px;
22+
padding-top: $header-height-x-big-desktop + 100px;
1023
padding-bottom: 80px;
1124
}
25+
26+
main {
27+
@include mq(large) {
28+
padding-top: 0;
29+
}
30+
}
31+
}
32+
}
33+
34+
.gd-404 {
35+
margin: 0 auto;
36+
37+
&__header {
38+
display: flex;
39+
flex-direction: column;
40+
align-items: center;
41+
}
42+
43+
&__pretitle {
44+
position: relative;
45+
display: table;
46+
height: 28px;
47+
margin-bottom: 1rem;
48+
padding: 8px 16px 4px;
49+
font-family: $funnel-regular;
50+
font-size: 0.875rem;
51+
line-height: 0.875rem;
52+
font-weight: 500;
53+
text-transform: uppercase;
54+
color: $color-black;
55+
56+
&::before,
57+
&::after {
58+
content: "";
59+
position: absolute;
60+
top: 0;
61+
width: 10px;
62+
height: 28px;
63+
border: 1.5px solid $color-storm-gray;
64+
}
65+
66+
&::before {
67+
left: 0;
68+
border-right: none;
69+
border-top-left-radius: 4px;
70+
border-bottom-left-radius: 4px;
71+
}
72+
73+
&::after {
74+
right: 0;
75+
border-left: none;
76+
border-top-right-radius: 4px;
77+
border-bottom-right-radius: 4px;
78+
}
1279
}
1380

14-
h1 {
15-
font-family: $switzer-variable;
16-
margin-bottom: 2rem;
17-
font-size: 3rem;
81+
&__title {
82+
font-family: $funnel-regular;
83+
margin-bottom: 1.5rem;
84+
font-size: 2.5rem;
1885
line-height: 1.25;
86+
color: $color-heading;
87+
88+
@include mq(medium) {
89+
font-size: 3rem;
90+
}
1991

2092
@include mq(large) {
21-
font-size: 4.25rem;
93+
font-size: 4rem;
2294
}
2395
}
2496

25-
h2 {
26-
font-family: $switzer-semibold;
97+
&__suggest {
98+
margin-top: 3rem;
99+
}
100+
101+
&__subtitle {
102+
font-family: $funnel-regular;
27103
margin-bottom: 1.5rem;
28-
font-size: 1.4375rem;
104+
font-size: 1.25rem;
29105
line-height: 1.25;
106+
color: $color-heading;
30107

31108
@include mq(large) {
32-
font-size: 2rem;
109+
font-size: 1.5rem;
33110
}
34111
}
35112

36-
main {
37-
ul {
38-
list-style-type: none;
39-
padding: 0;
113+
&__links {
114+
list-style: none;
115+
margin: 0;
116+
padding: 0;
117+
118+
@include mq(large) {
119+
display: flex;
120+
justify-content: center;
40121
}
41122

42123
li {
43-
margin-bottom: 9px;
124+
margin-bottom: 1rem;
44125

45-
a {
46-
font-size: 18px;
47-
text-decoration: underline;
126+
@include mq(large) {
127+
margin-bottom: 0;
128+
129+
&:not(:last-child) {
130+
margin-right: 3rem;
131+
}
48132
}
49133
}
50134
}
51-
}
135+
136+
&__link {
137+
display: inline-block;
138+
position: relative;
139+
font-family: $funnel-regular;
140+
font-size: 18px;
141+
text-decoration: none;
142+
white-space: nowrap;
143+
color: $color-link;
144+
145+
&:hover,
146+
&:focus {
147+
text-decoration: none;
148+
color: $color-link;
149+
}
150+
151+
span {
152+
position: relative;
153+
border-bottom: 2px solid $color-ice-blue;
154+
155+
&::after {
156+
content: "";
157+
position: absolute;
158+
inset: auto auto -2px 0;
159+
width: 0;
160+
height: 2px;
161+
background-color: $color-link;
162+
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
163+
}
164+
}
165+
166+
&::after {
167+
content: "";
168+
display: inline-block;
169+
position: relative;
170+
top: 2px;
171+
width: 16px;
172+
height: 16px;
173+
margin-left: 6px;
174+
background-color: currentColor;
175+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 3l5 5-5 5M13 8H2.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
176+
transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
177+
}
178+
179+
&:hover::after {
180+
margin-left: 14px;
181+
}
182+
183+
&:hover span::after {
184+
width: 100%;
185+
}
186+
}
187+
}

‎assets/scss/alert.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,18 @@
1616
}
1717
}
1818

19+
.td-content blockquote blockquote {
20+
color: inherit;
21+
}
22+
1923
.alert {
2024
position: relative;
2125

2226
&-heading {
2327
.td-content & {
2428
margin-top: 0;
2529
margin-bottom: 5px;
30+
font-family: $funnel-semibold;
2631
font-size: 20px;
2732
line-height: 1.3;
2833
}
@@ -92,7 +97,7 @@
9297

9398
> svg {
9499
position: absolute;
95-
top: 26px;
100+
top: 30px;
96101
left: 32px;
97102
}
98103

‎assets/scss/content-select.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
border-bottom: 0;
2828
border-top-left-radius: 4px;
2929
border-top-right-radius: 4px;
30-
color: $color-storm-gray;
30+
color: $color-gunpowder-gray;
3131
font-family: $switzer-semibold;
3232
font-size: 14px;
3333
line-height: 1.25;

‎assets/scss/cta-banner.scss‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,13 @@
1313
margin-bottom: pxtorem(40px);
1414
overflow: hidden;
1515
position: relative;
16-
background-image: url("../img/blog-cta-desk.webp");
17-
background-size: auto 90%;
18-
background-repeat: no-repeat;
19-
background-position: right center;
16+
17+
&__media {
18+
flex: 1 1 0;
19+
align-self: stretch;
20+
margin: pxtorem(-32px) pxtorem(-32px) pxtorem(-32px) 0;
21+
background: url("../img/blog-cta-desk.webp") no-repeat right center / auto 90%;
22+
}
2023

2124
// ── Text column ──────────────────────────────────────────────────────────
2225

@@ -80,28 +83,16 @@
8083
flex-direction: column;
8184
align-items: flex-start;
8285
padding: pxtorem(24px);
83-
padding-bottom: 50%;
84-
background-image: url("../img/blog-cta-mobile.webp");
85-
background-size: 90% auto;
86-
background-repeat: no-repeat;
87-
background-position: bottom center;
8886

8987
&__content {
9088
width: 100%;
9189
}
9290

9391
&__media {
94-
position: static;
95-
width: 100%;
96-
max-width: 100%;
97-
margin-top: pxtorem(8px);
98-
99-
img {
100-
border-radius: 4px 4px 0 0;
101-
max-height: 180px;
102-
object-fit: cover;
103-
object-position: top left;
104-
}
92+
align-self: stretch;
93+
aspect-ratio: 621 / 310;
94+
margin: pxtorem(8px) 0 pxtorem(-24px);
95+
background: url("../img/blog-cta-mobile.webp") no-repeat center / cover;
10596
}
10697
}
10798
}

‎assets/scss/dark-theme/404.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,32 @@
1313
color: $color-white;
1414
}
1515
}
16+
17+
.gd-404 {
18+
&__pretitle {
19+
color: $color-white;
20+
21+
&::before,
22+
&::after {
23+
border-color: $color-silver-gray;
24+
}
25+
}
26+
27+
&__link {
28+
color: $color-ice-blue;
29+
30+
&:hover,
31+
&:focus {
32+
color: $color-ice-blue;
33+
}
34+
35+
span {
36+
border-bottom-color: rgba($color-ice-blue, 0.4);
37+
38+
&::after {
39+
background-color: $color-ice-blue;
40+
}
41+
}
42+
}
43+
}
1644
}

0 commit comments

Comments
 (0)