vizyourdata.github.io/404.html at main · vizyourdata/vizyourdata.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Not found · vizyourdata</title>
<link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">
<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=Anton&family=DM+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/css/site.css">
<style>
  body{ min-height:100svh; display:flex; align-items:center }
  .lost{ position:relative; z-index:2; text-align:center; width:100% }
  .lost .code{ font-family:"Anton",sans-serif; font-size:clamp(5rem,22vw,16rem); line-height:.86; color:var(--accent); letter-spacing:.01em }
  .lost h1{ font-family:"Fraunces",serif; font-size:clamp(1.6rem,4vw,2.6rem); margin:.4rem 0 1rem }
  .lost p{ color:var(--ink-soft); max-width:40ch; margin:0 auto 2rem; font-size:1.05rem }
  .lost a{
    display:inline-flex; align-items:center; gap:.6em; text-decoration:none; color:var(--ink);
    font-family:"DM Mono",monospace; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
    padding:.7em 1.2em; border:1px solid var(--line); border-radius:100px; transition:border-color .25s, color .25s }
  .lost a:hover{ color:var(--accent); border-color:var(--accent) }
</style>
</head>
<body>
<div class="grain" aria-hidden="true"></div>
<div class="lost wrap">
  <div class="code">404</div>
  <h1>Lost in the desert.</h1>
  <p>That page wandered off. Let’s get you back to the work.</p>
  <a href="/"><span style="color:var(--accent)">←</span> Back to the gallery</a>
</div>
</body>
</html>