dan
/
jekyll
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #860 from cobyism/responsify 

Responsive jekyllrb.com (thanks to @cobyism)
This commit is contained in:
Parker Moore 2013-05-02 14:53:46 -07:00
parent 4c7b9cb953 e419029b93
commit 1404a97cd4
24 changed files with 555 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/_includes/docs_contents.html
View File

@ -1,4 +1,4 @@
<div class="grid2">
<div class="unit one-fifth hide-on-mobiles">
<aside>
<h4>Getting Started</h4>
<ul>

36
site/_includes/docs_contents_mobile.html Normal file
View File

@ -0,0 +1,36 @@
<div class="docs-nav-mobile unit whole show-on-mobiles">
<select onchange="if (this.value) window.location.href=this.value">
<option value="">Navigate the docs…</option>
<optgroup label="Getting started">
<option value="{{ site.url }}/docs/home">Welcome</option>
<option value="{{ site.url }}/docs/installation">Installation</option>
<option value="{{ site.url }}/docs/usage">Basic Usage</option>
<option value="{{ site.url }}/docs/structure">Directory structure</option>
<option value="{{ site.url }}/docs/configuration">Configuration</option>
</optgroup>
<optgroup label="Your Content">
<option value="{{ site.url }}/docs/frontmatter">Front-matter</option>
<option value="{{ site.url }}/docs/posts">Writing posts</option>
<option value="{{ site.url }}/docs/pages">Creating pages</option>
<option value="{{ site.url }}/docs/variables">Variables</option>
<option value="{{ site.url }}/docs/migrations">Blog migrations</option>
</optgroup>
<optgroup label="Customization">
<option value="{{ site.url }}/docs/templates">Templates</option>
<option value="{{ site.url }}/docs/permalinks">Permalinks</option>
<option value="{{ site.url }}/docs/pagination">Pagination</option>
<option value="{{ site.url }}/docs/plugins">Plugins</option>
<option value="{{ site.url }}/docs/extras">Extras</option>
</optgroup>
<optgroup label="Deployment">
<option value="{{ site.url }}/docs/github-pages">GitHub Pages</option>
<option value="{{ site.url }}/docs/deployment-methods">Other methods</option>
</optgroup>
<optgroup label="Miscellaneous">
<option value="{{ site.url }}/docs/contributing">Contributing</option>
<option value="{{ site.url }}/docs/troubleshooting">Troubleshooting</option>
<option value="{{ site.url }}/docs/sites">Sites using Jekyll</option>
<option value="{{ site.url }}/docs/resources">Resources</option>
</optgroup>
<select>
</div>

20
site/_includes/footer.html
View File

@ -1,15 +1,15 @@
<footer>
<div class="content">
<div class="grid4 first">
<p>By <a href="http://tom.preston-werner.com">Tom Preston-Werner</a>, <a href="http://quaran.to/">Nick Quaranto</a>, and many more <a href="https://github.com/mojombo/jekyll/graphs/contributors">awesome contributors</a>.</p>
<div class="grid">
<div class="unit one-third center-on-mobiles">
<p>By <a href="http://tom.preston-werner.com">Tom Preston-Werner</a>, <a href="http://quaran.to/">Nick Quaranto</a>, and many more <a href="https://github.com/mojombo/jekyll/graphs/contributors">awesome&nbsp;contributors</a>.</p>
</div>
<div class="grid8 align-right">
<p>Proudly hosted by</p>
<a href="https://github.com">
<img src="{{ site.url }}/img/footer-logo.png" alt="GitHub • Social coding">
</a>
<div class="unit two-thirds align-right center-on-mobiles">
<p>
Proudly hosted by
<a href="https://github.com">
<img src="{{ site.url }}/img/footer-logo.png" alt="GitHub • Social coding">
</a>
</p>
</div>
<div class="clear"></div>
</div>
</footer>
<div class="clear"></div>

22
site/_includes/header.html
View File

