livingstyleguide 1.0.1 → 1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f1970d04e9a56687641d4b2a67dd9df09a45a160
-  data.tar.gz: 9a17199551d504c4d15907f4d02c3e09b3f2429f
+  metadata.gz: fae7e3594785effaf052cd40fb0af960a3ce3937
+  data.tar.gz: 0b2130006b424a4476d33f617e4166fea533e7f3
 SHA512:
-  metadata.gz: 528adf1d18f8ea2752ea1a6bbdb314518072b189e77fc13ac4713799a9d0f7d4840602fcedcac87ae3610daaebfc7d389f8933dd14c469a0cc190d2894a9293e
-  data.tar.gz: 464faa2b209f7e5036163d0f1f1d45befd4ac349a0c6f7137ad9dc74e291230bee15938f002d6a200cd0cc8d796036707707d9f3e581ad6fbb436e2da9c68515
+  metadata.gz: 89d6cfdad89b7f0a2bf36ec30fd671c38e53287d45888cc679604cbd645b510ec9463858c7eb264232f56945081e124e11de22c40a633abb4e2da055181e4295
+  data.tar.gz: 54580676a907f27ead8680565b07ba70af033bc1e55d5addd961dcf0d446b9e3223eaca62bc7cc908aeaf24a78c4e5258a8aa2e83ae481cc235f660905fa1605

data/CHANGELOG.md

@@ -1,36 +1,43 @@
 # Changelog
 
-## 0.4.1
-
-* Added anchors (ids) to headlines
+## 1.0.2
 
