improve sidebar location for blog post

mattmakai · mattmakai · commit 2c4e5523b16c · 2017-05-25T10:01:20.000-07:00
diff --git a/content/posts/170526-bar-charts-bokeh.markdown b/content/posts/170526-bar-charts-bokeh.markdown
@@ -1,4 +1,4 @@
-title: Building Responsive Bar Charts with Bokeh, Flask and Python 3
+title: Responsive Bar Charts with Bokeh, Flask and Python 3
 slug: responsive-bar-charts-bokeh-flask-python-3
 meta: How to build responsive bar charts with the Bokeh data visualization library, Flask and Pyton 3.
 category: post
@@ -10,11 +10,15 @@ headeralt: Python, Flask and Bokeh logos.
 
 [Bokeh](/bokeh.html) is a powerful open source Python library that allows 
 developers to generate JavaScript data visualizations for their web 
-applications *without writing any JavaScript*. With Bokeh we can create 
-incredibly varied visualizations, or traditional ones like the following
-bar chart.
+applications *without writing any JavaScript*. While learning a 
+JavaScript-based data visualization library like [d3.js](https://d3js.org/)
+can be useful, it's often far easier to knock out a few lines of Python
+code that get the job done.
 
-<img src="/img/170526-bar-charts-bokeh-flask/bar-chart-64.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #aaa" alt="Responsive bar chart with 64 bars.">
+With Bokeh we can create incredibly detailed interactive visualizations, 
+or just traditional ones like the following bar chart.
+
+<img src="/img/170526-bar-charts-bokeh-flask/chart-example-64.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Responsive bar chart with 64 bars.">
 
 
 Let's use the 
@@ -69,7 +73,7 @@ source barchart/bin/activate
 
 The command prompt will change after activating the virtualenv:
 
-<img src="/img/170526-bar-charts-bokeh-flask/activate-virtualenv.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #aaa" alt="Activating our Python virtual environment on the command line.">
+<img src="/img/170526-bar-charts-bokeh-flask/activate-virtualenv.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Activating our Python virtual environment on the command line.">
 
 Keep in mind that you need to activate the virtualenv in every new terminal 
 window that you want this virtualenv to be used for your project.
diff --git a/theme/templates/article.html b/theme/templates/article.html
@@ -18,7 +18,7 @@
 {% block content %}
 {% if article %}
 <div class="row">
- <div class="col-md-9">
+ <div class="col-md-12">
   <h1 style="font-size: 36px;">{{ article.title }}</h1>
   <div style="font-size:12px;color:#666;margin:0 0 10px">
    {% if article.modified != article.date %}
@@ -30,6 +30,10 @@ <h1 style="font-size: 36px;">{{ article.title }}</h1>
      {{ article.date.strftime('%B %d, %Y') }}.
    {% endif %}
   </div>
+ </div>
+</div>
+<div class="row">
+ <div class="col-md-9">
   {{ article.content }}
   <hr>
   {% include "email-for-book.html" %}
diff --git a/theme/templates/css/article.html b/theme/templates/css/article.html
@@ -48,7 +48,6 @@
 .logo-title a:hover{color:#808080}
 .logo-image{vertical-align:middle;border:none;height:52px;width:52px;padding:1px}
 .logo-header-section{margin:20px 0 15px 0}
-#sidebar{margin-top:30px}
 h3.panel-head{margin:5px 0 0 0;font-size:26px;color:#fff}
 .smaller-item{font:.8em 'Helvetica Neue',sans-serif;padding:5px 0 5px 10px}
 @media (max-width:1200px){h3.panel-head{font-size:22px}}@media (max-width:750px){.smaller-item{font-size:1em;padding:15px 0 15px 10px}}@media (max-width:720px){.logo-header-section{margin:20px 40px 0 0}}
diff --git a/theme/templates/email-for-book-sidebar.html b/theme/templates/email-for-book-sidebar.html
@@ -9,7 +9,7 @@ <h3 class="panel-head">Email Updates</h3>
             <h5>Sign up to get a monthly email with Python tutorials and major updates to this site.</h5>
             <input type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
             <div style="position: absolute; left: -5000px;"><input type="text" name="b_b7e774f0c4f05dcebbfee183d_b22335388d" tabindex="-1" value=""></div>
-            <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success" style="font-family: 'Helvetica Neue'; margin-top: 5px;">
+            <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success" style="font-family: 'Helvetica Neue'; margin: 5px 0 6px 0;">
         </div>
     </form>
     </div>
diff --git a/theme/templates/email-for-book.html b/theme/templates/email-for-book.html
@@ -8,7 +8,7 @@ <h4>Sign up here to receive a monthly email with major updates to this site, tut
                 <div style="position: absolute; left: -5000px;"><input type="text" name="b_b7e774f0c4f05dcebbfee183d_b22335388d" tabindex="-1" value=""></div>
             </div>
             <div class="col-md-3">
-                <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success" style="font-family: 'Helvetica Neue';"></div>
+                <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success" style="font-family: 'Helvetica Neue'; margin-bottom:6px"></div>
             </div>
         </div>
     </div>
