templates using bootstrap v5

docs/manual.rst

@@ -9,7 +9,7 @@
 
 :Version: 8.3.1
 
-.. class:: alert alert-primary float-md-right
+.. class:: alert alert-primary float-md-right float-md-end
 
 .. contents::
 

nikola/data/themes/bootblog5-jinja/README.md

@@ -0,0 +1,3 @@
+This is a theme based on Bootstrap 5 and the [blog example](https://getbootstrap.com/docs/5.0/examples/blog/) by @mdo.
+
+This theme **does not** support Bootswatch font/color schemes.

nikola/data/themes/bootblog5-jinja/assets/css/bootblog.css

@@ -0,0 +1,225 @@
+/* stylelint-disable selector-list-comma-newline-after */
+
+.blog-header {
+  line-height: 1;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.blog-header-logo {
+  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
+  font-size: 2.25rem;
+}
+
+.blog-header-logo:hover {
+  text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
+}
+
+.display-4 {
+  font-size: 2.5rem;
+}
+@media (min-width: 768px) {
+  .display-4 {
+    font-size: 3rem;
+  }
+}
+
+.nav-scroller {
+  position: relative;
+  z-index: 2;
+  height: 2.75rem;
+  overflow-y: hidden;
+}
+
+.nav-scroller .nav {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-bottom: 1rem;
+  margin-top: -1px;
+  overflow-x: auto;
+  text-align: center;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+}
+
+.nav-scroller .nav-link {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  font-size: .875rem;
+}
+
+.card-img-right {
+  height: 100%;
+  border-radius: 0 3px 3px 0;
+}
+
+.flex-auto {
+  -ms-flex: 0 0 auto;
+  -webkit-box-flex: 0;
+  flex: 0 0 auto;
+}
+
+.h-150 { height: 150px; }
+@media (min-width: 768px) {
+  .h-md-150 { height: 150px; }
+}
+
+.h-250 { height: 250px; }
+@media (min-width: 768px) {
+  .h-md-250 { height: 250px; }
+}
+
+.border-top { border-top: 1px solid #e5e5e5; }
+.border-bottom { border-bottom: 1px solid #e5e5e5; }
+
+.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
+
+/*
+ * Blog name and description
+ */
+.blog-title {
+  margin-bottom: 0;
+  font-size: 2rem;
+  font-weight: 400;
+}
+.blog-description {
+  font-size: 1.1rem;
+  color: #999;
+}
+
+@media (min-width: 40em) {
+  .blog-title {
+    font-size: 3.5rem;
+  }
+}
+
+/* Pagination */
+.blog-pagination {
+  margin-bottom: 4rem;
+}
+.blog-pagination > .btn {
+  border-radius: 2rem;
+}
+
+/*
+ * Blog posts
+ */
+article {
+  margin-bottom: 4rem;
+}
+article:last-child {
+  margin-bottom: 0;
+}
+.entry-title {
+  margin-bottom: .25rem;
+  font-size: 2.5rem;
+}
+article .metadata {
+  margin-bottom: 1.25rem;
+  color: #999;
+}
+
+/*
+ * Footer
+ */
+.blog-footer {
+  padding: 2.5rem 0;
+  color: #999;
+  text-align: center;
+  background-color: #f9f9f9;
+  border-top: .05rem solid #e5e5e5;
+}
+.blog-footer p:last-child {
+  margin-bottom: 0;
+}
+
+@media (min-width: 576px) {
+  .nbb-navbar-toggler {
+    display: none;
+  }
+
+  .nbb-header {
+    -webkit-box-pack: justify!important;
+    -ms-flex-pack: justify!important;
+    justify-content: space-between!important;
+  }
+}
+
+/* Various fixes that make this theme look better for Nikola's needs */
+.navbar-brand {
+    padding: 0;
+    white-space: initial;
+}
+
+.bootblog4-featured-large-image {
+    height: 100%;
+    border-top-right-radius: .25rem!important;
+    border-bottom-right-radius: .25rem!important;
+}
+
+.bootblog4-featured-jumbotron-row {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.bootblog4-right-nav {
+    flex-direction: row;
+}
+
+.bootblog4-right-nav .nav-link {
+    padding-right: .5rem;
+    padding-left: .5rem;
+}
+
+.bootblog4-featured-text {
+    overflow: auto;
+}
+/* extend the mobile appearance to `sm`, because otherwise weird things happen */
+@media (min-width: 576px) {
+    .nbb-navbar-toggler {
+        display: block;
+    }
+}
+
+@media (max-width: 767px) {
+    .bootblog4-right-nav {
+        margin-top: 1rem;
+    }
+
+    .bootblog4-search-form-holder {
+        position: absolute;
+        top: 2.75rem;
+    }
+
+    .bootblog4-search-form-holder input.form-control {
+        width: 6rem;
+    }
+
+    .bootblog4-brand {
+        text-align: left;
+    }
+}
+
+@media (min-width: 768px) {
+    .nbb-navbar-toggler {
+        display: none;
+    }
+
+    .flex-collapse {
+        display: flex !important;
+    }
+
+    .bootblog4-search-form-holder {
+        display: block !important;
+    }
+
+    .bootblog4-brand {
+        text-align: center;
+    }
+}

nikola/data/themes/bootblog5-jinja/bootblog5-jinja.theme

@@ -0,0 +1,12 @@
+[Theme]
+engine = jinja
+parent = bootstrap5-jinja
+author = The Nikola Contributors
+author_url = https://getnikola.com/
+license = MIT
+based_on = Bootstrap 5 <https://getbootstrap.com/>, Bootstrap 5 blog example <https://getbootstrap.com/docs/5.0/examples/blog/>
+tags = bootstrap
+
+[Family]
+family = bootblog5
+mako-version = bootstrap5

nikola/data/themes/bootblog5-jinja/bundles

@@ -0,0 +1,27 @@
+; css bundles
+assets/css/all-nocdn.css=
+    bootstrap.min.css,
+    rst_base.css,
+    nikola_rst.css,
+    code.css,
+    baguetteBox.min.css,
+    theme.css,
+    bootblog.css,
+    custom.css,
+assets/css/all.css=
+    rst_base.css,
+    nikola_rst.css,
+    code.css,
+    baguetteBox.min.css,
+    theme.css,
+    bootblog.css,
+    custom.css,
+
+; javascript bundles
+assets/js/all-nocdn.js=
+    popper.min.js,
+    bootstrap.min.js,
+    baguetteBox.min.js,
+    fancydates.min.js,
+assets/js/all.js=
+    fancydates.min.js,

nikola/data/themes/bootblog5-jinja/templates/base.tmpl

@@ -0,0 +1,103 @@
+{#  -*- coding: utf-8 -*- #}
+{% import 'base_helper.tmpl' as base 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="visually-hidden-focusable">{{ messages("Skip to main content") }}</a>
+
+<!-- Header and menu bar -->
+<div class="container">
+      <header class="blog-header py-3">
+        <div class="row nbb-header align-items-center">
+          <div class="col-md-3 col-xs-2 col-sm-2" style="width: auto;">
+            <button class="navbar-toggler navbar-light bg-light nbb-navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".bs-nav-collapsible" aria-controls="bs-navbar" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse bs-nav-collapsible bootblog4-search-form-holder">
+                {{ search_form }}
+            </div>
+        </div>
+          <div class="col-md-6 col-xs-10 col-sm-10 bootblog4-brand" style="width: auto;">
+            <a class="navbar-brand blog-header-logo text-dark" href="{{ _link("root", None, lang) }}">
+        {% if logo_url %}
+            <img src="{{ logo_url }}" alt="{{ blog_title|e }}" id="logo" class="d-inline-block align-top">
+        {% endif %}
+
+        {% if show_blog_title %}
+            <span id="blog-title">{{ blog_title|e }}</span>
+        {% endif %}
+        </a>
+          </div>
+            <div class="col-md-3 justify-content-end align-items-center bs-nav-collapsible collapse flex-collapse bootblog4-right-nav">
+            <nav class="navbar navbar-light bg-white">
+            <ul class="navbar-nav bootblog4-right-nav">
+                    {{ base.html_navigation_links_entries(navigation_alt_links) }}
+                    {% block belowtitle %}
+                    {% if translations|length > 1 %}
+                        {{ base.html_translations() }}
+                    {% endif %}
+                    {% endblock %}
+                    {% block sourcelink %}{% endblock %}
+                    {{ template_hooks['menu_alt']() }}
+            </ul></nav>
+            </div>
+    </div>
+</header>
+
+<nav class="navbar navbar-expand-md navbar-light bg-white static-top">
+        <div class="collapse navbar-collapse bs-nav-collapsible" id="bs-navbar">
+            <ul class="navbar-nav nav-fill d-flex w-100">
+                {{ base.html_navigation_links_entries(navigation_links) }}
+                {{ template_hooks['menu']() }}
+            </ul>
+        </div><!-- /.navbar-collapse -->
+</nav>
+{% block before_content %}{% endblock %}
+</div>
+
+<div class="container" id="content" role="main">
+    <div class="body-content">
+        {% if theme_config.get('sidebar') %}
+            <div class="row"><div class="col-md-8 blog-main">
+        {% endif %}
+        <!--Body content-->
+        {{ template_hooks['page_header']() }}
+        {% block extra_header %}{% endblock %}
+        {% block content %}{% endblock %}
+        <!--End of body content-->
+        {% if theme_config.get('sidebar') %}
+        </div><aside class="col-md-4 blog-sidebar">{{ theme_config.get('sidebar') }}</aside></div>
+        {% endif %}
+
+        <footer id="footer">
+            {{ content_footer }}
+            {{ template_hooks['page_footer']() }}
+            {% block extra_footer %}{% endblock %}
+        </footer>
+    </div>
+</div>
+
+{{ base.late_load_js() }}
+    {% if date_fanciness != 0 %}
+        <!-- fancy dates -->
+        <script>
+        luxon.Settings.defaultLocale = "{{ luxon_locales[lang] }}";
+        fancydates({{ date_fanciness }}, {{ luxon_date_format }});
+        </script>
+        <!-- end fancy dates -->
+    {% endif %}
+    {% block extra_js %}{% endblock %}
+    <script>
+    baguetteBox.run('div#content', {
+        ignoreClass: 'islink',
+        captions: function(element){var i=element.getElementsByTagName('img')[0];return i===undefined?'':i.alt;}});
+    </script>
+{{ body_end }}
+{{ template_hooks['body_end']() }}
+</body>
+</html>