diff options
| author | Teddy Wing | 2018-11-09 22:51:50 +0100 |
|---|---|---|
| committer | Teddy Wing | 2018-11-09 22:51:50 +0100 |
| commit | 083f59f251207846eec5c703e90d7f176704dec0 (patch) | |
| tree | 266ee538b2a0c378e2bf746548d81dcedd39858f | |
| parent | 5a4a2bd1c4e02eab4694a35faf83bc6fad971e3b (diff) | |
| download | dome-key-web-083f59f251207846eec5c703e90d7f176704dec0.tar.bz2 | |
Add 404 page
Add some styles to make the "404" text gigantic and positioned
appropriately.
| -rw-r--r-- | 404.html | 33 | ||||
| -rw-r--r-- | assets/styles.css | 12 | ||||
| -rw-r--r-- | assets/stylesheets/layout.hcss | 8 | ||||
| -rw-r--r-- | assets/stylesheets/typography.css | 8 |
4 files changed, 61 insertions, 0 deletions
diff --git a/404.html b/404.html new file mode 100644 index 0000000..d70ad63 --- /dev/null +++ b/404.html @@ -0,0 +1,33 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>404 – DomeKey</title> + <meta name="description" content=""> + + <meta name="viewport" content="width=device-width"> + + <link rel="stylesheet" href="assets/styles.css" /> +</head> +<body> + <div class="content"> + <header> + <h1>DomeKey</h1> + <img src="assets/logo.svg" alt="DomeKey logo" /> + </header> + + <p class="font-size-1.52"> + Control your computer with a pair of headphones + </p> + + <p class="font-size-15 text-center margin-top-0.5 margin-bottom-0.63"> + 404 + </p> + + <p class="text-center"> + Couldn’t find what you’re looking for. How about + <a href="/">going home</a>? + </p> + </div> +</body> +</html> diff --git a/assets/styles.css b/assets/styles.css index a6aa1ba..60f4de8 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -19,6 +19,12 @@ h2 { .font-size-1\.52 { font-size: 1.52em; } +.font-size-15 { + font-size: 15em; +} +.text-center { + text-align: center; +} a:link { color: #b71863; } a:hover { color: #880442; } body { @@ -56,6 +62,12 @@ ul { color: #c9ccb4; text-shadow: 1px 3px 5px #230f0f; } +.margin-top-0\.5 { + margin-top: 0.5em; +} +.margin-bottom-0\.63 { + margin-bottom: 0.63em; +} .margin-bottom-1\.8 { margin-bottom: 1.8em; } diff --git a/assets/stylesheets/layout.hcss b/assets/stylesheets/layout.hcss index bd26627..9f0f1c0 100644 --- a/assets/stylesheets/layout.hcss +++ b/assets/stylesheets/layout.hcss @@ -44,6 +44,14 @@ ul { text-shadow: 1px 3px 5px DARK_CHOCOLATE; } +.margin-top-0\.5 { + margin-top: 0.5em; +} + +.margin-bottom-0\.63 { + margin-bottom: 0.63em; +} + .margin-bottom-1\.8 { margin-bottom: 1.8em; } diff --git a/assets/stylesheets/typography.css b/assets/stylesheets/typography.css index 83ebabd..aca8884 100644 --- a/assets/stylesheets/typography.css +++ b/assets/stylesheets/typography.css @@ -19,3 +19,11 @@ h2 { .font-size-1\.52 { font-size: 1.52em; } + +.font-size-15 { + font-size: 15em; +} + +.text-center { + text-align: center; +} |