--- /dev/null
+{% extends 'base.html' %}
+
+{% block body %}
+ <style>
+ .sans {
+ font-family: Candara, Roboto, "Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
+ line-height: 1.6;
+ }
+
+ .serif {
+ font-family: Bookman, Garamond, "Palatino Linotype", "Book Antiqua", Palatino, serif;
+ font-size: 1.2rem;
+ line-height: 1.6;
+ }
+
+ .mono {
+ font-family: Monaco, "Courier New", Courier, monospace;
+ line-height: 1.6;
+ }
+
+ main {
+ max-width: 40rem;
+ white-space: pre-wrap;
+ margin: 0 0 3rem;
+ }
+ </style>
+
+ <nav>
+ <a href='{% url "index" %}' title='Home'>Home</a>
+ <a href='{{ text_file.get_edit_url }}' title='Edit'>Edit</a>
+
+ <label for='font-select'>Font:</label>
+
+ <select id='font-select'>
+ <option value='sans' {% if font == 'sans' %}selected{% endif %}>Sans</option>
+ <option value='serif' {% if font == 'serif' %}selected{% endif %}>Serif</option>
+ <option value='mono' {% if font == 'mono' %}selected{% endif %}>Mono</option>
+ </select>
+ </nav>
+
+ <script type='text/javascript'>
+ function updateQueryParameter(key, value) {
+ if(window.location.search === '') {
+ window.location.search = '?' + key + '=' + value;
+ return;
+ }
+
+ var queryParameters = window.location.search.substring(1).split('&').map(function(kvp) {
+ return kvp.split('=');
+ });
+
+ queryParameters.forEach(function(kvp) {
+ if(kvp[0] === key) {
+ kvp[1] = value;
+ }
+ });
+
+ window.location.search = '?' + queryParameters.map(function(kvp) {
+ return kvp.join('=');
+ }).join('&');
+ }
+
+ (function(fn) {
+ if (document.readyState != 'loading'){
+ fn();
+ } else {
+ document.addEventListener('DOMContentLoaded', fn);
+ }
+ })(function() {
+ var main = document.querySelector('main');
+ var fontSelect = document.querySelector('#font-select');
+
+ fontSelect.addEventListener('change', function(e) {
+ updateQueryParameter('font', e.target.value);
+
+ main.classList.add(e.target.value);
+
+ ['mono', 'sans', 'serif'].forEach(function(c) {
+ if(c != e.target.value) main.classList.remove(c);
+ });
+ });
+ });
+ </script>
+
+ <main class='{{ font }}'>{{ text }}</main>
+
+{% endblock %}