1
0
Fork 0
mirror of https://github.com/denoland/deno.git synced 2024-12-23 15:49:44 -05:00
denoland-deno/website/style_guide.html
Jed Fox 43f48386d7 website: use css variables and prefers-color-scheme (#2547)
This uses `prefers-color-scheme: dark` to automatically switch 
to dark mode if the user specifies it in their system settings. 
Dark mode is supported in Firefox 67, Chrome 76, Safari 12.1,
and iOS 13 as of this commit, but the current status can be 
checked here: https://caniuse.com/#feat=prefers-color-scheme

Additionally, this uses CSS Variables to implement the color-switching
mechanism. This isn’t supported in IE, but the site degrades
reasonably well with them disabled.
Support table: https://caniuse.com/#feat=css-variables
2019-06-19 16:53:07 -07:00

55 lines
2.1 KiB
HTML

<!-- Copyright 2018-2019 the Deno authors. All rights reserved. MIT license. -->
<!DOCTYPE html>
<html>
<head>
<title>Deno Style Guide</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/default.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/github-gist.min.css">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/monokai-sublime.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/languages/typescript.min.js"></script>
<link rel="stylesheet" href="style.css" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
</head>
<body>
<main>
<a href="/"><img id="logo" src="images/deno_logo_3.svg" width=200></a>
<div id="manual"></div>
<script src="https://unpkg.com/showdown@1.9.0/dist/showdown.js"></script>
<script src="showdown_toc.js"></script>
<script>
const url = "style_guide.md";
async function main() {
const response = await fetch(url);
const content = await response.text();
let converter = new showdown.Converter({ extensions: ["toc"] });
let html = converter.makeHtml(content);
const manual = document.getElementById("manual");
manual.innerHTML = html;
// To make anchor links work properly, we have to manually scroll
// since the markdown is rendered dynamically.
if (window.location.hash) {
let el = document.getElementById(window.location.hash.slice(1));
window.scrollTo({ top: el.offsetTop });
}
// Disable automatic language detection
hljs.configure({
languages: [],
});
hljs.initHighlighting();
}
main();
</script>
</main>
</body>
</html>