1
0
Fork 0
mirror of https://github.com/middleman/middleman.git synced 2022-11-09 12:20:27 -05:00

cleanup templates, add blog template

This commit is contained in:
Thomas Reynolds 2011-07-25 20:48:49 -07:00
parent 2c3523b94a
commit a50ab8504b
57 changed files with 2377 additions and 842 deletions

View file

@ -9,4 +9,4 @@
- Support YAML front-matter
- Added callback to run code after Compass is configured
- Added support for a compass.config file which is passed directly to Compass
- Blog-aware Feature
- Blog-aware Feature (and project template)

View file

@ -41,16 +41,19 @@ module Middleman
app.set :blog_article_template, "article_template"
end
if !app.build?
$stderr.puts "== Blog: #{app.settings.blog_permalink}"
end
app.get(app.settings.blog_permalink) do
app.get("/#{app.blog_permalink}") do
$stderr.puts "*" * 500
process_request({
:layout => settings.blog_layout,
:layout_engine => settings.blog_layout_engine
:layout => app.blog_layout,
:layout_engine => app.blog_layout_engine
})
# No need for separator on permalink page
body body.gsub!(settings.blog_summary_separator, "")
body body.gsub!(app.blog_summary_separator, "")
end
end

View file

@ -29,14 +29,11 @@ end
# Default template
require "middleman/templates/default"
# XHMTL template
require "middleman/templates/xhtml"
# Blog template
require "middleman/templates/blog"
# HTML5 template
require "middleman/templates/html5"
# Local templates
require "middleman/templates/local"
# Compass templates
# require "middleman/templates/compass"

View file

@ -0,0 +1,17 @@
class Middleman::Templates::Blog < Middleman::Templates::Base
def self.source_root
File.dirname(__FILE__)
end
def build_scaffold
template "blog/config.tt", File.join(location, "config.rb")
template "blog/config.ru", File.join(location, "config.ru")
directory "blog/source", File.join(location, "source")
empty_directory File.join(location, "source", options[:css_dir])
empty_directory File.join(location, "source", options[:js_dir])
empty_directory File.join(location, "source", options[:images_dir])
end
end
Middleman::Templates.register(:blog, Middleman::Templates::Blog)

View file

@ -0,0 +1,9 @@
# Rack config
# Look for index files in folders like Apache
require "rack/contrib/try_static"
use Rack::TryStatic, :root => "build", :urls => %w[/], :try => ['.html', 'index.html', '/index.html']
# Cache static assets
require "rack/contrib/static_cache"
use Rack::StaticCache, :urls => ['/'], :root => 'build'

View file

@ -0,0 +1,18 @@
activate :blog
# set :blog_permalink, ":year/:month/:day/:title.html"
# set :blog_summary_separator, /READMORE/
# set :blog_summary_length, 500
page "/feed.xml", :layout => false
# Build-specific configuration
configure :build do
# For example, change the Compass output style for deployment
# activate :minify_css
# Minify Javascript on build
# activate :minify_javascript
# Enable cache buster
# activate :cache_buster
end

View file

@ -0,0 +1,6 @@
---
title: "New Article title"
date: 01/01/2011
---
Content of my article

View file

@ -0,0 +1,10 @@
<h1>Archive: <%# @path %></h1>
<ul class="archives">
<% for entry in data.blog.articles %>
<li>
<a href="<%= entry.url %>"><%= entry.title %></a>
<span><%= entry.date.strftime('%b %e') %></span>
</li>
<% end %>
</ul>

View file

@ -0,0 +1,23 @@
xml.instruct!
xml.feed "xmlns" => "http://www.w3.org/2005/Atom" do
xml.title "Blog Name"
xml.subtitle "Blog subtitle"
xml.id "http://blog.url.com/"
xml.link "href" => "http://blog.url.com/"
xml.link "href" => "http://blog.url.com/feed.xml", "rel" => "self"
xml.updated data.blog.articles.first.date.to_time.iso8601
xml.author { xml.name "Blog Author" }
data.blog.articles.each do |article|
xml.entry do
xml.title article.title
xml.link "rel" => "alternate", "href" => article.url
xml.id article.url
xml.published article.date.to_time.iso8601
xml.updated article.date.to_time.iso8601
xml.author { xml.name "Article Author" }
xml.summary article.summary, "type" => "html"
xml.content article.body, "type" => "html"
end
end
end

View file

@ -0,0 +1,9 @@
<% data.blog.articles[0...5].each_with_index do |article, i| %>
<article class="<%= (i == 0) ? 'first' : '' %>">
<h1><a href="<%= article.url %>"><%= article.title %></a> <span><%= article.date.strftime('%b %e %Y') %></span></h1>
<%= article.summary %>
<div class="more"><a href="<%= article.url %>">read on &raquo;</a></div>
</article>
<% end %>

