Skip to content
Permalink
Browse files

Add bootblog theme (fix getnikola/nikola#1018)

This is the Bootstrap 3 blog theme, adapted for Nikola.

Original: http://getbootstrap.com/examples/blog/

Note that I had to change our HTML substantially and break a few things,
including the navbar (which is not based on a list anymore and does not
support dropdowns!)

Signed-off-by: Chris Warrick <kwpolska@gmail.com>
  • Loading branch information
Kwpolska committed Jun 24, 2015
1 parent c27bfdd commit 101a37110fb7d4ffc6734ef19bd4a2d0ed40efca
@@ -0,0 +1,9 @@
Bootblog
========

This is the Bootstrap 3 [Blog theme](http://getbootstrap.com/examples/blog/),
adapted for Nikola.

Some things require additional configuration (eg. the sidebar and the navbar).
Note that some things had to be substantially changed for this theme — for
example, menus are not `<ul>` anymore and don’t support right-aligned items.
@@ -0,0 +1,183 @@
.blog-nav-item-aside {
font-style: italic;
}

.row {
margin-left: -15px;
margin-right: -15px;
}

#footer {
padding-top: 40px;
color: #999;
}


/*! SOURCE: http://getbootstrap.com/examples/blog/blog.css !*/

/*
* Globals
*/

body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #555;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}


/*
* Override Bootstrap's default container.
*/

@media (min-width: 1200px) {
.container {
width: 970px;
}
}


/*
* Masthead for nav
*/

.blog-masthead {
background-color: #428bca;
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}

/* Nav links */
.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}

/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}


/*
* Blog name and description
*/

.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 30px;
margin-bottom: 0;
font-size: 60px;
font-weight: normal;
}
.blog-description {
font-size: 20px;
color: #999;
}


/*
* Main column and sidebar layout
*/

.blog-main {
font-size: 18px;
line-height: 1.5;
}

/* Sidebar modules for boxing content */
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}


/* Pagination */
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}


/*
* Blog posts
*/

.blog-post {
margin-bottom: 60px;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}


/*
* Footer
*/

.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}
@@ -0,0 +1,4 @@
assets/css/all-nocdn.css=bootstrap.css,rst.css,code.css,colorbox.css,theme.css,blog.css,custom.css
assets/css/all.css=rst.css,code.css,colorbox.css,theme.css,blog.css,custom.css
assets/js/all-nocdn.js=jquery.min.js,bootstrap.min.js,jquery.colorbox-min.js,moment-with-locales.min.js,fancydates.js
assets/js/all.js=jquery.colorbox-min.js,moment-with-locales.min.js,fancydates.js
@@ -0,0 +1,27 @@
NAVIGATION_LINKS = {
DEFAULT_LANG: (
("/index.html", "Home"),
("/archive.html", "Archives"),
("/categories/index.html", "Tags"),
("/rss.xml", "RSS feed"),
),
}

GLOBAL_CONTEXT = {'blog_sidebar': """\
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>This is the Bootstrap Blog theme by @mdo, adapted for Nikola by @Kwpolska.
And this sidebar is completely customizable — you can put anything you want
here!</p>
</div>
<div class="sidebar-module">
<h4>Links</h4>
<ol class="list-unstyled">
<li><a href="http://getbootstrap.com/examples/blog/">Bootstrap Blog Theme</a></li>
<li><a href="https://getnikola.com/">Nikola</a></li>
<li><a href="https://twitter.com/mdo">@mdo</a></li>
<li><a href="https://twitter.com/Kwpolska">@Kwpolska</a></li>
<li><a href="https://twitter.com/GetNikola">@GetNikola</a></li>
</ol>
</div>
"""}
@@ -0,0 +1 @@
jinja
@@ -0,0 +1 @@
bootstrap3-jinja
@@ -0,0 +1,92 @@
{# -*- coding: utf-8 -*- #}
{% import 'base_helper.tmpl' as base with context %}
{% import 'annotation_helper.tmpl' as notes with context %}
{{ set_locale(lang) }}
{{ base.html_headstart() }}
{% block extra_head %}
{# Leave this block alone. #}
{% endblock %}
{{ template_hooks['extra_head']() }}
</head>
<body>
<a href="#content" class="sr-only sr-only-focusable">{{ messages("Skip to main content") }}</a>

<!-- Menubar -->

<div class="blog-masthead">
<div class="container"><!-- This keeps the margins nice -->
<nav class="blog-nav" role="navigation">
{{ base.html_navigation_links() }}
{{ template_hooks['menu']() }}
{% if search_form %}
{{ search_form }}
{% endif %}

{% block belowtitle %}
{% if translations|length > 1 %}
{{ base.html_translations() }}
{% endif %}
{% endblock %}
{% if show_sourcelink %}
{% block sourcelink %}{% endblock %}
{% endif %}
{{ template_hooks['menu_alt']() }}
</ul>
</nav>
</div><!-- /.container -->
</div>
<!-- End of Menubar -->

<div class="container" id="content" role="main">
<div class="body-content">
<div class="blog-header">
<h1 class="blog-title">
<a href="{{ abs_link(_link("root", None, lang)) }}">
{% if logo_url %}
<img src="{{ logo_url }}" alt="{{ blog_title }}" id="logo">
{% endif %}

{% if show_blog_title %}
<span id="blog-title">{{ blog_title }}</span>
{% endif %}
</a>
</h1>
<p class="lead blog-description">{{ blog_description }}</p>
{{ template_hooks['page_header']() }}
</div>
<!--Body content-->
<div class="row">
<div class="col-sm-8 blog-main">
{% block content %}{% endblock %}
</div>
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
{{ blog_sidebar }}
</div>
<!--End of body content-->
</div>
</div>
</div>

<footer class="blog-footer" id="footer">
{{ content_footer }}
{{ template_hooks['page_footer']() }}
</footer>

{{ base.late_load_js() }}
<script>$('a.image-reference:not(.islink) img:not(.islink)').parent().colorbox({rel:"gal",maxWidth:"100%",maxHeight:"100%",scalePhotos:true});</script>
<!-- fancy dates -->
<script>
moment.locale("{{ momentjs_locales[lang] }}");
fancydates({{ date_fanciness }}, {{ js_date_format }});
</script>
<!-- end fancy dates -->
{% block extra_js %}{% endblock %}
{% if annotations and post and not post.meta('noannotations') %}
{{ notes.code() }}
{% elif not annotations and post and post.meta('annotations') %}
{{ notes.code() }}
{% endif %}
{{ body_end }}
{{ template_hooks['body_end']() }}
</body>
</html>

0 comments on commit 101a371

Please sign in to comment.
You can’t perform that action at this time.