Skip to content

Commit 2d686c9

Browse files
da2xda2x
committedJul 24, 2015
Bigger clickarea and more 'popping' features on hover
1 parent 554432a commit 2d686c9

File tree

2 files changed

+41
-27
lines changed

2 files changed

+41
-27
lines changed
 

‎files/assets/css/custom.css

+5-3
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,17 @@ blockquote p, blockquote, p {
3333

3434
.feature-icon .fa-stack {
3535
color: #3e4445;
36-
transition: color 0.5s ease;
36+
transition: color 0.3s ease;
3737
}
3838

39-
.feature-icon .fa-stack:hover {
39+
a:hover .feature-icon .fa-stack {
4040
color: #f5ab14;
41-
transition: color 0.5s ease;
41+
transition: color 0.25s ease;
4242
}
4343

4444
.index-feature {
45+
margin-top: 0;
46+
padding-top: 20px;
4547
text-align: center;
4648
}
4749

‎stories/index.html

+36-24
Original file line numberDiff line numberDiff line change
@@ -21,45 +21,57 @@ <h1>Nikola — Static Site Generator</h1>
2121
<div class="container">
2222
<div class="row">
2323
<div class="col-md-4">
24-
<div class="feature-icon feature-icon-static">
25-
<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>
26-
</div>
27-
<h2 class="index-feature">Host anywhere.</h2>
24+
<a href="/handbook.html#why-static">
25+
<div class="feature-icon feature-icon-static">
26+
<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>
27+
</div>
28+
<h2 class="index-feature">Host anywhere.</h2>
29+
</a>
2830
<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>
2931
</div>
3032
<div class="col-md-4">
31-
<div class="feature-icon feature-icon-fast">
32-
<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>
33-
</div>
34-
<h2 class="index-feature">Fast, incremental builds.</h2>
33+
<a href="/features/fast.html">
34+
<div class="feature-icon feature-icon-fast">
35+
<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>
36+
</div>
37+
<h2 class="index-feature">Fast, incremental builds.</h2>
38+
</a>
3539
<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>
3640
</div>
3741
<div class="col-md-4">
38-
<div class="feature-icon feature-icon-formats">
39-
<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>
40-
</div>
41-
<h2 class="index-feature">Any input format you like.</h2>
42+
<a href="/handbook.html#supported-input-formats">
43+
<div class="feature-icon feature-icon-formats">
44+
<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>
45+
</div>
46+
<h2 class="index-feature">Any input format you like.</h2>
47+
</a>
4248
<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>
4349
</div>
4450
<div class="col-md-4">
45-
<div class="feature-icon feature-icon-components">
46-
<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>
47-
</div>
48-
<h2 class="index-feature">Batteries included.</h2>
51+
<a href="/handbook.html#components">
52+
<div class="feature-icon feature-icon-components">
53+
<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>
54+
</div>
55+
<h2 class="index-feature">Batteries included.</h2>
56+
</a>
4957
<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>
5058
</div>
5159
<div class="col-md-4">
52-
<div class="feature-icon feature-icon-extensible">
53-
<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>
54-
</div>
55-
<h2 class="index-feature">Easily extensible.</h2>
60+
<a href="/extending.html">
61+
<div class="feature-icon feature-icon-extensible">
62+
<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>
63+
</div>
64+
<h2 class="index-feature">Easily extensible.</h2>
65+
</a>
5666
<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>
5767
</div>
5868
<div class="col-md-4">
59-
<div class="feature-icon feature-icon-unix">
60-
<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>
61-
</div>
62-
<h2 class="index-feature">User-friendly CLI.</h2>
69+
<a href="/features/index.html#cli">
70+
<div class="feature-icon feature-icon-unix">
71+
<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>
72+
</div>
73+
<h2 class="index-feature">User-friendly CLI.</h2>
74+
</a>
6375
<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>
6476
</div>
6577
</div>

0 commit comments

Comments
 (0)
Please sign in to comment.