View file

@ -0,0 +1,30 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=edge;chrome=1' />
</head>
<body>
<div id="main" role="main">
<% if is_blog_article? %>
<% content_for :blog_article, yield %>
<%= partial settings.blog_article_template %>
<% else %>
<%= yield %>
<% end %>
</div>
<aside>
<h2>
Recent Articles
<a href="/archives">Archive</a>
</h2>
<ol>
<% data.blog.articles[0...10].each do |article| %>
<li><a href="<%= article.url %>"><%= article.title %></a> <span><%= article.date.strftime('%b %e') %></span></li>
<% end %>
</li>
</aside>
</body>
</html>

View file

@ -1,18 +0,0 @@
require 'compass'
class Middleman::Templates::Compass < Middleman::Templates::Base
def self.source_root
# Middleman.templates_path
end
def build_scaffold
# directory options[:template].to_s, location
end
end
$stderr.puts Compass::Frameworks::ALL.map { |f| f.name }.inspect
# Dir[File.join(Middleman.templates_path, "*")].each do |dir|
# next unless File.directory?(dir)
# Middleman::Templates.register(File.basename(dir).to_sym, Middleman::Templates::Local)
# end

View file

@ -1,13 +1,15 @@
class Middleman::Templates::Default < Middleman::Templates::Base
def self.source_root
File.join(File.dirname(__FILE__), 'default')
File.dirname(__FILE__)
end
def build_scaffold
template "config.tt", File.join(location, "config.rb")
template "config.ru", File.join(location, "config.ru")
directory "source", File.join(location, "source")
template "shared/config.tt", File.join(location, "config.rb")
template "shared/config.ru", File.join(location, "config.ru")
copy_file "default/source/index.html.erb", File.join(location, "source/index.html.erb")
copy_file "default/source/layout.erb", File.join(location, "source/layout.erb")
empty_directory File.join(location, "source", options[:css_dir])
copy_file "default/source/stylesheets/site.css.scss", File.join(location, "source", options[:css_dir], "site.css.scss")
empty_directory File.join(location, "source", options[:js_dir])
empty_directory File.join(location, "source", options[:images_dir])
end

View file

@ -0,0 +1,5 @@
<% content_for :head do %>
<title>The Middleman!</title>
<% end%>
<h1>The Middleman is watching.</h1>

View file

@ -1,4 +0,0 @@
- content_for :head do
%title The Middleman!
%h1 The Middleman is watching.

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<%= stylesheet_link_tag "site.css" %>
<%= yield_content :head %>
</head>
<body class="<%= page_classes %>">
<section id="main" role="main">
<%= yield %>
</section>
</body>
</html>

View file

@ -1,21 +0,0 @@
!!! 5
%html{ :lang => "en" }
%head
%meta{ :charset => "utf-8" }
/ Always force latest IE rendering engine (even in intranet) & Chrome Frame
%meta{ :content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible" }
/ Comment in layout
= stylesheet_link_tag "site.css"
:javascript
// Comment in javascript
= yield_content :head
%body{ :class => page_classes }
#main{ :role => "main" }
= yield

View file

@ -1,34 +0,0 @@
@import "compass"
@import "susy"
$link-color: #0388a6
$link-hover-color: #009ce0
$link-focus-color: false
$link-active-color: false
$link-visited-color: false
$font-color: #2a2a2a
$font-family: 'Helvetica Neue', sans-serif
$base-font-size: 12px
$base-line-height: 18px
$total-cols: 12
$col-width: 4em
$gutter-width: 1em
$side-gutter-width: $gutter-width
+global-reset
+establish-baseline
body
font-family: $font-family
color: $font-color
a
+link-colors($link-color, $link-hover-color, $link-focus-color, $link-active-color, $link-visited-color)
#main
padding: 50px
+container
+susy-grid-background

View file

@ -0,0 +1,36 @@
@import "compass";
@import "susy";
$link-color: #0388a6;
$link-hover-color: #009ce0;
$link-focus-color: false;
$link-active-color: false;
$link-visited-color: false;
$font-color: #2a2a2a;
$font-family: sans-serif;
$base-font-size: 12px;
$base-line-height: 18px;
$total-cols: 12;
$col-width: 4em;
$gutter-width: 1em;
$side-gutter-width: $gutter-width;
@include global-reset;
@include establish-baseline;
body {
font-family: $font-family;
color: $font-color;
}
a {
@include link-colors($link-color, $link-hover-color, $link-focus-color, $link-active-color, $link-visited-color);
}
#main {
padding: 50px;
@include container;
@include susy-grid-background;
}

View file

