Skip to content

Loading…

WIP: Responsive project site #860

Merged
merged 41 commits into from

5 participants

@cobyism
Jekyll member

Just kicking off a pull to improve on the new site design by way of making it a bit more friendly for smaller screens. I don’t anticipate huge portions of the audience will be viewing it on phones or tablets (chances are most people looking up the docs will be on their laptop/desktop, developing with Jekyll and need to look something up), but I’d rather it worked a bit better regardless.

:construction: Very much an early WIP. As it stands, this PR beats the site around a bit with an ugly stick. It’ll all come together eventually though…

soon

@zachgersh

@cobyism throw up a screenshot of your WIP! I want to see what it looks like from the phone / ipad.

@cobyism
Jekyll member

@zachgersh I appreciate your curiosity, but right now these are all mostly structural changes rather than anything worth looking at visually yet. Also, the tablet sized ones will (hopefully) look basically identical to the site as it currently stands—the only thing I really want to re-organize is how the top-level navigation and the docs/secondary navigation works on phones (as well as stacking overview page content when screens aren’t wide enough).

@parkr
Jekyll member

@cobyism Just so you know, we're going to be updating a lot of the content of the docs so you will probably have a painful rebasing/merging in the future (if we want to use built-in GH PR merge here).

@cobyism
Jekyll member

@parkr Thanks for the heads up, but content shouldn’t be an issue. Most of my changes will be to the layout/include files and CSS :grin:

@parkr
Jekyll member

@cobyism Awesome. :-)

@cobyism
Jekyll member

Aight this is getting much closer. Tables still don’t really work on mobiles, but there’s ways around that.

Screenshots are an inherently bad way to share responsive designs with people, so anyone who wants to check this out for themselves should check it out using shapeshifter instead (use the icons on the right to preview the site in different devices :grin:). Shameless plug: shapeshifter is another project of mine, and what I’m using to work on this design.

Would :heart: to hear any feedback people have!

@mattr-
Jekyll member
@cobyism
Jekyll member

@mattr- You mean more like this?

Screen Shot 2013-04-04 at 8 07 15 PM

@mattr-
Jekyll member

Yes! That is awesome!

@cobyism
Jekyll member

Well, we can certainly change that, the downside is that it brings the nav out of line with the thirds sections on the overview page:

Screen Shot 2013-04-04 at 8 48 11 PM

That’s only a small issue though—I do notice I’m hesitant for some other reason I can’t quite put my finger on though, but it’s probably a worthwhile change, since the majority of the time it’s the docs pages people will be looking at. On larger screens some extra space probably wouldn’t go astray either.

@cobyism
Jekyll member

There, made the change. It can always be changed again later if need be :+1:

@mattr-
Jekyll member

hmm. Now I see this on shapeshifter

Screen Shot 2013-04-04 at 3 07 52 PM

which makes me

sad-panda

The original is probably better.

@jwebcat
@cobyism
Jekyll member

@mattr- Do you have your browser viewport zoomed (in or out) at all? If so, what you see won’t be an accurate reflection of the viewport behaviour for tablets/phones. You do highlight a bug for viewport sizes in-between tablet portrait and mobile landscape though, so that’s something I’ll need to fix anyhow—thanks for that :smile:

@jwebcat Thanks for the suggestion, but I have a couple of reservations about doing that for the primary menu. Here’s my reasoning:

  • The navigation for the documentation section is already a dropdown on mobiles, so I’d be very reluctant to make the primary navigation menu into a dropdown on mobiles too. Doing so would mean that two navigation dropdowns are visible at the top of all docs pages—you could combine them, but I feel that keeping them separate and only showing the docs navigation on docs pages is a better option.
  • Chances are, most people land on the overview page, and click through to the documentation—after which I don’t imagine them really need to use the primary navigation again (unless they’re done with the site and want to view the GitHub repo). I imagine it’d be rare people will click back to the overview page once they’re in the docs. Also, since there’s enough space to display all three of these links on tablets anyway, the off-canvas layout would be being implemented just for mobiles. Given this combination of factors, I don’t feel like adding an off-canvas layout for the primary nav is warranted.
  • I’m reluctant to hide the links to the docs, and to the GitHub repo, for another reason though: they’re the two most likely things people will want to do when they land on the main page, and requiring an action to be taken (tapping on the off-canvas layout) to just see that there are direct options available to get to those locations seems like a bad move from a discoverability point of view.

