Skip to content

Commit f5a4761

Browse files
MiodecMiodec
committed
chore: fix 404 page styling
1 parent 5f26439 commit f5a4761

1 file changed

Lines changed: 105 additions & 2 deletions

File tree

‎frontend/src/404.html‎

Lines changed: 105 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,43 @@
11
<!doctype html>
22
<html lang="en">
3-
<load src="html/head.html" />
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>404 Not Found | Monkeytype</title>
7+
<link rel="stylesheet" href="styles/standalone.scss" />
8+
<link id="favicon" rel="shortcut icon" href="images/fav.png" />
9+
<link rel="shortcut icon" href="images/fav.png" />
10+
<link
11+
rel="stylesheet"
12+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
13+
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
14+
crossorigin="anonymous"
15+
referrerpolicy="no-referrer"
16+
/>
17+
<meta name="name" content="Monkeytype" />
18+
<meta name="image" content="https://monkeytype.com/mtsocial.png" />
19+
<meta
20+
name="description"
21+
content="The most customizable typing test website with a minimal design and a ton of features. Test yourself in various modes, track your progress and improve your speed."
22+
/>
23+
<meta
24+
name="keywords"
25+
content="typing, test, typing-test, typing test, monkey-type, monkeytype, monkey type, monkey-types, monkeytypes, monkey types, types, monkey, type, miodec, wpm, words per minute, typing website, minimalistic, custom typing test, customizable, customisable, themes, random words, smooth caret, smooth, new, new typing site, new typing website, minimalist typing website, minimalistic typing website, minimalist typing test"
26+
/>
27+
<meta name="author" content="Miodec" />
28+
<meta property="og:title" content="404 Not Found | Monkeytype" />
29+
<meta property="og:url" content="https://monkeytype.com/" />
30+
<meta property="og:type" content="website" />
31+
<meta
32+
property="og:description"
33+
content="The most customizable typing test website with a minimal design and a ton of features. Test yourself in various modes, track your progress and improve your speed."
34+
/>
35+
<meta property="og:image" content="https://monkeytype.com/mtsocial.png" />
36+
<meta name="theme-color" content="#e2b714" id="metaThemeColor" />
37+
<meta name="twitter:title" content="404 Not Found | Monkeytype" />
38+
<meta name="twitter:image" content="https://monkeytype.com/mtsocial.png" />
39+
<meta name="twitter:card" content="summary_large_image" />
40+
</head>
441
<body>
542
<script type="module" async>
643
import { loadCSS } from "./ts/utils/misc";
@@ -11,8 +48,74 @@
1148
document.title = "404 Not Found | Monkeytype";
1249
</script>
1350
<load src="html/warnings.html" />
51+
<style>
52+
h1 {
53+
font-weight: unset;
54+
font-size: 2rem;
55+
margin-top: 3rem;
56+
color: var(--sub-color);
57+
}
58+
header #logo .icon svg path {
59+
fill: var(--sub-color);
60+
}
61+
a.button {
62+
border-radius: var(--roundness);
63+
text-decoration: none;
64+
background: var(--sub-alt-color);
65+
color: var(--text-color);
66+
&:hover {
67+
background: var(--text-color);
68+
color: var(--bg-color);
69+
}
70+
}
71+
.page404 {
72+
display: grid;
73+
justify-content: center;
74+
height: 100%;
75+
align-content: center;
76+
.content {
77+
display: grid;
78+
grid-auto-flow: column;
79+
gap: 4rem;
80+
grid-template-columns: 300px 300px;
81+
82+
.image {
83+
width: 100%;
84+
align-self: center;
85+
background-image: url("/images/monkeymeme.jpg");
86+
aspect-ratio: 300/199;
87+
background-size: contain;
88+
border-radius: var(--roundness);
89+
}
90+
91+
.title {
92+
font-size: 5rem;
93+
line-height: 4rem;
94+
/* margin: -3rem; */
95+
color: var(--main-color);
96+
align-self: center;
97+
}
98+
99+
.side {
100+
justify-items: center;
101+
display: grid;
102+
gap: 1rem;
103+
text-align: center;
104+
105+
.big {
106+
font-size: 10rem;
107+
line-height: 10rem;
108+
color: var(--sub-color);
109+
}
110+
.button {
111+
padding: 1rem 2rem;
112+
width: max-content;
113+
}
114+
}
115+
}
116+
}
117+
</style>
14118
<div id="app" class="content-grid focus">
15-
<div id="backgroundLoader" class="hidden"></div>
16119
<header class="focus">
17120
<a id="logo" href="/" router-link="">
18121
<div class="icon">

0 commit comments

Comments
 (0)