@ -1,11 +1,14 @@
class Middleman::Templates::Html5 < Middleman::Templates::Base
class_option :css_dir, :default => "css"
class_option :js_dir, :default => "js"
def self.source_root
File.join(File.dirname(__FILE__), 'html5')
File.dirname(__FILE__)
end
def build_scaffold
template "config.tt", File.join(location, "config.rb")
directory "source", File.join(location, "source")
template "shared/config.tt", File.join(location, "config.rb")
directory "html5/source", File.join(location, "source")
empty_directory File.join(location, "source")
end
end

View file

@ -1,4 +0,0 @@
require 'rubygems'
require 'middleman'
run Middleman.server

View file

@ -1,53 +0,0 @@
# html5boilerplate uses "css"
set :css_dir, "css"
# html5boilerplate uses "js"
set :js_dir, "js"
# html5boilerplate uses "images"
set :images_dir, "images"
# Per-page layout changes
# With no layout
# page "/path/to/file.html", :layout => false
# With alternative layout
# page "/path/to/file.html", :layout => :otherlayout
# Helpers
helpers do
def some_helper(*args)
"Helping"
end
end
# CodeRay syntax highlighting in Haml
# activate :code_ray
# Automatic sitemaps (gem install middleman-slickmap)
# require "middleman-slickmap"
# activate :slickmap
# Automatic image dimension calculations in Haml
# activate :automatic_image_sizes
# Build-specific configuration
configure :build do
# For example, change the Compass output style for deployment
# activate :minify_css
# Minify Javascript on build
# activate :minify_javascript
# Enable cache buster
# activate :cache_buster
# Use relative URLs
# activate :relative_assets
# Compress PNGs after build (gem install middleman-smusher)
# require "middleman-smusher"
# activate :smusher
# Or use a different image path
# set :http_path, "/Content/images/"
end

34
lib/middleman/templates/html5/source/404.html Normal file → Executable file
View file