As always, I’d be happy to rethink my position, but I feel like I’d need to hear a really convincing argument for why a different choice would be better for this site :grinning:

@mattr-
Jekyll member

I don't believe I had my viewport zoomed in any way.

With your fixes though, I have massive amounts of :+1: for this. :shipit:

@jwebcat
@cobyism
Jekyll member

@jwebcat The primary menu is already full width at the top on mobiles:

IMG_1239

The way I see it, using an off-canvas layout for this would:

  • take up the exact same amount of space
  • add in an unnecessary step for people to use the menu
  • negatively affect the discoverability of seeing what the primary nav menu contains just by looking.

I might be missing something here, but what is the advantage you see of hiding that behind an off-canvas toggle?

@jwebcat
@cobyism
Jekyll member

it could solve the layout issue on tablets

I’m not sure which layout issue you’re referring to. The bug @mattr- got sorted out by making the menu collapse more intelligently in 972b67c. Is there another spacing issue somewhere on tablets?

I'm wondering why don't you combine the two menus and have the navigate the docs menu a drop-down of the main menu.

I feel quite strongly that the menu for jumping between documentation chapters doesn’t belong in the primary nav. Nesting and hierarchy is the enemy of discoverability, and there are already section headings in the docs navigation to group chapters, so I’m really reluctant to nest all that under yet another level of required interaction to achieve the same net effect.

it also leaves room for
another main menu option(s) as the need arises.

Future flexibility should always be a goal, but we’re not shutting any doors here, so I’d rather design for what I believe the website needs right now. If the need arises, future additions to the site can always be addressed as subsequent issues and pull requests.

@cobyism
Jekyll member

Alright, just pushed some fixes that will (with a wrapper .mobile-side-scroller class around a table) make it so that:

A) Tables on mobiles break out of the column to take up more of the the viewport width. A screenshot:

screen shot 2013-05-02 at 2 08 19 pm

B) Tables that need more room than the viewport allows will be able to be scrolled sideways to view the rest of the information. An example:

jekyll-responsive-tables

Haven’t added the wrapper divs to the rest of the pages yet, but hopefully I’ll get to that later today. Unless I’m missing something, that should be the last thing needing tweaked for making the site responsive.

@parkr
Jekyll member

@cobyism Would you mind rebasing on the current master? I can deal with the merge conflicts if you would prefer not to. Once you've got the wrapper divs for the rest of the pages done, please let me know! Nice work :)

@cobyism
Jekyll member

@parkr Sure thing. No worries, I’ll sort out the conflicts and have it mergeable for you in approximately 2.58 minutes. :grinning:

@cobyism cobyism merge in changes from latest master
conflicts:
- site/_posts/2012-07-01-permalinks.md
- site/css/style.css
- site/index.html
6a57d52
@parkr
Jekyll member

@cobyism You :guitar:, thanks! :octocat:

@parkr parkr added a commit that referenced this pull request
@parkr parkr #583 has been merged, but should wait for #860. 4c7b9cb
@cobyism
Jekyll member

@parkr Aight this should all be good to go. Anything else that turns up can be fixed/tweaked in subsequent pulls :grin:

@parkr
Jekyll member

HUZZAH :cake:

@zachgersh
@parkr
Jekyll member

Just checked this out and it's amazinggggggg

@parkr parkr merged commit 1404a97 into jekyll:master

1 check passed