-## 0.4.2
+* Fixed an issue where the command line interface used the input
+  filename as the output filename
+* Fixed an error causes by Compass’ `brightness()` function in 1.0.0
+  alpha versions
+* Fixed asset URL handling with Middleman and Sprockets
+* **Internal:**
+  * Integrated the website into the repository
+  * Added the
+    [changelog](http://livingstyleguide.org/changelog.html) to the website
+  * Automated website deployment after a new version of the gem is
+    released
 
-* Added `display` properties to avoid conflicts with resets
 
-## 0.5.0
-
-* Added support for Haml code in examples (`haml-example`,
-  `haml-layout-example`)
+## 1.0.1
 
-## 0.5.1
+* Fixed dependencies for broken gems
 
-* Fixed highlighting in Haml code examples
-* Use the Haml syntax highlighter
 
-## 0.5.2
+## 1.0.0
 
-* More stable CSS
+* New design and API for colors
+* [Show anchors naxt to headlines](https://github.com/hagenburger/livingstyleguide/issues/23)
+* [JSON for config files](https://github.com/hagenburger/livingstyleguide/issues/37)
+* Updated styling of the style guide
 
-## 0.6.0.alpha.0
 
-* Implemented command line interface
+## 1.0.0.alpha.3
 
-## 0.6.0.alpha.1
+* [Cache control for Sprockets](https://github.com/hagenburger/livingstyleguide/issues/25)
+* API to provide [filters in examples](https://github.com/hagenburger/livingstyleguide/issues/22)
+* Dropped `haml-example`, `layout-example`, `javascript-example` and `haml-layout-example`;
+  moved into [filters](https://github.com/hagenburger/livingstyleguide/issues/28)
+* [A set of pre-defined filters](https://github.com/hagenburger/livingstyleguide/tree/master/lib/livingstyleguide/filters)
+* [Default filters](https://github.com/hagenburger/livingstyleguide/issues/31) (e. g. all templates should use Haml)
+* [CoffeeScript examples](https://github.com/hagenburger/livingstyleguide/issues/34)
 
-* Added Rails support
-* Removed globbing
-* Set .html.lsg as default file extension
 
 ## 0.6.0.alpha.2
 
@@ -47,24 +54,42 @@
 * Custom styles can be set within YAML configuration
   ([example](https://github.com/hagenburger/livingstyleguide/blob/master/test/fixtures/standalone/styleguide-with-style.html.lsg))
 
-## 1.0.0.alpha.3
 
-* [Cache control for Sprockets](https://github.com/hagenburger/livingstyleguide/issues/25)
-* API to provide [filters in examples](https://github.com/hagenburger/livingstyleguide/issues/22)
-* Dropped `haml-example`, `layout-example`, `javascript-example` and `haml-layout-example`;
-  moved into [filters](https://github.com/hagenburger/livingstyleguide/issues/28)
-* [A set of pre-defined filters](https://github.com/hagenburger/livingstyleguide/tree/master/lib/livingstyleguide/filters)
-* [Default filters](https://github.com/hagenburger/livingstyleguide/issues/31) (e. g. all templates should use Haml)
-* [CoffeeScript examples](https://github.com/hagenburger/livingstyleguide/issues/34)
+## 0.6.0.alpha.1
 
-## 1.0.0
+* Added Rails support
+* Removed globbing
+* Set .html.lsg as default file extension
 
-* New design and API for colors
-* [Show anchors naxt to headlines](https://github.com/hagenburger/livingstyleguide/issues/23)
-* [JSON for config files](https://github.com/hagenburger/livingstyleguide/issues/37)
-* Updated styling of the style guide
 
-## 1.0.1
+## 0.6.0.alpha.0
 
-* Fixed dependencies for broken gems
+* Implemented command line interface
+
+
+## 0.5.2
+
+* More stable CSS
+
+
+## 0.5.1
+
+* Fixed highlighting in Haml code examples
+* Use the Haml syntax highlighter
+
+
+## 0.5.0
+
+* Added support for Haml code in examples (`haml-example`,
+  `haml-layout-example`)
+
+
+## 0.4.2
+
+* Added `display` properties to avoid conflicts with resets
+
+
+## 0.4.1
+
+* Added anchors (ids) to headlines
 

data/Rakefile

@@ -9,4 +9,17 @@ Rake::TestTask.new :test do |t|
   t.verbose = true
 end
 
-task :default => [:test]
+desc 'Deploys the website to livingstyleguide.org'
+task :deploy do
+  Bundler.with_clean_env do
+    system 'cd website && bundle && bundle exec middleman build'
+    system 'rsync -avz website/build/ lsg@livingstyleguide.org:/home/lsg/html/'
+  end
+end
+
+task :release do
+  Rake::Task['deploy'].execute
+end
+
+task :default => [:test]
+

data/lib/livingstyleguide/command_line_interface.rb

@@ -10,7 +10,7 @@ module LivingStyleGuide
     def compile(file)
       Compass.add_project_configuration
       html = Tilt.new(file).render
-      output_file = file.sub(/\.s[ac]ss\.lsg$/, '')
+      output_file = file.sub(/\.lsg$/, '')
       output_file.sub! /^#{Compass.configuration.sass_dir}/, Compass.configuration.css_dir
       File.write output_file, html
       puts "Successfully generated a living style guide at #{output_file}."

data/lib/livingstyleguide/sass_extensions/functions.rb

@@ -9,4 +9,11 @@ module LivingStyleGuide::SassExtensions::Functions
     Sass::Script::List.new(variables, :space)
   end
 
+  if defined?(::Middleman)
+    def asset_url(path, prefix)
+      Sass::Script::String.new(options[:sprockets][:context].asset_url(path.value, prefix.value))
+    end
+  end
+
 end
+

data/lib/livingstyleguide/tilt_template.rb

@@ -32,6 +32,7 @@ module ::Tilt
       options[:syntax]    = @options[:syntax]
       options[:importer]  = LivingStyleGuide::Importer.new('.')
       options[:sprockets] = { context: @scope }
+      options[:custom]    = { sprockets_context: @scope }
       options
     end
 

data/lib/livingstyleguide/version.rb

@@ -1,3 +1,3 @@
 module LivingStyleGuide
-  VERSION = "1.0.1"
+  VERSION = "1.0.2"
 end

data/stylesheets/livingstyleguide/_layout.scss

@@ -24,7 +24,7 @@
 
   &:hover {
     -webkit-transform: translateZ(0);
-    @include filter(brightness(0.7));
+    @include filter(unquote("brightness(0.7)"));
   }
 }
 

data/test/integration/command_line_test.rb

@@ -0,0 +1,12 @@
+require 'test_helper'
+
+describe "LivingStyleGuide::CommandLineInterface" do
+
+  it "should output the style guide" do
+    `./bin/livingstyleguide compile test/fixtures/standalone/style.html.lsg`
+    File.exists?('test/fixtures/standalone/style.html').must_equal true
+    File.delete 'test/fixtures/standalone/style.html'
+  end
+
+end
+

data/website/.gitignore

@@ -0,0 +1,22 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+#
+# If you find yourself ignoring temporary files generated by your text editor
+# or operating system, you probably want to add a global ignore instead:
+# git config --global core.excludesfile ~/.gitignore_global
+
+# Ignore bundler config
+/.bundle
+
+# Ignore the build directory
+/build
+
+# Ignore Sass’ cache
+/.sass-cache
+
+# Ignore .DS_store file
+.DS_Store
+
+# Ignore Compass’ sprites
+/source/images/graphics-*.png
+/source/fonts/
+

data/website/Gemfile

@@ -0,0 +1,13 @@
+source 'https://rubygems.org'
+
+gem 'compass', '1.0.0.alpha.19'
+gem "middleman", git: 'git@github.com:middleman/middleman.git', branch: 'v3-stable'
+gem 'middleman-livereload', '~> 3.1.0'
+gem 'wdm', '~> 0.1.0', platforms: [:mswin, :mingw]
+gem 'compass-placeholders'
+gem 'livingstyleguide', path: '..'
+
+platforms :mri_18 do
+  gem 'ruby18_source_location'
+end
+

data/website/README.md

@@ -0,0 +1,32 @@
+Website for The LivingStyleGuide Gem
+======================================
+
+The source of the [website](http://livingstyleguide.org/) of [The LivingStyleGuide Gem](https://github.com/hagenburger/livingstyleguide).
+
+
+Setup
+-----
+
+    git clone git@github.com:hagenburger/livingstyleguide-website.git
+    cd livingstyleguide-website
+    bundle
+
+
+Development
+-----------
+
+    cd livingstyleguide-website
+    middleman
+    open http://localhost:4567/
+
+Now you can open the style guide at <http://localhost:4567/>.
+
+
+Credits
+-------
+
+Designed and developed by:
+[Nico Hagenburger](https://github.com/hagenburger)
+[hagenburger.net](http://hagenburger.net)
+@[hagenburger](https://twitter.com/hagenburger)
+

data/website/config.rb

@@ -0,0 +1,37 @@
+require 'compass-placeholders'
+
+activate :livereload
+
+page '/', layout: false
+page '/changelog.html', layout: :markdown
+
+set :css_dir, 'style'
+set :js_dir, 'javascripts'
+set :images_dir, 'images'
+
+set :haml, { attr_wrapper: '"', format: :html5 }
+
+configure :build do
+  activate :minify_css
+  activate :minify_javascript
+  activate :asset_hash
+  activate :relative_assets
+end
+
+require 'fileutils'
+Dir.glob 'source/images/graphics/*@2x.png' do |file|
+  new_file = file.sub('graphics', 'graphics-2x').sub('@2x', '')
+  FileUtils.mv  file, new_file
+end
+
+helpers do
+  def livingstyleguide_gem_version
+    # Prefer `git tag` over version.rb as tags are released:
+    versions = `git tag`.split(/\n/)
+    current  = versions.last
+    current.sub(/^v/, '')
+  rescue
+    '0.0.0'
+  end
+end
+

data/website/source/.htaccess

@@ -0,0 +1,144 @@
+# Use UTF-8 encoding for anything served as `text/html` or `text/plain`.
+
+AddDefaultCharset utf-8
+
+
+# Set default domain
+
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteCond %{HTTP_HOST} !=localhost [NC]
+  RewriteCond %{HTTP_HOST} !=127.0.0.1
+  RewriteCond %{HTTP_HOST} !^livingstyleguide\.org$ [NC]
+  RewriteRule ^(.*)$ http://livingstyleguide.org/$1 [R=301,L]
+</IfModule>
+
+
+# Force UTF-8 for certain file formats.
+
+<IfModule mod_mime.c>
+  AddCharset utf-8 .atom .css .js .json .rss .vtt .webapp .xml
+</IfModule>
+
+
+# Block access to directories without a default document.
+
+<IfModule mod_autoindex.c>
+  Options -Indexes
+</IfModule>
+
+
+# Block access to hidden files and directories.
+
+<IfModule mod_rewrite.c>
+  RewriteCond %{SCRIPT_FILENAME} -d [OR]
+  RewriteCond %{SCRIPT_FILENAME} -f
+  RewriteRule "(^|/)\." - [F]
+</IfModule>
+
+
+# Compression
+
+<IfModule mod_deflate.c>
+
+  # Force compression for mangled headers.
+  # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping
+
+  <IfModule mod_setenvif.c>
+    <IfModule mod_headers.c>
+      SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
+      RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
+    </IfModule>
+  </IfModule>
+
+
+  # Compress all output labeled with one of the following MIME-types
+  # (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
+  #  and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
+  #  as `AddOutputFilterByType` is still in the core directives).
+
+  <IfModule mod_filter.c>
+    AddOutputFilterByType DEFLATE application/atom+xml \
+                                  application/javascript \
+                                  application/json \
+                                  application/rss+xml \
+                                  application/vnd.ms-fontobject \
+                                  application/x-font-ttf \
+                                  application/x-web-app-manifest+json \
+                                  application/xhtml+xml \
+                                  application/xml \
+                                  font/opentype \
+                                  image/svg+xml \
+                                  image/x-icon \
+                                  text/css \
+                                  text/html \
+                                  text/plain \
+                                  text/x-component \
+                                  text/xml
+  </IfModule>
+
+</IfModule>
+
+
+# ETag removal (for expires)
+
+<IfModule mod_headers.c>
+  Header unset ETag
+</IfModule>
+
+FileETag None
+
+
+# Expires headers (for better cache control)
+
+<IfModule mod_expires.c>
+
+  ExpiresActive on
+  ExpiresDefault                                      "access plus 1 month"
+
+  # CSS
+  ExpiresByType text/css                              "access plus 1 year"
+
+  # Data interchange
+  ExpiresByType application/json                      "access plus 0 seconds"
+  ExpiresByType application/xml                       "access plus 0 seconds"
+  ExpiresByType text/xml                              "access plus 0 seconds"
+
+  # Favicon (cannot be renamed!)
+  ExpiresByType image/x-icon                          "access plus 1 week"
+
+  # HTML components (HTCs)
+  ExpiresByType text/x-component                      "access plus 1 month"
+
+  # HTML
+  ExpiresByType text/html                             "access plus 10 minutes"
+
+  # JavaScript
+  ExpiresByType application/javascript                "access plus 1 year"
+
+  # Manifest files
+  ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
+  ExpiresByType text/cache-manifest                   "access plus 0 seconds"
+
+  # Media
+  ExpiresByType audio/ogg                             "access plus 1 month"
+  ExpiresByType image/gif                             "access plus 1 month"
+  ExpiresByType image/jpeg                            "access plus 1 month"
+  ExpiresByType image/png                             "access plus 1 month"
+  ExpiresByType video/mp4                             "access plus 1 month"
+  ExpiresByType video/ogg                             "access plus 1 month"
+  ExpiresByType video/webm                            "access plus 1 month"
+
+  # Web feeds
+  ExpiresByType application/atom+xml                  "access plus 1 hour"
+  ExpiresByType application/rss+xml                   "access plus 1 hour"
+
+  # Web fonts
+  ExpiresByType application/font-woff                 "access plus 1 month"
+  ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
+  ExpiresByType application/x-font-ttf                "access plus 1 month"
+  ExpiresByType font/opentype                         "access plus 1 month"
+  ExpiresByType image/svg+xml                         "access plus 1 month"
+
+</IfModule>
+

data/website/source/changelog.html.md

@@ -0,0 +1,95 @@
+# Changelog
+
+## 1.0.2
+
+* Fixed an issue where the command line interface used the input
+  filename as the output filename
+* Fixed an error causes by Compass’ `brightness()` function in 1.0.0
+  alpha versions
+* Fixed asset URL handling with Middleman and Sprockets
+* **Internal:**
+  * Integrated the website into the repository
+  * Added the
+    [changelog](http://livingstyleguide.org/changelog.html) to the website
+  * Automated website deployment after a new version of the gem is
+    released
+
+
+## 1.0.1
+
+* Fixed dependencies for broken gems
+
+
+## 1.0.0
+
+* New design and API for colors
+* [Show anchors naxt to headlines](https://github.com/hagenburger/livingstyleguide/issues/23)
+* [JSON for config files](https://github.com/hagenburger/livingstyleguide/issues/37)
+* Updated styling of the style guide
+
+
+## 1.0.0.alpha.3
+
+* [Cache control for Sprockets](https://github.com/hagenburger/livingstyleguide/issues/25)
+* API to provide [filters in examples](https://github.com/hagenburger/livingstyleguide/issues/22)
+* Dropped `haml-example`, `layout-example`, `javascript-example` and `haml-layout-example`;
+  moved into [filters](https://github.com/hagenburger/livingstyleguide/issues/28)
+* [A set of pre-defined filters](https://github.com/hagenburger/livingstyleguide/tree/master/lib/livingstyleguide/filters)
+* [Default filters](https://github.com/hagenburger/livingstyleguide/issues/31) (e. g. all templates should use Haml)
+* [CoffeeScript examples](https://github.com/hagenburger/livingstyleguide/issues/34)
+
+
+## 0.6.0.alpha.2
+
+* Better support for load paths in Rails
+* Fix for colors
+* New YAML based configuration
+  ([see this gist](https://gist.github.com/hagenburger/7945859#file-styleguide-1-html-lsg))
+* Option to set the HTML title
+* Custom footer and header HTML
+  ([example](https://github.com/hagenburger/livingstyleguide/blob/master/test/fixtures/standalone/styleguide-with-header-footer.html.lsg))
+* Linking of JavaScript files (like jQuery, application.js, …) into the
+  style guide
+  ([example](https://github.com/hagenburger/livingstyleguide/blob/master/test/fixtures/standalone/styleguide-with-javascript.html.lsg))
+* Custom styles can be set within YAML configuration
+  ([example](https://github.com/hagenburger/livingstyleguide/blob/master/test/fixtures/standalone/styleguide-with-style.html.lsg))
+
+
+## 0.6.0.alpha.1
+
+* Added Rails support
+* Removed globbing
+* Set .html.lsg as default file extension
+
+
+## 0.6.0.alpha.0
+
+* Implemented command line interface
+
+
+## 0.5.2
+
+* More stable CSS
+
+
+## 0.5.1
+
+* Fixed highlighting in Haml code examples
+* Use the Haml syntax highlighter
+
+
+## 0.5.0
+
+* Added support for Haml code in examples (`haml-example`,
+  `haml-layout-example`)
+
+
+## 0.4.2
+
+* Added `display` properties to avoid conflicts with resets
+
+
+## 0.4.1
+
+* Added anchors (ids) to headlines
+

data/website/source/index.html.haml

@@ -0,0 +1,49 @@
+---
+title: LivingStyleGuide Gem—easily create front-end style guides
+layout: false
+---
+
+!!!html5
+%html
+  %head
+    %meta(charset="utf-8")
+    %meta(http-equiv="X-UA-Compatible" content="IE=edge")
+    %meta(name="description" content="The LivingStyleGuide is a Ruby Gem to easily create front-end style guides with markdown while working with Sass/SCSS and Compass.")
+    %meta(name="viewport" content="width=device-width, initial-scale=1")
+    %meta(name="author" content="Nico Hagenburger")
+    %title= data.page.title
+    %link(href="#{asset_path(:css, 'styles')}" rel="stylesheet")
+    %script(src="//use.typekit.net/nbn2flh.js")
+    %script try{Typekit.load();}catch(e){}
+  %body.layout
+    %header.header
+      .header--logo
+        %h2.header--slogan The easiest way to create front-end style guides with Sass and Compass
+      %span.header--version
+        = livingstyleguide_gem_version
+    %code.installation
+      gem install livingstyleguide
+    .links
+      %a.links--item.-rubygems-org(href="https://rubygems.org/gems/livingstyleguide") RubyGems.org
+      %a.links--item.-github(href="https://github.com/hagenburger/livingstyleguide") Fork me on Github
+      %a.links--item.-issues(href="https://github.com/hagenburger/livingstyleguide/issues") Open issues
+      %a.links--item.-twitter(href="https://twitter.com/hagenburger") Follow for Updates
+      %a.links--item.-example-project(href="https://github.com/hagenburger/livingstyleguide-example") Example Projects
+    %footer.footer
+      %a.footer--made-in-berlin(href="http://www.hagenburger.net/BLOG/Made-in-Berlin.html") Made in Berlin
+      %a.footer--made-by-hagenburger(href="http://www.hagenburger.net") Nico Hagenburger
+      %a.footer--contact(href="http://www.hagenburger.net/CONTACT.html") Contact
+    %script
+      :plain
+        var _paq = _paq || [];
+        _paq.push(["trackPageView"]);
+        _paq.push(["enableLinkTracking"]);
+
+        (function() {
+          var u=(("https:" == document.location.protocol) ? "https" : "http") + "://nh.fornax.uberspace.de/piwik/";
+          _paq.push(["setTrackerUrl", u+"piwik.php"]);
+          _paq.push(["setSiteId", "2"]);
+          var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
+          g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
+        })();
+

data/website/source/layouts/markdown.html.haml

@@ -0,0 +1,40 @@
+!!!html5
+%html
+  %head
+    %meta(charset="utf-8")
+    %meta(http-equiv="X-UA-Compatible" content="IE=edge")
+    %meta(name="description" content="The LivingStyleGuide is a Ruby Gem to easily create front-end style guides with markdown while working with Sass/SCSS and Compass.")
+    %meta(name="viewport" content="width=device-width, initial-scale=1")
+    %meta(name="author" content="Nico Hagenburger")
+    %title= data.page.title
+    %link(href="#{asset_path(:css, 'styles')}" rel="stylesheet")
+    %script(src="//use.typekit.net/nbn2flh.js")
+    %script try{Typekit.load();}catch(e){}
+  %body.layout
+    %header.header
+      .header--logo
+        %h2.header--slogan The easiest way to create front-end style guides with Sass and Compass
+      %span.header--version
+        = livingstyleguide_gem_version
+    .layout--container
+      %article.markdown
+        = yield
+    %footer.footer
+      %a.footer--made-in-berlin(href="http://www.hagenburger.net/BLOG/Made-in-Berlin.html") Made in Berlin
+      %a.footer--made-by-hagenburger(href="http://www.hagenburger.net") Nico Hagenburger
+      %a.footer--contact(href="http://www.hagenburger.net/CONTACT.html") Contact
+    %script
+      :plain
+        var _paq = _paq || [];
+        _paq.push(["trackPageView"]);
+        _paq.push(["enableLinkTracking"]);
+
+        (function() {
+          var u=(("https:" == document.location.protocol) ? "https" : "http") + "://nh.fornax.uberspace.de/piwik/";
+          _paq.push(["setTrackerUrl", u+"piwik.php"]);
+          _paq.push(["setSiteId", "2"]);
+          var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
+          g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
+        })();
+
+

data/website/source/style/components/_markdown.md

@@ -0,0 +1,23 @@
+Markdown
+========
+
+
+```
+@haml
+***.markdown***
+  :markdown
+    # Big Headline
+
+    ## Medium Headline
+
+    Lorem ipsum dolor **sit amet,** consectetur adipiscing elit.
+    Aenean porta, `nunc at pulvinar porta`, erat lorem congue magna,
+    sit amet egestas ante erat in neque. _Suspendisse_ vitae sapien
+    et ante feugiat [posuere vitae](#) sit amet urna. Suspendisse
+    vestibulum elit nulla, id venenatis enim ultricies quis.
+
+    * List item
+    * Another list item
+    * Last list item
+```
+

data/website/source/style/components/_markdown.sass

@@ -0,0 +1,52 @@
+.markdown
+  @extend %text-align-left
+
+  h1
+    color: $turquoise
+    font-size: 3em
+    margin: 0 0 0.5em
+
+  h2
+    color: $pink
+    font-size: 2em
+    margin: 0 0 0.5em
+
+  p
+    margin: 0 0 0.75em
+
+  a
+    color: darken($turquoise, 20%)
+    display: inline
+
+    &:hover
+      color: darken($turquoise, 30%)
+
+  strong
+    @extend %display-inline
+    @extend %font-weight-bold
+
+  em
+    @extend %display-inline
+    @extend %font-style-italic
+
+  ul
+    margin: 0 0 0.75em
+
+    li
+      margin-left: 3em
+
+      &:before
+        background: $yellow
+        content: ""
+        height: 6px
+        margin: 0.35em 0 0 -0.9em
+        position: absolute
+        width: 6px
+        @include transform(rotateZ(45deg))
+
+  code
+    background: $yellow
+    display: inline
+    font-family: "courier new", courier, monospace
+
+

data/website/source/style/styles.sass

@@ -0,0 +1,286 @@
+@import "compass"
+@import "compass-placeholders"
+
+//// FONTS ////
+
+@include font-face("Gubia", font-files("GubiaLight.otf"), $weight: 200)
+@include font-face("Gubia", font-files("GubiaRegular.otf"), $weight: normal)
+@include font-face("Gubia", font-files("GubiaBold.otf"), $weight: bold)
+@include font-face("Gubia", font-files("GubiaBlack.otf"), $weight: 800)
+
+//// METRICS ////
+
+$grid: 4px
+$column-width: 45 * $grid
+$gap-width: 3 * $grid
+
+
+//// COLORS ////
+
+$white: white
+$black: black
+$gray: #7f7f7f
+$pink: #CA1F70
+$light-pink: #FFABC2
+$yellow: #FAFF8C
+$turquoise: #2EF1BD
+
+//// SPRITES ////
+
+$graphics-spacing: 5 * $grid
+@import "graphics/*.png"
+
+$graphics-2x-spacing: 10 * $grid
+@import "graphics-2x/*.png"
+
+.graphics-sprite
+  background-size: graphics-sprite-width(livingstyleguide)
+
+
+//// MIXINS ////
+
+@mixin for-phones
+  @media all and (max-width: 640px)
+    @content
+
+@mixin for-phones-portrait
+  @media all and (max-width: 480px)
+    @content
+
+@mixin for-phones-landscape
+  @media all and (min-width: 481px) and (max-width: 640px)
+    @content
+
+@mixin for-tablets
+  @media all and (min-width: 641px) and (max-width: 1024px)
+    @content
+
+@mixin for-tablets-portrait
+  @media all and (min-width: 641px) and (max-width: 768px)
+    @content
+
+@mixin for-tablets-landscape
+  @media all and (min-width: 769px) and (max-width: 1024px)
+    @content
+
+@mixin for-tablets-landscape-and-desktops
+  @media all and (min-width: 1024px)
+    @content
+
+@mixin for-desktops
+  @media all and (min-width: 1025px)
+    @content
+
+@mixin for-hires
+  @media only all and (-webkit-min-device-pixel-ratio: 1.3), only all and (min--moz-device-pixel-ratio: 1.3), only all and (-o-min-device-pixel-ratio: 1.3/1), only all and (min-device-pixel-ratio: 1.3), only all and (min-resolution: 1.3dppx)
+    @content
+
+
+//// RESET EVERYTHING ////
+
+*
+  border: none
+  border-collapse: collapse
+  border-spacing: 0
+  color: inherit
+  display: block
+  font-size: inherit
+  font-style: inherit
+  font-weight: inherit
+  line-height: inherit
+  list-style: none
+  margin: 0
+  padding: 0
+  text-align: inherit
+  text-decoration: none
+  vertical-align: middle
+  @include box-sizing(border-box)
+
+
+head,
+script,
+style
+  display: none
+
+
+//// LAYOUT ////
+
+.layout
+  background: $white
+  color: $black
+  font-family: Gubia, "helvetica neue", helvetica, arial, sans-serif
+  font-size: 4 * $grid
+  line-height: 1.25
+  margin: 0 auto (5 * $grid)
+  text-align: center
+  -webkit-font-smoothing: antialiased
+  @include for-tablets-landscape-and-desktops
+    width: 5 * ($column-width + $gap-width)
+  @include for-tablets
+    margin-top: 20 * $grid
+  @include for-phones-landscape
+    margin-top: 28 * $grid
+  @include for-phones-portrait
+    margin-top: 34 * $grid
+
+
+//// HEADER ////
+
+.header--logo
+  display: block
+  margin-left: -32px
+  position: relative
+  @include graphics-sprite(livingstyleguide, $dimensions: true)
+
+
+.header--version
+  color: $gray
+  display: none
+  font-size: 1.5rem
+  font-weight: bold
+  position: absolute
+  right: -1em
+  top: 0
+  @include for-phones
+    right: 0
+    top: -1em
+
+
+.header--slogan
+  color: $light-pink
+  font-weight: bold
+  padding-top: 220px
+  margin: auto
+  width: 300px
+
+
+//// INSTALLATION ////
+
+.installation
+  color: $turquoise
+  font-family: "courier new", courier, monospace
+  font-size: 1.5rem
+  left: 550px
+  margin: 2em 0
+  position: absolute
+  text-align: left
+  top: 250px
+
+  &:before
+    color: mix($turquoise, $white, 30%)
+    content: ">"
+    margin: 1px 0 0 -1em
+    position: absolute
+
+
+//// LINKS ////
+
+.links
+  @extend %pie-clearfix
+
+
+.links--item
+  background: $yellow
+  color: $black
+  font-size: 24px
+  font-weight: bold
+  margin: floor($gap-width / 2)
+  text-align: left
+  padding: (5 * $grid) 0
+  position: relative
+  @include transition(all 0, background 0.2s)
+  @include for-tablets-landscape-and-desktops
+    background: transparent
+    float: left
+    height: $column-width
+    text-align: center
+    width: $column-width
+
+    &:hover
+      z-index: 5
+
+    &:after
+      background: $yellow
+      bottom: 0
+      content: ""
+      left: 0
+      position: absolute
+      right: 0
+      top: 0
+      z-index: -1
+      @include transform(rotateZ(45deg))
+      @include transition(transform, 0.15s)
+
+    &:hover:after
+      background: $turquoise
+      @include transform(rotateZ(-315deg))
+
+  &:before
+    content: ""
+    display: inline-block
+    margin-right: 3 * $grid
+    vertical-align: middle
+    z-index: 10
+    @include graphics-sprite(rubygems, $dimensions: true)
+    @include transition(transform, 0.15s)
+    @include for-hires
+      background-image: $graphics-2x-sprites
+    @include for-tablets-landscape-and-desktops
+      display: block
+      margin: 0 auto (5 * $grid)
+
+  &:hover:before
+    @include transform(rotateZ(360deg))
+
+  @each $name in github, issues, twitter, example-project
+    &.-#{$name}:before
+      @include graphics-sprite-position($name)
+
+
+
+
+//// FOOTER ////
+
+.footer
+  margin: (16 * $grid) 0
+
+
+.footer--made-in-berlin
+  display: inline-block
+  margin: 0 45px
+  opacity: 0.7
+  vertical-align: bottom
+  @include graphics-sprite(made-in-berlin, $dimensions: true)
+  @include transition(opacity, 0.2s)
+  @include hide-text
+  @include for-hires
+    background-image: $graphics-2x-sprites
+
+  &:hover
+    opacity: 1
+
+
+.footer--made-by-hagenburger
+  @extend .footer--made-in-berlin
+  @include graphics-sprite(hagenburger, $dimensions: true)
+
+
+.footer--contact
+  color: $gray
+  display: block
+  font-weight: normal
+  font-size: 1rem
+  letter-spacing: 1px
+  margin: (5 * $grid) auto 0
+  text-transform: uppercase
+  width: 10em
+  @include transition(color, 0.2s)
+
+  &:hover
+    color: $turquoise
+
+
+//// COMPONENTS ////
+
+@import "components/markdown"
+

data/website/source/styleguide.html.lsg

@@ -0,0 +1,11 @@
+source: style/styles.sass
+title: "The LivingStyleGuide’s Front-end Style Guide"
+style:
+  layout-selector: '".layout"'
+  color: $pink
+  base-font: 'Courier, "Courier New", monospace'
+  headline-font: 'Gubia, "Helvetica Neue", Helvetica, Arial'
+styleguide-sass: |
+  .livingstyleguide--example
+    @extend .layout
+

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: livingstyleguide
 version: !ruby/object:Gem::Version
-  version: 1.0.1
+  version: 1.0.2
 platform: ruby
 authors:
 - Nico Hagenburger
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-03-12 00:00:00.000000000 Z
+date: 2014-03-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: minisyntax
@@ -258,6 +258,7 @@ files:
 - test/fixtures/stylesheets/variables/_more-other-colors.sass
 - test/fixtures/stylesheets/variables/colors.scss
 - test/fixtures/stylesheets/variables/other-colors.sass
+- test/integration/command_line_test.rb
 - test/integration/markdown_test.rb
 - test/integration/sprockets_test.rb
 - test/integration/standalone_test.rb
@@ -275,6 +276,35 @@ files:
 - test/unit/filters/highlights_test.rb
 - test/unit/filters/javascript_test.rb
 - test/unit/sass_extensions_test.rb
+- website/.gitignore
+- website/Gemfile
+- website/Gemfile.lock
+- website/README.md
+- website/config.rb
+- website/source/.htaccess
+- website/source/changelog.html.md
+- website/source/images/graphics-2x/example-project.png
+- website/source/images/graphics-2x/github.png
+- website/source/images/graphics-2x/hagenburger.png
+- website/source/images/graphics-2x/issues.png
+- website/source/images/graphics-2x/livingstyleguide.png
+- website/source/images/graphics-2x/made-in-berlin.png
+- website/source/images/graphics-2x/rubygems.png
+- website/source/images/graphics-2x/twitter.png
+- website/source/images/graphics/example-project.png
+- website/source/images/graphics/github.png
+- website/source/images/graphics/hagenburger.png
+- website/source/images/graphics/issues.png
+- website/source/images/graphics/livingstyleguide.png
+- website/source/images/graphics/made-in-berlin.png
+- website/source/images/graphics/rubygems.png
+- website/source/images/graphics/twitter.png
+- website/source/index.html.haml
+- website/source/layouts/markdown.html.haml
+- website/source/style/components/_markdown.md
+- website/source/style/components/_markdown.sass
+- website/source/style/styles.sass
+- website/source/styleguide.html.lsg
 homepage: ''
 licenses: []
 metadata: {}
@@ -327,6 +357,7 @@ test_files:
 - test/fixtures/stylesheets/variables/_more-other-colors.sass
 - test/fixtures/stylesheets/variables/colors.scss
 - test/fixtures/stylesheets/variables/other-colors.sass
+- test/integration/command_line_test.rb
 - test/integration/markdown_test.rb
 - test/integration/sprockets_test.rb
 - test/integration/standalone_test.rb