Skip to content
Permalink
Browse files

Bigger clickarea and more 'popping' features on hover

  • Loading branch information
da2x committed Jul 24, 2015
1 parent 554432a commit 2d686c9ed1b1f0a0911375948a2e3e78c930a8a5
Showing with 41 additions and 27 deletions.
  1. +5 −3 files/assets/css/custom.css
  2. +36 −24 stories/index.html
@@ -33,15 +33,17 @@ blockquote p, blockquote, p {

.feature-icon .fa-stack {
color: #3e4445;
transition: color 0.5s ease;
transition: color 0.3s ease;
}

.feature-icon .fa-stack:hover {
a:hover .feature-icon .fa-stack {
color: #f5ab14;
transition: color 0.5s ease;
transition: color 0.25s ease;
}

.index-feature {
margin-top: 0;
padding-top: 20px;
text-align: center;
}

@@ -21,45 +21,57 @@ <h1>Nikola — Static Site Generator</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="feature-icon feature-icon-static">
<a href="/handbook.html#why-static"><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></a>
</div>
<h2 class="index-feature">Host anywhere.</h2>
<a href="/handbook.html#why-static">
<div class="feature-icon feature-icon-static">
<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>
<h2 class="index-feature">Host anywhere.</h2>
</a>
<p><a href="/handbook.html#why-static">Static websites</a> 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>
</div>
<div class="col-md-4">
<div class="feature-icon feature-icon-fast">
<a href="/features/fast.html"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flash fa-stack-1x fa-inverse"></i></span></a>
</div>
<h2 class="index-feature">Fast, incremental builds.</h2>
<a href="/features/fast.html">
<div class="feature-icon feature-icon-fast">
<span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flash fa-stack-1x fa-inverse"></i></span>
</div>
<h2 class="index-feature">Fast, incremental builds.</h2>
</a>
<p><a href="/features/fast.html">Nikola is fast.</a> We use <a href="http://pydoit.org/">doit</a>, which provides incremental rebuilds — in other words, we rebuild only the pages that <em>need</em> rebuilding, saving CPU time, wall clock time and upload bandwidth.</p>
</div>
<div class="col-md-4">
<div class="feature-icon feature-icon-formats">
<a href="/handbook.html#supported-input-formats"><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></a>
</div>
<h2 class="index-feature">Any input format you like.</h2>
<a href="/handbook.html#supported-input-formats">
<div class="feature-icon feature-icon-formats">
<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>
</div>
<h2 class="index-feature">Any input format you like.</h2>
</a>
<p><a href="/handbook.html#supported-input-formats">Nikola will take input in many formats</a>. Out of the box, we support reStructuredText, Markdown, IPython (Jupyter) Notebooks and HTML, and have plugins for many other formats.</p>
</div>
<div class="col-md-4">
<div class="feature-icon feature-icon-components">
<a href="/handbook.html#components"><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></a>
</div>
<h2 class="index-feature">Batteries included.</h2>
<a href="/handbook.html#components">
<div class="feature-icon feature-icon-components">
<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>
<h2 class="index-feature">Batteries included.</h2>
</a>
<p><a href="/handbook.html#components">Nikola comes with everything you need</a> to build a modern website: blogs (with comments, tags, categories, archives, RSS/Atom feeds), multilingual support, easy image galleries, and code listings.</p>
</div>
<div class="col-md-4">
<div class="feature-icon feature-icon-extensible">
<a href="/extending.html"><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></a>
</div>
<h2 class="index-feature">Easily extensible.</h2>
<a href="/extending.html">
<div class="feature-icon feature-icon-extensible">
<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>
<h2 class="index-feature">Easily extensible.</h2>
</a>
<p><a href="/extending.html">Nikola is extensible</a>. 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>
</div>
<div class="col-md-4">
<div class="feature-icon feature-icon-unix">
<a href="/features/index.html#cli"><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></a>
</div>
<h2 class="index-feature">User-friendly CLI.</h2>
<a href="/features/index.html#cli">
<div class="feature-icon feature-icon-unix">
<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>
<h2 class="index-feature">User-friendly CLI.</h2>
</a>
<p><a href="/features/index.html#cli">Nikola has a friendly user interface</a> that gets you up and running quickly and simplifies your work. You do not need to memorize headers just to create a post — we’ll write them for you.</p>
</div>
</div>

0 comments on commit 2d686c9

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