1 {% extends 'base.html' %}
6 font-family: Candara, Roboto, "Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
11 font-family: Bookman, Garamond, "Palatino Linotype", "Book Antiqua", Palatino, serif;
17 font-family: Monaco, "Courier New", Courier, monospace;
23 white-space: pre-wrap;
29 <a href='{% url "index" %}' title='Home'>Home</a>
30 <a href='{{ text_file.get_edit_url }}' title='Edit'>Edit</a>
32 <label for='font-select'>Font:</label>
34 <select id='font-select'>
35 <option value='sans' {% if font == 'sans' %}selected{% endif %}>Sans</option>
36 <option value='serif' {% if font == 'serif' %}selected{% endif %}>Serif</option>
37 <option value='mono' {% if font == 'mono' %}selected{% endif %}>Mono</option>
41 <script type='text/javascript'>
42 function updateQueryParameter(key, value) {
43 if(window.location.search === '') {
44 window.location.search = '?' + key + '=' + value;
48 var queryParameters = window.location.search.substring(1).split('&').map(function(kvp) {
49 return kvp.split('=');
52 queryParameters.forEach(function(kvp) {
58 window.location.search = '?' + queryParameters.map(function(kvp) {
64 if (document.readyState != 'loading'){
67 document.addEventListener('DOMContentLoaded', fn);
70 var main = document.querySelector('main');
71 var fontSelect = document.querySelector('#font-select');
73 fontSelect.addEventListener('change', function(e) {
74 updateQueryParameter('font', e.target.value);
76 main.classList.add(e.target.value);
78 ['mono', 'sans', 'serif'].forEach(function(c) {
79 if(c != e.target.value) main.classList.remove(c);
85 <main class='{{ font }}'>{{ text }}</main>