Details default The Travis build passed
@parkr parkr added a commit that referenced this pull request
@parkr parkr Update history to reflect the merge of #860 1c4f5b4
@cobyism cobyism deleted the unknown repository branch
@cobyism
Jekyll member
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 15, 2013
  1. @cobyism
  2. @cobyism
  3. @cobyism

    more footer tweaks

    cobyism committed
  4. @cobyism
  5. @cobyism
  6. @cobyism
  7. @cobyism
Commits on Apr 4, 2013
  1. @cobyism
  2. @cobyism
  3. @cobyism
  4. @cobyism
  5. @cobyism

    retinafy octojekyll

    cobyism committed
  6. @cobyism
  7. @cobyism
  8. @cobyism

    derp we need one of these

    cobyism committed
  9. @cobyism
  10. @cobyism

    not sure wtf happened here

    cobyism committed
  11. @cobyism
  12. @cobyism
  13. @cobyism
  14. @cobyism

    :lipstick: prettier diff

    cobyism committed
  15. @cobyism

    monospace type tweaks

    cobyism committed
  16. @cobyism
Commits on Apr 5, 2013
  1. @cobyism
  2. @cobyism
Commits on May 2, 2013
  1. @cobyism
  2. @cobyism
  3. @cobyism
  4. @cobyism
  5. @cobyism
  6. @cobyism

    wrappers for permalinks page

    cobyism committed
  7. @cobyism
  8. @cobyism

    merge in changes from latest master

    cobyism committed
    conflicts:
    - site/_posts/2012-07-01-permalinks.md
    - site/css/style.css
    - site/index.html
  9. @cobyism
  10. @cobyism
  11. @cobyism
  12. @cobyism
  13. @cobyism
  14. @cobyism
  15. @cobyism

    derp

    cobyism committed
  16. @cobyism

    update github logo in footer

    cobyism committed
This page is out of date. Refresh to see the latest.
View
2 site/_includes/docs_contents.html
@@ -1,4 +1,4 @@
-<div class="grid2">
+<div class="unit one-fifth hide-on-mobiles">
<aside>
<h4>Getting Started</h4>
<ul>
View
36 site/_includes/docs_contents_mobile.html
@@ -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>
View
20 site/_includes/footer.html
@@ -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>
View
22 site/_includes/header.html
@@ -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>
View
11 site/_includes/primary-nav-items.html
@@ -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>
View
3 site/_includes/top.html
@@ -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" />
View
2 site/_layouts/default.html
@@ -1,6 +1,6 @@
{% include top.html %}
-<body>
+<body class="wrap">
{% include header.html %}
{{ content }}
View
6 site/_layouts/docs.html
@@ -3,9 +3,11 @@
---
<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 }}
View
6 site/_posts/2012-07-01-configuration.md
@@ -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>
View
22 site/_posts/2012-07-01-contributing.md
@@ -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.
View
4 site/_posts/2012-07-01-frontmatter.md
@@ -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>
View
2 site/_posts/2012-07-01-pagination.md
@@ -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>
View
6 site/_posts/2012-07-01-permalinks.md
@@ -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>
View
10 site/_posts/2012-07-01-plugins.md
@@ -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.
View
2 site/_posts/2012-07-01-structure.md
@@ -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>
View
3 site/_posts/2012-07-01-templates.md
@@ -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 %}
-
View
22 site/_posts/2012-07-01-troubleshooting.md
@@ -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
View
24 site/_posts/2012-07-01-variables.md
@@ -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>
View
62 site/css/grid.css
@@ -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 */
View
110 site/css/gridism.css
@@ -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;
+ }
+}*/
View
337 site/css/style.css
@@ -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;
-}
-
-.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;
+.quickstart .code {
+ font-size: 12px;
+ display: block;
+ margin: 0 0 -30px;
}
-.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;
+ }
+}
View
BIN site/img/footer-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN site/img/octojekyll.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
94 site/index.html
@@ -5,25 +5,27 @@
---
<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 @@
</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=