Add dark mode

orangeduck · Jul 17, 2022 · 2aa9e22 · 2aa9e22 · twome · Jul 17, 2022
1 parent 3cc63eb
commit 2aa9e22
Show file tree

Hide file tree

Showing 8 changed files with 286 additions and 119 deletions.
diff --git a/lispy.py b/lispy.py
@@ -20,11 +20,11 @@
     'download.html',
     'chapter1_introduction.html',       'chapter2_installation.html',   'chapter3_basics.html',
     'chapter4_interactive_prompt.html', 'chapter5_languages.html',      'chapter6_parsing.html',
-    'chapter7_evaluation.html',         'chapter8_error_handling.html', 'chapter9_s_expressions.html', 
-    'chapter10_q_expressions.html',     'chapter11_variables.html',     'chapter12_functions.html',        
+    'chapter7_evaluation.html',         'chapter8_error_handling.html', 'chapter9_s_expressions.html',
+    'chapter10_q_expressions.html',     'chapter11_variables.html',     'chapter12_functions.html',
     'chapter13_conditionals.html',      'chapter14_strings.html',       'chapter15_standard_library.html',
     'chapter16_bonus_projects.html',
-    
+
     'appendix_a_hand_rolled_parser.html',
 ]
 
@@ -37,7 +37,7 @@
     'Q-Expressions &bull; Chapter 10',     'Variables &bull; Chapter 11',     'Functions &bull; Chapter 12',
     'Conditionals &bull; Chapter 13',      'Strings &bull; Chapter 14',       'Standard Library &bull; Chapter 15',
     'Bonus Projects &bull; Chapter 16',
-    
+
     'Hand Rolled Parser &bull; Appendix A'
 ]
 
@@ -61,14 +61,14 @@
     <link href="static/css/bootstrap.css" rel="stylesheet">
     <link href="static/css/code.css" rel="stylesheet">
     <link rel="icon" type="image/png" href="/static/img/favicon.png" />
-    
+
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
     <![endif]-->
-  
+
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -86,18 +86,18 @@
   </head>
   <body style="background: url(static/img/halftone.png); margin:0px; padding:0px;">
   <div style="background: url(static/img/tiletop.png) repeat-x; height:25px;">
-  
+
     <div class='container' style='max-width:750px; padding-top:10px;'>
         <div class='row'>
          <div class='col-xs-12'>
-    
+
 """
 
 footer = """
          </div>
-        </div> 
+        </div>
     </div>
-  
+
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://code.jquery.com/jquery.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
@@ -108,6 +108,8 @@
     <script src="static/js/language/generic.js"></script>
     <script src="static/js/language/c.js"></script>
     <script src="static/js/language/lispy.js"></script>
+
+    <script type="module" src="static/js/main.js"></script>
   </div>
   </body>
 </html>
@@ -116,15 +118,15 @@
 try:
     cache = MemcachedCache(['127.0.0.1:11211'])
 except RuntimeError:
-    
+
     class FakeCache:
         def get(self, k): return None
         def set(self, k, v, **kwargs): return None
-        
+
     cache = FakeCache()
 
 app  = Flask(__name__)
-
+
 handler = logging.FileHandler(os.path.join(os.path.split(__file__)[0], 'error.log'))
 handler.setLevel(logging.INFO)
 app.logger.addHandler(handler)
