Skip to content

Commit

Permalink
Migrate getnikola.com to bootstrap 4
Browse files Browse the repository at this point in the history 
Signed-off-by: Chris Warrick <kwpolska@gmail.com>
  • Loading branch information
@Kwpolska
Kwpolska committed Apr 21, 2018
1 parent c416b21 commit f01fa52
Show file tree
Hide file tree
Showing 18 changed files with 8,770 additions and 6,179 deletions.
4 changes: 3 additions & 1 deletion conf.py
View file
Expand Up @@ -177,6 +177,7 @@
src="http://c.statcounter.com/7842875/0/3421486a/1/"
alt="tumblr statistics"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
"""

# no addthis
Expand Down Expand Up @@ -235,7 +236,8 @@
),
}

EXTRA_HEAD_DATA = '<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">'
EXTRA_HEAD_DATA = ''

CODE_COLOR_SCHEME = 'monokai'
# Put in global_context things you want available on all your templates.
# It can be anything, data, functions, modules, etc.
Expand Down
42 changes: 38 additions & 4 deletions files/assets/css/custom.css
View file
@@ -1,3 +1,7 @@
body {
color: #212529;
}

ul.bricks {
text-align: justify;
}
Expand All @@ -19,8 +23,8 @@ blockquote p, blockquote, p {

.previous a,.next a{border-radius:4px}

.navbar-inverse .navbar-nav > li > a {
color: #cccfd5;
.navbar-brand {
padding: 0;
}

.navbar-brand #logo {
Expand Down Expand Up @@ -74,13 +78,16 @@ a.feature-link:hover {

pre.gs-console {
background: #272822;
color: #f8f8f2
color: #f8f8f2;
font-size: 12px;
}

code.gs-code {
background: #272822;
color: #f8f8f2;
white-space: nowrap;
padding: 2px 4px;
border-radius: 4px;
}

.gs-command, code.gs-command {
Expand All @@ -95,6 +102,32 @@ code.gs-code {
color: #a6e22e;
}

.gs-right-col .gs-console {
-webkit-position: sticky;
position: sticky;
top: 10px;
}

@media (max-width: 767px) {
.gs-left-col {
padding-left: 0;
padding-right: 0;
}
.gs-right-col {
padding-left: 0;
padding-right: 0;
}
}

@media (min-width: 768px) {
.gs-left-col {
padding-left: 0;
}
.gs-right-col {
padding-right: 0;
}
}

/* from bootstrap docs.css*/
@media (min-width: 992px) {
/* Widen the fixed sidebar */
Expand Down Expand Up @@ -149,8 +182,9 @@ h5:hover .headerlink, h6:hover .headerlink {

.forkme {
position: absolute;
top: 51px;
top: 66px;
right: 0;
border: 0;
z-index: 9999;
}

2 changes: 1 addition & 1 deletion state_data.json
View file
@@ -1,3 +1,3 @@
{
"last_deploy": "2018-04-19T18:37:47.494578"
"last_deploy": "2018-04-21T08:25:00.293471"
}
2 changes: 1 addition & 1 deletion stories/extending.txt
View file
Expand Up @@ -12,7 +12,7 @@ Extending Nikola
:Version: 7.8.14
:Author: Roberto Alsina <ralsina@netmanagers.com.ar>

.. class:: alert alert-info pull-right
.. class:: alert alert-primary float-md-right

.. contents::

Expand Down
66 changes: 22 additions & 44 deletions stories/features/index.html
View file
Expand Up @@ -9,58 +9,52 @@
.. type: text
.. author: The Nikola Team
-->
<!--
DON’T FORGET TO UPDATE THE TABLE OF CONTENTS AT THE END!
-->

<div class="row">
<div class="col-md-9">
<div class="media">
<div class="media-left">
<div class="media-left mr-3">
<a href="/handbook.html#why-static"><div class="feature-icon feature-icon-static media-object">
<span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-server fa-stack-1x fa-inverse"></i></span>
</div></a>
</div>
<div class="media-body">
<h4 id="static" class="media-heading">Static sites</h4>
<p>Static websites are safer, use fewer resources, and avoid vendor and platform lock-in. You can host a Nikola website on any web server, big or small. It’s just a bunch of HTML files and assets.</p>
<p><a href="/handbook.html#why-static" class="btn btn-sm btn-default">Why static? »</a></p>
<p><a href="/handbook.html#why-static" class="btn btn-sm btn-secondary">Why static? »</a></p>
</div>
</div>
<div class="media">
<div class="media-left">
<div class="media-left mr-3">
<a href="/features/fast.html"><div class="feature-icon feature-icon-fast media-object">
<span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-bolt fa-stack-1x fa-inverse"></i></span>
</div></a>
</div>
<div class="media-body">
<h4 id="fast" class="media-heading">Incremental builds</h4>
<h4 id="fast" class="media-heading">Fast, incremental builds</h4>
<p>Nikola is fast. It uses <a href="http://pydoit.org">doit</a>, which provides incremental rebuilds — in other words, we rebuild only the pages that need rebuilding, saving CPU time, wall clock time and upload bandwidth.</p>
<p><a href="/features/fast.html" class="btn btn-sm btn-default">Explore in depth »</a></p>
<p><a href="/features/fast.html" class="btn btn-sm btn-secondary">Explore in depth »</a></p>
</div>
</div>
<div class="media">
<div class="media-left">
<div class="media-left mr-3">
<a href="/handbook.html#supported-input-formats"><div class="feature-icon feature-icon-input media-object">
<span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-file-text fa-stack-1x fa-inverse"></i></span>
<span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-file-alt fa-stack-1x fa-inverse"></i></span>
</div></a>
</div>
<div class="media-body">
<h4 id="input" class="media-heading">Multiple input formats</h4>
<p>Nikola will take input in many formats. Out of the box, we support reStructuredText, Markdown, IPython (Jupyter) Notebooks and HTML, and have plugins for many other formats.</p>
<p><a href="/handbook.html#supported-input-formats" class="btn btn-sm btn-default">Check list of input formats and setup documentation »</a></p>
<p><a href="/handbook.html#supported-input-formats" class="btn btn-sm btn-secondary">Check list of input formats and setup documentation »</a></p>
</div>
</div>
<div class="media">
<div class="media-left">
<div class="media-left mr-3">
<a href="#importers"><div class="feature-icon feature-icon-importers media-object">
<span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-cloud-download fa-stack-1x fa-inverse"></i></span>
<span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fas fa-cloud-download-alt fa-stack-1x fa-inverse"></i></span>
</div></a>
</div>
<div class="media-body">
<h4 id="importers" class="media-heading">Importers for popular blog platforms</h4>
<p>Nikola has importers for popular blog platforms, so you can switch easily and free your work.</p>
<p>The <a href="https://getnikola.com/handbook.html#importing-your-wordpress-site-into-nikola"><i class="fa fa-wordpress"></i> WordPress importer</a> is built in (<code class="gs-code">nikola import_wordpress</code>); others are available as plugins and must be installed by using <code class="gs-code">nikola plugin -i</code>.</p>
<p>The <a href="https://getnikola.com/handbook.html#importing-your-wordpress-site-into-nikola"><i class="fab fa-wordpress"></i> WordPress importer</a> is built in (<code class="gs-code">nikola import_wordpress</code>); others are available as plugins and must be installed by using <code class="gs-code">nikola plugin -i</code>.</p>
<ul>
<li><a href="https://getnikola.com/handbook.html#importing-your-wordpress-site-into-nikola">import_wordpress</a> (built-in)</li>
<li><a href="https://plugins.getnikola.com/#import_blogger">import_blogger</a></li>
Expand All @@ -75,43 +69,43 @@ <h4 id="importers" class="media-heading">Importers for popular blog platforms</h
</div>
</div>
<div class="media">
<div class="media-left">
<div class="media-left mr-3">
<a href="/handbook.html#components"><div class="feature-icon feature-icon-components media-object">
<span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-cubes fa-stack-1x fa-inverse"></i></span>
</div></a>
</div>
<div class="media-body">
<h4 id="components" class="media-heading">Built-in components</h4>
<p>Nikola comes with everything you need to build a modern website: blogs (with comments, tags, categories, archives, RSS/Atom feeds), easy image galleries, and code listings.</p>
<p><a href="/handbook.html#components" class="btn btn-sm btn-default">Explore in depth »</a></p>
<p><a href="/handbook.html#components" class="btn btn-sm btn-secondary">Explore in depth »</a></p>
</div>
</div>
<div class="media">
<div class="media-left">
<div class="media-left mr-3">
<a href="https://www.transifex.com/projects/p/nikola/"><div class="feature-icon feature-icon-i18n media-object">
<span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-language fa-stack-1x fa-inverse"></i></span>
</div></a>
</div>
<div class="media-body">
<h4 id="i18n" class="media-heading">Multilingual support</h4>
<p>Nikola supports almost 40 languages out of the box, and it’s trivial to add more. You can write posts in multiple languages, and have links between the diferent versions of a post. There are even some settings (including navigation bars and site titles) that can differ between the different language versions.</p>
<p><a href="https://www.transifex.com/projects/p/nikola/" class="btn btn-sm btn-default">Check out available languages in Transifex »</a></p>
<p><a href="https://www.transifex.com/projects/p/nikola/" class="btn btn-sm btn-secondary">Check out available languages in Transifex »</a></p>
</div>
</div>
<div class="media">
<div class="media-left">
<div class="media-left mr-3">
<a href="/extending.html"><div class="feature-icon feature-icon-extensible media-object">
<span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-code fa-stack-1x fa-inverse"></i></span>
</div></a>
</div>
<div class="media-body">
<h4 id="extending" class="media-heading">Extensible</h4>
<p>Nikola is extensible. You can write a plugin to add any feature you want in a few lines of Python, or write your own theme in Mako or Jinja2. Or find something in the <a href="https://plugins.getnikola.com/">Plugin</a> and <a href="https://themes.getnikola.com/">Theme</a> Indexes.</p>
<p><a href="/extending.html" class="btn btn-sm btn-default">Read extending documentation »</a></p>
<p><a href="/extending.html" class="btn btn-sm btn-secondary">Read extending documentation »</a></p>
</div>
</div>
<div class="media">
<div class="media-left">
<div class="media-left mr-3">
<a href="#cli"><div class="feature-icon feature-icon-cli media-object">
<span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-terminal fa-stack-1x fa-inverse"></i></span>
</div></a>
Expand All @@ -136,19 +130,19 @@ <h4 id="cli" class="media-heading">Friendly CLI</h4>
</div>
</div>
<div class="media">
<div class="media-left">
<div class="media-left mr-3">
<a href="/features/auto.html"><div class="feature-icon feature-icon-auto media-object">
<span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-cogs fa-stack-1x fa-inverse"></i></span>
</div></a>
</div>
<div class="media-body">
<h4 id="auto" class="media-heading">Automatic rebuilds</h4>
<p>If you are working on your site, you don’t need to type <code class="gs-code gs-command">nikola build</code> and reload every time you make a change. Instead, just run <code class="gs-code gs-command">nikola auto</code>. It will detect changes and automatically rebuild your site and refresh your browser (using livereload).</p>
<p><a href="/features/auto.html" class="btn btn-sm btn-default">Explore in depth »</a></p>
<p><a href="/features/auto.html" class="btn btn-sm btn-secondary">Explore in depth »</a></p>
</div>
</div>
<div class="media">
<div class="media-left">
<div class="media-left mr-3">
<a href="https://getnikola.com/blog/a-cms-or-two-for-nikola-dato-cms-and-netlify-cms-integration.html"><div class="feature-icon feature-icon-cms media-object">
<span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-users fa-stack-1x fa-inverse"></i></span>
</div></a>
Expand All @@ -157,22 +151,6 @@ <h4 id="auto" class="media-heading">Automatic rebuilds</h4>
<h4 id="cms" class="media-heading">Easy to use with a CMS</h4>
<p>If you want to use Nikola for a website that has content authored by people who do not like command-line interfaces or who would prefer to use a WYSIWYG editor, we have some solutions for you.</p>
<p>Nikola can work with many static-site CMS solutions, including Dato CMS, Netlify CMS and Contentful. You can get a user-friendly admin panel for your Nikola site in just a few minutes.</p>
<p><a href="https://getnikola.com/blog/a-cms-or-two-for-nikola-dato-cms-and-netlify-cms-integration.html" class="btn btn-sm btn-default">Read a blog post about CMS integration »</a></p>
<p><a href="https://getnikola.com/blog/a-cms-or-two-for-nikola-dato-cms-and-netlify-cms-integration.html" class="btn btn-sm btn-secondary">Read a blog post about CMS integration »</a></p>
</div>
</div>
</div>
<div class="col-md-3 hidden-sm hidden-xs hidden-print">
<div class="list-group" id="features-toc" data-spy="affix" data-offset-top="120" data-offset-bottom="50">
<a href="#static" class="list-group-item">Static sites</a>
<a href="#fast" class="list-group-item">Incremental rebuilds</a>
<a href="#input" class="list-group-item">Multiple input formats</a>
<a href="#importers" class="list-group-item">Importers</a>
<a href="#components" class="list-group-item">Built-in components</a>
<a href="#i18n" class="list-group-item">Multilingual support</a>
<a href="#extending" class="list-group-item">Extensible</a>
<a href="#cli" class="list-group-item">Friendly CLI</a>
<a href="#auto" class="list-group-item">Automatic rebuilds</a>
<a href="#cms" class="list-group-item">CMS support</a>
</div>
</div>
</div>

0 comments on commit f01fa52

Please sign in to comment.