Better blog detail pages

blogs/templates/blogs/themes/default/base.html

@@ -14,52 +14,6 @@
         window.blog_post = true;
 {% endblock %}
 
-{% block sub-header %}
-    <header class="sub">
-        <div class="inner group">
-            <ul class="bcrumb">
-                <li class="prompt">//</li>
-                <li><a href="/">blog</a></li>
-                {% block breadcrumb %}{% endblock %}
-                <li class="rss">
-                    <a href="/?rss">RSS</a>
-                </li>
-            </ul>
-        </div>
-    </header>
-{% endblock %}
-{% block aside %}
-    {% if not detail %}
-        <aside class="main">
-            {% if sidebar %}
-                <section class="sidebar">
-                    {{ sidebar.stylized|safe }}
-                </section>
-            {% endif %}
-            <section class="ad">
-                <div id="carbonads-container">
-                    <div class="carbonad">
-                        <div id="azcarbon"></div>
-                        <script type="text/javascript">
-                            var z = document.createElement("script");
-                            z.type = "text/javascript";
-                            z.async = true;
-                            z.src = "http://engine.carbonads.com/z/12124/azcarbon_2_1_0_VERT";
-                            var s = document.getElementsByTagName("script")[0];
-                            s.parentNode.insertBefore(z, s);
-                        </script>
-                    </div>
-                </div>
-            </section>
-            <nav class="footer {% if sidebar %}with-sidebar{% endif %}">
-                <ul class="powered">
-                    <li class="snipt"><a href="https://snipt.net/">Blog powered by Snipt</a></li>
-                </ul>
-            </nav>
-        </aside>
-    {% endif %}
-{% endblock %}
-
 {% block header %}
     <header class="main">
         <div class="inner group">
@@ -77,3 +31,46 @@
         </div>
     </header>
 {% endblock %}
+{% block sub-header %}
+    <header class="sub">
+        <div class="inner group">
+            <ul class="bcrumb">
+                <li class="prompt">//</li>
+                <li><a href="/">blog</a></li>
+                {% block breadcrumb %}{% endblock %}
+                <li class="rss">
+                    <a href="/?rss">RSS</a>
+                </li>
+            </ul>
+        </div>
+    </header>
+{% endblock %}
+{% block aside %}
+    <aside class="main">
+        {% if sidebar %}
+            <section class="sidebar">
+                {{ sidebar.stylized|safe }}
+            </section>
+        {% endif %}
+        <section class="ad">
+            <div id="carbonads-container">
+                <div class="carbonad">
+                    <div id="azcarbon"></div>
+                    <script type="text/javascript">
+                        var z = document.createElement("script");
+                        z.type = "text/javascript";
+                        z.async = true;
+                        z.src = "http://engine.carbonads.com/z/12124/azcarbon_2_1_0_VERT";
+                        var s = document.getElementsByTagName("script")[0];
+                        s.parentNode.insertBefore(z, s);
+                    </script>
+                </div>
+            </div>
+        </section>
+        <nav class="footer {% if sidebar %}with-sidebar{% endif %}">
+            <ul class="powered">
+                <li class="snipt"><a href="https://snipt.net/">Blog powered by Snipt</a></li>
+            </ul>
+        </nav>
+    </aside>
+{% endblock %}

blogs/templates/blogs/themes/default/post.html

@@ -1,7 +1,7 @@
 {% extends "blogs/themes/default/base.html" %}
 
-{% block html-class %}detail blog-site blog-detail{% endblock %}
+{% block html-class %}blog-site blog-detail{% endblock %}
-{% block body-class %}detail blog-site blog-detail{% endblock %}
+{% block body-class %}blog-site blog-detail{% endblock %}
 
 {% block js %}
         {{ block.super }}

blogs/views.py

@@ -41,11 +41,16 @@ def blog_post(request, username_or_custom_slug):
                                      slug=username_or_custom_slug,
                                      )
 
+    sidebar = get_object_or_None(Snipt,
+                                 user=request.blog_user,
+                                 title='Blog Sidebar')
+
     context = {
         'blog_user': request.blog_user,
         'detail': True,
         'has_snipts': True,
         'public': True,
+        'sidebar': sidebar,
         'snipt': snipt,
     }
 

media/css/blog-themes/default/style.css

@@ -1,5 +1,5 @@
 body.blog-site article.snipt div.group div.container {
-  width: 708px;
+  width: 718px;
 }
 body.blog-site article.snipt div.group div.container header {
   min-height: 0;
@@ -78,12 +78,21 @@ body.blog-site header.sub div.inner {
   z-index: 51;
 }
 
+body.blog-detail section.main div.inner {
+  width: 718px;
+}
+body.blog-detail section.main div.inner section.snipts article.snipt {
+  margin-bottom: 0;
+}
 body.blog-detail section.main div.inner section.snipts article.snipt div.container {
-  width: 939px;
+  width: 100%;
+}
+body.blog-detail section.main div.inner section.snipts article.snipt div.container section.code {
+  height: auto;
 }
 body.blog-detail div#disqus_thread {
-  width: 925px;
+  width: 704px;
 }
-body.blog-detail header.sub div.inner ul.bcrumb {
+body.blog-detail div#disqus_thread #dsq-content {
-  width: 923px;
+  margin-top: -38px;
 }

media/css/blog-themes/default/style.scss

@@ -4,7 +4,7 @@ body.blog-site {
     article.snipt {
         div.group {
             div.container {
-                width: 708px;
+                width: 718px;
 
                 header {
                     min-height: 0;
@@ -114,23 +114,28 @@ body.blog-site {
 body.blog-detail {
     section.main {
         div.inner {
+            width: 718px;
+
             section.snipts {
                 article.snipt {
+                    margin-bottom: 0;
+
                     div.container {
-                        width: 939px;
+                        width: 100%;
+                        
+                        section.code {
+                            height: auto;
+                        }
                     }
                 }
             }
         }
     }
     div#disqus_thread {
-        width: 925px;
+        width: 704px;
-    }
+
-    header.sub {
+        #dsq-content {
-        div.inner {
+            margin-top: -38px;
-            ul.bcrumb {
-                width: 923px;
-            }
         }
     }
 }