@ -1,22 +1,32 @@
<!doctype html>
<title>not found</title>
<title>Page Not Found</title>
<style>
body { text-align: center;}
h1 { font-size: 50px; }
body { font: 20px Constantia, 'Hoefler Text', "Adobe Caslon Pro", Baskerville, Georgia, Times, serif; color: #999; text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.5); }
h1 { font-size: 50px; text-align: center }
span[frown] { transform: rotate(90deg); display:inline-block; color: #bbb; }
body { font: 20px Constantia, "Hoefler Text", "Adobe Caslon Pro", Baskerville, Georgia, Times, serif; color: #999; text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.5); }
::-moz-selection{ background:#FF5E99; color:#fff; }
::selection { background:#FF5E99; color:#fff; }
details { display:block; }
article {display:block; text-align: left; width: 500px; margin: 0 auto; }
a { color: rgb(36, 109, 56); text-decoration:none; }
a:hover { color: rgb(96, 73, 141) ; text-shadow: 2px 2px 2px rgba(36, 109, 56, 0.5); }
span[frown] { transform: rotate(90deg); display:inline-block; color: #bbb; }
</style>
<article>
<h1>Not found <span frown>:(</span></h1>
<div>
<p>Sorry, but the page you were trying to view does not exist.</p>
<p>It looks like this was the result of either:</p>
<ul>
<li>a mistyped address</li>
<li>an out-of-date link</li>
</ul>
</div>
<details>
<summary><h1>Not found</h1></summary>
<p><span frown>:(</span></p>
</details>
<script>
var GOOG_FIXURL_LANG = (navigator.language || "").slice(0,2),
GOOG_FIXURL_SITE = location.host;
</script>
<script src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
</article>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 640 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 747 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 640 B

BIN
lib/middleman/templates/html5/source/apple-touch-icon.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 640 B

0
lib/middleman/templates/html5/source/crossdomain.xml Normal file → Executable file
View file

0
lib/middleman/templates/html5/source/css/handheld.css Normal file → Executable file
View file

74
lib/middleman/templates/html5/source/css/style.css Normal file → Executable file
View file

@ -42,7 +42,7 @@ footer, header, hgroup, menu, nav, section {
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
q:before, q:after { content: ""; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
@ -63,7 +63,7 @@ input, select { vertical-align: middle; }
* Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
*/
body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity. */
body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }
/* Normalize monospace sizing:
@ -75,31 +75,16 @@ pre, code, kbd, samp { font-family: monospace, sans-serif; }
* Minimal base styles.
*/
body, select, input, textarea {
/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
color: #444;
/* Set your base font here, to apply evenly. */
/* font-family: Georgia, serif; */
}
/* Headers (h1, h2, etc) have no default font-size or margin. Define those yourself. */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
/* Always force a scrollbar in non-IE: */
/* Always force a scrollbar in non-IE */
html { overflow-y: scroll; }
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }
ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }
/* Remove margins for navigation lists. */
/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
@ -114,13 +99,13 @@ sub { bottom: -0.25em; }
pre {
/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word;
white-space: pre; white-space: pre-wrap; word-wrap: break-word;
padding: 15px;
}
textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
.ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */
.ie6 legend, .ie7 legend { margin-left: -7px; }
/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */
input[type="radio"] { vertical-align: text-bottom; }
@ -128,13 +113,13 @@ input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
/* Hand cursor on clickable input elements. */
/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
/* Webkit browsers add a 2px margin outside the chrome of form elements. */
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }
/* Colors for form validity. */
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid {
border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
@ -142,9 +127,9 @@ input:invalid, textarea:invalid {
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
/* These selection declarations have to be separate.
/* These selection declarations have to be separate
No text-shadow: twitter.com/miketaylr/status/12228805301
Also: hot pink. */
Also: hot pink! */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
@ -159,9 +144,26 @@ button { width: auto; overflow: visible; }
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }
/**
* You might tweak these..
*/
body, select, input, textarea {
/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
color: #444;
/* Set your base font here, to apply evenly */
/* font-family: Georgia, serif; */
}
/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }
/**
* Primary styles.
* Primary styles
*
* Author:
*/
@ -185,7 +187,7 @@ button { width: auto; overflow: visible; }
* Non-semantic helper classes: please define your styles before this section.
*/
/* For image replacement. */
/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
/* Hide for both screenreaders and browsers:
@ -195,13 +197,16 @@ button { width: auto; overflow: visible; }
/* Hide only visually, but have it available for screenreaders: by Jon Neal.
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout. */
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
@ -215,12 +220,12 @@ button { width: auto; overflow: visible; }
*/
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here. */
/* Style adjustments for portrait mode goes here */
}
@media all and (orientation:landscape) {
/* Style adjustments for landscape mode goes here. */
/* Style adjustments for landscape mode goes here */
}
@ -229,8 +234,7 @@ button { width: auto; overflow: visible; }
@media screen and (max-device-width: 480px) {
/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you:
j.mp/textsizeadjust */
/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */
/* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}
@ -246,7 +250,7 @@ button { width: auto; overflow: visible; }
a, a:visited { color: #444 !important; text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links. */
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
tr, img { page-break-inside: avoid; }

0
lib/middleman/templates/html5/source/favicon.ico Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
lib/middleman/templates/html5/source/humans.txt Normal file → Executable file
View file

31
lib/middleman/templates/html5/source/index.html Normal file → Executable file
View file

@ -1,9 +1,9 @@
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
@ -30,20 +30,19 @@
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=2"> -->
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/libs/modernizr-1.6.min.js"></script>
<script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body lang="en" >
<body>
<div id="container">
<header>
</header>
<div id="main" role="main">
</div>
</div>
<footer>
</footer>
@ -52,29 +51,29 @@
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.0.js"%3E%3C/script%3E'))</script>
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
<!-- scripts concatenated and minified via ant build script-->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- end concatenated and minified scripts-->
<!-- end scripts-->
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix('img, .png_bg'); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
<script>DD_belatedPNG.fix("img, .png_bg"); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
<![endif]-->
<!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
</body>

View file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,30 +0,0 @@
/*
* Modernizr v1.6
* http://www.modernizr.com
*
* Developed by:
* - Faruk Ates http://farukat.es/
* - Paul Irish http://paulirish.com/
*
* Copyright (c) 2009-2010
* Dual-licensed under the BSD or MIT licenses.
* http://www.modernizr.com/license/
*/
window.Modernizr=function(i,e,u){function s(a,b){return(""+a).indexOf(b)!==-1}function D(a,b){for(var c in a)if(j[a[c]]!==u&&(!b||b(a[c],E)))return true}function n(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1);c=(a+" "+F.join(c+" ")+c).split(" ");return!!D(c,b)}function S(){f.input=function(a){for(var b=0,c=a.length;b<c;b++)L[a[b]]=!!(a[b]in h);return L}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "));f.inputtypes=function(a){for(var b=0,c,k=a.length;b<
k;b++){h.setAttribute("type",a[b]);if(c=h.type!=="text"){h.value=M;if(/^range$/.test(h.type)&&h.style.WebkitAppearance!==u){l.appendChild(h);c=e.defaultView;c=c.getComputedStyle&&c.getComputedStyle(h,null).WebkitAppearance!=="textfield"&&h.offsetHeight!==0;l.removeChild(h)}else/^(search|tel)$/.test(h.type)||(c=/^(url|email)$/.test(h.type)?h.checkValidity&&h.checkValidity()===false:h.value!=M)}N[a[b]]=!!c}return N}("search tel url email datetime date month week time datetime-local number range color".split(" "))}
var f={},l=e.documentElement,E=e.createElement("modernizr"),j=E.style,h=e.createElement("input"),M=":)",O=Object.prototype.toString,q=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),F="Webkit Moz O ms Khtml".split(" "),v={svg:"http://www.w3.org/2000/svg"},d={},N={},L={},P=[],w,Q=function(a){var b=document.createElement("style"),c=e.createElement("div");b.textContent=a+"{#modernizr{height:3px}}";(e.head||e.getElementsByTagName("head")[0]).appendChild(b);c.id="modernizr";l.appendChild(c);a=c.offsetHeight===
3;b.parentNode.removeChild(b);c.parentNode.removeChild(c);return!!a},o=function(){var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return function(b,c){c=c||document.createElement(a[b]||"div");b="on"+b;var k=b in c;if(!k){c.setAttribute||(c=document.createElement("div"));if(c.setAttribute&&c.removeAttribute){c.setAttribute(b,"");k=typeof c[b]=="function";if(typeof c[b]!="undefined")c[b]=u;c.removeAttribute(b)}}return k}}(),G={}.hasOwnProperty,R;R=
typeof G!=="undefined"&&typeof G.call!=="undefined"?function(a,b){return G.call(a,b)}:function(a,b){return b in a&&typeof a.constructor.prototype[b]==="undefined"};d.flexbox=function(){var a=e.createElement("div"),b=e.createElement("div");(function(k,g,r,x){g+=":";k.style.cssText=(g+q.join(r+";"+g)).slice(0,-g.length)+(x||"")})(a,"display","box","width:42px;padding:0;");b.style.cssText=q.join("box-flex:1;")+"width:10px;";a.appendChild(b);l.appendChild(a);var c=b.offsetWidth===42;a.removeChild(b);
l.removeChild(a);return c};d.canvas=function(){var a=e.createElement("canvas");return!!(a.getContext&&a.getContext("2d"))};d.canvastext=function(){return!!(f.canvas&&typeof e.createElement("canvas").getContext("2d").fillText=="function")};d.webgl=function(){var a=e.createElement("canvas");try{if(a.getContext("webgl"))return true}catch(b){}try{if(a.getContext("experimental-webgl"))return true}catch(c){}return false};d.touch=function(){return"ontouchstart"in i||Q("@media ("+q.join("touch-enabled),(")+
"modernizr)")};d.geolocation=function(){return!!navigator.geolocation};d.postmessage=function(){return!!i.postMessage};d.websqldatabase=function(){return!!i.openDatabase};d.indexedDB=function(){for(var a=-1,b=F.length;++a<b;){var c=F[a].toLowerCase();if(i[c+"_indexedDB"]||i[c+"IndexedDB"])return true}return false};d.hashchange=function(){return o("hashchange",i)&&(document.documentMode===u||document.documentMode>7)};d.history=function(){return!!(i.history&&history.pushState)};d.draganddrop=function(){return o("drag")&&
o("dragstart")&&o("dragenter")&&o("dragover")&&o("dragleave")&&o("dragend")&&o("drop")};d.websockets=function(){return"WebSocket"in i};d.rgba=function(){j.cssText="background-color:rgba(150,255,150,.5)";return s(j.backgroundColor,"rgba")};d.hsla=function(){j.cssText="background-color:hsla(120,40%,100%,.5)";return s(j.backgroundColor,"rgba")||s(j.backgroundColor,"hsla")};d.multiplebgs=function(){j.cssText="background:url(//:),url(//:),red url(//:)";return/(url\s*\(.*?){3}/.test(j.background)};d.backgroundsize=
function(){return n("backgroundSize")};d.borderimage=function(){return n("borderImage")};d.borderradius=function(){return n("borderRadius","",function(a){return s(a,"orderRadius")})};d.boxshadow=function(){return n("boxShadow")};d.textshadow=function(){return e.createElement("div").style.textShadow===""};d.opacity=function(){var a=q.join("opacity:.5;")+"";j.cssText=a;return s(j.opacity,"0.5")};d.cssanimations=function(){return n("animationName")};d.csscolumns=function(){return n("columnCount")};d.cssgradients=
function(){var a=("background-image:"+q.join("gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:")+q.join("linear-gradient(left top,#9f9, white);background-image:")).slice(0,-17);j.cssText=a;return s(j.backgroundImage,"gradient")};d.cssreflections=function(){return n("boxReflect")};d.csstransforms=function(){return!!D(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])};d.csstransforms3d=function(){var a=!!D(["perspectiveProperty","WebkitPerspective",
"MozPerspective","OPerspective","msPerspective"]);if(a)a=Q("@media ("+q.join("transform-3d),(")+"modernizr)");return a};d.csstransitions=function(){return n("transitionProperty")};d.fontface=function(){var a,b=e.head||e.getElementsByTagName("head")[0]||l,c=e.createElement("style"),k=e.implementation||{hasFeature:function(){return false}};c.type="text/css";b.insertBefore(c,b.firstChild);a=c.sheet||c.styleSheet;b=k.hasFeature("CSS2","")?function(g){if(!(a&&g))return false;var r=false;try{a.insertRule(g,
0);r=!/unknown/i.test(a.cssRules[0].cssText);a.deleteRule(a.cssRules.length-1)}catch(x){}return r}:function(g){if(!(a&&g))return false;a.cssText=g;return a.cssText.length!==0&&!/unknown/i.test(a.cssText)&&a.cssText.replace(/\r+|\n+/g,"").indexOf(g.split(" ")[0])===0};f._fontfaceready=function(g){g(f.fontface)};return b('@font-face { font-family: "font"; src: "font.ttf"; }')};d.video=function(){var a=e.createElement("video"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('video/ogg; codecs="theora"');
b.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"')||a.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');b.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return b};d.audio=function(){var a=e.createElement("audio"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('audio/ogg; codecs="vorbis"');b.mp3=a.canPlayType("audio/mpeg;");b.wav=a.canPlayType('audio/wav; codecs="1"');b.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")}return b};d.localstorage=function(){try{return"localStorage"in
i&&i.localStorage!==null}catch(a){return false}};d.sessionstorage=function(){try{return"sessionStorage"in i&&i.sessionStorage!==null}catch(a){return false}};d.webWorkers=function(){return!!i.Worker};d.applicationcache=function(){return!!i.applicationCache};d.svg=function(){return!!e.createElementNS&&!!e.createElementNS(v.svg,"svg").createSVGRect};d.inlinesvg=function(){var a=document.createElement("div");a.innerHTML="<svg/>";return(a.firstChild&&a.firstChild.namespaceURI)==v.svg};d.smil=function(){return!!e.createElementNS&&
/SVG/.test(O.call(e.createElementNS(v.svg,"animate")))};d.svgclippaths=function(){return!!e.createElementNS&&/SVG/.test(O.call(e.createElementNS(v.svg,"clipPath")))};for(var H in d)if(R(d,H)){w=H.toLowerCase();f[w]=d[H]();P.push((f[w]?"":"no-")+w)}f.input||S();f.crosswindowmessaging=f.postmessage;f.historymanagement=f.history;f.addTest=function(a,b){a=a.toLowerCase();if(!f[a]){b=!!b();l.className+=" "+(b?"":"no-")+a;f[a]=b;return f}};j.cssText="";E=h=null;i.attachEvent&&function(){var a=e.createElement("div");
a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function c(p){for(var m=-1;++m<r;)p.createElement(g[m])}function k(p,m){for(var I=p.length,t=-1,y,J=[];++t<I;){y=p[t];m=y.media||m;J.push(k(y.imports,m));J.push(y.cssText)}return J.join("")}var g="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video".split("|"),r=g.length,x=RegExp("<(/*)(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)",
"gi"),T=RegExp("\\b(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)\\b(?!.*[;}])","gi"),z=b.createDocumentFragment(),A=b.documentElement,K=A.firstChild,B=b.createElement("style"),C=b.createElement("body");B.media="all";c(b);c(z);a.attachEvent("onbeforeprint",function(){for(var p=-1;++p<r;)for(var m=b.getElementsByTagName(g[p]),I=m.length,t=-1;++t<I;)if(m[t].className.indexOf("iepp_")<0)m[t].className+=" iepp_"+
g[p];K.insertBefore(B,K.firstChild);B.styleSheet.cssText=k(b.styleSheets,"all").replace(T,".iepp_$1");z.appendChild(b.body);A.appendChild(C);C.innerHTML=z.firstChild.innerHTML.replace(x,"<$1bdo")});a.attachEvent("onafterprint",function(){C.innerHTML="";A.removeChild(C);K.removeChild(B);A.appendChild(z.firstChild)})}(this,document);f._enableHTML5=true;f._version="1.6";l.className=l.className.replace(/\bno-js\b/,"")+" js";l.className+=" "+P.join(" ");return f}(this,this.document);

File diff suppressed because one or more lines are too long

0
lib/middleman/templates/html5/source/js/mylibs/.gitignore vendored Normal file → Executable file
View file

4
lib/middleman/templates/html5/source/js/plugins.js Normal file → Executable file
View file

@ -4,9 +4,11 @@
window.log = function(){
log.history = log.history || []; // store logs to an array for reference
log.history.push(arguments);
arguments.callee = arguments.callee.caller;
if(this.console) console.log( Array.prototype.slice.call(arguments) );
};
// make it safe to use console.log always
(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();)b[a]=b[a]||c})(window.console=window.console||{});
// place any jQuery/helper plugins in here, instead of separate, slower script files.

