phpcolor.github.io/404.html at main · phpcolor/phpcolor.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page not found - PHPColor</title>
<meta name="description" content="This page does not exist. PHPColor is a PHP library for color.">
<meta name="robots" content="noindex, follow">
<meta name="theme-color" content="#0a0a0f">

<link rel="icon" href="/favicon.ico" sizes="16x16">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

<style>
:root {
  color-scheme: dark;
  --surface: oklch(0.16 0.012 275);
  --text: oklch(0.97 0.005 275);
  --muted: oklch(0.62 0.015 275);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
.masthead {
  display: flex;
  justify-content: flex-end;
  padding: 1.75rem 2rem;
}
.repo {
  display: inline-flex;
  color: var(--muted);
  transition: color 200ms ease-out;
}
.repo:hover, .repo:focus-visible { color: var(--text); }
.repo svg { width: 1.375rem; height: 1.375rem; fill: currentColor; }
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
}
.colophon { padding: 1.75rem 2rem; }
.logo { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
.mark { width: clamp(4.5rem, 14vw, 6.5rem); height: auto; }
.name { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.wordmark { width: clamp(13rem, 40vw, 20rem); height: auto; fill: currentColor; }
.baseline {
  margin: 0;
  max-inline-size: 42ch;
  font-weight: 200;
  font-stretch: 87.5%;
  font-size: clamp(0.6875rem, 1.9vw, 0.8125rem);
  line-height: 1.7;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  text-wrap: balance;
  color: oklch(1 0 0 / 0.7);
}
.install {
  margin: 0;
  padding: 0.85rem 1.75rem;
  border-radius: 62.5rem;
  background: oklch(0.08 0.008 275);
  font-family: var(--mono);
  font-size: clamp(0.8rem, 2.6vw, 1.0625rem);
  letter-spacing: -0.01rem;
  color: var(--muted);
  user-select: all;
}
.install b { font-weight: inherit; color: oklch(0.72 0.25 239); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .install b {
    background: linear-gradient(90deg,
      #ff449e, #ff5900, #abaf00, #00cf60, #00cbe8, #00a7ff, #af79ff, #ff52db,
      #ff449e, #ff5900, #abaf00, #00cf60, #00cbe8, #00a7ff, #af79ff, #ff52db,
      #ff449e, #ff5900, #abaf00, #00cf60, #00cbe8, #00a7ff, #af79ff, #ff52db);
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: oklch(0.72 0.25 239);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .install b { animation: rainbow 2s linear infinite; }
  .install:hover b { animation: none; }
}
@keyframes rainbow {
  0%   { background-position: 100% 0; -webkit-text-fill-color: transparent; }
  55%  { background-position: 0 0; -webkit-text-fill-color: transparent; }
  62%  { background-position: 0 0; -webkit-text-fill-color: oklch(0.72 0.25 239); }
  100% { background-position: 0 0; -webkit-text-fill-color: oklch(0.72 0.25 239); }
}
.colophon p {
  margin: 0;
  font-size: 0.8125rem;
  color: oklch(0.45 0.012 275);
}
.credit {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease-out;
}
.credit:hover, .credit:focus-visible { color: var(--text); }
::selection {
  background: oklch(0.75 0.19 250 / 0.35);
  color: var(--text);
}
.install::selection {
  background: oklch(0.78 0.18 250);
  color: oklch(0.14 0.01 275);
}
.install b::selection {
  background: oklch(0.78 0.18 250);
  color: oklch(0.14 0.01 275);
  -webkit-text-fill-color: oklch(0.14 0.01 275);
}
@media (prefers-reduced-motion: no-preference) {
  .mark { animation: turn 90s linear infinite; }
}
@keyframes turn { to { rotate: 360deg; } }

.status {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.15rem;
  color: oklch(0.72 0.25 239);
}
.lost {
  margin: 0;
  font-weight: 200;
  font-stretch: 87.5%;
  font-size: clamp(0.6875rem, 1.9vw, 0.8125rem);
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.7);
}
.back {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border-radius: 62.5rem;
  background: oklch(0.08 0.008 275);
  font-family: var(--mono);
  font-size: clamp(0.8rem, 2.6vw, 1.0625rem);
  color: var(--muted);
  text-decoration: none;
  transition: color 200ms ease-out, background 200ms ease-out;
}
.back:hover, .back:focus-visible {
  background: oklch(0.12 0.01 275);
  color: var(--text);
}
.gone { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
</style>
</head>
<body>

<header class="masthead">
<a class="repo" href="https://github.com/phpcolor/phpcolor" rel="noopener" aria-label="PHPColor on GitHub">
  <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>
</a>
</header>

<main>
  <div class="logo">
    <a href="/" aria-label="PHPColor home"><svg class="mark" viewBox="23 23 61 61" role="img" aria-label="PHPColor">
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(0) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 0)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(22.5) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 22.5)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(45) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 45)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(67.5) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 67.5)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(90) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 90)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(112.5) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 112.5)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(135) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 135)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(157.5) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 157.5)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(180) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 180)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(202.5) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 202.5)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(225) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 225)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(247.5) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 247.5)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(270) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 270)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(292.5) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 292.5)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(315) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 315)"/>
      <path d="M0 0 C7.6 -3.42 9.5 -11.78 0 -19 C-0.38 -11.78 -0.38 -3.42 0 0 Z" transform="translate(53.5 53.5) rotate(337.5) translate(0 -16) rotate(-60)" fill="oklch(0.72 0.25 337.5)"/>
    </svg></a>
    <div class="name">
    <svg class="wordmark" viewBox="0 0 791 107" aria-hidden="true" focusable="false">
      <path d="M0.829346 104.6V2.40002H39.0813C50.7613 2.40002 60.0567 5.32002 66.9674 11.16C73.878 17 77.3334 24.9814 77.3334 35.104C77.3334 45.7134 73.4887 53.938 65.7993 59.778C58.2073 65.618 48.6687 68.538 37.1833 68.538H12.3633V104.6H0.829346ZM12.3633 58.026H37.6213C46.0893 58.026 52.854 55.982 57.9153 51.894C63.074 47.7087 65.6534 42.1607 65.6534 35.25C65.6534 28.1447 63.1713 22.694 58.2073 18.898C53.3407 15.0047 46.6734 13.058 38.2053 13.058H12.3633V58.026Z"/>
      <path d="M95.4328 104.6V2.40002H106.967V48.806H165.951V2.40002H177.485V104.6H165.951V59.61H106.967V104.6H95.4328Z"/>
      <path d="M198.439 104.6V2.40002H236.691C248.371 2.40002 257.666 5.32002 264.577 11.16C271.487 17 274.943 24.9814 274.943 35.104C274.943 45.7134 271.098 53.938 263.409 59.778C255.817 65.618 246.278 68.538 234.793 68.538H209.973V104.6H198.439ZM209.973 58.026H235.231C243.699 58.026 250.463 55.982 255.525 51.894C260.683 47.7087 263.263 42.1607 263.263 35.25C263.263 28.1447 260.781 22.694 255.817 18.898C250.95 15.0047 244.283 13.058 235.815 13.058H209.973V58.026Z"/>
      <path d="M343.357 106.352C313.281 106.352 290.943 83.138 290.943 53.5C290.943 24.446 312.843 0.64801 344.233 0.64801C363.505 0.64801 374.309 7.948 383.799 17.292L370.367 32.768C362.483 25.614 355.767 21.38 344.087 21.38C326.859 21.38 314.449 35.688 314.449 53.5C314.449 71.02 326.567 85.62 344.087 85.62C355.767 85.62 362.921 80.948 370.951 73.648L385.259 88.978C374.747 100.22 363.067 106.352 343.357 106.352Z"/>
      <path d="M442.746 106.352C411.21 106.352 388.58 82.846 388.58 53.5C388.58 24.446 411.502 0.64801 443.038 0.64801C474.574 0.64801 497.204 24.154 497.204 53.5C497.204 82.554 474.282 106.352 442.746 106.352ZM443.038 85.62C461.142 85.62 473.698 71.312 473.698 53.5C473.698 35.98 460.85 21.38 442.746 21.38C424.642 21.38 412.086 35.688 412.086 53.5C412.086 71.02 424.934 85.62 443.038 85.62Z"/>
      <path d="M509.849 104.6V2.40001H532.333V84.16H583.287V104.6H509.849Z"/>
      <path d="M636.738 106.352C605.202 106.352 582.572 82.846 582.572 53.5C582.572 24.446 605.494 0.64801 637.03 0.64801C668.566 0.64801 691.196 24.154 691.196 53.5C691.196 82.554 668.274 106.352 636.738 106.352ZM637.03 85.62C655.134 85.62 667.69 71.312 667.69 53.5C667.69 35.98 654.842 21.38 636.738 21.38C618.634 21.38 606.078 35.688 606.078 53.5C606.078 71.02 618.926 85.62 637.03 85.62Z"/>
      <path d="M701.841 104.6V2.40001H748.561C761.555 2.40001 771.629 6.05001 778.345 12.766C784.039 18.46 787.105 26.49 787.105 36.418C787.105 52.916 778.199 63.282 765.205 68.1L790.171 104.6H763.891L741.699 71.896H724.325V104.6H701.841ZM724.325 52.04H747.101C758.051 52.04 764.329 46.2 764.329 37.294C764.329 27.658 757.613 22.694 746.663 22.694H724.325V52.04Z"/>
    </svg>
    </div>
  </div>

  <div class="gone">
    <p class="status">404</p>
    <p class="lost">This page does not exist</p>
  </div>

  <a class="back" href="/">Back to phpcolor.dev</a>
</main>

<footer class="colophon">
  <p>&copy; 2025-2026 <a class="credit" href="https://smnandre.dev" rel="author me external">Simon André</a></p>
</footer>

</body>
</html>