more documentation; color theme preview page
This commit is contained in:
@@ -3,15 +3,15 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{ page.title }}</title>
|
||||
<link rel="stylesheet" href="_vendor/open-sans/open-sans-v34.css">
|
||||
<link rel="stylesheet" href="_vendor/katex/katex.min.css">
|
||||
<link rel="stylesheet" href="_assets/colors.css">
|
||||
<link rel="stylesheet" href="_assets/base.css">
|
||||
<link rel="stylesheet" href="_assets/prism.css">
|
||||
<link rel="stylesheet" href="/_vendor/open-sans/open-sans-v34.css">
|
||||
<link rel="stylesheet" href="/_vendor/katex/katex.min.css">
|
||||
<link rel="stylesheet" href="/_assets/colors.css">
|
||||
<link rel="stylesheet" href="/_assets/base.css">
|
||||
<link rel="stylesheet" href="/_assets/prism.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="_assets/extras.js"></script>
|
||||
<script src="/_assets/extras.js"></script>
|
||||
<color-scheme-toggle-button></color-scheme-toggle-button>
|
||||
|
||||
{{# page.outline_button }}
|
||||
|
||||
131
layouts/preview-color-themes.html
Normal file
131
layouts/preview-color-themes.html
Normal file
@@ -0,0 +1,131 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{ page.title }}</title>
|
||||
<link rel="stylesheet" href="/_vendor/open-sans/open-sans-v34.css">
|
||||
<link rel="stylesheet" href="/_vendor/katex/katex.min.css">
|
||||
<link rel="stylesheet" href="/_assets/colors.css">
|
||||
<link rel="stylesheet" href="/_assets/base.css">
|
||||
<link rel="stylesheet" href="/_assets/prism.css">
|
||||
<link rel="stylesheet" href="/_assets/color-theme-preview.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<p>This page can be used to preview all of the built-in color themes.</p>
|
||||
<p>Select a color theme to see the sample content below in that theme.</p>
|
||||
|
||||
<select id="color-theme-selector">
|
||||
{{# theme_groups.light.length }}
|
||||
<optgroup label='Themes labeled: "light"'>
|
||||
{{# theme_groups.light }}
|
||||
<option value="{{ name }}">{{ name }}</option>
|
||||
{{/ theme_groups.light }}
|
||||
</optgroup>
|
||||
{{/ theme_groups.light.length }}
|
||||
{{# theme_groups.dark.length }}
|
||||
<optgroup label='Themes labeled: "dark"'>
|
||||
{{# theme_groups.dark }}
|
||||
<option value="{{ name }}">{{ name }}</option>
|
||||
{{/ theme_groups.dark }}
|
||||
</optgroup>
|
||||
{{/ theme_groups.dark.length }}
|
||||
{{# theme_groups.high_contrast.length }}
|
||||
<optgroup label='Themes labeled: "high_contrast"'>
|
||||
{{# theme_groups.high_contrast }}
|
||||
<option value="{{ name }}">{{ name }}</option>
|
||||
{{/ theme_groups.high_contrast }}
|
||||
</optgroup>
|
||||
{{/ theme_groups.high_contrast.length }}
|
||||
{{# theme_groups.low_contrast.length }}
|
||||
<optgroup label='Themes labeled: "low_contrast"'>
|
||||
{{# theme_groups.low_contrast }}
|
||||
<option value="{{ name }}">{{ name }}</option>
|
||||
{{/ theme_groups.low_contrast }}
|
||||
</optgroup>
|
||||
{{/ theme_groups.low_contrast.length }}
|
||||
{{# theme_groups.monochrome.length }}
|
||||
<optgroup label='Themes labeled: "monochrome"'>
|
||||
{{# theme_groups.monochrome }}
|
||||
<option value="{{ name }}">{{ name }}</option>
|
||||
{{/ theme_groups.monochrome }}
|
||||
</optgroup>
|
||||
{{/ theme_groups.monochrome.length }}
|
||||
{{# theme_groups.greyscale.length }}
|
||||
<optgroup label='Themes labeled: "greyscale"'>
|
||||
{{# theme_groups.greyscale }}
|
||||
<option value="{{ name }}">{{ name }}</option>
|
||||
{{/ theme_groups.greyscale }}
|
||||
</optgroup>
|
||||
{{/ theme_groups.greyscale.length }}
|
||||
{{# theme_groups.protanopia_safe.length }}
|
||||
<optgroup label='Themes labeled: "protanopia_safe"'>
|
||||
{{# theme_groups.protanopia_safe }}
|
||||
<option value="{{ name }}">{{ name }}</option>
|
||||
{{/ theme_groups.protanopia_safe }}
|
||||
</optgroup>
|
||||
{{/ theme_groups.protanopia_safe.length }}
|
||||
{{# theme_groups.deuteranopia_safe.length }}
|
||||
<optgroup label='Themes labeled: "deuteranopia_safe"'>
|
||||
{{# theme_groups.deuteranopia_safe }}
|
||||
<option value="{{ name }}">{{ name }}</option>
|
||||
{{/ theme_groups.deuteranopia_safe }}
|
||||
</optgroup>
|
||||
{{/ theme_groups.deuteranopia_safe.length }}
|
||||
{{# theme_groups.tritanopia_safe.length }}
|
||||
<optgroup label='Themes labeled: "tritanopia_safe"'>
|
||||
{{# theme_groups.tritanopia_safe }}
|
||||
<option value="{{ name }}">{{ name }}</option>
|
||||
{{/ theme_groups.tritanopia_safe }}
|
||||
</optgroup>
|
||||
{{/ theme_groups.tritanopia_safe.length }}
|
||||
{{# theme_groups.all.length }}
|
||||
<optgroup label="All Themes">
|
||||
{{# theme_groups.all }}
|
||||
<option value="{{ name }}">{{ name }}</option>
|
||||
{{/ theme_groups.all }}
|
||||
</optgroup>
|
||||
{{/ theme_groups.all.length }}
|
||||
</select>
|
||||
|
||||
<noscript>
|
||||
<p>This preview requires JavaScript to work</p>
|
||||
</noscript>
|
||||
|
||||
<script>
|
||||
const select = document.getElementById('color-theme-selector');
|
||||
select.value = window.matchMedia('(prefers-color-scheme: dark)') ? 'Minimal Dark' : 'Minimal Light';
|
||||
document.body.setAttribute('data-color-theme', select.value);
|
||||
|
||||
setTimeout(() => {
|
||||
document.body.setAttribute('data-color-transition-enabled', '');
|
||||
}, 10);
|
||||
|
||||
select.addEventListener('change', () => {
|
||||
const new_theme = select.value;
|
||||
|
||||
if (new_theme) {
|
||||
document.body.setAttribute('data-color-theme', new_theme);
|
||||
}
|
||||
|
||||
else {
|
||||
document.body.removeAttribute('data-color-theme');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</header>
|
||||
|
||||
<div id="root">
|
||||
<main>
|
||||
{{> .content }}
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p class="left">Built with docs2website at <time datetime="{{ build_time.iso }}">{{ build_time.rfc2822 }}</time></p>
|
||||
<p class="right">Copyright 2023 James Brumond</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user