0
lib/middleman/templates/html5/source/js/script.js Normal file → Executable file
View file

0
lib/middleman/templates/html5/source/robots.txt Normal file → Executable file
View file

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>QUnit Tests</title>
<link rel="stylesheet" href="qunit/qunit.css" media="screen">
<!-- reference your own javascript files here -->
<script src="../js/libs/modernizr-1.7.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="../js/plugins.js"></script>
<script src="../js/script.js"></script>
<!-- test runner files -->
<script src="qunit/qunit.js"></script>
<script src="tests.js"></script>
</head>
<body class="flora">
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup</div>
</body>
</html>

View file

@ -0,0 +1,148 @@
/** Font Family and Sizes */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
}
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
#qunit-tests { font-size: smaller; }
/** Resets */
#qunit-tests, #qunit-tests li ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
margin: 0;
padding: 0;
}
/** Header */
#qunit-header {
padding: 0.5em 0 0.5em 1em;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 4px 4px 1px;
background-color: #0d3349;
border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
}
#qunit-banner {
height: 5px;
}
#qunit-testrunner-toolbar {
padding: 0em 0 0.5em 2em;
}
#qunit-userAgent {
padding: 0.5em 0 0.5em 2.5em;
background-color: #2b81af;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}
/** Tests: Pass/Fail */
#qunit-tests {
list-style-position: inside;
}
#qunit-tests li {
padding: 0.4em 0.5em 0.4em 2.5em;
border-bottom: 1px solid #fff;
list-style-position: inside;
}
#qunit-tests li strong {
cursor: pointer;
}
#qunit-tests li ol {
margin-top: 0.5em;
padding: 0.5em;
background-color: #fff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: inset 0px 2px 13px #999;
-moz-box-shadow: inset 0px 2px 13px #999;
-webkit-box-shadow: inset 0px 2px 13px #999;
}
#qunit-tests li li {
margin: 0.5em;
padding: 0.4em 0.5em 0.4em 0.5em;
background-color: #fff;
border-bottom: none;
list-style-position: inside;
}
/*** Passing Styles */
#qunit-tests li li.pass {
color: #5E740B;
background-color: #fff;
border-left: 26px solid #C6E746;
}
#qunit-tests li.pass { color: #528CE0; background-color: #D2E0E6; }
#qunit-tests li.pass span.test-name { color: #366097; }
#qunit-tests li li.pass span.test-actual,
#qunit-tests li li.pass span.test-expected { color: #999999; }
strong b.pass { color: #5E740B; }
#qunit-banner.qunit-pass { background-color: #C6E746; }
/*** Failing Styles */
#qunit-tests li li.fail {
color: #710909;
background-color: #fff;
border-left: 26px solid #EE5757;
}
#qunit-tests li.fail { color: #000000; background-color: #EE5757; }
#qunit-tests li.fail span.test-name,
#qunit-tests li.fail span.module-name { color: #000000; }
#qunit-tests li li.fail span.test-actual { color: #EE5757; }
#qunit-tests li li.fail span.test-expected { color: green; }
strong b.fail { color: #710909; }
#qunit-banner.qunit-fail,
#qunit-testrunner-toolbar { background-color: #EE5757; }
/** Footer */
#qunit-testresult {
padding: 0.5em 0.5em 0.5em 2.5em;
color: #2b81af;
background-color: #D2E0E6;
border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
}
/** Fixture */
#qunit-fixture {
position: absolute;
top: -10000px;
left: -10000px;
}

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,27 @@
// documentation on writing tests here: http://docs.jquery.com/QUnit
// example tests: https://github.com/jquery/qunit/blob/master/test/same.js
// below are some general tests but feel free to delete them.
module("example tests");
test("HTML5 Boilerplate is sweet",function(){
expect(1);
equals("boilerplate".replace("boilerplate","sweet"),"sweet","Yes. HTML5 Boilerplate is, in fact, sweet");
})
// these test things from plugins.js
test("Environment is good",function(){
expect(3);
ok( !!window.log, "log function present");
var history = log.history && log.history.length || 0;
log("logging from the test suite.")
equals( log.history.length - history, 1, "log history keeps track" )
ok( !!window.Modernizr, "Modernizr global is present")
})

