Mercurial > piecrust2
changeset 243:26e59f837558
docs: Add embryo of a documentation website.
line wrap: on
line diff
--- a/.hgignore Wed Feb 18 18:35:03 2015 -0800 +++ b/.hgignore Thu Feb 19 08:09:17 2015 -0800 @@ -6,6 +6,10 @@ build/messages/_cache build/messages/_counter dist +docs/_cache +docs/_counter +docs/bower_components +docs/node_modules piecrust.egg-info piecrust/__version__.py
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/assets/css/piecrust.less Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,285 @@ +// Imports +// Core variables and mixins +@import "../../bower_components/bootstrap/less/variables.less"; +@import "../../bower_components/bootstrap/less/mixins.less"; + +// Reset and dependencies +@import "../../bower_components/bootstrap/less/normalize.less"; +@import "../../bower_components/bootstrap/less/print.less"; +@import "../../bower_components/bootstrap/less/glyphicons.less"; + +// Core CSS +@import "../../bower_components/bootstrap/less/scaffolding.less"; +@import "../../bower_components/bootstrap/less/type.less"; +@import "../../bower_components/bootstrap/less/code.less"; +@import "../../bower_components/bootstrap/less/grid.less"; +@import "../../bower_components/bootstrap/less/forms.less"; +@import "../../bower_components/bootstrap/less/buttons.less"; + +// Components +@import "../../bower_components/bootstrap/less/component-animations.less"; +@import "../../bower_components/bootstrap/less/navs.less"; +@import "../../bower_components/bootstrap/less/navbar.less"; + +// Utility classes +@import "../../bower_components/bootstrap/less/utilities.less"; +@import "../../bower_components/bootstrap/less/responsive-utilities.less"; + + +// Variables +@font-size-base: 17px; +@font-family-base: @font-family-serif; + + +// Dividers +.pc-divider-img(@offset-x, @offset-y) { + .hidden-xs(); + content: " "; + background-image: url("/img/dividers.png"); + background-repeat: no-repeat; + background-position: -@offset-x -@offset-y; + display: inline-block; + width: 100px; + height: 50px; +} +.pc-divider(@offset) { + &::before { + .pc-divider-img(0, @offset); + margin-right: 0.5em; + } + &::after { + .pc-divider-img(100px, @offset); + margin-left: 0.5em; + } +} + +.pc-divider1() { + .pc-divider(0); +} + +.pc-divider1-white() { + .pc-divider(50px); +} + +.pc-divider2() { + .pc-divider(100px); +} + +.pc-divider3() { + .pc-divider(150px); +} + + +// Icons +@pc-icon-width: 128px; + + +// Decorators +.pc-decorator(@img-name, @margin-left) { + margin-left: @pc-icon-width; + &::before { + content: " "; + background-image: url(@img-name); + background-repeat: no-repeat; + display: block; + float: left; + width: 128px; + height: 92px; + margin-left: -(@pc-icon-width + @margin-left); + } +} + +.pc-banner(@img-name) { + background-image: url(@img-name); + background-repeat: no-repeat; + background-position: center center; + background-size: cover; +} + +.pc-banner-header(@img-name) { + .pc-banner(@img-name); + padding: 3em 0; + margin-bottom: 3em; + text-align: center; + color: black; +} + +// Customizations +.navbar { + margin-bottom: 0; +} +a.navbar-brand { + font-family: Lobster, serif; +} + +h1 { + font-family: Lobster, serif; + font-size: 2em; + margin-top: 0; + margin-bottom: 0.375em; + text-shadow: #fff 0 0 1em, #fff 0 0 0.1em; +} +h1.site-title { + font-size: 5em; + text-align: center; +} +@media (min-width: @screen-sm-min) { + h1 { + font-size: 3em; + } +} +@media (min-width: @screen-md-min) { + h1 { + font-size: 4em; + } +} + +h2 { + font-family: Lobster, serif; + font-size: 2.2em; +} + +blockquote { + font-size: @font-size-base; + border-left: 5px solid @brand-info; +} +@media (min-width: @screen-sm-min) { + blockquote { + .pc-decorator('/img/cake.png', 5px + @line-height-computed); + } +} + +header.page-title h1 { + .pc-divider(150px); + text-align: center; + margin: 0.5em auto 1em; +} + +footer { + .container; + font-size: 0.8em; + text-align: center; + margin: 2em; +} + + +// Splash-page +header.splash { + .pc-banner("/img/header2-bg.jpg"); + color: black; +} +.splash { + h1 { + .text-hide(); + } + + h2 { + .pc-divider2(); + margin: 1em 0; + text-align: center; + } + + .splash-logo { + background-image: url('/img/logo.png'); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; + height: 275px; + } + @media (min-width: @screen-sm-min) { + .splash-logo { + height: 325px; + } + } + @media (min-width: @screen-md-min) { + .splash-logo { + height: 375px; + } + } + + .splash-main { + font-size: 1.1em; + margin: 1em 0.5em 0 0.5em; + padding-bottom: 2em; + + p { + margin: 0; + text-shadow: #fff 0 0 1em, #fff 0 0 0.1em; + } + } + @media (min-width: @screen-sm-min) { + .splash-main { + font-size: 1.3em; + margin: 1em 2em 0 2em; + } + } + @media (min-width: @screen-md-min) { + .splash-main { + font-size: 1.5em; + width: 50%; + margin: 1em auto 0 auto; + } + } + + .splash-icon { + display: block; + margin: 0 auto; + } +} +.splash.splash-chalkboard { + background: url("/img/chalkboard-bg.jpg"); + color: white; + padding: 0.25em 0 3em 0; + margin: 0; + + h2 { + .pc-divider1-white(); + } +} + + +// Getting-Started +header.tutorial { + .pc-banner-header("/img/header5-bg.jpg"); +} + + +// Documentation +header.documentation { + .pc-banner-header("/img/header10-bg.jpg"); +} + +.pc-docnav() { + list-style-type: none; + padding: 0; +} + +ul.doc-level1 { + .pc-docnav(); + + &>li { + margin-bottom: 1em; + } + &>li>a { + font-size: 1.1em; + font-weight: bold; + } +} + +ul.doc-level2 { + .pc-docnav(); +} + + +// Code +header.code { + .pc-banner-header("/img/header7-bg.jpg"); +} + + +// Support +header.support { + .pc-banner-header("/img/header9-bg.jpg"); +} + +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/assets/humans.txt Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,14 @@ +# humanstxt.org/ +# The humans responsible & technology colophon + +# AUTHORS + +Ludovic Chabant -- @ludovicchabant + +# TECHNOLOGY + +PieCrust -- http://bolt80.com/piecrust + +# THANKS + +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/assets/js/piecrust.js.concat Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,7 @@ +path_mode: absolute +files: + - bower_components/jquery/dist/jquery.js + - bower_components/bootstrap/js/transition.js + - bower_components/bootstrap/js/collapse.js + - bower_components/bootstrap/js/scrollspy.js +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/assets/robots.txt Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,6 @@ +# www.robotstxt.org/ + +# Allow crawling of all content +User-agent: * +Disallow: +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/config.yml Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,51 @@ +# Basic stuff. +site: + title: PieCrust + author: Ludovic Chabant + tagline: Freshly baked sites & documents since 2006 + description: A static website generator and flat-file CMS + pretty_urls: true + sources: + docs: + type: ordered + data_endpoint: site.docs + default_layout: doc + routes: + - + url: /docs/%path:slug% + source: docs + func: docurl(path) + +baker: + assets_dirs: + assets: + # Ignore stuff that will get concatenated into the main JS file. + ignore: js/piecrust + +smartypants: + enable: true + +# This is 2015, come on Markdown. +markdown: + extensions: abbr, fenced_code, footnotes, smart_strong + +# Need Foundation for CSS/JS. Install with Bower. +sass: + load_paths: + - bower_components/foundation/scss + +# Using the Sass compiler directly now, but here's how it would look +# like if we were using the whole Compass machinery instead. +compass: + enable: false + options: --css-dir %out_dir%/css --generated-images-path %out_dir%/img + +# Config variants. +variants: + # Enable compressors when baking the docs for publishing. + dist: + baker: + assets_dirs: + assets: + processors: all +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/docs/00__index.md Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,27 @@ +--- +title: Documentation +layout: doc +--- + +Using PieCrust is mostly a matter of editing text files and, sometimes, running +commands in a terminal. Make sure you go through the [Getting Started][1] page, +if only to install PieCrust on your system. + + [1]: {{pcurl('getting-started')}} + + +Here are some common pages most people will want to read: + + +### Creating websites + +* You can follow the [tutorial][2] for creating a simple blog website. +* The are pages explaining how a [website is organized on disk][3], and how to + [configure it][4]. + + + [2]: {{pcurl('tutorial/your-first-blog')}} + [3]: {{pcurl('general/creating-websites')}} + [4]: {{pcurl('general/website-config')}} + +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/pages/_index.md Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,109 @@ +--- +title: PieCrust +layout: splash +--- + +---slogan--- + +Baking fresh websites & documents since 2006 + + +---main--- + +**PieCrust** is a static website generator and flat-file CMS. No complex setup, +databases, or administrative panels -- it's all text files. Simple, beautiful, +and yummy. + +*[CMS]: Content Management System + + +---simple--- + +### Store in the cellar + +Because all your site's content and configuration is stored in simple text +files, it fits nicely in a revision control system like Git or Mercurial. It's +not only more practical, but also safer! + + +---bake--- + +### Serve on the counter + +Although it can run a flat-file CMS, **PieCrust** is designed as a static +website generator. This means it can "bake" your website into simple HTML files +that you can publish with a minimum of resources on your server. A sudden spike +of visitors can't crash your MySQL database when you don't need one! + + +---ingr--- + +### Familiar ingredients + +**PieCrust** uses all the ingredients you already like, such as Markdown and +Textile for formatting, or Jinja2 and Mustache for templating. + + +---oven--- + +### Fully functioning oven + +**PieCrust** comes out-of-the-box with an asset processing pipeline, capable of +handling most of your files -- Less/Sass processing, CSS and JS +minification, concatenation, and more. + + +---cooks--- + +### Several cooks in the kitchen + +If you're dealing with advanced scenarios, **PieCrust** will gladly interoperate +with other tools like Grunt, Compass, Bower, and many more. + + +---fast--- + +### Super-fast service + +Because **PieCrust** is also designed as a lightweight (flat-file) CMS, it can +render your pages in less than a few milliseconds in most cases. It means that +previewing or generating your website is super fast! + + +---carte--- + +### A La Carte Content + +**PieCrust** comes with a powerful system of page sources, routes, and taxonomies. +This means you can completely customize how you want to author your content, and +how it gets exposed. + + +---entrees--- + +### Multiple entrées + +Your pages are not limited to one piece of content that you place in the center +of your layout. You can define other “text segments” like a page-specific menu +or sidebar text that you can insert in different places in the layout. + + +---startnow--- + +## Get Started Now + +You can follow the detailed instructions on the [Getting Started][1] +page, or, if you're already experienced in the culinary arts: + + virtualenv pcenv + <activate pcenv> + pip install piecrust + chef init mynewwebsite + cd mynewwebsite + chef prepare post my-first-post + chef serve + chef bake + + + [1]: {{pcurl('getting-started')}} +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/pages/code.md Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,5 @@ +--- +title: Code +header_class: code +--- +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/pages/getting-started.md Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,167 @@ +--- +title: Getting Started +header_class: tutorial +--- + +This quick tutorial will show you how to create a simple blog with PieCrust. + +> If you're already an experienced cook, here's the rundown: +> +> virtualenv pcenv +> <activate pcenv> +> pip install piecrust +> chef init mywebsite +> cd mywebsite +> chef prepare post my-first-post +> chef serve +> chef bake + + +## Installation + +The first step is obviously to get PieCrust installed on your machine. + +You'll need Python 3.4 at least for this. Note that it can live side by side +with Python 2.x. On Windows or MacOSX, you can use the [official Python +installer][1]. On main Linux distros, you can use your system's package manager +to install it. If you're on a more obscure system, or if you want to use +alternative means like Homebrew or something, you probably don't need help for +this! + +Now we can start running in a command line. On MacOSX, that's the Terminal app, +and on Windows that's the Command Prompt. + + +### Global installation + +Python 3 comes with a [package manager][2] called `pip`, with which you can install, +update, and uninstall Python programs like PieCrust. Just run: + + pip install piecrust + +This will install PieCrust globally on your system. You may want to install it +using a *virtual environment* instead, though. See the next section for that. + +> #### Permission Errors +> +> If you get some permission errors, you may have to run that command as an +> administrator. That would be `sudo pip install piecrust` on MacOSX and Linux, or +> running the Command Prompt as an Administrator on Windows. + +You should now have PieCrust installed! You can check that it works by typing: + + chef --version + +If everything's fine it should print `{{piecrust.version}}` (the latest +version as of this writing). + + +### Using virtual environements + +Although very straightforward, the previous section installs PieCrust globally +on your system. This may be OK, but could also cause problems if you have other +Python software that share dependencies with PieCrust, but with different +versions. And then there's the issue of installing PieCrust in environments in +which you don't have administrator access. + +Thankfully, `pip` supports a whole variety of scenarios, and [another +utility][3], called `virtualenv` enables even more of them. + +* If you don't have it yet, install `virtualenv` with `pip install + virtualenv`, or check with your administrators to have it. Most web hosts + provide it. +* Run `virtualenv pcenv`. This will create a directory called `pcenv` that + contains a whole new Python environment, separate from your system's Python + environment. +* Activate that environment with `sh pcenv/bin/activate.sh` (on Linux or + MacOSX) or `pcenv\Scripts\activate` (on Windows). The new environment will + now be active for as long as your current command prompt is active. +* Now install PieCrust with `pip install piecrust`. This will install it in + that environment, leaving your system's Python clean of any of PieCrust's + dependencies. + + +## Create an empty website + +The `chef` command is the main PieCrust utility. You can read about it on the +[command-line overview][cmdline] page. The first thing to do is to ask it to +create a basic website structure: + + chef init mywebsite + +This should create a directory called `mywebsite`. There should be a +`config.yml` file in there. Get into that directory: + + cd mywebsite + +Once you're inside a website's root directory, the `chef` command will be able +to do a lot of different things. + + +## Create new content + +Let's start by creating a new page: + + chef prepare page about-me + +It will tell you that it just created a file named `pages/about-me.md`. Go ahead +and edit that in your favorite text editor, and write some text, or change the +title that was defined for you in the header part. For more information on +writing content, see the documentation about [creating pages][cnt]. + +Now let's write a blog post: + + chef prepare post my-new-blog + +It will again tell you about the file it just created. This time it's in the +`posts` folder, and has a name that follows some date/title kind of naming +convention. You don't have to use `chef prepare` to create content for your +website, but for things like blog posts it's a lot easier to let it insert +today's date in the filename. + + +## Preview content + +Time to preview what we just did! Simply type: + + chef serve + +Open your favorite web browser and navigate to the URL that `chef` is listening +on, which by default is `localhost:8080`. You should see some placeholder text +along with today's blog post that you just created, with a simple barebones theme. + +> #### Alternate port +> +> If you already have some other things running on port 8080, you can tell +> PieCrust to use a different one with the `-p` option. + +The `about-me` page isn't shown because you're looking at the index page, but +you would see it if you navigated to `localhost:8080/about-me`. + + +## Bake and publish + +Now it's time to bake this new site and publish it somewhere. There are many +ways to do that, as shown in the documentation about [baking][bake], but here's +a quick way. Run: + + chef bake + +This will bake the website into static files, stored under the `_counter` +directory. At this point, you can upload all the contents of that directory to +your web server. When that's done, you should be able to see the exact same +website being served from there. + + +That's it! This is an extremely quick tour of PieCrust. Read the +[documentation][doc] to learn more. + + +[1]: https://www.python.org/downloads/ +[2]: https://pip.pypa.io/en/latest/ +[3]: https://virtualenv.pypa.io/en/latest/ +[doc]: {{pcurl('docs')}} +[cmdline]: {{pcurl('docs/general/command-line-overview')}} +[cnt]: {{pcurl('docs/content/creating-pages')}} +[bake]: {{pcurl('docs/publish')}} +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/pages/support.md Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,6 @@ +--- +title: Support +header_class: support +--- + +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/raw/attribution.md Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,38 @@ + +# Photos + +* [Pie crust][img1] by [Robert Couse Baker][1] +* [Home made apple pie][img2] by [Robert S. Donovan][2] +* [Thanksgiving prep begins][img3] by [Dennis Wilkinson][3] +* [Summer peach cake][img4] by [William Andrus][4] +* [Of love and cooking dough][img5] by [Sarah R][5] +* [Rollin'][img6] +* [Cherry pie][img7] by [Ginny][7] +* [Apple pie][img8] + + + [img1]: https://www.flickr.com/photos/29233640@N07/6063510527 + [1]: https://www.flickr.com/photos/29233640@N07/ + + [img2]: https://www.flickr.com/photos/booleansplit/3036470963 + [2]: https://www.flickr.com/photos/booleansplit/ + + [img3]: https://www.flickr.com/photos/djwtwo/8206822777 + [3]: https://www.flickr.com/photos/djwtwo/ + + [img4]: https://www.flickr.com/photos/wandrus/6118430479 + [4]: https://www.flickr.com/photos/wandrus + + [img5]: https://www.flickr.com/photos/reid-bee/4847750025 + [5]: https://www.flickr.com/photos/reid-bee + + [img6]: https://www.flickr.com/photos/reid-bee/4847750797/in/photostream/ + + [img7]: https://www.flickr.com/photos/ginnerobot/3684979334 + + [img8]: https://www.flickr.com/photos/djwtwo/15581303453 + + [img9]: https://www.flickr.com/photos/clemsherpa/15757740526 + + [img10]: https://www.flickr.com/photos/benimoto/2109973292 +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/templates/default.html Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,61 @@ +{% import "google.html" as google %} +<!doctype html> +<html> +<head> + <meta charset="utf-8"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <meta name="author" content="Ludovic Chabant"> + <meta name="generator" content="PieCrust {{ piecrust.version }}" /> + <meta name="description" content="PieCrust, a simple website engine and static website generator" /> + + <title>{% if page.title %}{{ page.title }} — {% endif %}PieCrust</title> + {{ google.webfonts('Lobster') }} + <link rel="stylesheet" href="{{ site.root }}css/piecrust.css" type="text/css" /> + <!--[if lt IE 9]> + <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> +</head> +<body data-spy="scroll"> + <div id="wrapper"> + <nav class="navbar navbar-default" role="navigation"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#piecrust-menu"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="{{site.root}}">PieCrust</a> + </div> + <div class="collapse navbar-collapse" id="piecrust-menu"> + <ul class="nav navbar-nav navbar-right"> + <li><a href="{{ pcurl('getting-started') }}">Getting Started</a></li> + <li><a href="{{ pcurl('docs') }}">Documentation</a></li> + <li><a href="{{ pcurl('code') }}">Code</a></li> + <li><a href="{{ pcurl('support') }}">Support</a></li> + </ul> + </div> + </div> + </nav> + {% block header %} + <header{% if page.header_class %} class="{{page.header_class}}"{% endif %}> + <h1>{{ page.title }}</h1> + </header> + {% endblock %} + {% block content %} + <section class="container" id="content"> + {{ content|raw }} + </section> + {% endblock %} + <footer> + <p>©2014 — {{ piecrust.branding|raw }}</p> + </footer> + </div> + {{ piecrust.debug_info|raw }} + <script src="{{ site.root }}js/piecrust.js"></script> + {% if baker.is_baking %} + {{ google.analytics("UA-3426592-10") }} + {% endif %} +</body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/templates/doc.html Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,33 @@ +{% extends "default.html" %} + +{% block header %} +<header class="documentation"> + <h1>{{ page.title }}</h1> +</header> +{% endblock %} + +{% block content %} +<div class="container"> + <section class="col-md-8"> + {{ content|raw }} + </section> + <aside class="col-md-4"> + <ul class="doc-level1"> + {% for p in family.root %} + {% if p.is_dir and p.is_page %} + <li><a href="{{p.url}}">{{p.title}}</a> + <ul class="doc-level2"> + {% for p2 in p.children %} + <li><a href="{{p2.url}}">{{p2.title}}</a></li> + {% endfor %} + </ul> + </li> + {% elif not p.is_dir and p.order %} + <li><a href="{{p.url}}">{{p.title}}</a></li> + {% endif %} + {% endfor %} + </ul> + </aside> +</div> +{% endblock %} +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/templates/google.html Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,32 @@ +{% macro webfonts(fontnames) %} +<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family={{ fontnames }}"> +{% endmacro %} + +{% macro analytics(siteId) %} +<script type="text/javascript"> + + var _gaq = _gaq || []; + _gaq.push(['_setAccount', '{{ siteId }}']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + +</script> +{% endmacro %} + +{% macro adsense(client, name, slot, width, height) %} + <script type="text/javascript"><!-- + google_ad_client = "{{ client }}"; + /* {{ name }} */ + google_ad_slot = "{{ slot }}"; + google_ad_width = {{ width }}; + google_ad_height = {{ height }}; + //--> + </script> + <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> + </script> +{% endmacro %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/templates/splash.html Thu Feb 19 08:09:17 2015 -0800 @@ -0,0 +1,56 @@ +{% extends "default.html" %} + +{% block header %} +<header class="splash"> + <h1>PieCurst</h1> + <div class="splash-logo"> + </div> + <div class="splash-main"> + {{main|safe}} + </div> +</header> +{% endblock %} + +{% block content %} +<section class="splash splash-chalkboard"> + <div class="container"> + <h2>Chef's Features</h2> + <div class="row"> + <div class="col-sm-6 col-md-4"> + <img class="splash-icon" src="/img/cake-white.png" /> + {{simple|safe}} + </div> + <div class="col-sm-6 col-md-4"> + <img class="splash-icon hidden-xs" src="/img/chef-hat-white.png" /> + {{bake|safe}} + </div> + <div class="clearfix visible-sm-block"></div> + <div class="col-sm-6 col-md-4"> + <img class="splash-icon hidden-sm" src="/img/whisk-white.png" /> + {{ingr|safe}} + </div> + <div class="clearfix visible-md-block visible-lg-block"></div> + <div class="col-sm-6 col-md-4"> + {{oven|safe}} + </div> + <div class="clearfix visible-sm-block"></div> + <div class="col-sm-6 col-md-4"> + <img class="splash-icon visible-xs" src="/img/chef-hat-white.png" /> + {{fast|safe}} + </div> + <div class="col-sm-6 col-md-4"> + {{carte|safe}} + </div> + </div> + </div> +</section> +<section class="splash splash-board"> + <div class="container"> + <div class="row"> + <div class="col-xs-12 col-md-8 col-md-offset-2"> + {{startnow|safe}} + </div> + </div> + </div> +</section> +{% endblock %}