@ -1,6 +1,9 @@
<header>
<div class="content">
<div class="grid3 first">
<nav class="mobile-nav show-on-mobiles">
{% include primary-nav-items.html %}
</nav>
<div class="grid">
<div class="unit one-third center-on-mobiles">
<h1>
<a href="{{ site.url }}/">
<span>Jekyll</span>
@ -8,19 +11,8 @@
</a>
</h1>
</div>
<nav class="grid6">
<ul>
<li {% if page.overview %}class="current"{% endif %}>
<a href="{{ site.url }}/">Overview</a>
</li>
<li {% unless page.overview %}class="current"{% endunless %}>
<a href="{{ site.url }}/docs">Documentation</a>
</li>
<li class="">
<a href="https://github.com/mojombo/jekyll">View on GitHub</a>
</li>
</ul>
<nav class="main-nav unit two-thirds hide-on-mobiles">
{% include primary-nav-items.html %}
</nav>
<div class="clear"></div>
</div>
</header>

11
site/_includes/primary-nav-items.html Normal file
View File

@ -0,0 +1,11 @@
<ul>
<li class="{% if page.overview %}current{% endif %}">
<a href="{{ site.url }}/">Overview</a>
</li>
<li class="{% unless page.overview %}current{% endunless %}">
<a href="{{ site.url }}/docs">Doc<span class="show-on-mobiles">s</span><span class="hide-on-mobiles">umentation</span></a>
</li>
<li class="">
<a href="https://github.com/mojombo/jekyll"><span class="hide-on-mobiles">View on </span>GitHub</a>
</li>
</ul>

3
site/_includes/top.html
View File

@ -3,10 +3,11 @@
<head>
<meta charset="UTF-8">
<title>{{ page.title }}</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ site.url }}/css/normalize.css" />
<link rel="stylesheet" href="{{ site.url }}/css/grid.css" />
<link rel="stylesheet" href="{{ site.url }}/css/gridism.css" />
<link rel="stylesheet" href="{{ site.url }}/css/style.css" />
<link rel="stylesheet" href="{{ site.url }}/css/pygments.css" />
<link rel="icon" type="image/x-icon" href="{{ site.url }}/favicon.png" />

2
site/_layouts/default.html
View File

@ -1,6 +1,6 @@
{% include top.html %}
<body>
<body class="wrap">
{% include header.html %}
{{ content }}

6
site/_layouts/docs.html
View File

@ -3,9 +3,11 @@ layout: default
---
<section class="docs">
<div class="content">
<div class="grid">
<div class="grid10 first">
{% include docs_contents_mobile.html %}
<div class="unit four-fifths">
<article>
<h1>{{ page.title }}</h1>
{{ content }}

6
site/_posts/2012-07-01-configuration.md
View File

@ -19,6 +19,7 @@ The table below lists the available settings for Jekyll, and the various <code
class="option">options</code> (specifed in the configuration file) and <code
class="flag">flags</code> (specified on the command-line) that control them.
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -99,9 +100,11 @@ class="flag">flags</code> (specified on the command-line) that control them.
</tr>
</tbody>
</table>
</div>
### Build Command Options
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -169,6 +172,7 @@ class="flag">flags</code> (specified on the command-line) that control them.
</tr>
</tbody>
</table>
</div>
### Serve Command Options
@ -176,6 +180,7 @@ In addition to the options below, the `serve` sub-command can accept any of the
for the `build` sub-command, which are then applied to the site build which occurs right
before your site is served.
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -216,6 +221,7 @@ before your site is served.
</tr>
</tbody>
</table>
</div>
<div class="note warning">
<h5>Do not use tabs in configuration files</h5>

22
site/_posts/2012-07-01-contributing.md
View File

@ -56,12 +56,28 @@ Workflow
Here's the most direct way to get your work merged into the project:
* Fork the project.
* Clone down your fork: `git clone git://github.com/<username>/jekyll.git`
* Create a topic branch to contain your change: `git checkout -b my_awesome_feature`
* Clone down your fork:
{% highlight bash %}
git clone git://github.com/<username>/jekyll.git
{% endhighlight %}
* Create a topic branch to contain your change:
{% highlight bash %}
git checkout -b my_awesome_feature
{% endhighlight %}
* Hack away, add tests. Not necessarily in that order.
* Make sure everything still passes by running `rake`.
* If necessary, rebase your commits into logical chunks, without errors.
* Push the branch up: `git push origin my_awesome_feature`
* Push the branch up:
{% highlight bash %}
git push origin my_awesome_feature
{% endhighlight %}
* Create a pull request against mojombo/jekyll and describe what your change
does and the why you think it should be merged.

4
site/_posts/2012-07-01-frontmatter.md
View File