@@ -157,85 +159,85 @@ def set(self, k, v, **kwargs): return None
 """
 
 def code_html(codes):
-    
+
     string = ('<div class="panel-group alert alert-warning" id="accordion">\n'
               '  <div class="panel panel-default">')
-    
+
     for num, code in zip(('One', 'Two', 'Three', 'Four', 'Five'), codes):
-        
+
         string += code_header % (num, code, num)
-        
+
         if code.endswith('.lspy'):
             string += '<pre><code data-language=\'lispy\'>'
         else:
             string += '<pre><code data-language=\'c\'>'
-        
+
         path = os.path.join(os.path.split(__file__)[0], 'src', code)
-        
+
         with open(path, 'r') as f:
             contents = f.read()
             contents = contents.replace('&', '&amp;')
             contents = contents.replace('<', '&lt;')
             contents = contents.replace('>', '&gt;')
             string += contents
-        
+
         string = string.rstrip() + '</code></pre>'
         string += code_footer + '\n\n'
-    
+
     string += '</div>\n  </div>'
 
     return string
-    
+
 @app.route('/<page>')
 def route_page(page):
     page = page + '.html'
     if not page in pages: page = '404.html'
     path = os.path.join(os.path.split(__file__)[0], page)
-    
+
     index = pages.index(page)
     title = titles[index]
     codes = sources[index]
-    
+
     contents = cache.get("lispy-" + path)
     if contents is None:
         contents = open(path, 'r').read()
         contents = (header % title) + contents.replace('<references />', code_html(codes)) + footer
         cache.set("lispy-" + path, contents, timeout=5*60)
-        
+
     return contents
-    
+
 @app.route('/')
 def route_index():
     return route_page('splash')
-    
+
 @app.errorhandler(404)
 def route_404(e):
     return redirect(url_for('route_page', page='404'))
-    
+
 @app.route('/download/<id>/<type>')
 @app.route('/download/<id>/BuildYourOwnLisp.<type>')
 def route_download(id, type):
-    
+
     keys = os.path.join(os.path.split(__file__)[0], 'purchases')
-    
+
     with open(keys, 'r') as keyfile:
         keys = map(lambda x: x.strip(), keyfile.readlines())
         keys = map(lambda x: x.split(' '), keys)
-        keys = set([key[1] for key in keys if 
-              (datetime.datetime.now() - 
-               datetime.datetime.strptime(key[0], '%Y-%m-%d-%H:%M:%S')) 
+        keys = set([key[1] for key in keys if
+              (datetime.datetime.now() -
+               datetime.datetime.strptime(key[0], '%Y-%m-%d-%H:%M:%S'))
              < datetime.timedelta(days=60)])
-    
+
     if id in keys:
         if   type == 'epub': return send_file('BuildYourOwnLisp.epub',   mimetype='application/epub+zip')
         elif type == 'mobi': return send_file('BuildYourOwnLisp.mobi',   mimetype='application/x-mobipocket-ebook')
         elif type ==  'pdf': return send_file('BuildYourOwnLisp.pdf',    mimetype='application/pdf')
         elif type ==  'tar': return send_file('BuildYourOwnLisp.tar.gz', mimetype='application/x-gtar')
         else: return redirect(url_for('route_page', page='invalid'))
-        
+
     else: return redirect(url_for('route_page', page='invalid'))
-    
-    
+
+
 """ Paypal Stuff """
 
 def ordered_storage(f):
@@ -244,7 +246,7 @@ def decorator(*args, **kwargs):
         return f(*args, **kwargs)
     return decorator
 """ Main """
-    
+
 if __name__ == '__main__':
     port = int(os.getenv('PORT') or 5000)
     app.run(port=port, debug=True)

diff --git a/static/css/bootstrap.min.css b/static/css/bootstrap.min.css
diff --git a/static/css/code.css b/static/css/code.css
@@ -1,101 +1,80 @@
-
-pre {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    border: 1px solid #ccc;
-    word-wrap: break-word;
-    padding: 6px 10px;
-    line-height: 19px;
-    margin-bottom: 20px;
-}
-
+/* Code examples & syntax highlighting. Syntax-related CSS classes added via Rainbow.js */
+pre,
 code {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    border: 1px solid #eaeaea;
-    margin: 0px 2px;
-    padding: 0px 5px;
-    font-size: 12px;
-}
+	font-size: 0.9em; /* Looks balanced against surrounding inline text */
 
-pre code {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    border: 0px;
-    padding: 0px;
-    margin: 0px;
-    -moz-border-radius: 0px;
-    -webkit-border-radius: 0px;
-    border-radius: 0px;
+	border: 1px solid #eaeaea;
+	font-family  : Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
+	color        : #333;
+	background   : #fcfcfc;
+	border-radius: 3px;
 }
 
-pre, code {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    color: #333;
-    background: #fcfcfc;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
+pre {
+ 	word-wrap    : break-word;
+ 	padding      : 6px 10px;
+ 	line-height  : 19px;
+ 	margin-bottom: 20px;
 }
 
-pre, pre code {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    font-size: 13px;
+code {
+	margin     : 0px 2px;
+	padding    : 0px 5px;
 }
 
-pre .comment {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    color: #679b7c;
+/* Sometimes a <code> inside a <pre> is being informally used to denote command-line content */
+pre code, .rainbow {
+	border               : 0px;
+	padding              : 0px;
+	margin               : 0px;
+	border-radius        : 0px;
 }
 
-pre .keyword {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    font-weight: bold;
-    color: #0080c0;
+.rainbow .comment {
+	color      : #679b7c;
 }
 
-pre .keyword.operator {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    color: #0000a0;
+.rainbow .keyword {
+	font-weight: bold;
+	color      : #0080c0;
 }
 
-pre .keyword.builtin {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    color: #800000;
+.rainbow .operator {
+	color      : #0000a0;
 }
 
-pre .constant.numeric {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    color: #ff8000;
+.rainbow .builtin {
+	color      : #800000;
 }
 
-pre .constant.string {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    color: #808080;
+.rainbow .numeric {
+	color      : #ff8000;
 }
 
-pre .constant.character {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    color: #808080;
+.rainbow .string {
+	color      : #808080;
 }
 
-pre .meta {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    font-weight: bold;
-    color: #2f2f46;
+.rainbow .character {
+	color      : #808080;
 }
 
-pre .meta.preprocessor {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    font-weight: normal;
-    color: #808040;
+.rainbow .meta {
+	font-weight: bold;
+	color      : #2f2f46;
 }
 
-pre .support.type {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    font-weight: bold;
-    color: #800000;
+.rainbow .preprocessor {
+	font-weight: normal;
+	color      : #808040;
 }
 
-pre .storage {
-    font-family: Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
-    font-weight: bold;
-    color: #ae3f71;
+.rainbow .type {
+	font-weight: bold;
+	color      : #800000;
 }
+
+.rainbow .storage {
+	font-weight: bold;
+	color      : #ae3f71;
+}