View file

@ -1,7 +1,20 @@
###
# Compass
###
# Susy grids in Compass
# First: gem install compass-susy-plugin
# require 'susy'
# Change Compass configuration
# compass_config do |config|
# config.output_style = :compact
# end
###
# Haml
###
# CodeRay syntax highlighting in Haml
# First: gem install haml-coderay
# require 'haml-coderay'
@ -10,23 +23,38 @@
# First: gem install coffee-filter
# require 'coffee-filter'
# Automatic sitemaps
# First: gem install middleman-slickmap
# require "middleman-slickmap"
# activate :slickmap
# Automatic image dimension calculations
# Automatic image dimensions on image_tag helper
# activate :automatic_image_sizes
# Per-page layout changes
###
# Page command
###
# Per-page layout changes:
#
# With no layout
# page "/path/to/file.html", :layout => false
#
# With alternative layout
# page "/path/to/file.html", :layout => :otherlayout
#
# A path which all have the same layout
# with_layout :admin do
# page "/admin/*"
# end
# Proxy (fake) files
# page "/this-page-has-no-template.html", :proxy => "/template-file.html" do
# @which_fake_page = "Rendering a fake page with a variable"
# end
###
# Helpers
###
# Methods defined in the helpers block are available in templates
# helpers do
# def some_helper(*args)
# def some_helper
# "Helping"
# end
# end
@ -52,11 +80,6 @@ set :images_dir, "<%= options[:images_dir] -%>"
# set :images_dir, "alternative_image_directory"
<% end -%>
# Change Compass configuration
# compass_config do |config|
# config.output_style = :compact
# end
# Build-specific configuration
configure :build do
# For example, change the Compass output style for deployment