@ -38,6 +38,7 @@ relies on.
There are a number of predefined global variables that you can set in the
front-matter of a page or post.
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -119,6 +120,7 @@ front-matter of a page or post.
</tr>
</tbody>
</table>
</div>
## Custom Variables
@ -142,6 +144,7 @@ title:
These are available out-of-the-box to be used in the front-matter for a post.
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -163,3 +166,4 @@ These are available out-of-the-box to be used in the front-matter for a post.
</tr>
</tbody>
</table>
</div>

2
site/_posts/2012-07-01-pagination.md
View File

@ -36,6 +36,7 @@ page in the generated site.
The pagination plugin exposes the `paginator` liquid object with the following
attributes:
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -102,6 +103,7 @@ attributes:
</tr>
</tbody>
</table>
</div>
<div class="note info">
<h5>Pagination does not support tags or categories</h5>

6
site/_posts/2012-07-01-permalinks.md
View File

@ -17,6 +17,7 @@ permalink is defined as `/:categories/:year/:month/:day/:title.html`.
## Template variables
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -87,9 +88,11 @@ permalink is defined as `/:categories/:year/:month/:day/:title.html`.
</tr>
</tbody>
</table>
</div>
## Built-in permalink styles
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -124,11 +127,13 @@ permalink is defined as `/:categories/:year/:month/:day/:title.html`.
</tr>
</tbody>
</table>
</div>
## Permalink style examples
Given a post named: `/2009-04-29-slap-chop.textile`
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -171,3 +176,4 @@ Given a post named: `/2009-04-29-slap-chop.textile`
</tr>
</tbody>
</table>
</div>

10
site/_posts/2012-07-01-plugins.md
View File

