-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path404.html
More file actions
103 lines (103 loc) · 6.36 KB
/
Copy path404.html
File metadata and controls
103 lines (103 loc) · 6.36 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page not found — Michael Baffour Awuah</title>
<meta name="robots" content="noindex">
<meta name="theme-color" content="#f7f4ea" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#121009" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="assets/fonts/fonts.css">
<!-- Same guard as every other page: reading localStorage throws when
storage is blocked, which would leave the theme unset. -->
<script>(function(){var t=null;try{t=localStorage.getItem('theme')}catch(e){}
if(t!=='dark'&&t!=='light'){t=window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}
document.documentElement.setAttribute('data-theme',t)})()</script>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><polygon points='16,5 25,10 25,18 16,23 7,18 7,10' fill='%23f4c430' stroke='%23f4c430' stroke-width='1.5'/><line x1='16' y1='23' x2='16' y2='28' stroke='%23f4c430' stroke-width='2' stroke-linecap='round'/><line x1='13' y1='28' x2='19' y2='28' stroke='%23f4c430' stroke-width='2' stroke-linecap='round'/></svg>">
<style>
:root { --bg:#121009; --bg-2:#1a160c; --gold:#f4c430; --green:#1f9249; --ink:#f5edd8; --ink-3:#a08652; }
/* This page was dark-only, so a light-mode visitor who mistyped a URL
was dropped into a dark page with no way back to the site's theme. */
html[data-theme="light"] { --bg:#f7f4ea; --bg-2:#ede8d4; --gold:#7d5800;
--green:#0f6a2e; --ink:#1a1408; --ink-3:#6f5420; }
@media (prefers-color-scheme: light) {
html:not([data-theme]) { --bg:#f7f4ea; --bg-2:#ede8d4; --gold:#7d5800;
--green:#0f6a2e; --ink:#1a1408; --ink-3:#6f5420; }
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
background: radial-gradient(circle at 50% 30%, var(--bg-2) 0%, var(--bg) 70%);
color: var(--ink);
font-family: 'Inter','Segoe UI',system-ui,sans-serif;
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
text-align: center; padding: 24px;
}
.wrap { max-width: 480px; }
.phage { width: 96px; height: 96px; margin: 0 auto 28px; display:block; opacity:0.9; }
h1 {
font-family: 'Fraunces','Georgia',serif;
font-size: clamp(3.5rem, 12vw, 5rem); font-weight: 600;
color: var(--gold); line-height: 1; margin-bottom: 8px;
}
h2 { font-family:'Fraunces','Georgia',serif; font-weight:500; font-size:1.5rem; margin-bottom:16px; }
p { color: var(--ink-3); line-height: 1.6; margin-bottom: 28px; }
a.home {
display: inline-block; text-decoration: none;
/* var(--bg), not a fixed ink: --gold is dark in light mode. */
background: var(--gold); color: var(--bg); font-weight: 600;
padding: 12px 26px; border-radius: 10px; transition: transform .15s ease, box-shadow .15s ease;
}
a.home:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(244,196,48,0.35); }
.alt { margin-top: 22px; font-size: 0.92rem; opacity: 0.85; }
.alt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
</style>
<meta name="description" content="Page not found on mbaffour.github.io.">
</head>
<body>
<main class="wrap">
<svg class="phage" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<polygon points="60,2 69,28 94,14 80,38 116,44 82,54 106,78 74,68 66,116 56,70 20,88 40,58 4,52 40,44 14,16 48,32"
fill="#f4c430" opacity="0.22" stroke="#f4c430" stroke-width="1" stroke-opacity="0.3"/>
<g stroke="#f4c430" stroke-width="2.2" stroke-linecap="round" opacity="0.85">
<line x1="60" y1="60" x2="20" y2="34"/>
<line x1="60" y1="60" x2="98" y2="28"/>
<line x1="60" y1="60" x2="16" y2="82"/>
<line x1="60" y1="60" x2="102" y2="86"/>
<line x1="60" y1="60" x2="62" y2="12"/>
</g>
<g fill="#f4c430" stroke="#7a5f10" stroke-width="0.5">
<polygon points="16,28 22,31 22,37 16,40 10,37 10,31"/>
<polygon points="96,22 102,25 102,31 96,34 90,31 90,25"/>
<polygon points="10,80 16,83 16,89 10,92 4,89 4,83"/>
<polygon points="100,84 106,87 106,93 100,96 94,93 94,87"/>
<polygon points="58,6 64,9 64,15 58,18 52,15 52,9"/>
</g>
<g stroke="#0a1f0f" stroke-width="2.4" stroke-linejoin="round">
<path d="M60,34 A26,26 0 0,0 60,86 L64,78 L56,70 L64,62 L56,54 L64,46 L56,38 L60,34 Z"
fill="#166b34" transform="translate(-5,-3) rotate(-4 60 60)"/>
<path d="M60,34 A26,26 0 0,1 60,86 L56,78 L64,70 L56,62 L64,54 L56,46 L64,38 L60,34 Z"
fill="#2bb35f" transform="translate(5,3) rotate(4 60 60)"/>
</g>
<ellipse cx="49" cy="46" rx="6" ry="9" fill="#eafff0" opacity="0.22" transform="rotate(-20 49 46) translate(-5,-3)"/>
<g fill="#1f9249" opacity="0.85">
<circle cx="60" cy="92" r="3.4"/>
<circle cx="70" cy="96" r="2.2"/>
<circle cx="48" cy="94" r="1.9"/>
</g>
<g stroke="#0a1f0f" stroke-width="1.8" stroke-linecap="round">
<line x1="49" y1="52" x2="54" y2="57"/>
<line x1="54" y1="52" x2="49" y2="57"/>
<line x1="66" y1="52" x2="71" y2="57"/>
<line x1="71" y1="52" x2="66" y2="57"/>
</g>
<ellipse cx="60" cy="66" rx="4" ry="5" fill="#0a1f0f"/>
</svg>
<h1>404</h1>
<h2>This host was never infected.</h2>
<p>The page you're looking for doesn't exist — maybe it lysed. Let's get you back to something that replicates.</p>
<a class="home" href="/">← Back to home</a>
<p class="alt">Or try the <a href="/blog/">blog</a>, the <a href="/#tools">research software</a>, or the <a href="/builds.html">other tools</a>.</p>
</main>
</body>
</html>