forked from edelstone/tints-and-shades
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path404.html
More file actions
134 lines (110 loc) · 5.79 KB
/
404.html
File metadata and controls
134 lines (110 loc) · 5.79 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GNR8WM6SC0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-GNR8WM6SC0');
</script>
<meta charset="UTF-8">
<meta name="description" content="Easily make tints and shades that match the output of Chrome DevTools, Sass, Less, and PostCSS.">
<meta name="author" content="Michael Edelstone">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>404 | Tint and Shade Generator</title>
<meta name="title" content="Tint and Shade Generator">
<link rel="canonical" href="https://maketintsandshades.com/404">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#fff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">
<meta property="og:type" content="website">
<meta property="og:url" content="https://maketintsandshades.com/">
<meta property="og:title" content="Tint and Shade Generator">
<meta property="og:description" content="Easily make tints and shades that match the output of Chrome DevTools, Sass, Less, and PostCSS.">
<meta property="og:image" content="https://maketintsandshades.com/images/og-image.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://maketintsandshades.com/">
<meta name="twitter:title" content="Tint and Shade Generator">
<meta name="twitter:description" content="Easily make tints and shades that match the output of Chrome DevTools, Sass, Less, and PostCSS.">
<meta name="twitter:image" content="https://maketintsandshades.com/images/og-image.jpg">
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/dark.css">
<link rel="stylesheet" href="/css/carbon-alt.css">
<script> </script> <!-- Empty script tag fixes Chromimum bug where transitions fire on page load: https://bugs.chromium.org/p/chromium/issues/detail?id=1404365 -->
</head>
<body>
<a href="#main-content" class="offscreen">Jump to main content</a>
<div class="dark-mode">
<label for="darkmode-toggle" class="switch" tabindex="0">
<input id="darkmode-toggle" class="darkmode-toggle" type="checkbox" tabindex="-1">
<span class="control"></span>
<span class="label" id="darkmode-text-toggle">Go dark</span>
</label>
</div>
<a href="https://github.com/edelstone/tints-and-shades" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#000; color:#fff;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<div class="ts-wrapper">
<header class="ts-header">
<div class="ts-headline">
<h1><a href="/">Tint & Shade Generator</a></h1>
<div class="ts-ad item-ads ts-ad-secondary">
<script async src="//cdn.carbonads.com/carbon.js?serve=CE7DP5QY&placement=maketintsandshadescom" id="_carbonads_js"></script>
</div>
</div>
</header>
<main id="main-content" class="ts-content">
<div class="not-found">
<h2>404</h2>
<p>This page doesn't exist or has been moved.</p>
</div>
</main>
<footer class="ts-footer">
<p><a href="/about">About</a><a href="/about#support-this-project">Support this project</a><p>
</footer>
</div>
<script src="/scripts/darken.js"></script>
<script>
// Get the checkbox element from DOM.
let darkmodeToggle = document.getElementById('darkmode-toggle');
let darkModeTextToggle = document.getElementById("darkmode-text-toggle");
// Set options.
const darkmodeOptions = {
class: "darkmode-active",
/* Add here any option but do not use the toggle
option as you manually added an event listener. */
}
// Instantiate darken with options and callback.
const darkmode = new darken(darkmodeOptions, active => {
// If darkmode is active then check the checkbox.
if(active){
darkmodeToggle.checked = active;
darkModeTextToggle.innerText="Go bright";
}else{
darkModeTextToggle.innerText="Go dark";
}
// Same as
// if (active) darkmodeToggle.checked = true;
// else darkmodeToggle.checked = false;
});
// Add event listener on checkbox click.
darkmodeToggle.addEventListener('click', () => {
// Depending on the state of the checkbox, call the on/off methods.
if (darkmodeToggle.checked){
darkmode.on();
darkModeTextToggle.innerText="Go bright";
}
else{
darkmode.off();
darkModeTextToggle.innerText="Go dark";
}
});
</script>
</body>
</html>