modicum of responsiveness

look · look · commit f1909017264a · 2017-06-11T20:57:08.000-07:00
diff --git a/README.md b/README.md
@@ -69,7 +69,7 @@ The tutorial is under copyright and cannot be republished without my permission.
 
 ## TODO
 
-- [] modicum of responsiveness
 - [] decade fix -- requires lookahead to make sure decade actually is. Need to backport fix
 - [] performance?
 - [] final copy edits
+- [] title/subtitle styling
diff --git a/Rakefile b/Rakefile
@@ -72,7 +72,7 @@ task :build do
   end
 
   # TODO: Figure out a better way to create a layout for a markdown document
-  compiled = layout.gsub('<body></body>', "<body>#{doc.to_html}#{generated_at_html}</body>")
+  compiled = layout.gsub('{{CONTENT}}', "#{doc.to_html}#{generated_at_html}")
 
   FileUtils.mkdir_p('build')
 
diff --git a/tutorial/layout.html b/tutorial/layout.html
@@ -2,15 +2,25 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title></title>
     <style>
      body {
        font-family: Helvetica;
        font-size: 20px;
        line-height: 1.2;
-       width: 920px;
+       min-width: 320px;
+       width: 100%;
+       margin: 0;
+       padding: 0;
+     }
+
+     #content {
+       max-width: 920px;
        margin-left: auto;
        margin-right: auto;
+       padding-left: 5px;
+       padding-right: 5px;
      }
 
      code {
@@ -31,19 +41,37 @@
        padding-left: 15px;
      }
 
+     svg {
+       max-width: 100%;
+     }
+
      div.aside {
        font-size: 80%;
        background: aliceblue;
-       width: 400px;
-       float: right;
-       margin-left: 20px;
-       padding: 20px 20px 0 20px;
+       padding: 20px 20px 0px 20px;
      }
 
      div.aside h3 {
        margin: 0;
      }
 
+     @media screen and (max-width: 600px) {
+       div.aside {
+         width: 100%;
+         box-sizing: border-box;
+         padding-bottom: 1px;
+       }
+     }
+
+     @media screen and (min-width: 600px) {
+       div.aside {
+         min-width: 300px;
+         max-width: 400px;
+         float: right;
+         margin-left: 20px;
+       }
+     }
+
      span.query-string {
        background: aliceblue;
        font-family: "Source Code Pro", Consolas, Monaco, monospace;
@@ -59,6 +87,10 @@
        color: #999;
      }
 
+     pre {
+       overflow: auto;
+     }
+
      .highlight table td { padding: 5px; }
      .highlight table pre { margin: 0; }
      .highlight .cm {
@@ -306,5 +338,5 @@
      }
     </style>
   </head>
-  <body></body>
+  <body><div id="content">{{CONTENT}}</div></body>
 </html>
