@awesomeness-js/server 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
/* All styles scoped to .status-page and only using existing CSS variables (e.g., --sky-500, --violet-500, --slate-950). */
|
|
2
|
+
|
|
3
|
+
.status-page {
|
|
4
|
+
/* layout */
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
align-items: center;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
gap: 14px;
|
|
10
|
+
min-height: min(70vh, 560px);
|
|
11
|
+
padding: 36px 22px 28px;
|
|
12
|
+
margin: min(12vh, 120px) auto;
|
|
13
|
+
text-align: center;
|
|
14
|
+
width: min(720px, 92vw);
|
|
15
|
+
|
|
16
|
+
/* card look */
|
|
17
|
+
position: relative;
|
|
18
|
+
border-radius: 18px;
|
|
19
|
+
background:
|
|
20
|
+
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)) padding-box;
|
|
21
|
+
border: 1px solid color-mix(in oklab, white 14%, transparent);
|
|
22
|
+
box-shadow: 0 10px 30px rgba(0,0,0,.35);
|
|
23
|
+
backdrop-filter: saturate(160%) blur(10px);
|
|
24
|
+
color: var(--slate-50);
|
|
25
|
+
isolation: isolate;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.status-page::before {
|
|
29
|
+
content: "";
|
|
30
|
+
position: absolute;
|
|
31
|
+
inset: -1px;
|
|
32
|
+
border-radius: inherit;
|
|
33
|
+
z-index: -1;
|
|
34
|
+
background:
|
|
35
|
+
radial-gradient(80% 60% at 20% 0%, color-mix(in oklab, var(--sky-500) 32%, transparent), transparent 65%),
|
|
36
|
+
radial-gradient(70% 50% at 100% 10%, color-mix(in oklab, var(--violet-500) 28%, transparent), transparent 60%),
|
|
37
|
+
var(--slate-950);
|
|
38
|
+
filter: saturate(110%);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Headline */
|
|
42
|
+
.status-page h1 {
|
|
43
|
+
margin: 0;
|
|
44
|
+
line-height: 1;
|
|
45
|
+
letter-spacing: -0.02em;
|
|
46
|
+
font-weight: 800;
|
|
47
|
+
font-size: clamp(48px, 14vw, 120px);
|
|
48
|
+
background:
|
|
49
|
+
conic-gradient(from 220deg, var(--sky-400), var(--violet-400), var(--sky-400)) text;
|
|
50
|
+
-webkit-background-clip: text;
|
|
51
|
+
background-clip: text;
|
|
52
|
+
color: transparent;
|
|
53
|
+
filter: drop-shadow(0 6px 18px color-mix(in oklab, var(--sky-500) 25%, transparent));
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Message */
|
|
57
|
+
.status-page p {
|
|
58
|
+
margin: 2px 0 18px;
|
|
59
|
+
color: var(--slate-400);
|
|
60
|
+
font-size: clamp(14px, 1.7vw, 18px);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* CTA */
|
|
64
|
+
.status-page .btn-home {
|
|
65
|
+
display: inline-flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
height: 46px;
|
|
69
|
+
padding: 0 18px;
|
|
70
|
+
gap: .5ch;
|
|
71
|
+
border-radius: 12px;
|
|
72
|
+
text-decoration: none;
|
|
73
|
+
font-weight: 700;
|
|
74
|
+
letter-spacing: .01em;
|
|
75
|
+
|
|
76
|
+
color: var(--slate-50);
|
|
77
|
+
background:
|
|
78
|
+
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)),
|
|
79
|
+
linear-gradient(90deg, color-mix(in oklab, var(--sky-500) 32%, transparent), color-mix(in oklab, var(--violet-500) 32%, transparent));
|
|
80
|
+
border: 1px solid color-mix(in oklab, white 14%, transparent);
|
|
81
|
+
box-shadow: 0 4px 18px rgba(0,0,0,.2);
|
|
82
|
+
transition: transform .15s ease, box-shadow .2s ease, filter .15s ease, background .25s ease;
|
|
83
|
+
}
|
|
84
|
+
.status-page .btn-home:hover {
|
|
85
|
+
transform: translateY(-1px);
|
|
86
|
+
box-shadow: 0 10px 26px rgba(0,0,0,.28);
|
|
87
|
+
filter: saturate(120%);
|
|
88
|
+
}
|
|
89
|
+
.status-page .btn-home:active { transform: translateY(0) }
|
|
90
|
+
.status-page .btn-home:focus-visible {
|
|
91
|
+
outline: none;
|
|
92
|
+
box-shadow:
|
|
93
|
+
0 0 0 2px var(--slate-950),
|
|
94
|
+
0 0 0 6px color-mix(in oklab, var(--sky-500) 45%, transparent);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* 404 variant */
|
|
98
|
+
.status-page.status-page-404 p {
|
|
99
|
+
font-size: clamp(15px, 1.9vw, 20px);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Generic variant trims the gradient headline */
|
|
103
|
+
.status-page.status-page-generic h1 {
|
|
104
|
+
background: linear-gradient(180deg, currentColor, currentColor) text;
|
|
105
|
+
-webkit-background-clip: text;
|
|
106
|
+
background-clip: text;
|
|
107
|
+
color: currentColor;
|
|
108
|
+
filter: none;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Compact on very small screens */
|
|
112
|
+
@media (max-width: 420px){
|
|
113
|
+
.status-page { padding: 26px 16px 20px; border-radius: 16px; }
|
|
114
|
+
.status-page .btn-home { width: 100% }
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Reduced motion */
|
|
118
|
+
@media (prefers-reduced-motion: reduce){
|
|
119
|
+
.status-page .btn-home { transition: none }
|
|
120
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
export default (code) => {
|
|
2
|
+
|
|
3
|
+
let $statusPage;
|
|
4
|
+
|
|
5
|
+
if(code === 404){
|
|
6
|
+
|
|
7
|
+
$statusPage = $(`
|
|
8
|
+
<div class="status-page status-page-404">
|
|
9
|
+
<h1>404</h1>
|
|
10
|
+
<p>Oops! The page you are looking for does not exist.</p>
|
|
11
|
+
<a href="/" class="btn-home">Go to Home Page</a>
|
|
12
|
+
</div>
|
|
13
|
+
`);
|
|
14
|
+
|
|
15
|
+
} else if(code === 401){
|
|
16
|
+
|
|
17
|
+
$statusPage = $(`
|
|
18
|
+
<div class="status-page status-page-404">
|
|
19
|
+
<h1>Nah...</h1>
|
|
20
|
+
<p>Sorry Bro... Access Denied.</p>
|
|
21
|
+
<a href="/" class="btn-home">Go to Home Page</a>
|
|
22
|
+
</div>
|
|
23
|
+
`);
|
|
24
|
+
|
|
25
|
+
} else {
|
|
26
|
+
|
|
27
|
+
$statusPage = $(`
|
|
28
|
+
<div class="status-page status-page-generic">
|
|
29
|
+
<h1>${code}</h1>
|
|
30
|
+
<p>Something went wrong.</p>
|
|
31
|
+
<a href="/" class="btn-home">Go to Home Page</a>
|
|
32
|
+
</div>
|
|
33
|
+
`);
|
|
34
|
+
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
return $statusPage;
|
|
38
|
+
|
|
39
|
+
};
|