livingstyleguide 2.0.0.alpha.11 → 2.0.0.pre.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ac71c904b754f1bf069310514347b950d2d0ab8d
-  data.tar.gz: 37b597563643b5db04e73fb181f8be5b23917ada
+  metadata.gz: 069b01a6a6d225378438c2c17c49e14469ae27f1
+  data.tar.gz: 95faddacc7cfdbe4625eb868d8ccf726c8dd57ab
 SHA512:
-  metadata.gz: bea2424d954964fd4c77f113ba255858efb06479f961089580c00617add66e69960b3b3599c53400587a6f0a0f3e4c947086ab118d6c344f88d71efb4d52c1f0
-  data.tar.gz: 6c051d0f26ef17995e7f1ebeef29ef520d937136b93976107351fda9f8e8a8f0f83d0e6a51d802a9cbfd616dd3bc8b776726f7ca0e26f9182b4f1ae1e05dfb01
+  metadata.gz: 67e0bf0b2649e53fad21d1bb8a3573767362097e21652764c41bcb806bb300849099ba5220038d326c12085df905d9000607c6c6fcd89b1a18e42c6646922c66
+  data.tar.gz: 545d8e6258e461bede322acb4bfc6907690a71ed33c44c55e7c0400a193c0199e01ae93113307a79e022f88010c16c3ead3860a6906409c1b7780cf7ad6c4476

data/lib/livingstyleguide/commands/colors.rb

@@ -16,9 +16,14 @@ LivingStyleGuide.command :colors do |arguments, options, content|
 
   colors_html = colors.map do |variable|
     if variable == "-"
