-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path404.html
339 lines (222 loc) · 13.9 KB
/
404.html
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
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Astral.CSS - Craft Beautiful Web Interfaces, One Class at a Time.">
<meta name="author" content="Rume Aluya"><meta name="keywords" content="CSS Framework,Responsive Design,Web devlopment,Front-End Framework,UI Components,Grid System,CSS Library,Web design tool,Modern CSS Framework,Customizable Framework">
<meta property="og:image" content="./Screenshot (1).png">
<meta name="twitter:image" content="./Screenshot (1).png">
<meta property="og:title" content="Astral.CSS ">
<meta property="og:description" content="Astral.CSS - Craft Beautiful Web Interfaces, One Class at a Time.">
<meta name="twitter:card" content="Astral.CSS - Craft Beautiful Web Interfaces, One Class at a Time.">
<meta name="twitter:site" content="@AstralCSS">
<meta name="twitter:creator" content="@thaboyaluya">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="theme-color" content="#00304a">
<link rel="apple-touch-icon" sizes="180x180" href="./favicon_package_v0.16/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/thaboyaluya/thaboyaluya.github.io@master/favicon_package_v0.16/favicon-32x32.png">
<link rel="manifest" href="https://cdn.jsdelivr.net/gh/thaboyaluya/thaboyaluya.github.io@master/site.webmanifest">
<link rel="mask-icon" href="./favicon_package_v0.16/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/thaboyaluya/thaboyaluya.github.io@master/favicon_package_v0.16/favicon-16x16.png">
<link href="https://cdn.jsdelivr.net/gh/thaboyaluya/astral.css-V3.0@master/css/astral.css-v3.0.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<title>Astral.CSS - Craft Beautiful Web Interfaces, One Class at a Time.</title>
<style>
.text-gray-700 {
--as-text-opacity: 1;
opacity: var(--as-text-opacity) !important;
color: var(--as-gray-700) !important;
}
.max-w-2xl {
max-width: 42rem;
}
.py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.headline {
font-size: 3.125rem;
font-size: min(4.375rem, max(8vw, 2.5rem));
font-weight: 700;
-webkit-font-feature-settings: initial;
-moz-font-feature-settings: initial;
font-feature-settings: initial;
letter-spacing: -.12rem;
margin-left: -.2rem;
margin-top: 3.4rem;
line-height: 1.1;
background-image: -webkit-linear-gradient(304deg, var(--shade), #757a7d);
background-image: -moz-linear-gradient(304deg, var(--shade), #757a7d);
background-image: -o-linear-gradient(304deg, var(--shade), #757a7d);
background-image: linear-gradient(146deg, var(--shade), #757a7d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.main-subtext {
font-size: 17px !important;
}
.text-muted {
--bs-text-opacity: 1;
color: #6c757d !important;
}
.cycle {
display: none;
}
.SelectMenu-item.is-active .cycle {
display: block;
}
</style>
</head>
<body>
<header class=" d-flex align-items-center justify-content-space-between px-5 py-3 ">
<div class="d-flex align-items-center gap-2">
<a title="Astral.CSS" class="flex" href="./index.html">
<img width="32px" height="32px" alt="Astal.CSS Logo" src="https://cdn.jsdelivr.net/gh/thaboyaluya/thaboyaluya.github.io@master/favicon_package_v0.16/favicon-32x32.png">
</a>
</div>
<nav class=" d-flex align-items-center gap-5">
<a title="Astral Docs" class="hidden footer-link d-sm-inline-flex items-center gap-1 text-sm border-b text-slate-900 " href="https://thaboyaluya.github.io/astral/documentation/get-started/introduction/get-started.html">Documentation</a>
<a title="Download Astral.CSS" href="https://github.com/thaboyaluya/astral.css-V3.0/archive/refs/heads/master.zip" target="_blank" rel="noopener" class="d-sm-inline-flex footer-link items-center gap-1 text-sm border-b text-slate-900 ">
<span>Download</span>
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3"><path d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
</path>
</svg>
</a>
<details class="details-reset details-overlay">
<summary id="js-cycle" aria-haspopup="true">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 cursor-pointer h-4"><path d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
</summary>
<div class="SelectMenu right-0">
<div class="SelectMenu-modal w-auto">
<div id="js-themes" class="SelectMenu-list js-themes">
<button data-scheme="light" class="SelectMenu-item" role="menuitem">
Light Mode <span class="tag ml-5 dark cycle">active</span>
</button>
<button data-scheme="dark" class="SelectMenu-item" role="menuitem">
Dark Mode <span class="tag ml-5 dark cycle">active</span>
</button>
<button data-scheme="system" class="SelectMenu-item" role="menuitem">
System <span class="tag ml-5 dark cycle ">active</span>
</button>
</div>
</div>
</div>
</details>
</nav>
</header>
<div class="max-w-2xl text-is-center mx-auto py-24 px-5">
<h1 class="text-3xl headline md:text-6xl font-bold tracking-tight mt-2">We Can’t Seem To Find The
Page You’re Looking For</h1>
<h2 class="mt-3 main-subtext text-gray-700 md:text-lg">
Error Code : <span className="text-primary">404</span></h2>
<div class="d-flex justify-content-center flex-direction-column flex-md-row mt-5 gap-3">
<a title="Astral.CSS Github" class="button button-large " href="https://github.com/thaboyaluya/thaboyaluya.github.io" target="_blank">Github</a>
<a title="Astral.CSS Docs" class="button button-large button-outline-primary " href="https://thaboyaluya.github.io/"><span class="mr-2">Go to Homepage</span> <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a>
</div>
</div>
<div class="border-top mt-20">
<footer><div class="d-flex flex-direction-column flex-md-row gap-3 align-items-center justify-content-space-between py-10 max-w-screen-lg mx-auto text-sm px-5 text-gray-700">
<p>© 2024 <a href="https://github.com/thaboyaluya/astral.css-V3.0/archive/refs/heads/master.zip" target="_blank" rel="noopener">Astral.CSS</a>. All rights reserved</p>
<nav class="d-flex flex-sm-column align-items-center justify-content-center gap-5">
<a class="footer-link" href="./astral/documentation/get-started/introduction/get-started.html">Introduction</a>
<a class="footer-link" href="./astral/documentation/get-started/download/download.html">Download</a>
<a class="footer-link" href="./astral/documentation/utilities/typography/typography.html">Typography</a>
<a class="footer-link" href="./astral/documentation/javascript/toast/toastify.html">Toastify</a>
<a class="footer-link" href="./astral/documentation/javascript/otp generator/otp-generator.html">OTP Generator</a>
<a class="footer-link" href="https://thaboyaluya.github.io/sitemap.xml">XML Sitemap</a>
</nav>
</div>
</footer>
</div>
<script>
// THEMES
const STORAGE_KEY = "Astral.CSS-theme";
const SYSTEM_THEME = "system";
const DEFAULT_THEME = "light";
const state = {
chosenTheme: SYSTEM_THEME, // light|dark|system
appliedTheme: DEFAULT_THEME, // light|dark
OSTheme: null, // light|dark|null
};
const $themeCycle = document.getElementById("js-cycle");
const $themeSwitchers = document.querySelectorAll(".js-themes button");
const updateThemeUI = () => {
$themeSwitchers.forEach((el) => {
const swatchTheme = el.dataset.scheme;
if (state.chosenTheme === swatchTheme) {
el.classList.add("is-active");
} else {
el.classList.remove("is-active");
}
});
};
const setTheme = (theme, save = true) => {
state.chosenTheme = theme;
state.appliedTheme = theme;
if (theme === SYSTEM_THEME) {
state.appliedTheme = state.OSTheme;
document.documentElement.removeAttribute("data-theme");
window.localStorage.removeItem(STORAGE_KEY);
} else {
document.documentElement.setAttribute("data-theme", theme);
if (save) {
window.localStorage.setItem(STORAGE_KEY, theme);
}
}
updateThemeUI();
};
const toggleTheme = () => {
if (state.appliedTheme === "light") {
setTheme("dark");
} else {
setTheme("light");
}
};
const detectOSTheme = () => {
if (!window.matchMedia) {
// matchMedia method not supported
return DEFAULT_THEME;
}
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
// OS theme setting detected as dark
return "dark";
} else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
return "light";
}
return DEFAULT_THEME;
};
// On load, check if any preference was saved
const localTheme = window.localStorage.getItem(STORAGE_KEY);
state.OSTheme = detectOSTheme();
if (localTheme) {
setTheme(localTheme, false);
} else {
setTheme(SYSTEM_THEME);
}
// Event listeners
$themeSwitchers.forEach((el) => {
el.addEventListener("click", () => {
const theme = el.dataset.scheme;
setTheme(theme);
});
});
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (event) => {
const theme = event.matches ? "dark" : "light";
state.OSTheme = theme;
setTheme(theme);
});
</script>
<script src="https://cdn.jsdelivr.net/gh/thaboyaluya/astral.css-V3.0@master/js/astral-v3.0.min.js"></script>
</body>
</html>