@ -80,6 +80,7 @@ using the `category_index.html` layout.
Generators are only required to implement one method:
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -98,6 +99,7 @@ Generators are only required to implement one method:
</tr>
</tbody>
</table>
</div>
## Converters
@ -139,6 +141,7 @@ end
Converters should implement at a minimum 3 methods:
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -178,6 +181,7 @@ Converters should implement at a minimum 3 methods:
</tr>
</tbody>
</table>
</div>
In our example, `UpcaseConverter#matches` checks if our filename extension is
`.upcase`, and will render using the converter if it is. It will call
@ -212,6 +216,7 @@ Liquid::Template.register_tag('render_time', Jekyll::RenderTimeTag)
At a minimum, liquid tags must implement:
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -230,6 +235,7 @@ At a minimum, liquid tags must implement:
</tr>
</tbody>
</table>
</div>
You must also register the custom tag with the Liquid template engine as
follows:
@ -286,6 +292,7 @@ Liquid::Template.register_filter(Jekyll::AssetFilter)
There are two flags to be aware of when writing a plugin:
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -325,6 +332,7 @@ There are two flags to be aware of when writing a plugin:
</tr>
</tbody>
</table>
</div>
To use one of the example plugins above as an illustration, here is how you’d
specify these two flags:
@ -379,7 +387,7 @@ There are a few useful, prebuilt plugins at the following locations:
- [Full-text search by Pascal Widdershoven](https://github.com/PascalW/jekyll_indextank): Add full-text search to your Jekyll site with this plugin and a bit of JavaScript.
- [Stylus Converter](https://gist.github.com/988201) Convert .styl to .css.
- [Embed.ly client by Robert Böhnke](https://github.com/robb/jekyll-embedly-client) Autogenerate embeds from URLs using oEmbed.
- [Logarithmic Tag Cloud](https://gist.github.com/2290195): Flexible. Logarithmic distribution. Usage eg: `{{ "{% tag_cloud font-size: 50 - 150%, threshold: 2 " }}%}`. Documentation inline.
- [Logarithmic Tag Cloud](https://gist.github.com/2290195): Flexible. Logarithmic distribution. Documentation inline.
- [Related Posts by Lawrence Woodman](https://github.com/LawrenceWoodman/related_posts-jekyll_plugin): Overrides `site.related_posts` to use categories to assess relationship
- [AliasGenerator by Thomas Mango](https://github.com/tsmango/jekyll_alias_generator): Generates redirect pages for posts when an alias configuration is specified in the YAML Front Matter.
- [FlickrSetTag by Thomas Mango](https://github.com/tsmango/jekyll_flickr_set_tag): Generates image galleries from Flickr sets.

2
site/_posts/2012-07-01-structure.md
View File

@ -33,6 +33,7 @@ A basic Jekyll site usually looks something like this:
An overview of what each of these does:
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -153,3 +154,4 @@ An overview of what each of these does:
</tr>
</tbody>
</table>
</div>

3
site/_posts/2012-07-01-templates.md
View File

@ -13,6 +13,7 @@ common tasks easier.
## Filters
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
@ -143,6 +144,7 @@ common tasks easier.
</tr>
</tbody>
</table>
</div>
## Tags
@ -231,4 +233,3 @@ You can also use this tag to create a link to a post in Markdown as follows:
[Name of Link]({% post_url 2010-07-21-name-of-post %})
{% endraw %}
{% endhighlight %}

22
site/_posts/2012-07-01-troubleshooting.md
View File

@ -50,7 +50,23 @@ On Debian or Ubuntu, you may need to add /var/lib/gems/1.8/bin/ to your path in
## Base-URL Problems
If you are using base-url option like `jekyll serve --baseurl '/blog'` then make sure that you access the site at `http://localhost:4000/blog/index.html`. Just accessing `http://localhost:4000/blog` will not work.
If you are using base-url option like:
{% highlight bash %}
jekyll serve --baseurl '/blog'
{% endhighlight %}
… then make sure that you access the site at:
{% highlight bash %}
http://localhost:4000/blog/index.html
{% endhighlight %}
It won’t work to just access:
{% highlight bash %}
http://localhost:4000/blog
{% endhighlight %}
## Configuration problems
@ -74,7 +90,9 @@ problems.
If your link has characters that need to be escaped, you need to use
this syntax:
`![Alt text](http://yuml.me/diagram/class/[Project]->[Task])`
{% highlight text %}
![Alt text](http://yuml.me/diagram/class/[Project]->[Task])
{% endhighlight %}
If you have an empty tag, i.e. `<script src="js.js"></script>`, Maruku
transforms this into `<script src="js.js" />`. This causes problems in

24
site/_posts/2012-07-01-variables.md
View File

@ -13,11 +13,12 @@ following is a reference of the available data.
## Global Variables
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
<td>Variable</td>
<td>Description</td>
<th>Variable</th>
<th>Description</th>
</tr>
</thead>
<tbody>
@ -61,14 +62,16 @@ following is a reference of the available data.
</tr>
</tbody>
</table>
</div>
## Site Variables
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
<td>Variable</td>
<td>Description</td>
<th>Variable</th>
<th>Description</th>
</tr>
</thead>
<tbody>
@ -132,14 +135,16 @@ following is a reference of the available data.
</tr>
</tbody>
</table>
</div>
## Page Variables
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
<td>Variable</td>
<td>Description</td>
<th>Variable</th>
<th>Description</th>
</tr>
</thead>
<tbody>
@ -229,6 +234,7 @@ following is a reference of the available data.
</tr>
</tbody>
</table>
</div>
<div class="note">
<h5>ProTip™: Use custom front-matter</h5>
@ -244,11 +250,12 @@ following is a reference of the available data.
## Paginator
<div class="mobile-side-scroller">
<table>
<thead>
<tr>
<td>Variable</td>
<td>Description</td>
<th>Variable</th>
<th>Description</th>
</tr>
</thead>
<tbody>
@ -290,6 +297,7 @@ following is a reference of the available data.
</tr>
</tbody>
</table>
</div>
<div class="note info">
<h5>Paginator variable availability</h5>

62
site/css/grid.css
View File

@ -1,62 +0,0 @@
.content {
width: 978px;
margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
float: left;
display: inline;
margin-left: 30px;
}
.grid1 {
width: 54px;
}
.grid2 {
width: 138px;
}
.grid3 {
width: 222px;
}
.grid4 {
width: 306px;
}
.grid5 {
width: 390px;
}
.grid6 {
width: 474px;
}
.grid7 {
width: 558px;
}
.grid8 {
width: 642px;
}
.grid9 {
width: 726px;
}
.grid10 {
width: 810px;
}
.grid11 {
width: 894px;
}
.first {
margin-left: 0;
clear: left;
}
/* clearfix */
.clear:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clear {
zoom: 1;
} /* IE6 */
*:first-child+html .clear {
zoom: 1;
} /* IE7 */

110
site/css/gridism.css Normal file
View File

@ -0,0 +1,110 @@
/*
* Gridism
* A simple, responsive, and handy CSS grid by @cobyism
* https://github.com/cobyism/gridism
*/
/* Preserve some sanity */
.grid,
.unit {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Set up some rules to govern the grid */
.grid {
display: block;
clear: both;
}
.grid .unit {
float: left;
width: 100%;
padding: 10px;
}
/* This ensures the outer gutters are equal to the (doubled) inner gutters. */
.grid .unit:first-child { padding-left: 20px; }
.grid .unit:last-child { padding-right: 20px; }
/* Nested grids already have padding though, so let’s nuke it */
.unit .unit:first-child { padding-left: 0; }
.unit .unit:last-child { padding-right: 0; }
.unit .grid:first-child > .unit { padding-top: 0; }
.unit .grid:last-child > .unit { padding-bottom: 0; }
/* Let people nuke the gutters/padding completely in a couple of ways */
.no-gutters .unit,
.unit.no-gutters {
padding: 0 !important;
}
/* Wrapping at a maximum width is optional */
.wrap .grid,
.grid.wrap {
max-width: 978px;
margin: 0 auto;
}
/* Width classes also have shorthand versions numbered as fractions
* For example: for a grid unit 1/3 (one third) of the parent width,
* simply apply class="w-1-3" to the element. */
.grid .whole, .grid .w-1-1 { width: 100%; }
.grid .half, .grid .w-1-2 { width: 50%; }
.grid .one-third, .grid .w-1-3 { width: 33.3332%; }
.grid .two-thirds, .grid .w-2-3 { width: 66.6665%; }
.grid .one-quarter, .grid .w-1-4 { width: 25%; }
.grid .three-quarters, .grid .w-3-4 { width: 75%; }
.grid .one-fifth, .grid .w-1-5 { width: 20%; }
.grid .two-fifths, .grid .w-2-5 { width: 40%; }
.grid .three-fifths, .grid .w-3-5 { width: 60%; }
.grid .four-fifths, .grid .w-4-5 { width: 80%; }
.grid .golden-small, .grid .w-g-s { width: 38.2716%; } /* Golden section: smaller piece */
.grid .golden-large, .grid .w-g-l { width: 61.7283%; } /* Golden section: larger piece */
/* Utility classes */
.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.pull-left { float: left; }
.pull-right { float: right; }
.show-on-mobiles {
display: none;
}
/* Responsive Stuff */
@media screen and (max-width: 568px) {
/* Stack anything that isn’t full-width on smaller screens */
.grid .unit {
width: 100% !important;
padding-left: 20px;
padding-right: 20px;
}
.unit .grid .unit {
padding-left: 0px;
padding-right: 0px;
}
/* Sometimes, you just want to be different on small screens */
.center-on-mobiles {
text-align: center !important;
}
.hide-on-mobiles {
display: none !important;
}
.show-on-mobiles {
display: block !important;
}
a .show-on-mobiles {
display: inline !important;
}
}
/* Expand the wrap a bit further on larger screens */
/*@media screen and (min-width: 1180px) {
.wrap .grid {
max-width: 1180px;
margin: 0 auto;
}
}*/

337
site/css/style.css
View File

@ -1,5 +1,11 @@
/* Base */
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 21px;
@ -11,6 +17,18 @@ body {
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.clear {
display: block;
}
.clear:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Sections */
body > header, body > section, body > footer {
@ -19,34 +37,16 @@ body > header, body > section, body > footer {
clear: both;
}
.content {
padding: 20px 0;
}
/* Header */
body > header {
padding: 40px 0 10px;
}
body > header .content {
padding: 0;
}
body > header h1 img {
margin-left: -30px;
body > header h1, body > header nav {
display: inline-block;
}
body > header h1 span {
display: none;
}
/* Navigation */
nav {
margin-top: 52px;
}
nav ul {
padding: 0;
margin: 0;
@ -54,10 +54,17 @@ nav ul {
nav li {
display: inline-block;
margin-left: 10px;
}
nav li a {
.main-nav {
margin-top: 52px;
}
.main-nav li {
margin-right: 10px;
}
.main-nav li a {
border-radius: 5px;
font-weight: 800;
font-size: 14px;
@ -69,19 +76,65 @@ nav li a {
-webkit-transition: all .25s;
}
nav li a:hover {
.main-nav li a:hover {
background: #252525;
box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
nav li.current a {
.main-nav li.current a {
background: #fc0;
color: #222;
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.mobile-nav ul {
overflow: hidden;
width: 100%;
display: table;
}
.mobile-nav a {
float: left;
width: 100%;
background: #333;
color: #fc0;
text-align: center;
text-transform: uppercase;
font-size: 14px;
font-weight: 800;
padding: 5px 0;
border-radius: 5px;
}
.mobile-nav .current a {
background: #fc0;
color: #222;
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.mobile-nav li {
display: table-cell;
width: 33.3%;
padding: 8px;
}
@media (max-width: 768px){
.main-nav ul {
text-align: right;
}
}
@media (max-width: 720px){
.main-nav .show-on-mobiles {
display: inline;
}
.main-nav .hide-on-mobiles {
display: none;
}
}
/* Footer */
body > footer {
@ -96,50 +149,60 @@ body > footer a {
color: #fff;
}
body > footer .align-right p, body > footer .align-right img {
body > footer .align-right p, body > footer img {
display: inline-block;
}
body > footer .align-right img {
body > footer img {
position: relative;
top: 14px;
top: 8px;
margin-left: 5px;
width: 100px;
height: 30px;
opacity: .8;
padding: 1px;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
transition: opacity .2s;
}
/* Utilities */
.align-left {
text-align: left;
body > footer a:hover img {
opacity: 1;
}
.align-right {
text-align: right;
@media (max-width: 568px){
footer .one-third p {
margin-bottom: 0;
}
footer .two-thirds p {
margin-top: -20px;
}
}
.align-center {
text-align: center;
}
/* Intro */
/* Sections */
.intro .content {
.intro .unit {
padding: 10px 0 40px;
}
.intro p {
font-size: 3.2em;
font-size: 1.75em;
line-height: 1em;
margin: 0;
}
.features .content {
padding: 20px 0 40px;
@media (min-width: 569px){
.intro p {
font-size: 3.2em;
}
}
/* Quickstart */
.quickstart {
background: #3F1F1F;
color: #fff;
margin: 60px 0 80px;
margin: 60px 0;
box-shadow: inset 0 3px 10px rgba(0,0,0,.4);
}
@ -147,80 +210,46 @@ body > footer .align-right img {
padding: 0px 0;
}
.quickstart .code {
margin: -30px 0;
float: right;
}
.quickstart h4 {
margin: 48px 0 0;
font-size: 28px;
font-size: 24px;
line-height: 24px;
margin-top: 20px;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.free-hosting .content {
/*margin-bottom: 40px;*/
position: relative;
.quickstart .code {
font-size: 12px;
display: block;
margin: 0 0 -30px;
}
.free-hosting .pane {
background: #444;
border-radius: 10px;
padding: 40px 70px 30px;
/*color: #222;*/
text-shadow: none;
}
.free-hosting img {
float: left;
margin: -20px 40px -40px -20px;
}
.free-hosting h2 {
/*font-weight: 800;*/
}
.free-hosting p,
.free-hosting a {
font-weight: inherit;
}
.free-hosting p {
margin: 0.75em;
}
.free-hosting a {
/*color: #c00;*/
}
.free-hosting .content:after {
content: " ";
float: right;
background: url(../img/footer-arrow.png) top left no-repeat;
width: 73px;
height: 186px;
position: absolute;
right: 30px;
bottom: -60px;
@media (min-width: 768px){
.quickstart .code {
font-size: 18px;
margin: -30px 0;
float: right;
}
.quickstart h4 {
margin: 50px 0 0;
text-align: center;
}
}
/* Code */
.quickstart .code {
display: block;
background: #3d3d3d;
border-radius: 5px;
padding: 0;
font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
line-height: 1.3em;
box-shadow: 0 5px 30px rgba(0,0,0,.3);
}
.quickstart .code .title {
display: block;
text-align: center;
margin: 0;
margin: 0 20px;
padding: 5px 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-radius: 5px 5px 0 0;
box-shadow: box-shadow: 0 3px 10px rgba(0,0,0,.5);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
@ -242,6 +271,10 @@ body > footer .align-right img {
.quickstart .code .shell {
padding: 20px;
text-shadow: none;
margin: 0 20px;
background: #3d3d3d;
border-radius: 0 0 5px 5px;
box-shadow: 0 5px 30px rgba(0,0,0,.3);
}
.quickstart .code .line {
@ -270,6 +303,62 @@ body > footer .align-right img {
color: #888;
}
/* Free Hosting */
.free-hosting .pane {
background: #444;
border-radius: 10px;
text-shadow: none;
position: relative;
padding: 0 20px 30px;
}
.free-hosting img {
margin: -30px 0 0;
width: 180px;
height: 150px;
}
.free-hosting h2 {
font-size: 28px;
}
.free-hosting p,
.free-hosting a {
font-size: 16px;
}
.free-hosting p {
margin: .75em 0;
}
@media (min-width: 768px){
.free-hosting img {
float: left;
margin: -20px -30px -30px -50px;
width: 300px;
height: 251px;
}
.free-hosting .pane-content {
margin-top: 35px;
padding-right: 30px;
}
.free-hosting p,
.free-hosting a {
font-size: 18px;
}
.free-hosting .pane:after {
content: " ";
float: right;
background: url(../img/footer-arrow.png) top left no-repeat;
width: 73px;
height: 186px;
position: absolute;
right: 0;
bottom: -30px;
}
}
/* Documentation */
.docs .content {
@ -279,9 +368,24 @@ body > footer .align-right img {
.docs article {
background: #444;
border-radius: 10px;
padding: 40px 40px 30px;
padding: 20px;
margin: 0 10px;
box-shadow: 0 3px 10px rgba(0,0,0,.1);
min-height: 800px;
font-size: 16px;
}
@media (max-width: 568px){
.docs article {
margin: 0;
}
}
@media (min-width: 768px){
.docs article {
padding: 40px 40px 30px;
font-size: 21px;
}
}
.docs aside {
@ -328,6 +432,7 @@ body > footer .align-right img {
padding-top: 40px;
position: relative;
background: url(../img/article-footer.png) top center no-repeat;
margin: 40px -20px 10px;
}
.section-nav > div {
@ -391,6 +496,9 @@ body > footer .align-right img {
cursor: default;
}
.docs-nav-mobile select {
width: 100%;
}
/* Code Highlighting */
@ -401,11 +509,17 @@ pre, code {
margin: 0;
padding: 0;
font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
font-size: 16px;
font-size: 14px;
padding: 0 .5em;
line-height: 1.8em;
}
@media (min-width: 768px){
pre, code {
font-size: 16px;
}
}
.highlight, p > pre, p > code, p > nobr > code, li > code {
background: #333;
color: #fff;
@ -421,7 +535,6 @@ pre, code {
overflow: scroll;
}
/* HTML Elements */
h1, h2, h3, h4, h5, h6 {
@ -586,7 +699,7 @@ code.option, code.flag, code.filter, code.output {
.note {
margin: 30px 0;
margin-left: -50px;
margin-left: -30px;
padding: 20px 20px 24px;
padding-left: 50px;
border-radius: 0px 5px 5px 0px;
@ -603,6 +716,18 @@ code.option, code.flag, code.filter, code.output {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e6d42', endColorstr='#5c4e35',GradientType=0 );
}
@media (max-width: 568px){
.note {
margin-right: -30px;
}
}
@media (min-width: 768px){
.note {
margin-left: -50px;
}
}
.note:before {
content: "";
position: absolute;
@ -695,3 +820,13 @@ code.option, code.flag, code.filter, code.output {
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
/* Responsive tables */
@media (max-width: 768px){
.mobile-side-scroller {
overflow-x: scroll;
margin: 0 -40px;
padding: 0 10px;
}
}

BIN
site/img/footer-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
site/img/octojekyll.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 30 KiB

94
site/index.html
View File

@ -5,25 +5,27 @@ overview: true
---
<section class="intro">
<div class="content">
<p class="first">Transform your plain text into static websites and blogs. <br />So easy, <strong>it&rsquo;s scary</strong>.</p>
<div class="grid">
<div class="unit whole center-on-mobiles">
<p class="first">Transform your plain text into static&nbsp;websites and&nbsp;blogs.</p>
</div>
</div>
</section>
<section class="features">
<div class="content">
<div class="grid4 first">
<div class="grid">
<div class="unit one-third">
<h2>Simple</h2>
<p>
No more databases, comment moderation, or pesky updates to install—just <em>your content</em>.
</p>
<a href="{% post_url 2012-07-01-usage %}" class="">How Jekyll works &rarr;</a>
</div>
<div class="grid4">
<div class="unit one-third">
<h2>Static</h2>
<p><a href="http://daringfireball.net/projects/markdown/">Markdown</a> (or <a href="http://textile.sitemonks.com/">Textile</a>), <a href="http://liquidmarkup.org/">Liquid</a>, HTML <span class="amp">&amp;</span> CSS go in. Static sites come out ready for deployment.</p>
<a href="{% post_url 2012-07-01-templates %}" class="">Jekyll template guide &rarr;</a>
</div>
<div class="grid4">
<div class="unit one-third">
<h2>Blog-aware</h2>
<p>
Permalinks, categories, pages, posts, and custom layouts are all first-class citizens here.
@ -34,49 +36,55 @@ overview: true
</div>
</section>
<section class="quickstart">
<div class="content">
<div class="grid5 first">
<h4>Get up and running <em>in seconds</em>.</h4>
<div class="grid">
<div class="unit golden-small center-on-mobiles">
<h4>Get up and running <em>in&nbsp;seconds</em>.</h4>
</div>
<div class="code">
<p class="title">Quick-start Instructions</p>
<div class="shell">
<p class="line">
<span class="path">~</span>
<span class="prompt">$</span>
<span class="command">gem install jekyll</span>
</p>
<p class="line">
<span class="path">~</span>
<span class="prompt">$</span>
<span class="command">jekyll new my-awesome-site</span>
</p>
<p class="line">
<span class="path">~</span>
<span class="prompt">$</span>
<span class="command">cd my-awesome-site</span>
</p>
<p class="line">
<span class="path">~/my-awesome-site</span>
<span class="prompt">$</span>
<span class="command">jekyll serve</span>
</p>
<p class="line">
<span class="output"># => Now browse to http://localhost:4000</span>
</p>
</div>
<div class="unit golden-large code">
<p class="title">Quick-start Instructions</p>
<div class="shell">
<p class="line">
<span class="path">~</span>
<span class="prompt">$</span>
<span class="command">gem install jekyll</span>
</p>
<p class="line">
<span class="path">~</span>
<span class="prompt">$</span>
<span class="command">jekyll new my-awesome-site</span>
</p>
<p class="line">
<span class="path">~</span>
<span class="prompt">$</span>
<span class="command">cd my-awesome-site</span>
</p>
<p class="line">
<span class="path">~/my-awesome-site</span>
<span class="prompt">$</span>
<span class="command">jekyll serve</span>
</p>
<p class="line">
<span class="output"># => Now browse to http://localhost:4000</span>
</p>
</div>
</div>
<div class="clear"></div>
</div>
</section>
<section class="free-hosting">
<div class="content">
<img src="img/octojekyll.png" alt="Free Jekyll hosting on GitHub Pages">
<div class="pane">
<h2><strong>Free hosting</strong> with GitHub Pages</h2>
<p>Sick of dealing with hosting companies? <a href="http://pages.github.com/">GitHub Pages</a> are <em>powered by Jekyll</em>, so you can easily deploy your site using GitHub for free&mdash;<a href="https://help.github.com/articles/setting-up-a-custom-domain-with-pages">custom domain name</a> and all.</p>
<a href="http://pages.github.com/" class="">Learn more about GitHub Pages &rarr;</a>
<div class="clear"></div>
<div class="grid">
<div class="unit whole">
<div class="grid pane">
<div class="unit whole center-on-mobiles">
<img src="img/octojekyll.png" alt="Free Jekyll hosting on GitHub Pages">
<div class="pane-content">
<h2 class="center-on-mobiles"><strong>Free hosting</strong> with GitHub Pages</h2>
<p>Sick of dealing with hosting companies? <a href="http://pages.github.com/">GitHub Pages</a> are <em>powered by Jekyll</em>, so you can easily deploy your site using GitHub for free&mdash;<a href="https://help.github.com/articles/setting-up-a-custom-domain-with-pages">custom domain name</a> and&nbsp;all.</p>
<a href="http://pages.github.com/" class="">Learn more about GitHub Pages &rarr;</a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</section>