View file

@ -1,16 +0,0 @@
class Middleman::Templates::Xhtml < Middleman::Templates::Base
def self.source_root
File.join(File.dirname(__FILE__), 'default')
end
def build_scaffold
template "config.tt", File.join(location, "config.rb")
template "config.ru", File.join(location, "config.ru")
directory "source", File.join(location, "source")
empty_directory File.join(location, "source", options[:css_dir])
empty_directory File.join(location, "source", options[:js_dir])
empty_directory File.join(location, "source", options[:images_dir])
end
end
Middleman::Templates.register(:xhtml, Middleman::Templates::Xhtml)

View file

@ -1,4 +0,0 @@
require 'rubygems'
require 'middleman'
run Middleman.server

View file

@ -1,68 +0,0 @@
# CodeRay syntax highlighting in Haml
# activate :code_ray
# Automatic sitemaps (gem install middleman-slickmap)
# require "middleman-slickmap"
# activate :slickmap
# Automatic image dimension calculations
# activate :automatic_image_sizes
# Per-page layout changes
# With no layout
# page "/path/to/file.html", :layout => false
# With alternative layout
# page "/path/to/file.html", :layout => :otherlayout
# Helpers
helpers do
def some_helper(*args)
"Helping"
end
end
<% if options[:css_dir] != "stylesheets" -%>
set :css_dir, "<%= options[:css_dir] -%>"
<% else -%>
# Change the CSS directory
# set :css_dir, "alternative_css_directory"
<% end -%>
<% if options[:js_dir] != "javascripts" -%>
set :js_dir, "<%= options[:js_dir] -%>"
<% else -%>
# Change the JS directory
# set :js_dir, "alternative_js_directory"
<% end -%>
<% if options[:images_dir] != "images" -%>
set :images_dir, "<%= options[:images_dir] -%>"
<% else -%>
# Change the images directory
# set :images_dir, "alternative_image_directory"
<% end -%>
# Build-specific configuration
configure :build do
# For example, change the Compass output style for deployment
# activate :minify_css
# Minify Javascript on build
# activate :minify_javascript
# Enable cache buster
# activate :cache_buster
# Use relative URLs
# activate :relative_assets
# Compress PNGs after build (gem install middleman-smusher)
# require "middleman-smusher"
# activate :smusher
# Generate ugly/obfuscated HTML from Haml
# activate :ugly_haml
# Or use a different image path
# set :http_path, "/Content/images/"
end

View file

@ -1,4 +0,0 @@
- content_for :head do
%title The Middleman!
%h1 The Middleman is watching.

View file

@ -1,13 +0,0 @@
!!! Strict
%html{ :xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en" }
%head
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
/ Comment in layout
= stylesheet_link_tag "site.css"
:javascript
// Comment in javascript
= yield_content :head
%body{ :class => page_classes }
#frame
= yield

View file

@ -1,34 +0,0 @@
@import "compass"
@import "susy"
$link-color: #0388a6
$link-hover-color: #009ce0
$link-focus-color: false
$link-active-color: false
$link-visited-color: false
$font-color: #2a2a2a
$font-family: 'Helvetica Neue', sans-serif
$base-font-size: 12px
$base-line-height: 18px
$total-cols: 12
$col-width: 4em
$gutter-width: 1em
$side-gutter-width: $gutter-width
+global-reset
+establish-baseline
body
font-family: $font-family
color: $font-color
a
+link-colors($link-color, $link-hover-color, $link-focus-color, $link-active-color, $link-visited-color)
#main
padding: 50px
+container
+susy-grid-background