-      css_class = "-lsg-empty"
+      %Q(<li class="lsg--color-swatch -lsg-empty"></li>\n)
+    else
+      unless variable =~ /^(#[0-9a-f]{3,6}|[a-z]+)$/
+        source = %Q(<span class="lsg--color-swatch-source">#{variable}</span>)
+      end
+      value = %Q(<span class="lsg--color-swatch-value #{variable}"></span>)
+      %Q(<li class="lsg--color-swatch #{variable}">#{source}#{value}</li>\n)
     end
-    %Q(<li class="lsg--color-swatch #{css_class || variable}"><span>#{variable}</span></li>\n)
   end.join("\n")
   %(<ul class="lsg--color-swatches -lsg-#{columns}-columns">\n#{colors_html}\n</ul>\n)
 end

data/lib/livingstyleguide/commands/font_example.rb

@@ -1,8 +1,8 @@
 LivingStyleGuide.default_options[:font_example] = { text: <<-TEXT }
+  Aa
   ABCDEFGHIJKLMNOPQRSTUVWXYZ
   abcdefghijklmnopqrstuvwxyz
-  0123456789
-  !&/()$=@;:,.
+  0123456789 ! ? & / ( ) € $ £ ¥ ¢ = @ ; : , .
 TEXT
 
 LivingStyleGuide.command :font_example do |arguments, options, text|

data/lib/livingstyleguide/commands/require.rb

@@ -1,4 +1,6 @@
 LivingStyleGuide.command :require do |arguments, options, block|
+  current_path = File.expand_path(document.path)
+  $LOAD_PATH << current_path unless $LOAD_PATH.include?(current_path)
   Kernel.require arguments.first
   nil
 end

data/lib/livingstyleguide/document.rb

@@ -30,6 +30,10 @@ class LivingStyleGuide::Document < ::Tilt::Template
     end
   end
 
+  def logo
+    LivingStyleGuide.template("logo.html.erb", binding)
+  end
+
   def prepare
     @type = :lsg
     @commands = LivingStyleGuide::Commands.new(self)
@@ -181,6 +185,7 @@ class LivingStyleGuide::Document < ::Tilt::Template
       end
       code_with_highlights << char
     end
+    code_with_highlights << %Q(</strong>) if inside_highlight
     code_with_highlights
   end
 
@@ -198,7 +203,7 @@ class LivingStyleGuide::Document < ::Tilt::Template
   def parse_commands
     data.gsub("<%", "<%%").gsub(/\G(.*?)((```.+?```)|\Z)/m) do
       content, code_block = $1, $2
-      content.gsub(/^@([\w\d_-]+)(?: ([^\n]*[^\{\n:]))?(?: *\{\n((?:.|\n)*?)\n\}|((?:\n+  .*)+(?=\n|\Z))| *:\n((?:.|\n)*?)(?:\n\n|\Z))?/) do
+      content.gsub!(/^@([\w\d_-]+)(?: ([^\n]*[^\{\n:]))?(?: *\{\n((?:.|\n)*?)\n\}|((?:\n+  .*)+(?=\n|\Z))| *:\n((?:.|\n)*?)(?:\n\n|\Z))?/) do
         name, arguments_string, block = $1, $2 || "", $3 || $4 || $5
         options = {
           block_type: $3 ? :braces : $4 ? :indented : $5 ? :block : :none
@@ -209,7 +214,9 @@ class LivingStyleGuide::Document < ::Tilt::Template
           block.gsub!(/\A\n(\s*)((?:.|\n)+)\Z/){ $2.gsub(/^#{$1}/, "") }
         end
         yield name, arguments, options, block
-      end + code_block
+      end
+      content.gsub!(/^\\@/, "@")
+      content + code_block
     end
   end
 

data/lib/livingstyleguide/integration/rails.rb

@@ -2,7 +2,9 @@ if defined?(Rails) and defined?(Rails::Railtie)
   require "rails"
   class LivingStyleGuideRailtie < Rails::Railtie
     initializer "living_style_guide.assets" do
-      Rails.application.assets.register_engine(".lsg", ::LivingStyleGuide::Document)
+      Rails.application.config.assets.configure do |env|
+        env.register_engine(".lsg", ::LivingStyleGuide::Document)
+      end
       LivingStyleGuide.default_options[:scss_template] = ::Sass::Rails::ScssTemplate
     end
   end

data/lib/livingstyleguide/templates/font-example.html.erb

@@ -1,3 +1,6 @@
-<div class="lsg--font-example" style="font: <%= font %>">
-  <%= text %>
+<div class="lsg--font-example">
+  <p class="lsg--font-example-text" style="font: <%= font %>">
+    <%= text %>
+  </p>
+  <pre class="lsg--code-block"><code class="lsg--code"><%= font %></code></pre>
 </div>

data/lib/livingstyleguide/templates/layout.html.erb

@@ -35,6 +35,7 @@ for(var e,l="article aside footer header nav section time picture".split(" ");e=
 <% end %>
 
 <%= footer %>
+<%= logo %>
 </body>
 
 </html>

data/lib/livingstyleguide/templates/logo.html.erb

@@ -0,0 +1,3 @@
+<a href="http://livingstyleguide.org" class="lsg--logo">
+  Made with The LivingStyleGuide Gem
+</a>

data/lib/livingstyleguide/templates/scripts/copy_colors.js.erb

@@ -3,15 +3,14 @@ document.addEventListener("DOMContentLoaded", function() {
     var colorSwatches = document.getElementsByClassName("lsg--color-swatch");
     for (var i = 0; i < colorSwatches.length; i++) {
       if (!colorSwatches[i].classList.contains("-lsg-empty")) {
-        colorSwatches[i].appendChild(createSpan());
         colorSwatches[i].addEventListener("click", function(event) {
-          if (event.altKey) {
-            var copyHexColors = window.getComputedStyle(this, ":after").getPropertyValue("content");
-            copyHexColors = copyHexColors.replace(/'/g, "");
-            selectElementRange(createDiv(copyHexColors));
+          if (event.target == this.children[0]) {
+            selectElementRange(createDiv(this.children[0].innerHTML));
           }
           else {
-            selectElementRange(this.children[0]);
+            var copyHexColors = window.getComputedStyle(this, ":after").getPropertyValue("content");
+            copyHexColors = copyHexColors.replace(/'|"/g, "");
+            selectElementRange(createDiv(copyHexColors));
           }
         });
       }
@@ -27,10 +26,3 @@ function createDiv(copyHexColors) {
   document.body.appendChild(divCopy);
   return divCopy;
 }
-
-function createSpan() {
-  var spanHover = document.createElement("span");
-  spanHover.className = "lsg--copy-color";
-  spanHover.appendChild(document.createTextNode("Click to copy variable\nAlt + click to copy HEX code"));
-  return spanHover;
-}

data/lib/livingstyleguide/tilt_template.rb

@@ -0,0 +1,103 @@
+require 'tilt'
+require 'erb'
+require 'yaml'
+require 'json'
+
+module LivingStyleGuide
+  class TiltTemplate < ::Tilt::Template
+    self.default_mime_type = 'text/html'
+
+    def prepare
+    end
+
+    def evaluate(scope, locals, &block)
+      @scope = scope
+      parse_options(data)
+      render_living_style_guide
+    end
+
+    private
+    def sass_options
+      if defined?(Compass)
+        options = Compass.configuration.to_sass_plugin_options
+      else
+        load_path = File.join(File.dirname(__FILE__), '..', '..', 'stylesheets')
+        options = { load_paths: [load_path] }
+      end
+      if defined?(Rails)
+        options[:load_paths] += Rails.application.config.assets.paths
+      end
+      if @file.nil?
+        options[:load_paths] << Dir.pwd
+      end
+      if options[:template_location]
+        options[:template_location].each do |path, short|
+          options[:load_paths] << path
+        end
+      end
+      options[:filename]  = eval_file
+      options[:line]      = line
+      options[:syntax]    = @options[:syntax]
+      options[:sprockets] = { context: @scope }
+      options[:custom]    = { sprockets_context: @scope }
+      if defined?(Sass::Rails::Resolver)
+        options[:custom][:resolver] = Sass::Rails::Resolver.new(@scope)
+      end
+      options
+    end
+
+    private
+    def parse_options(data)
+      data.strip!
+      @options = (data[0] == '{') ? JSON.parse(data) : YAML.load(data)
+      @options = {} unless @options
+      @options.keys.each do |key|
+        @options[key.gsub('-', '_').to_sym] = @options.delete(key)
+      end
+      @options[:syntax] = @options.has_key?(:styleguide_sass) ? :sass : :scss
+      @options[:source] ||= File.basename(file, '.html.lsg')
+      @options[:filename] = file
+      @options[:root] ||= root
+    end
+
+    private
+    def configure_cache
+      return unless @scope.respond_to?(:depend_on)
+      @engine.files.uniq.each do |file|
+        @scope.depend_on file
+      end
+    end
+
+    private
+    def root
+      if @scope.respond_to?(:environment) and @scope.environment.respond_to?(:root)
+        @scope.environment.root
+      else
+        find_root_path
+      end
+    end
+
+    private
+    def find_root_path
+      path = @file.nil? ? Dir.pwd : File.dirname(@file)
+      while path.length > 0 do
+        if File.exists?(File.join(path, 'Gemfile')) or File.exists?(File.join(path, '.git'))
+          break
+        end
+        path = File.expand_path('..', path)
+        if path == "/"
+          break
+        end
+      end
+      path
+    end
+
+    private
+    def render_living_style_guide
+      @engine = ::LivingStyleGuide::Engine.new(@options, sass_options)
+      html = @engine.render
+      configure_cache
+      html
+    end
+  end
+end

data/lib/livingstyleguide/version.rb

@@ -1,3 +1,3 @@
 module LivingStyleGuide
-  VERSION = "2.0.0.alpha.11"
+  VERSION = "2.0.0.pre.1"
 end

data/stylesheets/_livingstyleguide.scss

@@ -1,62 +1,95 @@
+@import "livingstyleguide/functions";
+
 //// INTEGRATION ////
 
 $lsg--layout-selector: body !default;
 
 //// TYPOGRAPHY ////
 
-$lsg--base-font: georgia, times new roman, serif !default;
+$lsg--base-font: helvetica neue, helvetica, sans-serif !default;
 $lsg--base-font-size: 14px !default;
 $lsg--base-font-weight: normal !default;
-$lsg--base-line-height: 1.4 !default;
+$lsg--base-line-height: 1.429 !default;
 $lsg--base-text-align: left !default;
-$lsg--page-title-font-size: 30px !default;
+
+$lsg--page-title-font-size: 42px !default;
+
 $lsg--headline-font: $lsg--base-font !default;
-$lsg--headline-font-size: 22px !default;
-$lsg--headline-text-align: left !default;
-$lsg--sub-headline-font-size: 16px !default;
-$lsg--sub-sub-headline-font-size: $lsg--base-font-size !default;
+$lsg--headline-font-size: 32px !default;
 $lsg--headline-font-weight: bold !default;
 $lsg--headline-line-height: 1.1 !default;
-$lsg--code-font: courier, courier new, monospace !default;
-$lsg--code-font-size: 12px !default;
+$lsg--headline-text-align: left !default;
+
+$lsg--sub-headline-font-size: 21px !default;
+
+$lsg--sub-sub-headline-font-size: $lsg--base-font-size !default;
+
+$lsg--code-font: andale mono, courier, courier new, monospace !default;
+$lsg--code-font-size: 13px !default;
 $lsg--code-font-weight: normal !default;
-$lsg--code-line-height: 1.5 !default;
+$lsg--code-line-height:
+  round($lsg--base-font-size * $lsg--base-line-height) !default;
+
+$lsg--font-example-first-line: $lsg--base-line-height * 4em;
 
 //// STYLING ////
 
-$lsg--background-color: #f7f7f7 !default;
+$lsg--background-color: white !default;
 $lsg--border-width: 1px !default;
 $lsg--border-color: silver !default;
 $lsg--border-radius: 0 !default;
-$lsg--color: #505050 !default;
-$lsg--width: 640px !default;
-$lsg--gap-width: 10px !default;
-$lsg--full-width-padding: $lsg--gap-width !default;
+$lsg--color: black !default;
+$lsg--link-color: mix($lsg--color, $lsg--background-color, 80%) !default;
+$lsg--gap-width:
+  floor($lsg--base-font-size * $lsg--base-line-height / 2) !default;
+$lsg--width: 72 * $lsg--gap-width !default;
+$lsg--full-width-padding: 0 !default;
+
+@if (lightness($lsg--background-color) < lightness($lsg--color)) {
+  $lsg--adjust-lightness:
+    16 - (lightness($lsg--color) - lightness($lsg--background-color)) / 6.25 + 4
+    !default !global;
+}
+@else {
+  $lsg--adjust-lightness:
+    4 - (lightness($lsg--background-color) - lightness($lsg--color)) / 25
+    !default !global;
+}
+
+$lsg--example-padding: $lsg--gap-width !default;
+$lsg--example-background: lsg--striped(
+  mix($lsg--color, $lsg--background-color, 4% + $lsg--adjust-lightness),
+  $lsg--background-color, $width: 12%) !default;
 
-$lsg--code-background-color: #dddddd !default;
-$lsg--code-color: #505050 !default;
+$lsg--code-color: $lsg--color !default;
+$lsg--code-background-color:
+  mix($lsg--code-color, $lsg--background-color, 4% + $lsg--adjust-lightness)
+  !default;
+$lsg--code-background: $lsg--code-background-color !default;
 $lsg--code-border-width: $lsg--border-width !default;
 $lsg--code-border-color: $lsg--border-color !default;
 $lsg--code-border-radius: $lsg--border-radius !default;
+$lsg--code-padding: $lsg--gap-width !default;
 
 $lsg--color-swatch-color: black !default;
-$lsg--color-swatch-border-width: 4px !default;
-$lsg--color-swatch-border-color: rgba(black, 0.05) !default;
+$lsg--color-swatch-border-width: 1px !default;
+$lsg--color-swatch-border-color: rgba($lsg--color, 0.05) !default;
 $lsg--color-swatch-border-radius: 50% !default;
 $lsg--color-swatches-per-line: 2 !default;
 
-$lsg--highlight-color: #f6ffa3 !default;
+$lsg--highlight-color: $lsg--code-background-color !default;
+$lsg--highlight-background-color: adjust-hue($lsg--code-color, 180) !default;
 $lsg--highlight-border-radius: 2px;
 
 //// IMAGES - SVG ////
 
-$lsg--copy-background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='100%' height='100%' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'> <path id='copy-6-icon' d='M360.277,151.999V50.001H50v310.137h102v101.861h310v-310H360.277z M90,320.138V90.001h230.277v61.998 H152v168.139H90z M421.5,421.499h-230V191.832h20.569c10.639,0,20.745,4.656,27.657,12.744l19.023,22.256H358l19.366-22.408 c6.911-7.996,16.958-12.592,27.528-12.592H421.5V421.499z M379.479,338.581h-145.99v-29h145.99V338.581z M379.479,286.249h-145.99 v-29h145.99V286.249z M233.488,361.999h146.023v29H233.488V361.999z'/></svg>");
-$lsg--code-switch-hide: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='1000' width='1000'><path d='M0 523.831q5.859 -48.825 64.449 -109.368 78.12 -80.073 175.77 -128.898 128.898 -60.543 259.749 -60.543 29.295 0 58.59 1.953l74.214 -128.898q9.765 -15.624 23.436 -17.577 3.906 0 7.812 1.953l50.778 31.248q17.577 7.812 1.953 33.201l-56.637 101.556 -46.872 78.12 -41.013 72.261 -144.522 249.984 -41.013 72.261 -46.872 80.073 -56.637 99.603q-15.624 25.389 -31.248 15.624l-52.731 -31.248q-15.624 -7.812 0 -33.201l48.825 -85.932 -7.812 -3.906q-103.509 -52.731 -175.77 -128.898 -64.449 -72.261 -64.449 -109.368zm263.655 0q0 74.214 46.872 132.804l48.825 -83.979q-9.765 -23.436 -9.765 -48.825 0 -50.778 34.178 -90.815t84.956 -49.802l48.825 -83.979l-17.577 0q-97.65 0 -166.982 65.425t-69.332 159.169zm177.723 294.903l41.013 -70.308l17.577 0q97.65 0 166.982 -65.425t69.332 -159.169q0 -74.214 -46.872 -132.804l62.496 -109.368q1.953 1.953 3.906 2.929t3.906 .977q103.509 52.731 175.77 128.898 64.449 72.261 64.449 109.368 -5.859 48.825 -64.449 109.368 -78.12 80.073 -175.77 128.898 -128.898 60.543 -259.749 60.543 -25.389 0 -58.59 -3.906zm89.838 -154.287l109.368 -189.441q9.765 25.389 9.765 48.825 0 50.778 -34.178 89.838t-84.956 50.778z' fill='#000000'/></svg>");
-$lsg--code-switch-show: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='1000' width='1000'><path d='M0 499.809q5.859 -48.825 64.449 -109.368 78.12 -80.073 175.77 -128.898 128.898 -60.543 259.749 -60.543 136.71 1.953 259.749 60.543 103.509 52.731 175.77 128.898 64.449 72.261 64.449 109.368 -5.859 48.825 -64.449 109.368 -78.12 80.073 -175.77 128.898 -128.898 60.543 -259.749 60.543 -136.71 -1.953 -259.749 -60.543 -103.509 -52.731 -175.77 -128.898 -64.449 -72.261 -64.449 -109.368zm263.655 0q0 93.744 69.332 159.169t166.982 65.425 166.982 -65.425 69.332 -159.169 -69.332 -159.169 -166.982 -65.425 -166.982 65.425 -69.332 159.169zm85.932 -.977q0 -59.567 43.943 -101.556t106.439 -41.989 106.439 41.989 43.943 101.556 -43.943 102.532 -106.439 42.966 -106.439 -42.966 -43.943 -102.532z' fill='#000000'/></svg>");
+$lsg--copy-background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='100%' height='100%' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'> <path id='copy-6-icon' d='M360.277,151.999V50.001H50v310.137h102v101.861h310v-310H360.277z M90,320.138V90.001h230.277v61.998 H152v168.139H90z M421.5,421.499h-230V191.832h20.569c10.639,0,20.745,4.656,27.657,12.744l19.023,22.256H358l19.366-22.408 c6.911-7.996,16.958-12.592,27.528-12.592H421.5V421.499z M379.479,338.581h-145.99v-29h145.99V338.581z M379.479,286.249h-145.99 v-29h145.99V286.249z M233.488,361.999h146.023v29H233.488V361.999z' fill='#{$lsg--background-color}'/></svg>");
+$lsg--code-switch-hide: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='1000' width='1000'><path d='M0 523.831q5.859 -48.825 64.449 -109.368 78.12 -80.073 175.77 -128.898 128.898 -60.543 259.749 -60.543 29.295 0 58.59 1.953l74.214 -128.898q9.765 -15.624 23.436 -17.577 3.906 0 7.812 1.953l50.778 31.248q17.577 7.812 1.953 33.201l-56.637 101.556 -46.872 78.12 -41.013 72.261 -144.522 249.984 -41.013 72.261 -46.872 80.073 -56.637 99.603q-15.624 25.389 -31.248 15.624l-52.731 -31.248q-15.624 -7.812 0 -33.201l48.825 -85.932 -7.812 -3.906q-103.509 -52.731 -175.77 -128.898 -64.449 -72.261 -64.449 -109.368zm263.655 0q0 74.214 46.872 132.804l48.825 -83.979q-9.765 -23.436 -9.765 -48.825 0 -50.778 34.178 -90.815t84.956 -49.802l48.825 -83.979l-17.577 0q-97.65 0 -166.982 65.425t-69.332 159.169zm177.723 294.903l41.013 -70.308l17.577 0q97.65 0 166.982 -65.425t69.332 -159.169q0 -74.214 -46.872 -132.804l62.496 -109.368q1.953 1.953 3.906 2.929t3.906 .977q103.509 52.731 175.77 128.898 64.449 72.261 64.449 109.368 -5.859 48.825 -64.449 109.368 -78.12 80.073 -175.77 128.898 -128.898 60.543 -259.749 60.543 -25.389 0 -58.59 -3.906zm89.838 -154.287l109.368 -189.441q9.765 25.389 9.765 48.825 0 50.778 -34.178 89.838t-84.956 50.778z' fill='#{$lsg--background-color}'/></svg>");
+$lsg--code-switch-show: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='1000' width='1000'><path d='M0 499.809q5.859 -48.825 64.449 -109.368 78.12 -80.073 175.77 -128.898 128.898 -60.543 259.749 -60.543 136.71 1.953 259.749 60.543 103.509 52.731 175.77 128.898 64.449 72.261 64.449 109.368 -5.859 48.825 -64.449 109.368 -78.12 80.073 -175.77 128.898 -128.898 60.543 -259.749 60.543 -136.71 -1.953 -259.749 -60.543 -103.509 -52.731 -175.77 -128.898 -64.449 -72.261 -64.449 -109.368zm263.655 0q0 93.744 69.332 159.169t166.982 65.425 166.982 -65.425 69.332 -159.169 -69.332 -159.169 -166.982 -65.425 -166.982 65.425 -69.332 159.169zm85.932 -.977q0 -59.567 43.943 -101.556t106.439 -41.989 106.439 41.989 43.943 101.556 -43.943 102.532 -106.439 42.966 -106.439 -42.966 -43.943 -102.532z' fill='#{$lsg--background-color}'/></svg>");
 
 //// BUTTONS ////
 
-$lsg--button-height: 23px !default;
+$lsg--button-height: 2 * $lsg--gap-width !default;
 $lsg--button-width: $lsg--button-height !default;
 
 //// IMPORTS ////
@@ -69,3 +102,4 @@ $lsg--button-width: $lsg--button-height !default;
 @import "livingstyleguide/toggle-code";
 @import "livingstyleguide/before";
 @import "livingstyleguide/variables";
+@import "livingstyleguide/search-box";

data/stylesheets/livingstyleguide/_before.scss

@@ -1,10 +0,0 @@
-.lsg--before {
-  margin-right: $lsg--width / 3;
-  margin-top: $lsg--gap-width * 2;
-
-  > *:not(script) {
-    display: inline-block;
-    float: right;
-    margin: 0 $lsg--gap-width / 2;
-  }
-}

data/stylesheets/livingstyleguide/_code.scss

@@ -1,19 +1,19 @@
 .lsg--code {
   @extend %lsg--reset;
+  font-family: $lsg--code-font;
 }
 
 .lsg--code-span,
 .lsg--code-block {
   @extend %lsg--reset;
-  background: $lsg--code-background-color;
+  background: $lsg--code-background;
   border-radius: $lsg--code-border-radius;
   color: $lsg--code-color;
   display: inline;
-  font-family: $lsg--code-font;
   font-size: $lsg--code-font-size;
   -webkit-font-smoothing: subpixel-antialiased;
+  font-style: normal;
   font-weight: $lsg--code-font-weight;
-  overflow: scroll;
   padding: 0 3px;
 
   kbd {
@@ -74,10 +74,12 @@
 .lsg--code-block {
   display: block;
   line-height: $lsg--code-line-height;
+  margin: auto;
   max-width: $lsg--width;
   min-height: $lsg--gap-width + $lsg--button-height;
   -ms-overflow-style: none;
-  padding: 3px $lsg--gap-width;
+  padding: $lsg--code-padding;
+  position: relative;
 
   &::-webkit-scrollbar {
     // scss-lint:disable ImportantRule
@@ -106,37 +108,53 @@
 }
 
 .lsg--button {
-  background-color: $lsg--background-color;
+  background-color: $lsg--color;
   background-image: $lsg--copy-background-image;
   background-position: 50%;
   background-repeat: no-repeat;
-  background-size: 90%;
-  border-radius: $lsg--border-radius;
-  bottom: floor($lsg--gap-width / 2);
+  background-size: 70%;
+  border: 0;
+  border-radius: $lsg--color-swatch-border-radius;
+  bottom: $lsg--gap-width;
   cursor: pointer;
   height: $lsg--button-height;
+  outline: 0;
   position: absolute;
-  right: floor($lsg--gap-width / 2);
+  right: $lsg--gap-width;
+  transition: transform 0.2s;
   visibility: hidden;
   width: $lsg--button-width;
 
-  .lsg--code:hover & {
-    visibility: visible;
+  &:hover {
+    background-color: mix($lsg--color, $lsg--background-color, 80%);
+  }
+
+  &:active {
+    transform: scale(0.9);
   }
-}
 
-.lsg--font-example {
-  @extend .lsg--example;
+  .lsg--code-block:hover & {
+    visibility: visible;
+  }
 }
 
 .lsg--code-highlight {
   @extend %lsg--reset;
-  background-color: $lsg--highlight-color;
+  background-color: $lsg--highlight-background-color;
   border-radius: $lsg--highlight-border-radius;
+  color: $lsg--highlight-color;
   display: inline;
   font-style: inherit;
   font-weight: inherit;
+  margin: 0 -1px;
+  padding: 0 1px;
+  text-decoration: inherit;
   vertical-align: baseline;
+
+  * {
+    // scss-lint:disable ImportantRule
+    color: inherit !important;
+  }
 }
 
 .lsg--code-highlight-block {

data/stylesheets/livingstyleguide/_color-swatches.scss

@@ -1,22 +1,34 @@
 .lsg--color-swatch {
   @extend %lsg--reset;
   color: $lsg--color-swatch-color;
+  cursor: pointer;
   float: left;
   font-family: $lsg--code-font;
   font-size: $lsg--code-font-size;
-  font-weight: bold;
   height: 4em * $lsg--base-line-height;
   line-height: 1em * $lsg--base-line-height;
   list-style: none;
   margin: 0 $lsg--gap-width $lsg--gap-width 0;
   position: relative;
   text-align: center;
-  z-index: 1;
+  transition: transform 0.2s;
+
+  &:hover {
+    z-index: 2;
+  }
 
-  &:before {
+  &:active {
+    transform: scale(0.9);
+  }
+
+  &::before {
     @extend %lsg--reset;
-    border: $lsg--color-swatch-border-width $lsg--color-swatch-border-color solid;
-    border-radius: $lsg--color-swatch-border-radius;
+    border: {
+      color: $lsg--color-swatch-border-color;
+      radius: $lsg--color-swatch-border-radius;
+      style: solid;
+      width: $lsg--color-swatch-border-width;
+    }
     content: "";
     height: 100%;
     left: 0;
@@ -26,18 +38,21 @@
     z-index: -1;
   }
 
-  &:hover:before {
+  &:hover::before {
+    background-image: $lsg--copy-background-image;
+    background-position: 50% 40%;
+    background-repeat: no-repeat;
+    background-size: 20%;
+    color: black;
     cursor: pointer;
-    color: black
   }
-  &:after {
-    cursor: pointer;
-    display: block;
-    font-weight: normal;
-    text-align: center;
+
+  &::after {
+    display: none;
   }
 
   &.-lsg-empty {
+    cursor: default;
     overflow: hidden;
     text-align: left;
     text-indent: -119988px;
@@ -49,33 +64,49 @@
   }
 }
 
-.lsg--copy-color {
-  background: $lsg--background-color;
-  border-radius: $lsg--border-radius;
-  color: $lsg--color;
+.lsg--color-swatch-source {
+  @extend %lsg--reset;
+  display: block;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.lsg--color-swatch-value {
+  @extend %lsg--reset;
   cursor: pointer;
-  font-family: $lsg--base-font;
-  font-size: 0.8em;
-  left: 0;
-  line-height: 1.2em;
-  padding: 3px 0;
-  position: absolute;
-  visibility: hidden;
-  white-space: pre-wrap;
-  width: 100%;
-  z-index: 1;
+  display: block;
+  margin-top: 1em * $lsg--base-line-height;
+  text-align: center;
 
   .lsg--color-swatch:hover & {
-    visibility: visible;
+    text-decoration: underline;
+  }
+
+  .lsg--color-swatch-source + & {
+    margin-top: 0;
+  }
+
+  .lsg--color-swatch-source:hover + & {
+    text-decoration: none;
   }
 }
 
+// scss-lint:disable VendorPrefix
 .lsg--color-swatches {
   @extend %lsg--reset;
-  margin: $lsg--gap-width auto (-$lsg--gap-width);
+  margin: (4 * $lsg--gap-width) auto (-$lsg--gap-width);
   max-width: $lsg--width + 2 * $lsg--gap-width;
-  overflow: hidden;
   padding-left: $lsg--gap-width;
+  -webkit-user-select: none;
+  user-select: none;
+
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
 }
 
 @for $i from 1 through 12 {

data/stylesheets/livingstyleguide/_content.scss

@@ -1,25 +1,35 @@
 .lsg--paragraph,
 .lsg--code-block,
 .lsg--unordered-list,
-.lsg--ordered-list {
+.lsg--ordered-list,
+.lsg--font-example {
   @extend %lsg--reset;
   color: $lsg--color;
   font-family: $lsg--base-font;
   font-size: $lsg--base-font-size;
   -webkit-font-smoothing: antialiased;
   font-weight: $lsg--base-font-weight;
-  line-height: $lsg--base-line-height;
-  margin: $lsg--gap-width auto;
+  line-height: round($lsg--base-font-size * $lsg--base-line-height);
+  margin: (2 * $lsg--gap-width) auto;
   max-width: $lsg--width;
   text-align: $lsg--base-text-align;
 }
 
+.lsg--paragraph,
+.lsg--unordered-list-item,
+.lsg--ordered-list-item {
+  > a {
+    color: $lsg--link-color;
+  }
+}
+
 .lsg--unordered-list-item,
 .lsg--ordered-list-item {
+  $margin: ceil($lsg--gap-width / 2);
   @extend %lsg--reset;
   display: list-item;
   list-style: disc;
-  margin: ceil($lsg--gap-width / 2) 0 ceil($lsg--gap-width / 2) (2 * $lsg--gap-width);
+  margin: $margin 0 $margin (2 * $lsg--gap-width);
 }
 
 .lsg--page-title,
@@ -33,8 +43,7 @@
   font-size: $lsg--headline-font-size;
   -webkit-font-smoothing: antialiased;
   font-weight: $lsg--headline-font-weight;
-  line-height: $lsg--headline-line-height;
-  margin: (3 * $lsg--gap-width) auto $lsg--gap-width;
+  margin: (8 * $lsg--gap-width) auto (2 * $lsg--gap-width);
   max-width: $lsg--width;
   text-align: $lsg--headline-text-align;
 }
@@ -43,11 +52,13 @@
   @extend %lsg--reset;
   color: inherit;
   display: inline;
-  margin-left: -1em;
+  margin-left: -1.3em;
   opacity: 0;
+  padding-right: 0.3em;
   position: absolute;
+  text-align: right;
   text-decoration: none;
-  width: 1em;
+  width: 1.3em;
 
   .lsg--headline:hover &,
   .lsg--sub-headline:hover &,
@@ -61,34 +72,43 @@
 
   &:before {
     content: "#";
+    transition: transform 0.2s;
+  }
+
+  &:active:before {
+    transform: scale(0.8);
   }
 }
 
 .lsg--page-title {
   display: block;
   font-size: $lsg--page-title-font-size;
+  line-height: round($lsg--page-title-font-size * $lsg--base-line-height);
 }
 
 .lsg--sub-headline {
   display: block;
   font-size: $lsg--sub-headline-font-size;
+  line-height: round($lsg--sub-headline-font-size * $lsg--base-line-height);
+  margin-top: 4 * $lsg--gap-width;
 }
 
 .lsg--sub-sub-headline {
   display: block;
   font-size: $lsg--sub-sub-headline-font-size;
+  line-height: round($lsg--sub-sub-headline-font-size * $lsg--base-line-height);
+  margin-top: 4 * $lsg--gap-width;
 }
 
 .lsg--example {
   @extend %lsg--reset;
-  background: white;
+  background: $lsg--example-background;
   border-top-left-radius: $lsg--border-radius;
   border-top-right-radius: $lsg--border-radius;
   display: block;
-  margin: $lsg--gap-width auto 0;
+  margin: (2 * $lsg--gap-width) auto;
   max-width: $lsg--width;
   overflow: hidden;
-  padding: $lsg--gap-width;
   position: relative;
 
   &.-lsg-has-full-width {
@@ -97,18 +117,55 @@
     display: block;
     height: auto;
     margin: 0 auto;
+    max-width: 100%;
     min-height: auto;
     padding: $lsg--full-width-padding;
     width: 100%;
+
+    .lsg--code-block {
+      z-index: 2;
+
+      &::before {
+        background-color: inherit;
+        bottom: 0;
+        content: "";
+        left: 50%;
+        position: absolute;
+        top: 0;
+        transform: translateX(-50%);
+        width: 100vw;
+        z-index: -1;
+      }
+    }
   }
 
   &.-lsg-for-javascript {
     display: none;
   }
+}
+
+hr {
+  border: 0;
+  border-top: 1px mix($lsg--color, $lsg--background-color, 10%) solid;
+  margin: (8 * $lsg--gap-width) (2 * $lsg--gap-width);
+}
+
+.lsg--html {
+  display: block;
+  padding: $lsg--example-padding;
+}
+
+.lsg--font-example {
+  @extend %lsg--reset;
+  display: block;
+}
+
+.lsg--font-example-text {
+  @extend %lsg--reset;
+  display: block;
+  margin-bottom: 2 * $lsg--gap-width;
 
-  .lsg--code-block {
-    margin-bottom: -$lsg--gap-width;
-    margin-left: -$lsg--gap-width;
-    margin-right: -$lsg--gap-width;
+  &::first-line {
+    font-size: $lsg--font-example-first-line;
   }
 }

data/stylesheets/livingstyleguide/_functions.scss

@@ -0,0 +1,8 @@
+@function lsg--striped($color-a, $color-b: transparent, $size: 4px, $width: 25%) {
+  @return linear-gradient(to top left,
+      $color-a $width,
+      $color-b 0, 50%,
+      $color-a 0, (50% + $width),
+      $color-b 0)
+    repeat 0 0/#{$size} #{$size};
+}

data/stylesheets/livingstyleguide/_layout.scss

@@ -18,22 +18,80 @@
 }
 
 .lsg--logo {
+  $logo-size: ceil($lsg--base-font-size / 3) * 9;
   @extend %lsg--reset;
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZUAAADICAYAAAAgPHymAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAFX9JREFUeNrsnTF62zgaQJlsiu1Ge4LRnCBKldLyCWx320Uut5g4PoGtE8SePYClE9gptzLd7UwT5QSjdLvVKt12u0DyMwPDBAmKIAmS732fPlsSRRIg8D8AJMFnCQDk8vbtzzP151a9Tn755e8bcgSgnGdkAYBTKPfqNVGvnXodIhYApAJQVygZiAUAqQAEEQpiAUAqAEGFglgAkApAUKEgFgCkAhBUKIgFAKkABBUKYgFAKgBBhYJYAJAKQFChIBYApAIIJahQEAsAUgGEElQoiAUAqQBCaQTEAkgFAKEgFgCkAhCfUBALjJrnZAEglEJWe/5Ob+9etg+AVAAQSnKqehqn+i9iAfCD4S9AKG6hrIz1LdSfmz3XxVAYIBUAhPJkvYgFAKkAQqkvFMQCgFQAoQQVCmIBQCqAUIIKBbEAIBVAKEGFglgAkAoglKBCQSwASAUQSlChIBYApAIIJahQEAsAUgGEElQoiAUAqQBCaWr/EAsgFQCEglgAkAoglMiEglgAqQAgFMQCgFQAocQrFMQCSAUAoSAWAKQCCCVeoSAWQCoACAWxACAVQCjxCgWxAFIBQCiIBQCpAELpRXoRCwyS52QBDEAoY0Pn073kGwA9FYCGhDKG4S96LIBUAFrsoQz5RD1iAaQC0KJQohZLA0JBLIBUAFo6hzKkmx8RCyAVgA6FEpVYWhAKYgGkAgilJfo8oSRiAaQCEJFQOhVLB0JBLIBUAKH4SEH+1gnQfXpIV4g0IxbohD+RBRC7ULQMfv31t83r168/q/fHe67nWP9er6cPQgmQ5j+r11/V7/+h1vMvSiIgFUAoVu+iD2IJJZRAaUYsgFQAoeQF1z6IJbRQEAsgFYCk+ckhYxRLU0JBLIBUAKG0MNtwTGJpWiiIBZAKIJQGg2tMYmlLKIgFkAoglAaDawxiaVsoiAWQCiCUBoNrl2LpSiiIBZAKIJQGg2sXYulaKIgFkAoglAaDa5tiiUUoiAWQCiCUBoNrG2KJTSiIBZAKIJQGg2uTYolVKIgFkAoglBYmdgwpltiFglggJpilGAYnFGuf6wpB7+8idqEETDOzGwNSAYTSsFiSkaUZscDeMPwFgxaKJsBQ2NjSzFAYIBVAKBGJZQhpRiyAVAChRCCWIaUZsQBSAYTSoViGmGbEAkgFEEoHYhlymhELIBVAKC2KZQxpRizgBZcUgykULZLfawhlpYLrac/SrC+7XdRYxdjSrC83/kmleUeNAXoqUNaS/a9qif67Rut91tTz3xsKrjqwXtZczdjS/DcllH9SWwCpgK9Yonv+e4PBNdQNkWNJcy+G+QCpAGLps1DGkmaEAkgFEEtLQhl6mhEKIBVALC0LZahpRiiAVACxdCSUoaUZoQBSAcTSsVCGkmaEAkgFEEsDwVUH1tnI0oxQYG+ekwXgiwSaOjf63UjA61NwPR1hmhEK0FMBeixNBdcxphkAqQBiaTC4jjHNAEgFRi+WJoPrGNMMgFRgtGJpI7iOMc0ASAVGJ5Y2g+sY0wyAVGA0YukiuI4xzQBIBQYvli6D6xjTDIBUYLBiiSG4jjHNAEgFBieWmILrGNMMgFRgMGKJMbiOMc0ASAV6L5aYg+sY0wyAVKC3YulDcB1jmgFMnpEF0DQhAqP87U1wHWOaA+RXqvZ3a30+VX/meemwfyPLLuRr/XlqfeZim61fLT/Xf/Vvq+wn/MGLkQY5XXCOkj+mNNetwmtdUKTQ6O8m6rVTrwf1WqnvdjnryQrsgfFxtvzWseyTAl1USLNKpV5T66tVXwq2rrAqHXUCZN1nobQeXMeY5pq8kbpgl+mpfLfy/M2PUl9Sx3ay79eO7+eZlCruJ4xVKqqiH0uFXarXB/lYy+VefZeNZa9FKBMpRPr1qmA9S+Mrva6P6ntdqe9yKoddmF+q14Va/k4tf25t470Mo+j1fOlzvgcIsr0LrmNMc8dlTDcKdf2aZj0NaXhdWg1K/f0l4R+phGwR2QFfd5N14btQn7+ylr9T32lJzNR35gnUC/U6yekmpyKn9yIDu5t9mSO6pYhonW1Db0+E8iqvl4RY+hFcx5hmGDdjfEhXNqxls3N8nhi9FpOZa9xVPvd+WqBIY508Prmr/18PRShmkE3qPfSqd8F1jGkGpAIwpCAbXXAdY5oBqQAMIchGG1zHmGZAKgB9DrLRB9cxphnGxQuyALoOsoFOZPcmuI4xzT3jQB2fS8d3U7IHqQyxcG+HFEw6vPS2zyAUQCoADYrlRv++D4GWqVei58F1H4s6dgdkD1JpMjhcdlW4EUs/xYJQYOhwoh6iE0tS70T2jQRuhAJAT6V3AfCyIIBckEP0WBAK0FMBoMeCUACQCiCW+MSCULzJmwopkc8mjt+4plyCDmH4K46WbDYb8onxsZ6M8lZ9dzW0+b+qiqWvQ2EIpRJrOVbT5NujKDR6/rwz/V59fps8nT08MSd5ld/qz6d6NmLX3HyAVIbENOeKsR8Smd7erCD6fz0dfvJt9uK8qe9XY3lQUB/FglAqH2M9G/hOpHAkH+v6cGg85+iN0Wv54OjFfk7cz0rRbEu+LxPROuFZKkjFs1AUFba83yxLtrP0XP+nRB4QllPRzlVluk7yH9JFjyVSsSCUvY9x6grqkh+rkt/rOnTpscyqZB8KyyHaKIbHCUOviD1gIxQYO38iC6BP/Prrb5vXr1/rIY7jPVdxrH+v14NQAJAKQJRiQSgASAUQSxCxIBQApAKIJYhYEAoAUgHEEkQsCAUAqQBiCSIWhAKAVACxBBELQgFAKoBYgogFoQAgFUAsQcSCUACQCiCWIGJBKABIBRBLELEgFAB/mPsLBk0AIWgZLBAKAFIBCCUWhALgCcNfMHgCDIUhFACkAtCZWBAKIBUAxIJQAJAKQDxiQSiAVMgCQCwIBQCpAMQjFoQCgFQAsQQRC0IBQCoAQcSCUACQCkAQsSAUAKQCEEQsCAUAqQAEEQtCAUAqAEHEglAAkApAELEgFACkAhBELAgFAADq8/btz1NyAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYMQ869sOv3378/+Mt8tffvn75R7ruFd/5vI2Ves4LNnOlVrm3GO9E/XnP0X757v/1j5u1XI/eaZNr+8ie69+98zjN1P15yz59ujcqfV1ql7rph6nK3n2Tr2O1Gu2z7btNFfk6/HPOXZex9zaD/37ibzdqN+/qnNcHNvQZeJ+3/zed7uO/XgjZWZifLVTrzs5bmmIuliWB6407VnXythJufzgUycqrttmr/jWNc/xqpON8f/M8zf2cttA+zJVhXPWRCLVehfqz0cJ7NOcRXSFuFHLfQz9aF1J0+8SbGcF276XoN8YqvLurGM+3yMt5j5+GGrFUGl9L0F9YaU5kff6c33MbgaY/ImINKsTkwSQiifbiKSSSKuwCaHc5AQGV9qCVSIR1L3ntnWAv23hmJst61nFtM4L1jUkodxIA8SHxUDFYtaJ2wQe8YIscPJJWiRfWyc6wEhrtqwV4+rt1EXvy3nA4DAToZjoYYtrPWwhAXVu9SImUokOA+yCLTOdV9dGMM62nfWO5lqCeUMOMkRwmZPGy+SPISefoZUPVsCcS574cGDtU1tSOWxrW5KfC+vjpc4jtQ8baSgcS55PDLF8Ut9f9WiE4txRt3U9sIdpneUyr9HiM7yHVMbRU8laJWmFwLLzkFAV9BDYPGAAeW+9PzUrhuy7Dqh30tpcGJWo1n6I0OZWRT608mulltPb/90IUDpYrZo64CJT+3j6SmU+5F6KNDLOzPItx2xj5J+uM1dqWX2MPhoNggv9WeD60BS7grKty8KlDP+ZjY+jJstl32D4y18qU5/A31AvJeNNoAAxtYNgSUvrXIJIqP2wf3+SF3Dks3NLrLOGj3vqEEWZJM1e18MA64N9Qn5pCiXnuJ1arfzjoWSEXMCxrVpOkMrIyWmtxCCV44bWsyzJi53VEqtbiUwxbKSFmxS0DpMWK7ApBN/zKvMCMQ2FI6s1f+VRf7aOXvwQWJvS5IQ9UvHuCvtWCrnM0eRLA/ujC28IsfxYItCyYDutuf2Zr3xzrspquvKme4i8q/MpbTLbQ5p3ActMbKQF+YNUwEmVYDZpqbV61FGA2FkSrVOJzLz6XHXbLfdQfVrY84H3UmwpfPL8zZcEkAo4pVIWRJu8nHhXseXcBkPu7qcOYeT1UEdzfwoAUqnPlwqt85dWizekVMxhhFBDYODm0VBfyU2f85Z6qABIZWAt1rLW+aTBwPLZ6jUdcWhaPe5FvRX7MvIN2QdIBVxsKwQX87vQ5wB+tAIdPZUGqXheZU4vBQCp+AaXbU5wf0LO8MinwLui12+O1XcxBPb1BkXjNfQWeVrWmJAr/oZ+f0odVkZ5OSc7xgF31PsF05kR3F1B3/5N8NazCmI7I4jpIbC7tjJBLu3tqiW+NgJ2W/vwYMjk63mVnEbGvEBENMq+5deWnEAq8JitIZW5Y5kmr/yyg1bWQ9F/T0cSnFYd9VTM6fR1fts3/HE+BcCC4a9yHg1lOe6ctW8mbCq4dD0ENqZWtt3reJmz2JxeCgBS2aenUtQrsT9rsrVqD3dxFVjzvZXc455zeTnnUwCQSiNSaezub2Pm4Iy+9lT6cnl00TxgsxLhAyAVyA3kqfVR3vBXm1cADWEIbGMF63kPeiq2SMzzKdvAN7sCIJWB45xYMicgNh1chjAEtrbe38Y4y2tOg2LuEExKFQH4xgu5x2Lq07rUwy9GEN3Yz8Aw5kH6fiWM5/o3kT/AZ2MEFDst0zalIsdAi+X7VWDq/XlPHoD0PVhbadBl5nf12UmEM/ya+/nSIRXOp0DnGM9JmhqxKLV70VVjsu+TLeXx5Km+pFj/c+Gxz4fSIru33pu8l0SlyR+PnPVZ/2HkrT1vqbQUFD9YAVn/v+pZHTiVvDMfVXyvCqa+bHcZkSQfjLyeOXqn9FSga6HYT6M0v7uSB4sle8bkG7WOtGiIV0SlnxB7yPCXH0UTS5qt17YCYe+HwEQaeXfmv5NeyyKSXTWFMc15aibnU6BrobwzhJLdpJwa8eidWuay5mbKJPS9vr5QFUJv7NLYwXupNEv5LmQgedbT45ZamTpx/N/KzW8yBLYyDqQeApv0aQjMEMsrKfB2/urWkX4m+nmXQ2J6GNeayWBmNSTopUDXHBll8cQYttJl9lbied78dbr3cei5jYVa3zKvASXbOcve01Pxw87IueP/Nu+otp/b0dsbIaXx8irJv9pKD4l1fSI/tfbJPOacT4FYeDAblvJ/yPJ55vj8ndm4Rip+Qc93eONzi/t0lzwebjvqeR5vpNV0kiNxLcyPNZ82WauyGv+/SZp9zAFArCzsxp3dS0Eq1TB7IS8lQ+cFy7RB3o2Quz5nspalev2UfJvV1kzLVHotXYgltfbj+/HmfArEPgqgTztUGOYqYpI8vRjg2GpkMaFkBXTwMK9Uci3TJnoIbGG0Go7ris33EvOmz3Oo9V/JeaOb5PGVbnqM+Ke2e1HWeZWYein65tHSstuk/HIeqZwHE25+u1l57tOAjfj86JlcTZbt35MT+HWk8l4q2qMCXlL47h0Z2IdnLXxKrEtL7fS23WrVrXor2B0k9Z+Rvkj8LjF/1kL6dNpOVBpvDHlOfa+bb6C3Yp+3iuF8ynuPZZaJcTFOQ/sw98i/w2TcfD1H6LFc7VsscmJtXpydOWLyuqB+TaQuXskVmtOQUtlnGGLe4wKxtTLW7rF01Wq9MwLucQCpNI51eePKQ8bnVjdbnz9qWyoPOVJJE4A48Ym1E8dyrsbSSmKNPodyZTQ+U3M9daSiN2CfmH5TMnSyLAnWfZFKNkz0MoJ0mENg08RvdoSuubAC87asxyJ34C9yZN5mTyXGIQo9pLSrUnahM3aJ3/B0iHK1NEYv5gXlYu1R1r/3YGRderTgVmKN3tfrUFJZ2+PqakMHRUEt9H0vbSJTi5gfTa3g9rmj/bKHwKY113eZN1QiY8H3HR6Czx0f/411/GPppZx3PbWN6yRwzv1HY2cT6IS5bz3OjoFTKnvE5LUc06zXfm1LkKu/qrc0zK5jW89RKcO8Cuwlh6kVvpAFMEKurDhoPw0Vqewx1JBhX/HS5RCD2YXlaZAA0FQPKBvu0qzyhoCRyv5SaesRwj4HOk2GP27+A8UPjAYddFdHst5K3jnydu9TKZjUbNWTm8jMIY+FQzZdoYfA3nkuu92jgk4b2u954nd+gkDSLeZ5ux89f3NQcRuTPZaL5X6OTcfH5mtMUjH2k1G/dZ09K8in6T4xWXonf3HtTNs3P7pO2vWlpZ060hBDwV5XkIp50lvfkDXz6GkdOKS0bwWcVQw8PL+k+6A5NxoCVRsiG4/1zjwnRj2IIJibebDr+ErApezP14lYHctcO45P8Jj83HGQi1aYJo+nVc777cYKQGnJqy9Ti7jypPMgJ1LwLQT21PlnJT3M7JktZhmoK+fvlbNs6hW5yWoSQSAZMw9WC3dRcszmllQePOvOu5L1Tq2A3tV9WW8C1ocQdf8wp15ndf2VdYVg1ZhcFqcfTbf/ImcHz0sScFjw3XnOZ6ukfw+QcqVv65gSI5ZeltcQmFweuzUqve42PxTcRXtjBfV1zf28tvZTT3N/mNfaE+GYd41vZTJNaJeV1arVM2ps8nq40gi5sVryd46yeGeVxQt9T1LBem+tYNZ6bJEZHqYlvYAuxHLiuWylmFx2GbQhta/0fe6vN3JvTGG3PfA0MJvk6fh+LFKpMgR2blXQG8nLD5LG7JLpMyu9ad37IkTOV8a+6vXrB3PpbvydfK8r7UK2P4mpAgcKTD73/Kw9pqPJmy5p7wBRcsxWyeMbUPUEn9fG6ET2WAD7mC0rlsWPRlnYGL2TCzuYNzDs5JqfS2/3pfTYzX24q1AfZp7Hvcrxj46+S2WatH8H+TZ5OudXGkNm5PRAipa9s4JEIv8XDWvsfFtDHmTjwOYkne8lSDpby3qiyYG0/OcVh5ycgarFfT6X7ZnH7CIpvsGx9JhJWbyyGkQX0mtx/Sxt6GZq3/m5spGB0yrCSqpNVdXLc4dcUlydTzmBNia8h4ZUpTz1aEWaPbRXoVqGxuOEffd3JfsL3TVasmOWhj5mMpqwrFDGTzrMCl0XTtU+n/Ttaav0VPKp2n3fOVpckz2lsLIq1a7G/m9LWoX77KOumB8qBIpL6bFcSCtqmlOBrpvohhuzEGdDJvPk6eWiqWx/n96geax2gcvetma58e0V5wW0zmb7zcTSxDGzyuJxgPXuU9dKhVJRJFXW7XP8AfpHx4/uBcoM9Jj/CzAAHk2STj6TiEcAAAAASUVORK5CYII=");
-  background-size: 100%;
+  color: transparent;
   display: block;
-  height: 100px;
-  margin: auto;
-  overflow: hidden;
-  text-align: left;
-  text-indent: -119988px;
-  width: 203px;
-
-  // scss-lint:disable VendorPrefix
+  font-size: 0;
+  height: $logo-size * 2;
+  line-height: $logo-size * 2;
+  margin: 0 auto (2 * $lsg--gap-width);
+  position: relative;
+  text-align: center;
+  width: $logo-size * 8;
+  z-index: 2;
+
   &:hover {
-    -moz-filter: unquote("brightness(0.7)");
-    -webkit-filter: unquote("brightness(0.7)");
-    filter: unquote("brightness(0.7)");
-    -webkit-transform: translateZ(0);
+    color: $lsg--color;
+  }
+
+  &::before {
+    color: transparent;
+    content: "Made with The LivingStyleGuide Gem";
+    display: block;
+    font-family: $lsg--base-font;
+    font-size: $lsg--base-font-size;
+    transform: scale(0.5);
+    transition: all 0.1s;
+    white-space: nowrap;
+  }
+
+  &:hover::before {
+    color: $lsg--color;
+    transform: scale(1);
+  }
+
+  // scss-lint:disable SpaceAfterPropertyColon
+  &::after {
+    $unit: $logo-size / 9;
+    $position-a: $unit;
+    $position-b: 5 * $unit;
+    background:
+      linear-gradient(to top, $lsg--background-color, $lsg--background-color),
+      linear-gradient(to top, $lsg--background-color, $lsg--background-color),
+      linear-gradient(to top, $lsg--background-color, $lsg--background-color),
+      linear-gradient(to top, $lsg--background-color, $lsg--background-color),
+      $lsg--color;
+    background-position:
+      $position-a $position-a,
+      $position-a $position-b,
+      $position-b $position-a,
+      $position-b $position-b;
+    background-repeat: no-repeat;
+    background-size: (3 * $unit) (3 * $unit);
+    content: "";
+    height: $logo-size;
+    left: 50%;
+    margin: $logo-size / -2;
+    position: absolute;
+    top: 50%;
+    transform: rotate(45deg);
+    transition: all 0.1s linear;
+    width: $logo-size;
+    z-index: -1;
+  }
+
+  &:hover::after {
+    $overlap: 0;
+    $position-a: -$overlap;
+    $position-b: $logo-size / 2 - $overlap;
+    $size: $logo-size / 9 * 5 + 2 * $overlap;
+    background-color: transparent;
+    background-position:
+      $position-a $position-a,
+      $position-a $position-b,
+      $position-b $position-a,
+      $position-b $position-b;
+    background-size: $size $size;
   }
 }

data/stylesheets/livingstyleguide/_reset.scss

@@ -11,7 +11,6 @@
   color: inherit;
   display: block;
   font-size: inherit;
-  -webkit-font-smoothing: antialiased;
   font-style: inherit;
   font-weight: inherit;
   line-height: inherit;

data/stylesheets/livingstyleguide/_search-box.scss

@@ -0,0 +1,35 @@
+.lsg--search-box {
+  -webkit-appearance: none;
+  background: $lsg--code-background;
+  border: 0;
+  border-radius: $lsg--border-radius;
+  color: $lsg--code-color;
+  display: block;
+  font-family: $lsg--headline-font;
+  font-size: $lsg--sub-headline-font-size;
+  line-height: inherit;
+  margin: (2 * $lsg--gap-width) auto;
+  max-width: $lsg--width;
+  outline: 0;
+  padding: $lsg--gap-width;
+  width: 100%;
+
+  $placeholder-color: mix($lsg--code-background, $lsg--code-color, 67%);
+
+  // scss-lint:disable VendorPrefix
+  &::-moz-placeholder {
+    color: $placeholder-color;
+  }
+
+  &::-webkit-input-placeholder {
+    color: $placeholder-color;
+  }
+
+  &:-ms-input-placeholder {
+    color: $placeholder-color;
+  }
+
+  &::placeholder {
+    color: $placeholder-color;
+  }
+}

data/stylesheets/livingstyleguide/_variables.scss

@@ -16,16 +16,25 @@ $lsg--variables: () !default;
 
     .#{$selector} {
       @if type-of($value) == color {
-        @if (lightness($value) < lightness($lsg--color)) {
-          color: $lsg--background-color;
+        @if (lightness($value) < 50%) {
+          @if (lightness($lsg--background-color) > lightness($lsg--color)) {
+            color: $lsg--background-color;
+          }
+          @else {
+            color: $lsg--color;
+          }
         }
-
-        &:before {
-          background: $value;
+        @else {
+          @if (lightness($lsg--background-color) > lightness($lsg--color)) {
+            color: $lsg--color;
+          }
+          @else {
+            color: $lsg--background-color;
+          }
         }
 
-        &:hover:before {
-          background: transparentize($value, 0.6);
+        &:before {
+          background-color: $value;
         }
       }
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: livingstyleguide
 version: !ruby/object:Gem::Version
-  version: 2.0.0.alpha.11
+  version: 2.0.0.pre.1
 platform: ruby
 authors:
 - Nico Hagenburger
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-10-06 00:00:00.000000000 Z
+date: 2016-03-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: minisyntax
@@ -193,7 +193,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: scss-lint
+  name: scss_lint
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -253,6 +253,7 @@ files:
 - lib/livingstyleguide/templates/font-example.html.erb
 - lib/livingstyleguide/templates/javascript.html.erb
 - lib/livingstyleguide/templates/layout.html.erb
+- lib/livingstyleguide/templates/logo.html.erb
 - lib/livingstyleguide/templates/plain.html.erb
 - lib/livingstyleguide/templates/scripts/copy.js.erb
 - lib/livingstyleguide/templates/scripts/copy_code.js.erb
@@ -261,14 +262,17 @@ files:
 - lib/livingstyleguide/templates/scripts/toggle_code.js.erb
 - lib/livingstyleguide/templates/search-box.html.erb
 - lib/livingstyleguide/templates/toggle-code.html.erb
+- lib/livingstyleguide/tilt_template.rb
 - lib/livingstyleguide/version.rb
 - stylesheets/_livingstyleguide.scss
 - stylesheets/livingstyleguide/_before.scss
 - stylesheets/livingstyleguide/_code.scss
 - stylesheets/livingstyleguide/_color-swatches.scss
 - stylesheets/livingstyleguide/_content.scss
+- stylesheets/livingstyleguide/_functions.scss
 - stylesheets/livingstyleguide/_layout.scss
 - stylesheets/livingstyleguide/_reset.scss
+- stylesheets/livingstyleguide/_search-box.scss
 - stylesheets/livingstyleguide/_toggle-code.scss
 - stylesheets/livingstyleguide/_variables.scss
 homepage: http://livingstyleguide.org
@@ -295,4 +299,3 @@ signing_key:
 specification_version: 4
 summary: Generate beautiful front-end style guides
 test_files: []
-has_rdoc: